Desktop Preview	Mobile Preview

Task Management System is a comprehensive full-stack web application built with Django Rest Framework for the backend, Next.js for the frontend. It provides an platform for users to manage projects, tasks, comments, and tags efficiently. It offers a simple, responsive interface for seamless project management and includes robust authentication capabilities using Djoser with Django REST Framework Simple JWT, ensuring secure user access and management.

Give a star if you like it, find it useful, or want to support this project! 🌟 Your support helps keep the project active and enhances its development.

If you use this project in your work or build upon it, please give proper credit and link back to https://github.com/mimi030/.

Project Walkthrough

Auth Walkthrough

• Features
• Technologies Used
• Installation Instructions
• Usage
• API Documentation
• Planned Features
• Contributing
• License
• Acknowledgments

• User Authentication and Authorization

  • Includes registration, account activation, login, and logout.
  • Password reset functionality with JWT tokens.

• Token Cookies

  • Stores user login tokens in cookies for a set duration.
  • Automatically handles token expiration and blocks timed-out tokens.

• Project and Task Management

  • Project Visibility: Only project owners and members assigned to a project can view the corresponding project and its tasks.
  • Create and manage projects, tasks, comments, and tags.
  • Project owner can assign members to projects and allocate tasks.
  • Edit project and task details, including status updates.
  • Users can leave comments on tasks to facilitate collaboration.

• Navigation

  • Sidebar: Provides easy access to various sections of the app with a responsive design that adjusts based on user interaction.
  • Breadcrumb: Shows the current page’s location within the app hierarchy, helping users navigate back to previous pages or higher levels in the hierarchy.

• Responsive Design

  • Optimized for both mobile and desktop viewing experiences.

• Security

  • Content Security Policy (CSP) Settings:
    • To protect against XSS attacks, ensure you configure the CSP in your application.
    • Adjust these settings on backend (task_management_system) and frontend based on your application’s requirements.

• Frontend: React, Next.js, TypeScript, Tailwind CSS
• Backend: Django, Django REST Framework
• Database: SQLite
• Authentication: Djoser, JWT (JSON Web Tokens)
• Data Fetching and Management: Djoser, JWT (JSON Web Tokens)
  • Axios: Used for making HTTP requests from the frontend to the backend.
  • useSWR: A React Hook library for data fetching and caching.
  • Fetcher: A utility function used with useSWR to handle API requests.

• Python 3.11.x (for Django backend)
• Django 5.0.x (with Django REST framework)
• Next.js 14.x (for the frontend)
• Node.js v18.17.x and npm/yarn (for managing Next.js dependencies)
• SQLite or any supported database (for Django database)

1. Clone the repository:

   git clone https://github.com/mimi030/task_management_system_django_next_v1.git
   cd task_management_system_django_next_v1/task_management_system

2. Create a virtual environment and install dependencies:

   python3.11 -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`
   pip install -r requirements.txt

3. Set up environment variables: Create a .env file in the backend directory and add the required environment variables (e.g., DATABASE_URL, SECRET_KEY).

4. Run database migrations:

   python manage.py makemigrations
   python manage.py migrate

5. Create superuser:

   python manage.py createsuperuser

6. Start the backend server:

   python manage.py runserver

1. Navigate to the frontend directory:

   cd ../frontend

2. Install dependencies: If you are using npm

   npm install

   Or if you are using yarn

   yarn install

3. Set up environment variables: Create a .env file in the frontend directory and add the required environment variables (e.g., NEXT_PUBLIC_API_BASE_URL).

4. Start the frontend server: If you are using npm

   npm run dev

   Or if you are using yarn

   yarn dev

5. Build the project for production: To create an optimized production build, use:

   If you are using npm

   npm run build

   Or if you are using yarn

   yarn build

6. Start the production server: To run the production build, use:

   If you are using npm

   npm start

   Or if you are using yarn

   yarn start

• Open your browser and navigate to http://localhost:3000 to access the application.
• Use the provided authentication routes to log in or sign up.
• Navigate to http://localhost:8000/admin to access the Django admin interface and manage the system if you are a superuser.

GET http://localhost:8000/api/v1/projects/
Authorization: Bearer <token>

[
  "created_at": "yyyy-mm-ddThh:mm:ss.ssssssZ",
   "description": "This is a project description...",
   "id": 1,
   "is_owner": true,
   "members": [
      {
            "email": "testuser@mail.com",
            "first_name": "User",
            "id": 2,
            "last_name": "Test",
            "username": "testuser"
      }
   ],
   "name": "New Project",
   "owner": "testadmin",
   "tasks": [
      {
         "assigned_to": [
            {
               "email": "testuser@mail.com",
               "first_name": "User",
               "id": 2,
               "last_name": "Test",
               "username": "testuser"
            }
         ],
         "created_at": "yyyy-mm-ddThh:mm:ss.ssssssZ",
         "description": "This is a task description...",
         "due_date": "2024-07-28T15:00:00Z",
         "id": 1,
         "name": "Task 1",
         "project": 1,
         "status": "in_progress",
         "tags": [
            {
               "id": 1,
               "name": "Test"
            }
         ],
         "updated_at": "yyyy-mm-ddThh:mm:ss.ssssssZ"
      }
   ]
]

The following features and improvements are planned for future updates in this repository:

• Add Timeline Schedule: Implement a calendar view to display projects and tasks.
• Optimize CI Pipeline: Enhance existing automated testing and linting to improve code quality and robustness, with potential for future CD integration.
• Code Refactoring: Improve code quality and structure.
• Expand Test Coverage: Add more tests to ensure robustness.

Contributions are always appreciated! Whether it’s a new feature, bug fix, or an improvement, your efforts help make this project better. Suggestions are also welcomed. Please feel free to open an issue if you have ideas or feedback.

Here’s how you can contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a Pull Request

If you're not sure about implementing something but have a suggestion, please don't hesitate to open an issue. Your ideas are valuable to the ongoing development of the project.

This project is licensed under the MIT License - see the LICENSE file for details.

• Inspired by various open-source projects and resources, such as using cookies to enhance security by koladev32.
• Special thanks to Django and React for their excellent frameworks.