📝 Notebook To-Do List App

A notebook-inspired full-stack To-Do application built to demonstrate real-world frontend–backend integration, clean React state management, REST APIs, and PostgreSQL persistence.

🚀 Overview

This project focuses on building a realistic CRUD application with a polished UI and a clear data flow between frontend, backend, and database. It emphasizes correct architectural decisions such as derived state, separation of concerns, and secure configuration handling.

✨ Features

• Notebook-style UI with ruled paper effect
• Add, edit, delete tasks
• Mark tasks as completed or pending
• Confetti and sound feedback on task completion
• Live task statistics (completed vs pending)
• Fixed statistics bar at the bottom
• Persistent storage using PostgreSQL

🛠️ Tech Stack

Frontend: React (Vite), CSS, Fetch API
Backend: Node.js, Express.js
Database: PostgreSQL (pg)
Tools: dotenv, GitHub Pages

📂 Project Structure

• frontend

  • src
    • components
    • services
    • TodoApp.jsx
    • index.css
  • package.json
  • vite.config.js

• backend

  • routes
    • tasks.js
  • db.js
  • server.js
  • .env.example
  • package.json

⚙️ Local Setup

Backend:

• npm install
• create a .env file using .env.example
• node server.js

Database: CREATE TABLE tasks ( id SERIAL PRIMARY KEY, title TEXT NOT NULL, completed BOOLEAN DEFAULT false );

Frontend:

• npm install
• npm run dev

🔒 Security

Environment variables are managed using .env files, excluded from version control, with .env.example provided for reference. No secrets are committed.

👩‍💻 Author

Tanvi