PremacAI

TaskMaster - MERN Stack Task Management App

A full-stack task management application built with the MERN stack (MongoDB, Express.js, React, Node.js) using Next.js framework.

🚀 Features

• User Authentication: Secure registration and login with JWT tokens
• Task Management: Create, read, update, and delete tasks
• Task Status: Mark tasks as complete or incomplete
• Protected Routes: Dashboard accessible only to authenticated users
• Responsive Design: Mobile-friendly interface with Tailwind CSS
• Real-time Updates: Instant task updates without page refresh
• Form Validation: Client-side and server-side validation
• Secure Password Storage: Passwords hashed with bcrypt

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• React 18 - UI library with hooks and context
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Modern UI components
• Lucide React - Beautiful icons

Backend

• Next.js API Routes - Serverless API endpoints
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing

Database

• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling

📦 Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• MongoDB Atlas account or local MongoDB installation
• Git

1. Clone the Repository

```bash git clone https://github.com/yourusername/taskmaster-app.git cd taskmaster-app ```

2. Install Dependencies

```bash npm install ```

3. Environment Variables

Create a `.env.local` file in the root directory:

```env MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/taskmaster JWT_SECRET=your-super-secret-jwt-key-here ```

4. MongoDB Setup

1. Create a MongoDB Atlas account at mongodb.com
2. Create a new cluster
3. Get your connection string
4. Replace the MONGODB_URI in your `.env.local` file

5. Run the Application

```bash npm run dev ```

The application will be available at `http://localhost:3000`

🏗️ Project Structure

``` taskmaster-app/ ├── app/ │ ├── api/ │ │ ├── auth/ │ │ │ ├── login/route.ts │ │ │ └── register/route.ts │ │ └── tasks/ │ │ ├── route.ts │ │ └── [id]/route.ts │ ├── auth/ │ │ ├── login/page.tsx │ │ └── register/page.tsx │ ├── dashboard/page.tsx │ ├── layout.tsx │ └── page.tsx ├── components/ui/ ├── contexts/ │ └── AuthContext.tsx ├── lib/ │ └── mongodb.ts ├── models/ │ ├── User.ts │ └── Task.ts └── types/ └── global.d.ts ```

🔌 API Endpoints

Authentication

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

Tasks (Protected)

• `GET /api/tasks` - Get all tasks for authenticated user
• `POST /api/tasks` - Create a new task
• `PUT /api/tasks/:id` - Update a task
• `DELETE /api/tasks/:id` - Delete a task

🗄️ Database Schema

User Model

```javascript { name: String (required), email: String (required, unique), password: String (required, hashed), timestamps: true } ```

Task Model

```javascript { title: String (required), description: String, completed: Boolean (default: false), userId: ObjectId (ref: User), timestamps: true } ```

🔐 Authentication Flow

1. User registers with name, email, and password
2. Password is hashed using bcrypt
3. User logs in with email and password
4. Server validates credentials and returns JWT token
5. Token is stored in localStorage and sent with API requests
6. Protected routes verify token before allowing access

🎨 UI Components

The application uses a modern, responsive design with:

• Clean landing page with call-to-action
• Secure authentication forms with validation
• Interactive dashboard with task statistics
• Intuitive task management interface
• Mobile-responsive design

🚀 Deployment

Frontend (Vercel)

1. Push code to GitHub
2. Connect repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically

Database (MongoDB Atlas)

• Already cloud-hosted
• Configure IP whitelist and database users

🧪 Testing

Manual Testing Checklist

• User registration with validation
• User login with error handling
• Protected route access
• Task creation and validation
• Task editing and updates
• Task completion toggle
• Task deletion
• Responsive design on mobile
• Logout functionality

🔒 Security Features

• Password hashing with bcrypt
• JWT token authentication
• Protected API routes
• Input validation and sanitization
• CORS protection
• Environment variable protection

🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m ‘Add amazing feature’`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License.

👨‍💻 Author

Your Name

• GitHub: @yourusername
• LinkedIn: Your LinkedIn

🙏 Acknowledgments

• Next.js team for the amazing framework
• shadcn for the beautiful UI components
• MongoDB for the flexible database solution
• Vercel for seamless deployment