Task-Manager

A comprehensive full-stack task management application built with Node.js, Express, React, and Vite. This application enables teams to efficiently manage tasks, collaborate, track progress, and generate detailed reports.

Table of Contents

• Project Overview
• Features
• Tech Stack
• Local Setup
• Deployment on Render

Project Overview

Task-Manager is a modern web application designed to streamline task management workflows for individuals and teams. It provides a centralized platform for creating, assigning, tracking, and completing tasks with real-time collaboration features. The application includes role-based access control (Admin and User roles) with dedicated interfaces for different user types.

Key Highlights:

• User Authentication: Secure login and signup with JWT-based authentication
• Role-Based Access: Admin panel for management, user dashboard for task tracking
• Task Management: Create, assign, update, and track task progress
• Reporting: Generate comprehensive reports on task completion and team performance
• File Uploads: Attach files and images to tasks for better documentation
• User Management: Admin capabilities to manage user roles and permissions
• Responsive UI: Modern, intuitive interface built with React

Features

Authentication & Authorization

• User registration and login
• Secure password handling
• JWT token-based session management
• Role-based access control (Admin/User)

Task Management

• Create and assign tasks to team members
• Set task priorities and deadlines
• Track task status (Todo, In Progress, Completed)
• Add task descriptions and attachments
• Update task details in real-time
• Delete tasks with confirmation

User Management (Admin Only)

• View all users in the system
• Manage user roles and permissions
• Monitor user activity and task assignments
• User profile management

Reporting & Analytics

• Generate task completion reports
• View team performance metrics
• Task status analytics
• User productivity insights

File Management

• Upload task attachments
• Support for images and documents
• File storage and retrieval

Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• Middleware: Custom authentication, error handling, and file upload middleware

Frontend

• Framework: React 18
• Build Tool: Vite
• Styling: CSS/TailwindCSS
• HTTP Client: Axios
• State Management: React Context API
• Charts: Recharts for analytics visualization

Other Tools

• Version Control: Git
• Deployment: Render

Local Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local instance or MongoDB Atlas account)
• Git

Backend Setup

1. Clone the repository

   git clone <repository-url>
   cd Task-Manager/backend

2. Install dependencies

   npm install

3. Configure environment variables Create a .env file in the backend directory:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/task-manager
   JWT_SECRET=your_jwt_secret_key_here
   ADMIN_INVITE_TOKEN=your_admin_invite_token
   CLIENT_URL=your_frontend_url
   NODE_ENV=development
   

4. Start the backend server

   npm start

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

Frontend Setup

1. Navigate to frontend directory

   cd Task-Manager/frontend

2. Install dependencies

   npm install

3. Configure environment variables Create a .env file in the frontend directory:

   VITE_API_BASE_URL=http://localhost:5000
   

4. Start the development server

   npm run dev

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

Accessing the Application

• Open your browser and navigate to http://localhost:5173
• Use the signup page to create an account
• Login with your credentials
• Access the dashboard to manage tasks

How to create the Admin Account

• Email: admin@example.com
• Password: admin123
• Invite Token: your-admin-invite-token-from-env

Deployment on Render

Prerequisites

• Render account (create at render.com)
• GitHub repository with your code
• MongoDB Atlas account for cloud database

Step 1: Prepare MongoDB Atlas

1. Create a MongoDB Atlas cluster at mongodb.com/cloud
2. Create a database user and note the connection string
3. Add Render's IP addresses to the network access whitelist

Step 2: Deploy Backend on Render

1. Push code to GitHub

   git push origin main

2. Create a new Web Service on Render

   • Go to Render Dashboard
   • Click "New +" → "Web Service"
   • Select your GitHub repository and connect
   • Configure:
     • Name: task-manager-api
     • Runtime: Node
     • Build Command: npm install
     • Start Command: npm start

3. Set Environment Variables In Render dashboard, add the following environment variables:

   PORT=10000
   MONGODB_URI=your_mongodb_atlas_connection_string
   JWT_SECRET=your_secure_jwt_secret_key
   JWT_EXPIRE=7d
   NODE_ENV=production
   

4. Deploy

   • Render will automatically deploy your backend
   • Note the backend URL (e.g., https://task-manager-api.onrender.com)

Step 3: Deploy Frontend on Render

1. Update API Base URL In frontend/.env:

   VITE_API_BASE_URL=https://task-manager-api.onrender.com
   

2. Create a new Static Site on Render

   • Go to Render Dashboard
   • Click "New +" → "Static Site"
   • Select your GitHub repository
   • Configure:
     • Name: task-manager-ui
     • Build Command: npm install && npm run build
     • Publish Directory: dist

3. Deploy

   • Render will automatically build and deploy your frontend
   • Your application will be live at the provided URL

Step 4: Configure CORS (Backend)

Update your backend CORS configuration to allow requests from your Render frontend URL:

In backend/src/server.js:

const corsOptions = {
  origin: process.env.CLIENT_URL || 'http://localhost:5173',
  credentials: true
};

app.use(cors(corsOptions));

Add to .env:

CLIENT_URL=https://task-manager-ui.onrender.com

Step 5: Verify Deployment

1. Visit your frontend URL
2. Test user registration and login
3. Create and manage tasks
4. Verify file uploads work correctly
5. Check the backend API health

Important Notes

• Free tier limitations: Render's free tier may have spin-down periods. Consider upgrading to a paid plan for production
• Database backups: Regularly backup your MongoDB Atlas database
• Environment security: Never commit .env files to version control
• API rate limiting: Consider implementing rate limiting in production
• HTTPS: Render automatically provides HTTPS for all services

Troubleshooting

Backend Issues

• Port already in use: Change PORT in .env
• MongoDB connection failed: Verify connection string and network access
• CORS errors: Check frontend URL in CORS configuration

Frontend Issues

• API requests failing: Verify VITE_API_BASE_URL is correct
• Build errors: Clear node_modules and reinstall: rm -rf node_modules && npm install

Render Deployment

• Build fails: Check build logs in Render dashboard
• Application crashes: Review recent deployments and logs
• Slow performance: Check free tier resource limits and consider upgrading

License

This project is available for use. Please check with the repository owner for specific licensing information.