A full-featured task management web application built with React 19 and TypeScript. Tasks are organized in a weekly calendar view, filterable by tags, with complete authentication including OAuth (Google & Slack).
Backend repository: (https://github.com/HRulier/todo-api)
- Weekly dashboard — navigate week by week, tasks displayed by day
- Create, edit, and delete tasks with due dates and tags
- Custom tag system for task categorization
- Full authentication flow: sign up, sign in, email verification
- Password management: forgot / reset / change password
- OAuth login via Google and Slack
- JWT authentication with automatic token refresh
- User profile management and account deletion
- Responsive UI with animations (Motion)
| Category | Technology |
|---|---|
| Framework | React 19, TypeScript |
| Build tool | Vite 6 |
| Routing | React Router 7 |
| Data fetching | TanStack Query v5 |
| HTTP client | Axios |
| Forms | React Hook Form |
| Styling | SCSS Modules |
| Animations | Motion |
| Notifications | React Toastify |
| Date utilities | date-fns |
| Containerization | Docker (multi-stage), Nginx |
| CI/CD | GitHub Actions |
- Node.js >= 20
- A running instance of the backend API
Copy .env.example and fill in the required values:
cp .env.example .env| Variable | Description |
|---|---|
VITE_API_URL |
Base URL of the backend API |
npm install
npm run dev # development server → http://localhost:5173
npm run build # production build (output: /dist)docker build -t todo-client --target development .
docker run --name todo-client -p 5173:5173 \
--env-file .env.local \
-v .:/app \
-v /app/node_modules \
todo-clientdocker build -t todo-client --target production .
docker run --name todo-client -p 5173:5173 \
--env-file .env.production \
todo-client
The app is available at http://localhost:5173.