TaskFlow - Task Management App

A full-stack task management application with a modern Next.js frontend and Node.js/Express backend.

🏗️ Project Structure

task-manager-app/
├── backend/          # Node.js + Express + MongoDB API
│   ├── config/       # Database connection
│   ├── controllers/  # Route handlers
│   ├── middleware/   # Auth middleware
│   ├── models/       # Mongoose models
│   ├── routes/       # API routes
│   ├── .env          # Environment variables (do NOT commit)
│   └── server.js     # Entry point
├── frontend/         # Next.js 16 + Tailwind + shadcn/ui
│   ├── app/          # Next.js App Router pages
│   ├── components/   # UI components (shadcn/ui + custom)
│   ├── lib/          # API client, auth context, utilities
│   ├── hooks/        # Custom React hooks
│   ├── .env.local    # Local env vars (do NOT commit)
│   └── next.config.mjs
└── README.md

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm
• MongoDB Atlas account (or local MongoDB)

---

Backend Setup

cd backend
npm install

Edit .env with your values:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secure_random_secret
FRONTEND_URL=*   # or your specific frontend URL in production

Start the backend:

npm run dev     # development (nodemon)
npm start       # production

---

Frontend Setup

cd frontend
npm install    # or: pnpm install

Edit .env.local:

NEXT_PUBLIC_API_URL=http://localhost:5000

Start the frontend:

npm run dev     # development → http://localhost:3000
npm run build   # production build
npm start       # production server

---

🌍 Deploying for Worldwide Access

Backend (Railway / Render / Fly.io)

1. Push backend/ to a Git repo
2. Deploy to your platform of choice
3. Set environment variables:
   • MONGO_URI — your MongoDB Atlas connection string
   • JWT_SECRET — a strong random secret
   • FRONTEND_URL — your frontend's deployed URL (for CORS)
   • PORT — usually set automatically

Frontend (Vercel — recommended)

1. Push the entire project to GitHub
2. Import the repo in Vercel
3. Set Root Directory to frontend
4. Add environment variable:
   • NEXT_PUBLIC_API_URL = your deployed backend URL (e.g. https://your-api.railway.app)
5. Deploy

---

🔑 API Endpoints

Auth

Method	Endpoint	Body	Description
POST	/api/users/register	{ name, email, password }	Register new user
POST	/api/users/login	{ email, password }	Login

Tasks (requires Bearer token)

Method	Endpoint	Body	Description
GET	/api/tasks	—	Get all tasks
POST	/api/tasks	{ title, description? }	Create task
PUT	/api/tasks/:id	{ title?, completed?, description? }	Update task
DELETE	/api/tasks/:id	—	Delete task

---

🛠️ Tech Stack

Frontend

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS v4
• shadcn/ui components
• Axios
• Lucide React icons

Backend

• Node.js + Express 5
• MongoDB + Mongoose
• JWT authentication
• bcryptjs password hashing

---

🔒 Security Notes

• Never commit .env or .env.local files
• Change JWT_SECRET to a strong random value in production
• Set FRONTEND_URL to your specific frontend URL in production (not *)
• Consider adding rate limiting for production (express-rate-limit)