ProjectFlow

A React + TypeScript task and project management app built with Vite. The app lets users sign up, log in, manage projects and tasks, track deadlines, view progress analytics, and receive real-time project updates through WebSockets.

Project Video

https://drive.google.com/file/d/1JX1IOpml755ggzPxqOozvqTfOnG7N9EL/view?usp=sharing

Features

• User authentication with access/refresh token handling
• Project creation, editing, deletion, priority assignment, and deadline tracking
• Task management inside each project
• Real-time project and task updates with WebSocket syncing
• Project search, filtering, and deadline sorting
• Timer modal for focused work sessions
• Calendar view for project deadlines
• Analysis dashboard with project and task charts
• User profile and avatar updates
• Online/offline toast notifications
• Responsive UI built with modular CSS

Tech Stack

• React 19
• TypeScript
• Vite
• React Router
• Redux Toolkit
• TanStack React Query
• Axios
• Framer Motion
• Highcharts / ECharts / Nivo / Recharts
• FullCalendar
• React Hook Form + Zod
• ESLint

Getting Started

Prerequisites

• Node.js 20 or newer
• npm
• A compatible backend API running locally

The frontend currently expects the backend to be available at:

http://localhost:8000/todo

WebSocket updates are expected at:

ws://localhost:8000/ws/user/:userId/

Installation

npm install

Run the Development Server

npm run dev

Vite will print the local development URL in the terminal, usually:

http://localhost:5173

Project Structure

src/
  api/                 Axios client and API request functions
  assets/              Images, fonts, and audio assets
  components/          Reusable UI components
  features/            Redux feature slices and shared domain types
  hook/                Custom React hooks
  pages/               Route-level pages
  store/               Redux store, hooks, and middleware
  utils/               Utility helpers
  websocket/           WebSocket syncing logic

Main Routes

Route	Page
/	Home page with projects and tasks
/login	Login page
/signup	Sign-up page
/analysis	Project and task analysis dashboard
*	Not found page

Backend API Notes

This app uses a REST API for authentication, users, projects, and tasks. Important endpoints used by the frontend include:

• POST /auth/register/
• POST /auth/login/
• POST /auth/refresh/
• GET /user/:id/
• PATCH /user/:id/
• GET /project/
• POST /project/
• GET /project/:id/
• PATCH /project/:id/
• DELETE /project/:id/
• GET /project/:id/tasks/
• POST /project/:id/tasks/
• PATCH /project/:id/tasks/:taskId/
• DELETE /project/:id/tasks/:taskId/

Notes for Development

• Authentication data is stored in localStorage under the auth key.
• Expired access tokens are refreshed automatically when a refresh token is available.
• React Query caches project data and invalidates it after project or task updates.
• Real-time events update cached project data and user profile information.
• The API base URL is currently hard-coded in src/api/http.tsx.
• The WebSocket URL is currently hard-coded in src/websocket/useGlobalWS.ts.

License

This project is currently marked as ISC in package.json.