A full-stack Todo application built with React, Node.js, Express, and PostgreSQL. This project demonstrates a modern web application with a clean, responsive UI and RESTful API architecture.
- ✨ Create, read, and delete todos
- 🎨 Modern, responsive UI design
- 🔄 Real-time updates
- 🎯 RESTful API architecture
- 💾 PostgreSQL database integration
- 🛡️ Error handling and validation
- React.js
- Vite
- CSS3 with modern styling
- Fetch API for HTTP requests
- Node.js
- Express.js
- PostgreSQL
- pg (PostgreSQL client for Node.js)
Before running this project, make sure you have the following installed:
- Node.js (v14 or higher)
- PostgreSQL
- npm or yarn
- Clone the repository:
git clone https://github.com/yourusername/todo-app.git
cd todo-app- Install backend dependencies:
cd backend
npm install- Install frontend dependencies:
cd ../frontend
npm install- Set up the database:
CREATE DATABASE servertest;- Create the required table:
CREATE TABLE todo(
todo_id SERIAL PRIMARY KEY,
description VARCHAR(255)
);- Create a
.envfile in the backend directory with the following variables: DB_USER=your_postgres_username DB_HOST=localhost DB_NAME=servertest DB_PASSWORD=your_postgres_password DB_PORT=5432
- Start the backend server:
cd backend
npm start- Start the frontend development server:
cd frontend
npm run dev- Open your browser and navigate to
http://localhost:5173
The backend provides the following RESTful API endpoints:
GET /todos- Get all todosPOST /todos- Create a new todoDELETE /todos/:id- Delete a todo by ID
- Modern, responsive UI with smooth animations
- Real-time updates without page refresh
- Form validation and error handling
- Clean component architecture
- RESTful API design
- PostgreSQL database integration
- Error handling middleware
- CORS enabled for cross-origin requests