# 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:
```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