Harshit-Sachdev/To do list har/todo-list/README.md

Full-Stack Todo Application

This is a complete Todo management system that transitions from a simple frontend to a full-stack architecture using the PEAN stack (PostgreSQL/MySQL, Express, Angular, Node).

Features

• Frontend: Responsive UI built with Angular 17.
• Backend: RESTful API powered by Node.js and Express.
• Database: Persistent storage using MySQL 5.5.
• Full CRUD: Support for Adding, Viewing, Toggling, and Deleting tasks.
• Security: Configured with CORS and Helmet middleware.

Project Structure

• /src: Angular frontend source code.
• /backend: Node.js server and API logic.

Setup Instructions

1. Database Configuration

Ensure MySQL is running and execute the following SQL:

CREATE DATABASE todo_db;
USE todo_db;

CREATE TABLE todos (
    sno BIGINT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    `desc` TEXT,
    active BOOLEAN DEFAULT TRUE
);

### 2. Run the Backend
- Navigate to the backend folder: cd backend
- Install dependencies: npm install
- Start the server: node index.js The server will run on http://localhost:3000

### 3. Run the Frontend
- Return to the root folder: cd ..
- Install dependencies: npm install
- Start the app: ng serve The app will be available at http://localhost:4200

## Key Implementation Details
- HttpClient: Used for communication between Angular and the Node.js API.
- MySQL Pool: Implemented connection pooling for efficient database queries.
- Data Persistence: Data is saved to MySQL, ensuring it survives browser refreshes and server restarts.

Developed by Harshit Anand Sachdev