Taskflow

A full-stack MERN task management application that helps users organize and track their tasks efficiently.

Features

• User Authentication - Secure registration and login with JWT
• Task Management - Create, read, update, and delete tasks
• Task Status - Track tasks as Pending, In Progress, or Completed
• Due Dates - Set and manage task deadlines
• Private Tasks - Each user sees only their own tasks
• Clean UI - Intuitive and responsive interface

Tech Stack

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• JWT for authentication
• bcryptjs for password hashing
• cors for Cross-Origin Resource Sharing
• nodemon for auto server restart
• dotenv for environment variables loading

npm init -y
npm install express dotenv mongoose cors
npm install --save-dev nodemon
npm install bcryptjs jsonwebtoken
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Frontend

• React
• React Router for navigation
• Axios for API calls
• Tailwind for styling
• shadcn for components

npm create vite@latest
npm install tailwindcss @tailwindcss/vite
npx shadcn@latest init
npm i react-router-dom
npm i react-toastify
npm i axios

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v22.x.x or higher)
• MongoDB (local or MongoDB Atlas account)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/abdelhafid37/taskflow.git
cd taskflow

2. Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=your_jwt_expire_time
PORT=5001
NODE_ENV=development
CLIENT_URL=your_client_url

Start the backend server:

npm run dev

3. Frontend Setup

cd ../frontend
npm install

Create a .env file in the frontend directory:

REACT_APP_API_URL=http://localhost:5001/api

Start the React app:

npm start

The application will open at http://localhost:5173

Usage

1. Register - Create a new account with email and password
2. Login - Sign in with your credentials
3. Create Tasks - Add new tasks with title, description, status, and due date
4. Manage Tasks - Edit, delete, or update the status of your tasks
5. Logout - Securely end your session

Project Structure

taskflow/
├── backend/                # Backend
│   ├── config/            # Configuration files
│   ├── controllers/       # Request handlers
│   ├── middleware/        # Custom middleware
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   └── server.js         # Entry point
│
├── frontend/              # Frontend
│   ├── public/
│   └── src/
│       ├── components/   # React components
│       ├── pages/        # Page components
│       ├── services/     # API services
│       ├── context/      # Context providers
│       ├── hooks/      # Hooks providers
│       ├── lib/      # Helper functions
│       └── App.jsx       # Main component
│
├── .getignore
└── README.md

API Documentation

See API_DOCUMENTATION.md for detailed API endpoint documentation.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b branchName)
3. Commit your changes (git commit -m 'commitMessage')
4. Push to the branch (git push origin branchName)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built as a learning project for MERN stack development
• Inspired by modern task management applications

Contact

Abdelhafid - @abdelhafid

Project Link: https://github.com/abdelhafid37/taskflow

---

Made with the MERN stack