https://github.com/teneplaysofficial/taskflow
TaskFlow is a responsive, drag-and-drop Kanban board built with React. Organize tasks in customizable containers with data saved in localStorage for persistent tracking. Mobile-friendly, TaskFlow ensures seamless task management across devices, offering a personalized and efficient workflow experience.
https://github.com/teneplaysofficial/taskflow
localstorage react-hooks react-router reactjs responsive-design tailwindcss vitejs
Last synced: 2 months ago
JSON representation
TaskFlow is a responsive, drag-and-drop Kanban board built with React. Organize tasks in customizable containers with data saved in localStorage for persistent tracking. Mobile-friendly, TaskFlow ensures seamless task management across devices, offering a personalized and efficient workflow experience.
- Host: GitHub
- URL: https://github.com/teneplaysofficial/taskflow
- Owner: TenEplaysOfficial
- Created: 2024-11-04T09:18:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-30T11:17:05.000Z (over 1 year ago)
- Last Synced: 2025-01-30T12:23:39.614Z (over 1 year ago)
- Topics: localstorage, react-hooks, react-router, reactjs, responsive-design, tailwindcss, vitejs
- Language: JavaScript
- Homepage: https://tene-taskflow.vercel.app
- Size: 89.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Flow
TaskFlow is a responsive, drag-and-drop Kanban board built with React, allowing users to organize tasks within customizable containers for a personalized workflow. Task data is saved in localStorage for persistence across sessions, ensuring users never lose track of their progress. With a mobile-friendly design, TaskFlow offers a seamless task management experience across all devices
# Project Setup Guide
Follow these steps to set up the project and install necessary dependencies.
### 1. Create a New Vite Project
```bash
npm create vite@latest
```
- **Description:** Initializes a new Vite project for fast front-end development.
### 2. Install All Project Dependencies
```bash
npm i
```
- **Description:** Installs all dependencies listed in `package.json`.
### 3. Install React Router DOM
```bash
npm i react-router-dom
```
- **Description:** Adds dynamic routing to React applications.
### 4. Install React Icons
```bash
npm i react-icons
```
- **Description:** Provides popular icons as React components.
### 5. Install Sonner
```bash
npm install sonner
```
- **Description:** Lightweight toast notifications for a better user experience.
### 6. Install Tailwind CSS and Plugins
```bash
npm install -D tailwindcss postcss autoprefixer
```
- **Description:** Sets up Tailwind CSS with PostCSS and Autoprefixer for optimized styling.
### 7. Initialize Tailwind CSS Configuration
```bash
npx tailwindcss init -p
```
- **Description:** Generates Tailwind CSS configuration files.
### 8. Install Prettier and Tailwind Prettier Plugin
```bash
npm install -D prettier prettier-plugin-tailwindcss
```
- **Description:** Ensures consistent code formatting and integrates with Tailwind CSS.
### 9. Insatll
```bash
npm install react-beautiful-dnd
```
- **Description:** Drag-and-drop functionality allows users to click and hold an item to move it to a different location or container within a user interface, enabling intuitive reordering and organization of elements without the need for traditional controls like buttons.