MERN Task Manager

A MERN application for basic tasks management.

Table of Contents

• Features
• Tools and Technologies
• Dependencies
• Dev-dependencies
• Prerequisites
• Installation and setup
• Backend API
• frontend pages
• npm scripts
• Useful Links
• Contact

Features

User-side features

• Signup
• Login
• Logout
• Add tasks
• View tasks
• Update tasks
• Delete tasks

Developer-side features

• Toasts for success and error messages
• Form validations in frontend and backend
• Fully Responsive Navbar
• Token based Authentication
• Use of 404 page for wrong urls
• Relevant redirects
• Global user state using Redux
• Custom Loaders
• Use of layout component for pages
• Use of theme colors
• No external CSS files needed (made using Tailwind CSS)
• Usage of Tooltips
• Dynamic document titles
• Redirect to previous page after login
• Use of various React hooks
• Custom hook also used (useFetch)
• Routes protection
• Middleware for verifying the user in backend
• Use of different HTTP status codes for sending responses
• Standard practices followed

Tools and Technologies

• HTML
• CSS
• JavaScript
• Tailwind CSS
• Node.js
• Express.js
• React
• Redux
• MongoDB

Dependencies

Following are the major dependencies of the project:

• axios
• react
• react-dom
• react-redux
• react-router-dom
• react-toastify
• redux
• redux-thunk
• bcrypt
• cors
• dotenv
• express
• jsonwebtoken
• mongoose

Dev-dependencies

Following are the major dev-dependencies of the project:

• nodemon
• concurrently

Prerequisites

• Node.js must be installed on the system.
• You should have a MongoDB database.
• You should have a code editor (preferred: VS Code)

Installation and Setup

1. Install all dependencies

   npm run install-all

2. Create a file named .env inside the backend folder with the following variables:

   # backend/.env
   MONGODB_URL=mongodb://127.0.0.1:27017/mern_task_manager
   ACCESS_TOKEN_SECRET=replace-with-a-long-random-secret
   PORT=5000

3. Start the application

   npm run dev

4. Go to http://localhost:3000

Notes:

• The frontend dev server proxies API calls to http://127.0.0.1:5000.
• Protected API routes expect an Authorization header containing the raw JWT (no Bearer prefix`).

Backend API

Public
  - POST     /api/auth/signup
  - POST     /api/auth/login

Protected (require Authorization: <token>)
  - GET      /api/tasks
  - GET      /api/tasks/:taskId
  - POST     /api/tasks
  - PUT      /api/tasks/:taskId
  - DELETE   /api/tasks/:taskId
  - GET      /api/profile

Frontend pages

- /                 Home Screen (Public home page for guests and private dashboard (tasks) for logged-in users)
- /signup           Signup page
- /login            Login page
- /tasks/add        Add new task
- /tasks/:taskId    Edit a task

npm scripts

At root:

• npm run dev: Starts both backend and frontend
• npm run dev-server: Starts only backend
• npm run dev-client: Starts only frontend
• npm run install-all: Installs all dependencies and dev-dependencies required at root, at frontend and at backend.
• npm run build: Builds frontend and installs backend dependencies
• npm start: Starts backend only (for production with pre-built frontend)

Inside frontend folder:

• npm start: Starts frontend in development mode
• npm run build: Builds the frontend for production to the build folder
• npm test: Launches the test runner in the interactive watch mode
• npm run eject: This will remove the single build dependency from the frontend.

Inside backend folder:

• npm run dev: Starts backend using nodemon.
• npm start: Starts backend without nodemon.

Useful Links

• This project

  • GitHub Repo: https://github.com/engmaryamameen/MERN-task-manager

• Official Docs

  • React docs: https://reactjs.org/docs/getting-started.html
  • npmjs docs: https://docs.npmjs.com/
  • MongoDB docs: https://docs.mongodb.com/manual/introduction/
  • GitHub docs: https://docs.github.com/en/get-started/quickstart/hello-world

• Download links

  • Node.js download: https://nodejs.org/
  • VS Code download: https://code.visualstudio.com/

• Cheatsheets

  • Git cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf
  • VS Code keyboard shortcuts: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
  • CSS Selectors Cheatsheet: https://frontend30.com/css-selectors-cheatsheet/

Contact

• Email: engmaryamameen@gmail.com
• LinkedIn: https://www.linkedin.com/in/maryam-ameen/