top of page

Web Application Project using HTML, CSS, Ajax and Node.js

Updated: Mar 23, 2021

Project Summary


Description:


The web application project is to design and develop a task roster system

for shared spaces that allows managers to set tasks, notifies users of their tasks, and allows users to mark tasks as complete.


1. Upon loading the system should display

  • Current tasks that need to be done today

  • The user who is assigned that task

2. Users should be able to sign up and log in so they can

  • View their scheduled tasks

  • Manage their profile/user information

  • Manage their availability

  • Manage the types of tasks they can/want to do.

3. Managers should be able to sign up and log in to:

  • Manage their profile/manager information

  • Create and manage different tasks.

  • Group tasks.

  • Assign tasks or groups of tasks to users.

4. Users/managers should be able to choose to link a social media/email/other account, allowing login via that platform, to make logging in easier.


Phases of Development for the Project:


1. Site Design: First of all, we have to make a design to get the basic structure for our project. Then we have to start working on the flow for our project. Now, we are going to use HTML and CSS to design our page look.



2. Data Plan: For each of the features in the website, we have to create a data plan that lists the different pieces of content/information that your web application will be dealing with & determine where it should be stored, what format, and where it should be processed.

  • Where does the information come from?

  • What form should it take?

  • If the information is on the server, what will the client need to send to retrieve that data?

  • If the information is on the client, how will it be sent to the server?

  • Does all information need to be stored on the server?

  • What processing needs to be done to make the data useful?


3. Client-side Implementation: We are going to use node.js and set up an express server and migrate the website to it.

Now we are ready to start handling data on the server.

  • Using a combination of GET/POST methods and AJAX, we have to modify our website and server to implement the calls needed to handle the content/information for each of our features as identified in our data plan.

  • The routes don't need to be functionally complete at this stage, but we want to set them up with dummy responses to ensure that our client side code is working as expected.


4. Database Implementation: Now that we’ve designed our database, we can set it up and begin writing queries.

  • Setup SQL database and tables.

  • Write down the queries needed to store and retrieve data in our database.

5. Server Implementation: Modify our server routes to perform the tasks and data queries needed to complete our web application.

  • Implement and populate your Database

  • Complete your server routes with full functionality, integrating the Database queries.


If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com


Comments


bottom of page