Taskflow

A scalable full-stack web application with JWT authentication, responsive dashboard, and CRUD operations for tasks.

🚀 Features

Frontend

• Next.js 14 with TypeScript
• Tailwind CSS for responsive UI
• React Query for state management
• React Hook Form with Zod validation
• Protected routes with authentication
• User profile management
• Task CRUD operations
• Search and filter functionality
• Pagination support
• Toast notifications

Backend

• Node.js with Express and TypeScript
• MongoDB with Mongoose
• JWT authentication
• bcrypt for password hashing
• Zod for validation
• Helmet for security headers
• Rate limiting
• CORS configuration
• Centralized error handling

📁 Project Structure

.
├── backend/
│   ├── src/
│   │   ├── config/          # Database configuration
│   │   ├── controllers/     # Route controllers
│   │   ├── middleware/      # Auth & error middleware
│   │   ├── models/          # Mongoose models
│   │   ├── routes/          # API routes
│   │   ├── utils/           # Utility functions
│   │   ├── validators/      # Zod schemas
│   │   └── server.ts        # Express server
│   ├── package.json
│   └── tsconfig.json
├── frontend/
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── lib/             # API services & utilities
│   │   ├── pages/           # Next.js pages
│   │   └── styles/          # Global styles
│   ├── package.json
│   └── tsconfig.json
└── README.md

🛠️ Setup Instructions

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or MongoDB Atlas)
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/fullstack-app
JWT_SECRET=your-super-secret-jwt-key-change-in-production
JWT_EXPIRE=7d
NODE_ENV=development
FRONTEND_URL=http://localhost:3000

4. Start the development server:

npm run dev

The backend will run on http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create a .env.local file in the frontend directory:

NEXT_PUBLIC_API_URL=http://localhost:5000/api

4. Start the development server:

npm run dev

The frontend will run on http://localhost:3000

📡 API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user

User Profile

• GET /api/users/profile - Get user profile (Protected)
• PUT /api/users/profile - Update user profile (Protected)

Tasks

• GET /api/tasks - Get all tasks with filters (Protected)
  • Query params: status, priority, search, page, limit
• GET /api/tasks/:id - Get single task (Protected)
• POST /api/tasks - Create task (Protected)
• PUT /api/tasks/:id - Update task (Protected)
• DELETE /api/tasks/:id - Delete task (Protected)

Health Check

• GET /api/health - Server health check

🔐 Authentication

The application uses JWT tokens for authentication. After successful login/register, the token is stored in cookies and automatically included in API requests.

Protected Routes

All task and user profile endpoints require authentication. Include the JWT token in the Authorization header:

Authorization: Bearer <token>

🧪 Testing with Postman

Import the postman_collection.json file into Postman to test all API endpoints.

🚢 Production Deployment

Backend Deployment (Render/Railway/AWS)

1. Set environment variables in your hosting platform
2. Build the project: npm run build
3. Start the server: npm start
4. Ensure MongoDB Atlas connection string is set

Frontend Deployment (Vercel/Netlify)

1. Connect your GitHub repository
2. Set environment variable: NEXT_PUBLIC_API_URL to your backend URL
3. Deploy automatically on push

Database

• Use MongoDB Atlas for production
• Update MONGODB_URI with your Atlas connection string

Security Checklist

• Change JWT_SECRET to a strong random string
• Enable HTTPS
• Configure CORS for production domain
• Set up rate limiting
• Use environment variables for all secrets
• Enable MongoDB authentication
• Set up monitoring and logging

📈 Scaling Recommendations

See PRODUCTION_SCALING.md for detailed scaling strategies.

🧩 Technologies Used

Frontend

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• React Query
• React Hook Form
• Zod
• Axios
• React Hot Toast

Backend

• Node.js
• Express
• TypeScript
• MongoDB
• Mongoose
• JWT
• bcryptjs
• Zod
• Helmet
• express-rate-limit