https://github.com/khulisojohn/taskon-management
A simple and efficient Kanban-style task management web application built with React, Tailwind CSS, CSS, and TypeScript. This app allows users to manage and organize their tasks in an intuitive drag-and-drop interface. You can add, update, delete, move, and mark tasks as completed,.
https://github.com/khulisojohn/taskon-management
react-components react-hooks react-router react-router-dom react-state-management reactjs tailwindcss typescript
Last synced: 9 months ago
JSON representation
A simple and efficient Kanban-style task management web application built with React, Tailwind CSS, CSS, and TypeScript. This app allows users to manage and organize their tasks in an intuitive drag-and-drop interface. You can add, update, delete, move, and mark tasks as completed,.
- Host: GitHub
- URL: https://github.com/khulisojohn/taskon-management
- Owner: KhulisoJohn
- License: apache-2.0
- Created: 2025-04-10T12:18:42.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-19T13:25:16.000Z (9 months ago)
- Last Synced: 2025-04-23T03:57:19.160Z (9 months ago)
- Topics: react-components, react-hooks, react-router, react-router-dom, react-state-management, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 315 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TaskOn Management App
A simple and efficient **Kanban-style** task management web application built with **React**, **Tailwind CSS**, **CSS**, and **TypeScript**. This app allows users to manage and organize their tasks in an intuitive drag-and-drop interface. You can add, update, delete, move, and mark tasks as completed, simulating a Kanban board.
This project is built to reflect the **Tecbridle Foundation Cohort**, incorporating key concepts learned during the React.js, including TypeScript for type safety and enhanced development.
## Features
- Add tasks with titles and descriptions.
- Drag and drop tasks between different columns (e.g., "To Do", "In Progress", "Completed").
- Edit existing tasks.
- Delete tasks.
- Mark tasks as completed.
- Responsive design using **Tailwind CSS**.
- Custom styling with **CSS** for enhanced visuals.
- LocalStorage (optional): Store tasks locally on the browser for persistence.
- Strong type safety using **TypeScript**.
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Tailwind CSS**: A utility-first CSS framework for creating custom designs quickly.
- **CSS**: For custom styling to enhance the user experience.
- **TypeScript**: A superset of JavaScript that adds type safety and enhanced development experience.
- **LocalStorage** (optional): For storing tasks locally on the browser.
## Demo
Check out a live demo of the project (replace with your actual link once deployed).
## Installation
### 1. Clone the repository:
```bash
git clone https://github.com/Khulisojohn/TaskOn-management-app.git
cd TaskOn-management-app
```
### 2. Install dependancies
```bash
npm install
```
### 3. Run the development server
```bash
npm run dev
```
## Usage
1. **Add a Task**: Click the "Add Task" button in any column (e.g., "To Do"), enter the task title and description, and click "Save".
2. **Drag and Drop Tasks**: Drag tasks between columns like "To Do", "In Progress", and "Completed" to simulate the Kanban flow.
3. **Edit a Task**: Click the "Edit" button next to any task to modify its title or description.
4. **Delete a Task**: Click the "Delete" button to remove a task.
5. **Mark Task as Completed**: Check the task as "Completed" directly from the board.
## Tailwind CSS Configuration
This project uses **Tailwind CSS** for utility-first styling. It is configured with a `tailwind.config.js` file for custom themes and breakpoints.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- **React** for providing a fantastic framework for building UI.
- **Tailwind CSS** for its amazing utility-first design system.
- **CSS** for the final touch on custom styling.
- **TypeScript** for type safety and a better development experience.
- **Techbride Foundation** for the orpotunity and learning materials that helped shape the foundation for this project.