Task Flow is a project and task management web application designed to help users organize their projects, manage tasks, and track progress. With an intuitive interface and flexible task management features, Task Flow allows users to create projects, add tasks, and assign tags to categorize them effectively. Tasks can be updated or deleted, and all changes are saved to local storage.
- Project Management: Create, update, and delete projects with ease.
- Task Management: Add, update, and delete tasks within projects.
- Tags: Assign tags to tasks for better organization.
- Persistent Storage: Automatically saves projects and tasks in the browser’s local storage.
- Responsive UI: User-friendly, mobile-responsive interface.
- React: Frontend library for building UI components.
- Redux: State management for handling global state and ensuring consistent data flow.
- Redux Toolkit: Simplified Redux logic and middleware.
- React Router: For page navigation and handling routes.
- TailwindCSS: Styling framework for responsive and modern UI components.
- LocalStorage: Browser-based storage for persisting user data.
Before you begin, ensure you have met the following requirements:
- Node.js: You will need Node.js installed. You can download it from here.
- npm: Comes with Node.js, but ensure it is up to date.
- Clone the repository:
git clone https://github.com/your-username/task-flow.git
- Navigate to the project directory:
cd task-flow
- Install the dependencies:
npm install
- Start the development server:
npm start
- Open your browser and visit:
http://localhost:3000
-
Create a New Project:
- On the "Project" page, click the "Add" button to create a new project. You will be prompted to enter a project name.
-
Add Tasks:
- Within a project, click the "Add Task" button to create a new task. Each task can be tagged with multiple labels for better organization.
-
Update and Delete:
- Tasks and projects can be updated or deleted as needed.
-
Persistence:
- All projects and tasks are saved automatically in local storage. Your tasks will be available even if you close and reopen the browser.
- /src/components: Reusable UI components like the navigation bar, forms, and buttons.
- /src/store: Redux slices for managing the state of projects and tasks.
- /src/pages: Contains the main pages of the application, like Project and Task views.
- /src/common: Utility functions like DataManager to handle local storage interactions.
Contributions are welcome! If you'd like to improve this project, feel free to fork the repository and submit a pull request.
- Fork the repository.
- Create your feature branch:
git checkout -b feature/my-feature
- Commit your changes:
git commit -m "Add some feature"
- Push to the branch:
git push origin feature/my-feature
- Open a pull request.
Data Structure Arragement:
Storage-Name : [{
projectName: 'common tasks',
tasks: [
{
task: String,
tags: Array of String,
status: Boolean || null // Default -> null, null: pending | true: done | false: failed
},
{...}
],
},
{
projectName: String
tasks: Array of Object
},
{...}
]
We are excited to invite developers to contribute to the TaskFlow Project! 🚀
TaskFlow is a minimal project management tool built using React JS, React Redux, Tailwind CSS, and hosted on GitHub Pages. It allows users to create, update, and manage projects and tasks.
This is a great opportunity for developers to work on a real-world project and enhance their skills in front-end development and state management. We need contributors who are passionate about improving the following:
- UI Improvement: Create a sleek and better-suited UI for the website.
- Responsiveness: Make the website responsive and mobile-friendly.
- Appwrite Integration: Implement Appwrite for authentication and storage.
- Other Improvements: Find bugs, refactor code, or add new features that improve the project.
- React JS
- React Redux
- Tailwind CSS
- Appwrite (for storage & auth)
- Git (version control)
- GitHub Pages (for hosting)
- Fork this repository.
- Create a new branch for your feature or improvement.
- Submit a pull request.
- After your contribution is merged, message me with the following details:
- Contribution Status: What did you work on?
- GitHub Profile: Your GitHub username.
- LinkedIn ID: Your LinkedIn profile.
- Description: Brief description of your contribution.
Everyone who contributes will receive a Certificate of Participation to acknowledge their effort! While the certificate may not hold formal value, it will show your participation in this collaborative learning opportunity.
Ready to contribute? Let’s build a better TaskFlow together! 💻🌟
This project is open source and available under the MIT License.
For any queries, feel free to reach out:
- Project Creator: Joyal George K J
- Email: joyalgeorge1111@gmail.com