46 lines
1.6 KiB
Markdown
46 lines
1.6 KiB
Markdown
# 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 |