A full-stack Todo application with user authentication, built with React + TypeScript on the frontend and a custom Node.js REST API backed by PostgreSQL.
- React — component-based UI
- TypeScript — static typing
- SCSS — component styles
- Vite — build tool and dev server
- Node.js — custom REST API
- PostgreSQL — relational database
- bcrypt — password hashing
- JWT — token-based authentication
- Cypress — end-to-end testing
- ESLint + Prettier + Stylelint — code quality and formatting
- ✅ Create, read, update and delete todos
- ✅ Toggle individual todo completion status
- ✅ Toggle all todos at once with
toggleAll - ✅ Rename todos via double-click inline editing
- ✅ Filter todos by status: All / Active / Completed
- ✅ User registration and login with JWT
- ✅ Passwords hashed with bcrypt
- ✅ Loading overlays during API requests
- ✅ Error notifications for failed API calls
react_todo-app-with-api/
├── src/
│ ├── api/ # API request functions
│ ├── components/ # React components
│ ├── context/ # Global state (Context API)
│ ├── hooks/ # Custom hooks
│ ├── types/ # TypeScript interfaces
│ └── utils/ # Helper functions
├── cypress/ # E2E tests
├── public/
├── .env # Environment variables
├── vite.config.ts
├── tsconfig.json
└── package.json
- Node.js v18+
- PostgreSQL running locally
# Clone the repository
git clone https://github.com/MaksOther/react_todo-app-with-api.git
# Navigate to the project
cd react_todo-app-with-api
# Install dependencies
npm installCreate a .env file in the root (or update the existing one)
# Start the frontend
npm start
# Start the backend (if separate)
npm run serverThe app will be available at http://localhost:5173
npm run cypress:open- User registers with email and password
- Password is hashed with bcrypt before storing in PostgreSQL
- On login, server validates credentials and returns a JWT token
- Token is stored on the client and sent with each API request
- Protected routes require a valid token