📝 Task Tracker

A modern, production-ready task management application built with the MERN stack (MongoDB, Express.js, React, Node.js). Features secure authentication, real-time task management, and a responsive UI.

🌐 Live Demo

Frontend: https://tasktracker-b06.pages.dev
Backend API: https://tasktracker-production-fae7.up.railway.app
Health Check: https://tasktracker-production-fae7.up.railway.app/health

Note: The application is deployed on Cloudflare Pages (frontend) and Railway (backend) with MongoDB Atlas as the database.

✨ Features

🔐 Secure Authentication - JWT-based auth with bcrypt password hashing
✅ Task Management - Create, read, update, and delete tasks
🎯 Status Tracking - Mark tasks as pending or completed
🔍 Smart Filtering - Filter tasks by status (all/pending/completed)
📱 Responsive Design - Mobile-friendly interface
🛡️ Input Validation - Client and server-side validation
⚡ Rate Limiting - API protection against abuse
🔒 Security Headers - Helmet.js for enhanced security
🌐 CORS Protection - Configurable origin whitelist
💾 MongoDB Atlas - Cloud database with connection pooling
🚀 Production Ready - Optimized for deployment

🏗️ Tech Stack

Frontend

React 18 - UI library
React Router v6 - Client-side routing
Axios - HTTP client with interceptors
CSS3 - Modern styling with gradients and animations

Backend

Node.js - Runtime environment
Express.js - Web framework
MongoDB - NoSQL database
Mongoose - ODM for MongoDB
JWT - Token-based authentication
bcryptjs - Password hashing
Helmet - Security headers
express-validator - Input validation
express-rate-limit - Rate limiting
Morgan - HTTP request logger

📁 Project Structure

task-tracker/
├── client/ # React frontend
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── components/
│ │ │ └── ProtectedRoute.js
│ │ ├── pages/
│ │ │ ├── Login.js
│ │ │ ├── Login.css
│ │ │ ├── Dashboard.js
│ │ │ └── Dashboard.css
│ │ ├── utils/
│ │ │ └── api.js # API client with interceptors
│ │ ├── App.js
│ │ ├── index.js
│ │ └── index.css
│ ├── package.json
│ └── .env.example
│
├── server/ # Node.js backend
│ ├── config/
│ │ └── database.js # MongoDB connection with retry logic
│ ├── middleware/
│ │ ├── auth.js # JWT authentication
│ │ ├── errorHandler.js # Global error handler
│ │ └── validators.js # Input validation rules
│ ├── models/
│ │ ├── User.js
│ │ └── Task.js
│ ├── routes/
│ │ ├── auth.js # Authentication routes
│ │ └── tasks.js # Task CRUD routes
│ ├── server.js # Main server file
│ ├── package.json
│ └── .env.example
│
├── .gitignore
├── package.json # Root package.json for scripts
├── wrangler.toml # Cloudflare Workers config
└── README.md

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
MongoDB Atlas account (or local MongoDB)
npm or yarn

Installation

Clone the repository

git clone https://github.com/yooniqx/TaskTracker.git
cd TaskTracker

Install all dependencies

npm run install:all

Or install separately:

# Install root dependencies
npm install
# Install server dependenciescd server && npm install
# Install client dependenciescd ../client && npm install

Set up environment variables

Server (server/.env):

NODE_ENV=developmentPORT=5000MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/tasktracker?retryWrites=true&w=majorityJWT_SECRET=your_super_secret_jwt_key_change_this_in_productionALLOWED_ORIGINS=http://localhost:3000RATE_LIMIT_WINDOW_MS=900000RATE_LIMIT_MAX_REQUESTS=100

Client (client/.env):

REACT_APP_API_URL=http://localhost:5000/api

Start the development servers

# From root directory - runs both frontend and backend
npm run dev

Or run separately:

# Terminal 1 - Backend (from root)
npm run server
# Terminal 2 - Frontend (from root)
npm run client

Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Health Check: http://localhost:5000/health

🔧 Available Scripts

Root Directory

npm run install:all - Install all dependencies (root, server, client)
npm run dev - Run both frontend and backend concurrently
npm run server - Run backend only
npm run client - Run frontend only
npm run build - Build frontend for production
npm run start:prod - Start backend in production mode

Server Directory

npm start - Start server in production mode
npm run dev - Start server with nodemon (auto-reload)

Client Directory

npm start - Start development server
npm run build - Build for production
npm test - Run tests

🌐 API Endpoints

Authentication

Method	Endpoint	Description	Auth Required
POST	`/api/auth/register`	Register new user	No
POST	`/api/auth/login`	Login user	No

Tasks

Method	Endpoint	Description	Auth Required
GET	`/api/tasks`	Get all user tasks	Yes
POST	`/api/tasks`	Create new task	Yes
PUT	`/api/tasks/:id`	Update task	Yes
DELETE	`/api/tasks/:id`	Delete task	Yes
PATCH	`/api/tasks/:id/toggle`	Toggle task status	Yes

System

Method	Endpoint	Description	Auth Required
GET	`/health`	Health check	No

🚀 Deployment

This application is currently deployed and running in production:

Frontend: Cloudflare Pages - https://tasktracker-b06.pages.dev
Backend: Railway - https://tasktracker-production-fae7.up.railway.app
Database: MongoDB Atlas (Cloud)

Deploy Your Own Instance

Frontend Deployment (Cloudflare Pages)

Fork this repository on GitHub
Go to Cloudflare Pages
- Visit https://dash.cloudflare.com
- Navigate to Workers & Pages → Create application → Pages
- Click "Connect to Git"
Configure Build Settings
- Framework preset: React (Vite) or None
- Build command: cd client && npm install && npm run build
- Build output directory: client/build
- Root directory: Leave empty
Add Environment Variable
- Variable name: REACT_APP_API_URL
- Value: https://your-backend-url.railway.app/api
Deploy - Cloudflare will build and deploy your app (takes 3-5 minutes)

Backend Deployment (Railway)

Create Railway Account
- Visit https://railway.app
- Sign up with GitHub
Create New Project
- Click "New Project"
- Select "Deploy from GitHub repo"
- Choose your forked repository

Configure Environment Variables

NODE_ENV=productionPORT=8080MONGODB_URI=your_mongodb_atlas_connection_stringJWT_SECRET=your_super_secret_jwt_key_min_32_charsALLOWED_ORIGINS=https://your-frontend-url.pages.devRATE_LIMIT_WINDOW_MS=900000RATE_LIMIT_MAX_REQUESTS=100

Configure Networking
- Go to Settings → Networking
- Set port to 8080 (or your PORT value)
- Railway will provide a public URL
Deploy - Railway will automatically deploy on every push to main branch

Important Notes

Trust Proxy: The backend includes app.set('trust proxy', 1) for Railway deployment
CORS: Update ALLOWED_ORIGINS with your Cloudflare Pages URL (without /login or any path)
MongoDB: Use MongoDB Atlas connection string with proper credentials
JWT Secret: Use a strong, random secret (minimum 32 characters)

MongoDB Atlas Setup

Create a free cluster at https://www.mongodb.com/cloud/atlas
Create a database user
Whitelist your IP (or use 0.0.0.0/0 for all IPs in production)
Get your connection string
Replace <username>, <password>, and <cluster> in the connection string

🔒 Security Features

✅ JWT token authentication with 24-hour expiry
✅ Password hashing with bcrypt (12 rounds)
✅ Input validation on client and server
✅ Rate limiting (100 requests per 15 minutes)
✅ CORS protection with origin whitelist
✅ Security headers via Helmet.js
✅ MongoDB injection prevention
✅ XSS protection
✅ Request timeout handling
✅ Graceful error handling

📝 Environment Variables

Required Variables

Backend:

MONGODB_URI - MongoDB connection string
JWT_SECRET - Secret key for JWT signing
NODE_ENV - Environment (development/production)
PORT - Server port (default: 5000)
ALLOWED_ORIGINS - Comma-separated list of allowed origins

Frontend:

REACT_APP_API_URL - Backend API URL

Optional Variables

RATE_LIMIT_WINDOW_MS - Rate limit window (default: 900000ms)
RATE_LIMIT_MAX_REQUESTS - Max requests per window (default: 100)

🧪 Testing

# Run frontend testscd client
npm test

🐛 Troubleshooting

Common Issues

MongoDB Connection Error
- Verify your MongoDB URI is correct
- Check if your IP is whitelisted in MongoDB Atlas
- Ensure network connectivity
CORS Error
- Add your frontend URL to ALLOWED_ORIGINS in backend .env
- Check if backend is running
Authentication Issues
- Clear browser localStorage
- Verify JWT_SECRET is set
- Check token expiry
Port Already in Use
- Change PORT in server/.env
- Kill process using the port: npx kill-port 5000

📄 License

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

👤 Author

Debopriya Bose

GitHub: @yooniqx
Repository: TaskTracker

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

⭐ Show your support

Give a ⭐️ if this project helped you!

📞 Support

For support, email dbose0906@gmail.com or open an issue in the repository.

Built with ❤️ using the MERN Stack

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
client		client
server		server
.env.local.example		.env.local.example
.gitignore		.gitignore
CHANGES.md		CHANGES.md
DEPLOYMENT.md		DEPLOYMENT.md
LICENSE		LICENSE
QUICKSTART.md		QUICKSTART.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
wrangler.toml		wrangler.toml

Folders and files

Latest commit

History

Repository files navigation