Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wansh786/task-management

A MERN application for basic tasks management.
https://github.com/wansh786/task-management

bcrypt css express jsonwebtoken mongodb mongodb-atlas nodejs reactjs redux tailwindcss

Last synced: 18 days ago
JSON representation

A MERN application for basic tasks management.

Host: GitHub
URL: https://github.com/wansh786/task-management
Owner: wansh786
Created: 2024-03-27T20:33:56.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-03-29T15:06:12.000Z (10 months ago)
Last Synced: 2024-11-05T15:08:14.345Z (2 months ago)
Topics: bcrypt, css, express, jsonwebtoken, mongodb, mongodb-atlas, nodejs, reactjs, redux, tailwindcss
Language: JavaScript
Homepage: https://zingy-bavarois-4c6028.netlify.app
Size: 301 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Task-Management

A MERN application for basic tasks management.
![image](https://user-images.githubusercontent.com/86913048/227101123-f8a35258-9c21-4479-86e8-055659ab75e2.png)

## Table of Contents

- [Features](#features)
- [Tools and Technologies](#tools-and-technologies)
- [Dependencies](#dependencies)
- [Dev-dependencies](#dev-dependencies)
- [Prerequisites](#prerequisites)
- [Installation and setup](#installation-and-setup)
- [Backend API](#backend-api)
- [frontend pages](#frontend-pages)
- [npm scripts](#npm-scripts)
- [Useful Links](#useful-links)
- [Contact](#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 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. Install all the dependencies

```sh
npm run install-all
```

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

3. Start the application

```sh
npm run dev
```

4. Go to http://localhost:3000

## 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.

## Contact

- Email: [email protected]
- Linkedin: https://www.linkedin.com/in/raghuwansh-singh-b618321b2/