Deployed Link: (https://taskify-5528.onrender.com)
- Overview
- Features
- Technology Stack
- System Architecture
- Installation & Setup
- Database Schema
- Security Features
- Troubleshooting
- Support
The Cloud-Based Task Manager is a web application designed to streamline team task management. Built using the MERN stack (MongoDB, Express.js, React, and Node.js), this platform provides a user-friendly interface for efficient task assignment, tracking, and collaboration.
In a dynamic work environment, effective task management is crucial for team success. Traditional methods of task tracking through spreadsheets or manual systems can be cumbersome and prone to errors. The Cloud-Based Task Manager addresses these challenges by providing:
- Centralized task management platform
- Real-time collaboration features
- Automated tracking and notifications
- Role-based access control
- Intuitive user interface
With the rise of remote work and dispersed teams, there is a growing need for tools that facilitate effective communication and task coordination. This application leverages modern web technologies to create an intuitive and responsive task management solution. The MERN stack ensures scalability, while the integration of Redux Toolkit, Headless UI, and Tailwind CSS enhances user experience and performance.
-
User Management
- Create admin accounts
- Add and manage team members
- User activation/deactivation
- Bulk user operations
- User activity monitoring
-
Task Administration
- Create and assign tasks to individuals or teams
- Set task priorities (high, medium, normal, low)
- Define deadlines and milestones
- Track task progress
- Manage task categories
-
Asset Management
- Upload and manage task assets
- File organization
- Asset tracking
-
Task Management
- View assigned tasks
- Update task status (todo, in progress, completed)
- Add comments and attachments
- Track personal progress
- Filter and sort tasks
-
Collaboration Tools
- Real-time comments
- Task discussions
- File sharing
- @mentions and notifications
-
Authentication & Authorization
- Secure user authentication
- Role-based access control
- Session management
- Profile management
- Password security
-
User Interface
- Responsive design
- Dark/Light mode
- Customizable dashboard
- Drag-and-drop interface
- Advanced search functionality
- Core: React (Vite)
- State Management: Redux Toolkit
- UI/UX:
- Headless UI
- Tailwind CSS
- Custom components
- Additional Libraries:
- Axios for API calls
- React Router
- React Query
- Date-fns
- Runtime: Node.js
- Framework: Express.js
- Database: MongoDB
- Authentication: JWT
- Additional Tools:
- Morgan for logging
- Cors for cross-origin requests
- Cookie-parser
- Node.js (v14+)
- MongoDB (v4+)
- npm or yarn
- Git
-
Environment Configuration Create
.envfile in server directory:MONGODB_URI=your_mongodb_url JWT_SECRET=your_jwt_secret PORT=8800 NODE_ENV=development
-
MongoDB Setup:
- Visit MongoDB Atlas: https://www.mongodb.com/cloud/atlas
- Create an account/login
- Create a new cluster
- Configure cluster settings
- Create database user
- Set up IP whitelist
- Get connection string
- Configure application
-
Installation Steps
# Clone repository git clone https://github.com/yourusername/taskmanager.git # Navigate to server directory cd taskmanager/server # Install dependencies npm install # Start server npm start
-
Environment Configuration Create
.envfile in client directory:VITE_APP_BASE_URL=http://localhost:8800 VITE_APP_FIREBASE_API_KEY=your_firebase_key
-
Installation Steps
# Navigate to client directory cd ../client # Install dependencies npm install # Start development server npm run dev
{
username: String,
email: String,
password: String,
role: String,
isActive: Boolean,
createdAt: Date
}{
title: String,
date: Date,
priority: String,
stage: String,
activities: [{
type: String,
activity: String,
date: Date,
by: ObjectId
}],
subTasks: [{
title: String,
date: Date,
tag: String
}],
assets: [String],
team: [ObjectId],
isTrashed: Boolean
}-
Authentication
- JWT-based authentication
- Password hashing
- Token expiration
- Refresh token mechanism
-
Authorization
- Role-based access control
- Route protection
- Resource-level permissions
-
Data Protection
- Input validation
- XSS protection
- CSRF protection
- Rate limiting
-
Connection Issues
- Check MongoDB connection string
- Verify network connectivity
- Check port availability
-
Authentication Issues
- Verify JWT secret
- Check token expiration
- Validate user credentials
-
Performance Issues
- Monitor database queries
- Check API response times
- Optimize frontend rendering
For support, please contact:
- Contact : Gagan / Gopi