Video Demo:https://youtu.be/m7MGDL9XsK8
Study Hub is a simple yet powerful web-based notes management application built using Flask, SQLite, HTML, CSS, and Bootstrap 5.
Study Hub allows users to:
- Add new study notes with a title and detailed content.
- View all saved notes organized in a beautiful card layout.
- Edit existing notes easily.
- Delete notes (with a confirmation to prevent mistakes).
- Search through notes by title using the search bar.
- Enjoy a responsive and user-friendly interface on both desktop and mobile devices.
app.py: The main Flask application handling all routing, database interactions, and template rendering.templates/layout.html: Base layout that other pages extend. It includes the navigation bar, search functionality, and footer.templates/index.html: Main page for adding, viewing, and managing notes.templates/edit.html: Edit page where users can modify existing notes.static/style.css: Custom styles applied on top of Bootstrap for better aesthetics.notes.db: SQLite database file (automatically generated when running the app for the first time).
- Bootstrap 5 was used for styling and responsive layout, ensuring a modern and clean design.
- The application uses Flask’s Jinja2 templating to organize HTML efficiently with template inheritance (
layout.htmlas the base). - SQLite was chosen for simple, file-based database management.
- Confirmation pop-up when deleting a note to avoid accidental deletions.
- Search functionality for easy and fast retrieval of notes based on titles.
- Custom CSS was added to polish the visual experience further.
- Python 3
- Flask
- SQLite3
- HTML5
- CSS3
- Bootstrap 5
- Run
app.pyto start the Flask server. - The app automatically creates a
notes.dbdatabase on the first run. - Navigate to
http://localhost:5000in your browser. - Add, view, edit, or delete notes directly in the interface.
- Bootstrap 5 for clean styling and responsive layout.
- Jinja2 Templates for maintainable and modular HTML.
- Confirmation Prompts before deletion to prevent data loss.
- Custom CSS enhancements for a better UI/UX.
This project, Study Hub, demonstrates a real-world CRUD (Create, Read, Update, Delete) web application. It was developed fully by me, following the skills and knowledge learned through CS50x.
I hope Study Hub can be a small but meaningful contribution towards making study organization easier!