1



Task Hero

To-Do App with Sign-in feature built with Material UI and the MERN tech stack (MongoDB, Express, React, Node.js)

Glitch

Overview

For Network and Web Data technologies course, my final project was with a group of 4 students, where the goal of this project was to create a To-Do App with sign-in feature with CRUD functionalities for tasks. This app enables a user to access their tasks anywhere, anytime. This was my first full stack project, as well as the first time I used React or built an API! I built schemas in MongoDB database and they were mainly - 'Users' and 'Tasks'.

  • Users: Users._id, username, emailId, password
  • Tasks: Tasks._id, task, userid

The key users were 'admin' and 'users'. Following are the features available to the users:

  • Create a task: User can add a task
  • Read a task: Existing task list is displayed when the user is logged-in
  • Update a task: All tasks are editable by the user any time they want
  • Delete a task: Tasks can be deleted as well by the user

We mainly built 4 components for this project:

  1. User web app - To ensure security and privacy of data of each user this app needs each user to first login to the app. Any user can directly sign up directly from the app. When a user uses a wrong password or email id ‘wrong credentials’ message is displayed.
  2. Admin panel web app - allows admins to view all the users registered with the ‘Task Hero’. Admin has access to all the users.
  3. REST API - for communication between the applications and the Mongo database.
  4. MongoDB database - for storing user account information and various user created tasks.

Tech Stack

The To-do user app is built with React JS framework on the frontend and Node.js for the backend. The API uses Express as a back-end web application framework for Node.js and connects to a MongoDB database. The React components are built using Material-UI as an open source frontend framework using Less (Leaner Style Sheets). I hosted the web application in a website building software called Glitch.

Timeline

October to December 2022 (~2 months)

Description

The app requires every user to first login to the app in order to ensure security and privacy of data of every user. Any user can also directly sign up from the app and create their user account on the app, but this is not a feature on the Admin panel for security purposes. If any user uses a wrong password or email id, ‘wrong credentials’ message is displayed. My contributions in this project were as follows:

  • Built schemas for the 'user' and 'task' database in MongoDB
  • Created REST APIs for create and delete tasks of users
  • Designed Home, About and Profile pages

User web app


Screens from User web app: Profile and About pages


Screen from User web app: Create your Todo List

Admin panel

Screen from Task Hero admin panel: Registered Users

Feel free to check out my code for the API and the task and the user databases.

Next Steps

My future goals for this project would be to add to the design and features. I would love to have this application follow a unique, cohesive design. The grading of this project was on functionality alone, so I did not spend a lot of time on the UI/UX. Regarding features:

  • Add-on features: On the User web app, I would like to add tasks filter based on category, priority and due-date. This will help users to categorize and prioritize their tasks.
  • Integrating Zoom: To add zoom option to redirect a user to Zoom with a click of a button as well.
  • Google Calendar integration: Option to integrate tasks with Google calendar.
  • Set Frequency: To add this option that will enable a user to set up the frequency of a task.
  • More Admin Rights: On the admin panel, feature to enable admin some rights like changing background for all the users, flag a user and block a user. I would also like to add the feature of an admin being able to delete user accounts or reset passwords.