Skip to content

README.md

Latest commit

 

History

History
351 lines (268 loc) · 8.44 KB

README.md

File metadata and controls

351 lines (268 loc) · 8.44 KB

📝 QuickNote-App - Task Management Application

A clean, responsive web-based note-taking and task management application built with vanilla HTML, CSS, JavaScript in the frontend, FastAPI used as backend framework and MySQL as database.

HTML5 CSS3 JavaScript

🎯 About

A modern, full-stack note management application built with FastAPI and MySQL, featuring a responsive web interface for creating, reading, updating, and deleting notes with advanced search and categorization capabilities.

✨ Features

✨ Core Features:

  • 📝 Create Notes - Add new notes with title, content, and category
  • 📖 View All Notes - Display all notes in a clean card-based layout
  • ✏️ Edit Notes - Update note content, title, and category
  • 🗑️ Delete Notes - Remove notes permanently
  • 🌐 REST API - Full-featured API endpoints for programmatic access

🛠️ Technologies Used

Backend

  • Framework: FastAPI (Python web framework)
  • Database: MySQL 8.0.44
  • ORM: SQLAlchemy 2.0.46
  • Database Driver: PyMySQL
  • Template Engine: Jinja2
  • Environment Management: python-dotenv

Frontend

  • HTML5 - Semantic markup
  • CSS3 - Modern styling with gradients
  • JavaScript - Interactive functionality

Python Version

  • Python 3.14+

🚀 Getting Started

Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, Edge)
  • Basic understanding of HTML/CSS/JS (for modifications)

Installation

Prerequisites

  • Python 3.14+
  • MySQL 8.0+ (running and accessible)
  • pip (Python package manager)

Step 1: Clone the Repository

git clone https://github.com/nushant22/QuickNote-App.git
cd QuickNote-App

Step 2: Create Virtual Environment

python -m venv .venv

# On Windows
.venv\Scripts\activate

# On macOS/Linux
source .venv/bin/activate

Step 3: Install Dependencies

pip install -r requirements.txt

Step 4: Configure Environment Variables

Create a .env file in the project root with the following variables:

DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password_here
DB_NAME=QuickNote_App

Note: Make sure MySQL is running and the database QuickNote_App exists.

Step 5: Run the Application

python -m uvicorn QuickNote_App.main:app --reload

The application will be available at: http://127.0.0.1:8000

📂 Project Structure

QuickNote-App/
Project_Note/
├── database/
│   ├── __init__.py
│   ├── db.py
│   └── models.py
├── routes/
│   ├── __init__.py
│   └── note.py
├── schemas/
│   ├── __init__.py
│   └── note.py
├── templates/
│   ├── edit.html
│   └── index.html
├── __init__.py
├── main.py
├── README.md
└── requirements.txt

Usage

Web Interface

Create a Note

  1. Navigate to http://127.0.0.1:8000/notes/
  2. Fill in the form with:
    • Title: Note title
    • Content: Note content
    • Category: Select or type a category
  3. Click "Add Note"

View Notes

  • All notes are displayed as cards on the main page
  • Each card shows: Title, Content Preview, Category, Creation Date, and Actions

Edit a Note

  1. Click the "Edit" button on any note card
  2. Update the note details
  3. Click "Update Note"

Delete a Note

  • Click the "Delete" button on any note card
  • The note will be permanently removed

Usage

Web Interface

Create a Note

  1. Navigate to http://127.0.0.1:8000/notes/
  2. Fill in the form with:
    • Title: Note title
    • Content: Note content
    • Category: Select or type a category
  3. Click "Add Note"

View Notes

  • All notes are displayed as cards on the main page
  • Each card shows: Title, Content Preview, Category, Creation Date, and Actions

Edit a Note

  1. Click the "Edit" button on any note card
  2. Update the note details
  3. Click "Update Note"

Delete a Note

  • Click the "Delete" button on any note card
  • The note will be permanently removed

REST API Endpoints

Base URL

http://127.0.0.1:8000/notes

GET Endpoints

Get All Notes

GET /api/all

Response:

[
  {
    "id": 1,
    "title": "My First Note",
    "content": "Note content here...",
    "category": "Personal",
    "created_at": "2026-01-22T10:30:00",
    "updated_at": "2026-01-22T10:30:00"
  }
]

Get Note by ID

GET /api/{id}

Example: GET /api/1

Search Notes

GET /api/search?query=search_term

Example: GET /api/search?query=python

POST Endpoints

Create Note

POST /api/create
Content-Type: application/json

{
  "title": "New Note",
  "content": "Note content",
  "category": "Work"
}

PUT Endpoints

Update Note

PUT /api/update/{id}
Content-Type: application/json

{
  "title": "Updated Title",
  "content": "Updated content",
  "category": "Updated Category"
}

DELETE Endpoints

Delete Note

DELETE /api/delete/{id}

Example: DELETE /api/delete/1

Database Schema

Notes Table

CREATE TABLE note (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  content LONGTEXT NOT NULL,
  category VARCHAR(100),
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Configuration Details

Database Connection

  • Host: 127.0.0.1 (localhost)
  • Port: 3306 (default MySQL port)
  • Driver: PyMySQL
  • Connection String: mysql+pymysql://user:password@host:port/database

Important Notes

  • The password is URL-encoded in the connection string (special characters like @ are encoded as %40)
  • Connection pooling is enabled with pool_pre_ping=True to maintain connection health
  • Tables are automatically created on application startup if they don't exist

Error Handling

The application includes comprehensive error handling:

  • Database connection errors are caught and logged
  • Invalid input data is validated using Pydantic schemas
  • HTTP exceptions are properly formatted with status codes
  • Missing resources return 404 responses
  • Internal errors return 500 responses with error details

Development

Running in Development Mode

python -m uvicorn QuickNote_App.main:app --reload

The --reload flag enables auto-restart on file changes.

Running in Production Mode

python -m uvicorn QuickNote_App.main:app --host 0.0.0.0 --port 8000 --workers 4

Future Enhancements

  • 🔐 User authentication and authorization
  • 📧 Email notifications
  • 🏷️ Tags in addition to categories
  • 📎 File attachments
  • 🎨 Note color coding
  • 📱 Mobile app
  • 🔄 Real-time collaboration
  • 📊 Notes statistics and analytics
  • 🌙 Dark mode UI
  • 🔔 Reminders and notifications

Troubleshooting

Database Connection Issues

Problem: Can't connect to MySQL server

  • Solution: Ensure MySQL is running and credentials in .env are correct

Port Already in Use

Problem: Address already in use

  • Solution: Change the port: python -m uvicorn QuickNote_App.main:app --port 8001

Import Errors

Problem: ModuleNotFoundError

  • Solution: Ensure virtual environment is activated and dependencies are installed

CORS Issues

Problem: Cross-origin requests fail

  • Solution: Configure CORS in main.py if needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

📧 Contact

Nushant Ghimire

⭐ If you find this project useful, please give it a star!

💡 Have suggestions? Open an issue

Last Updated: February 2026