Task Management Soft
April 2025
About the Project
A robust Task Management application built with Next.js, MongoDB, and NextAuth. This application empowers users to efficiently manage tasks, view insightful statistics, and update task statuses in real-time. Admin users benefit from advanced features, including comprehensive statistics on task distribution and user assignments.
✨ Features
For All Users
- 🔐 Secure user authentication via NextAuth
- ➕ Intuitive task creation, viewing, updating, and deletion
- 🔄 Real-time task status management (Completed, In Progress, Not Started, Overdue)
- 📊 Personal task statistics dashboard
Admin-Exclusive Features
- 📈 Comprehensive admin statistics dashboard
- 🥧 Task distribution visualization (Pie chart)
- 📊 User task assignment overview (Bar chart)
- 👥 User management capabilities
🛠️ Technologies
- 🖥️ Frontend: Next.js (React framework), TypeScript
- 🔙 Backend: Next.js API routes
- 🗄️ Database: MongoDB
- 🔑 Authentication: NextAuth.js
- 📊 Data Visualization: Recharts
- 🎨 Styling: Tailwind CSS
- 🔄 State Management: React Context API
- 📝 Form Handling: React Hook Form
- 🌐 API Requests: Axios
🚀 Getting Started
📋 Prerequisites
- Node.js (v14.0.0 or later)
- npm (v6.0.0 or later)
- MongoDB instance (local or cloud-based)
⚙️ Installation
-
Clone the repository:
git clone https://github.com/sculptorofcode/task-management-soft.git -
Navigate to the project directory:
cd task-management-soft -
Install dependencies:
npm install -
Set up your environment variables (see Configuration section).
-
Run the development server:
npm run dev -
Open http://localhost:3000 in your browser to see the application.
🔧 Configuration
Create a
.env.local file in the root directory and add the following environment variables:MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/mydatabase?retryWrites=true&w=majority
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
RESEND_API_KEY=your_resend_api_key
Replace the placeholder values with your actual MongoDB connection string, NextAuth secret, and Resend API key.
📘 Usage
👤 User Role
After signing in, regular users can:
- 👀 View and manage their assigned tasks
- ➕ Create new tasks
- 🔄 Update task status
- 🗑️ Delete their own tasks
- 📊 Access personal task statistics
👑 Admin Role
Admin users have additional capabilities:
- 🖥️ Access to an advanced dashboard showing:
- 🥧 Overall task distribution by status (Pie Chart)
- 📊 Task count per user (Bar Chart)
- 🔧 Ability to manage all users' tasks
- 👥 Access to user management features
🔑 Admin Credentials
- Username / Email ID: admin@tasksoft.com
- Password: tasksoft
🔌 API Endpoints
| Endpoint | Method | Description | Access |
|---|---|---|---|
/api/tasks/my-tasks | GET | Fetch tasks for the logged-in user | 👤 User |
/api/tasks/:id/status | PUT | Update the status of a specific task | 👤 User |
/api/tasks/:id | GET | Fetch a single task by ID | 👤 User |
/api/tasks | POST | Create a new task | 👤 User |
/api/tasks/:id | DELETE | Delete a task by ID | 👤 User |
/api/statistics | GET | Fetch task statistics | 👑 Admin |
🏗️ Project Structure
task-management-soft/
│
├── public/
│ └── [Static files]
│
├── src/
│ ├── abstract/
│ ├── app/
│ │ ├── (auth)/
│ │ │ ├── forgot-password/
│ │ │ ├── login/
│ │ │ └── reset-password/
│ │ ├── (backend)/
│ │ │ └── soft/
│ │ │ ├── dashboard/
│ │ │ ├── my-tasks/
│ │ │ ├── statistics/
│ │ │ ├── task/
│ │ │ ├── task-list/
│ │ │ └── users/
│ │ ├── api/
│ │ │ ├── auth/
│ │ │ ├── statistics/
│ │ │ ├── task-lists/
│ │ │ ├── tasks/
│ │ │ └── users/
│ │ ├── fonts/
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── assets/
│ │ ├── css/
│ │ ├── images/
│ │ └── scss/
│ ├── components/
│ ├── context/
│ ├── database/
│ ├── hooks/
│ ├── lib/
│ ├── models/
│ └── [Other project-specific directories]
│
├── .env.local
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
🎨 Customizing the App
🔐 User Authentication
The app uses NextAuth.js for authentication. To add or customize providers, modify the
authOptions in src/app/api/auth/[...nextauth]/options.tsx.📝 Task Model
The
Task model is defined in src/models/Task.tsx. Modify this file to adjust the task schema according to your needs.🧪 Testing
Run the test suite with:
npm test
To run tests in watch mode:
npm run test:watch
🚢 Deployment
-
Build the application:
npm run build -
Start the production server:
npm start
For platform-specific deployment instructions, refer to the Next.js deployment documentation.
🔮 Future Improvements
- 🔍 Implement task filtering and search functionality
- 🔔 Add notification system for task deadlines
- 📱 Enhance mobile responsiveness
- 📈 Expand admin reporting capabilities
- 📅 Integrate with external calendar services (e.g., Google Calendar, Apple Calendar)
- 🖱️ Implement drag-and-drop task management interface
- 👥 Add team collaboration features
🤝 Contributing
We welcome contributions! Please follow these steps:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Please ensure your code adheres to our coding standards and includes appropriate tests.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgements
For any questions or support, please open an issue or contact the maintainers.
Comments
No comments yet. Be the first to share your thoughts!
Project Links
Technologies Used
NextJsMongoDBNextAuth
