Skip to content

πŸ“Š project-management-dashboard: Next.js app for managing tasks and projects. Features authentication, project overview, drag-and-drop task management, and filters using Zustand, React Query, Ant Design, and Tailwind CSS. πŸš€

Notifications You must be signed in to change notification settings

Hamed-Hasan/Build-Project-Management-Dashboard

Repository files navigation

πŸ“Š Project Management Dashboard

Welcome to the Project Management Dashboard πŸš€, a cutting-edge application designed to streamline the management of tasks and projects. This dashboard is crafted to enhance productivity and organization through a suite of powerful features.

🎯 Objective

The main goal of this dashboard is to provide a user-friendly platform that facilitates effective management of tasks and projects, incorporating robust features for an optimal user experience.

🌟 Features

πŸ” Authentication Page

  • Login Form: Leverage Ant Design components for a visually appealing and validated login form.
  • Mock Authentication: Simulate authentication responses to test login functionality without a backend.

πŸ“‹ Projects Overview Page

  • Project List: View a dynamically loaded list of projects with options managed via a mock API.
  • Interactive Actions: Options to view, edit, and delete projects are made straightforward and accessible.

πŸ“‘ Project Details Page

  • Detailed Information: Explore tasks, team members, and recent activities upon selecting a project.
  • Management Tools: Easily add tasks and assign roles to team members.

πŸ›  Task Management

  • Task Operations: Tasks can be added, edited, or marked as completed with comprehensive details like descriptions and deadlines.
  • Drag-and-Drop: Change task statuses through a drag-and-drop interface, powered by Zustand for seamless state management.

πŸ” Task Filters and Search Functionality

  • Task Filters: Efficiently filter tasks by status, due date, or assignee.
  • Quick Search: Utilize a search bar to find tasks promptly.

🎨 Interactive Dashboard

  • UI Components: Enhance user interaction with Ant Design's modals, dropdowns, and tooltips.
  • Responsive Design: Ensure a smooth user experience on any device with Tailwind CSS.

πŸ›  Technical Requirements

  • Framework: Next.js for comprehensive routing and server-side rendering capabilities.
  • State Management: Zustand for efficient and straightforward global state management.
  • Data Fetching: React Query for managing asynchronous data operations and caching.
  • UI Components: Ant Design for high-quality pre-built UI elements.
  • Styling: Tailwind CSS for flexible and custom responsive designs.

βš™οΈ Setup and Installation

  1. Clone the repository:

    git clone https://github.com/Hamed-Hasan/Build-Project-Management-Dashboard.git
  2. Enter the project directory:

    cd Build-Project-Management-Dashboard
  3. Install dependencies:

    npm install
  4. Start the development server:

    npm run dev
  5. Access the dashboard at http://localhost:3000.

🀝 Contribution Guidelines

Contributions are welcome! 🌟 If you'd like to improve the Project Management Dashboard:

  1. Fork the repository and create your branch from main.
  2. Make your changes and document them clearly.
  3. Submit a pull request detailing the enhancements or fixes.

πŸ“œ License

This project is proudly licensed under the MIT License.

About

πŸ“Š project-management-dashboard: Next.js app for managing tasks and projects. Features authentication, project overview, drag-and-drop task management, and filters using Zustand, React Query, Ant Design, and Tailwind CSS. πŸš€

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published