- Overview
- Screen
- Features
- Getting Started
- Usage
- Folder Structure
- Components
- Context
- Styling
- Contributing
- License
This is a Kanban board application built with React. It allows users to manage tasks across different boards and columns (Todo, Doing, Done). Users can add, delete, and complete tasks, as well as switch between light and dark modes.
- Add, delete, and complete tasks.
- Switch between different task boards (Platform Launch, Marketing Plan, Roadmap).
- Drag and drop tasks between columns.
- Light and dark mode toggles.
- Responsive design.
- Node.js (v14 or higher)
- npm (v6 or higher) or yarn (v1.22 or higher)
- Clone the repository:
git clone https://github.com/0uali-Yassine/kanban-Task-Management-app.git cd kanban-Task-Management-app
- Install dependencies:
npm install
- Set up environment variables:
-Create a .env file in the root directory.
-Add your Spoonacular API key to the .env file
REACT_APP_FIREBASE_API_KEY=your_api_key REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain REACT_APP_FIREBASE_PROJECT_ID=your_project_id REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id REACT_APP_FIREBASE_APP_ID=your_app_id
- Start the development server:
npm start
- Open your browser and visit http://localhost:3000 to view the kanban-board.
- The main view consists of a navigation bar, sidebar, and main content area where tasks are displayed.
- Use the sidebar to switch between different boards.
- Click the "+ Add New Task" button to open the task creation form.
- Use the drag-and-drop functionality to move tasks between columns.
- Toggle between light and dark modes using the switch in the sidebar.
βββ public
β βββ index.html
β βββ ...
βββ src
β βββ components
β β βββ Main.js
β β βββ Menu.js
β β βββ SideBar.js
β β βββ TaskCard.js
β β βββ TaskColumn.js
β β βββ TaskForm.js
β β βββ DropArea.js
β βββ Context.js
β βββ App.js
β βββ index.css
β βββ index.js
βββ package.json
The main component that renders the entire application. It includes the navigation bar, sidebar, and main content area.
Provides global state management using React's Context API. It includes states and functions for managing tasks, boards, and UI preferences (like dark mode).
A form component for adding new tasks.
A sidebar component for navigating between different task boards and toggling the dark mode.
The main content area that displays tasks in columns based on their status.
A card component that represents an individual task.
A column component that holds and displays tasks of a specific status (Todo, Doing, Done).
A menu component that provides additional options and settings.
A drop area component that handles the drag-and-drop functionality for tasks.
The application uses Tailwind CSS for styling. Custom styles are defined in the index.css file.
Contributions are welcome! Please fork the repository and create a pull request with your changes.
Copy this content into a README.md
file in your project's root directory. This file provides an overview, installation instructions, usage guidelines, and a description of the project structure and components.