12

TaskHub

TaskHub is a robust and feature-rich todo board application that seamlessly integrates Node.js server, Express server, Sequelize ORM, Redux, React, Chakra UI, PostgreSQL database, and JWT-based authentication to provide users with a powerful and secure task management experience.

Backend Github Repo: todo-app-backend

TaskHub is a robust todo board application designed to streamline task management with a user-friendly interface. Built on a tech stack featuring Node.js, Express, React.js, Redux, Sequelize ORM, TypeScript, and PostgreSQL, TaskHub offers a seamless experience for organizing and prioritizing tasks.

Screenshot 2023-12-28 001935 Screenshot 2023-12-31 013923 Screenshot 2023-12-31 013900

Features 🌟

Login and Signup 🔐

Users can securely authenticate themselves through a JWT-based authentication system. TaskHub provides a hassle-free signup process, ensuring data integrity and user privacy.

User-wise Board Screen 🖥️

Upon login, users are greeted with a personalized board screen, displaying their tasks and columns. This tailored experience enhances efficiency and user satisfaction.

Add Column ➕

Easily customize your task board by adding new columns to categorize tasks. This feature allows users to tailor their workflow to suit their specific needs.

Add Tasks 📝

TaskHub simplifies task creation with a straightforward interface. Users can swiftly add tasks to their designated columns, minimizing time spent on administrative tasks.

Edit Tasks ✏️

Effortlessly update task details with the edit feature. Users can modify task names, descriptions, and other information to keep their tasks accurate and up-to-date.

Delete Tasks 🗑️

Remove unnecessary tasks with the delete feature. TaskHub allows users to declutter their board by easily removing tasks that are completed or no longer relevant.

Reorder Tasks 🔄

Effortlessly reorder tasks within columns to prioritize work. TaskHub's intuitive drag-and-drop functionality makes task management a breeze.

Change Task Column 🔄

Adapt to evolving priorities by moving tasks between columns. This flexibility ensures that TaskHub remains a dynamic tool for users with ever-changing task lists.

Tech Stack ⚙️

Frontend

Backend

Getting Started 🚀

To get started with TaskHub, follow these steps:

  1. Clone the frontend repository git clone https://github.com/education-tech-stack/todo-list-frontend.
  2. Clone the backend repository git clone https://github.com/education-tech-stack/todo-list-backend.
  3. Set up Postgres by using docker-compose or any method that you prefer. Just get the Postgres URL.
  4. Backend:
    • cd todo-list-backend get into the directory.
    • Install dependencies using yarn.
    • Create a file .env and add two variables named SECRET_KEY and SEQUELIZE_DATABASE. Add any string as it's used for JWT generation and the Postgresql URL that you have respectively.
    • Optional: If you want some seed data run yarn seed.
    • Run dev as yarn dev.
  5. Frontend:
    • cd todo-list-frontend get into the directory.
    • Install dependencies using yarn.
    • Create a file .env and add a variable named VITE_SERVER. Add backend URL string as http://localhost:8000/api. Change the port as per your requirement.
    • Run dev as yarn dev.

Other Commands 🛠️

Check package.json for other commands.

Commit Commands 📦

This project uses commitlint to ensure that commit messages are conventional-changelog compliants.

To help you build more efficient commit messages, you can use the commitizen package by running this command :

yarn cz

License 📄

TaskHub is licensed under the MIT License. Feel free to use, modify, and distribute it according to the terms of the license.