jeel2410 / todo-react-app

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

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 pratices 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. Download the source code in your desired location on your system.

2. Open the code in your code editor.

3. Go to terminal and type the following command and hit enter:

   npm run install-all

   This will install all the dependencies and dev-dependencies required at root, at frontend and at backend in your project.

4. Create a file named ".env" inside the backend folder and add data from .env.example file and substitute your credentials there.

5. Go to terminal and type the following command and hit enter:

   npm run dev

   This will start both backend and frontend.

6. Open browser and go to url: http://localhost:3000. You can see the app running now.

Backend API

- POST     /api/auth/signup
- POST     /api/auth/login
- 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.

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.