1.

Bookmark Manager
Problem Statement: Users often struggle to organize and retrieve important links
efficiently. A centralized, searchable system with tags and notes can improve
productivity.

Core Features:
 Save and organize bookmarks by URL, title, notes, and tags
 Search bookmarks using keyword and tag filters
 Copy, edit, delete, or visit saved links
 User login/logout with authentication

Backend (FastAPI):
 /register, /login, /logout
 /bookmarks/ (GET, POST)
 /bookmarks/{id} (GET, PUT, DELETE)
 /tags/ (GET, POST)
 /search/ (query: keyword, tag)

Database Schema (SQLite):

 Users: id, username, hashed_password
 Bookmarks: id, user_id, title, url, notes, created_at
 Tags: id, name
 BookmarkTags: bookmark_id, tag_id

Frontend (HTML + Bootstrap):

 Bookmark cards with "Copy", "Visit", "Edit", "Delete"
 Tag filters as pills/chips
 Modal for new bookmark creation

Layout Overview
 Clean and responsive 1-column layout (centered on large screens, stacked on
mobile).
 Bootstrap container, row, and card components used extensively.
 Navbar for navigation and search.
 Bookmark cards with action buttons.
 Modals for adding/editing bookmarks.

Navbar (Fixed Top)

  Left: App name/logo.
 Center: Search bar (keyword, tag search).
 Right: Add bookmark button and user authentication links.

2. Flashcard Learning App

Problem Statement: Students need a spaced-repetition-based flashcard app to
help memorize concepts effectively over time. A web-based flashcard app that
helps users create, organize, and review flashcards efficiently using a simple UI and
spaced repetition techniques. It supports decks by topic, flip-style flashcards, and
tracks progress over time.

Core Features:
Deck Management: Create, rename, delete decks (e.g., "Physics", "Spanish
Vocabulary").
Card Management: Add, edit, delete cards within a deck.
Study Mode: Flip-style UI (front/back)
Track correct/incorrect answers
Show progress (e.g., % correct, # cards reviewed)
User Authentication: Sign up, log in, access only your decks/cards.
Progress Dashboard (Optional Advanced Feature): Visual analytics (bar charts,
streaks)

Backend:
 /register, /login, /logout
 /decks/ (GET, POST)
 /cards/ (GET, POST, PUT, DELETE)
 /study/{deck_id} – randomized card delivery
 /progress/ – track performance

Database Schema:
 Decks: id, user_id, name
 Cards: id, deck_id, front, back, last_reviewed, score
 Users

Frontend:
Navbar
| FlashCard App | Decks | Study | + New Card | Login/Profile |

 Left: App logo/title

 Center: Nav links to "Decks", "Study"
 Right: User menu
Deck List Page
 Cards: Each deck shown as a card with:
o Deck name
o Total cards
o Last studied date
o “Start Studying” and “Edit Deck” buttons

Add/Edit Flashcards Page

A form to create or update a card:
 Deck selection dropdown
 Textareas for front and back sides
 Save button

Study Mode UI (Flashcard Flip View)

Flip-style card UI (centered):
 Front shows a question

✅
 On click, flips to back (answer)
 Then user clicks Correct or ❌ Wrong
Progress Analytics Page (Optional)
Visual feedback on:
 Total cards reviewed
 Correct vs incorrect answers
 Daily/weekly activity chart
3. Blog CMS with Markdown
Problem Statement: Writers, bloggers, and content creators often need a minimal,
distraction-free blogging platform that supports Markdown for content formatting,
along with role-based access to manage content. Traditional blog systems can be
either overly complex or lack markdown support.
Core Features:
Admin Features
 Dashboard with posts, tags, categories
 Add/edit/delete posts using Markdown
 Assign tags and categories
 Manage users and assign roles
Writer Features
 Write posts using a WYSIWYG Markdown editor
 Live preview of Markdown as rendered HTML
 View own published or draft posts
Reader Features
 Read blog posts on the public blog page
 Browse by category or tag
 View author profiles
Backend:
 POST /login – Login user
 GET /logout – Logout session
 GET/POST /posts – Fetch or create posts
 PUT/DELETE /posts/{id} – Update or delete post
 POST /markdown-preview – Render live Markdown
 GET /tags and GET /categories – Metadata for filtering

Database Schema:
Users:
- id (PK)
- email
- password (hashed)
- role (admin, writer, reader)
Posts:
- id (PK)
- title
- content_md (Markdown)
- content_html (rendered)
- author_id (FK to Users)
- status (draft, published)
- created_at
- updated_at
Tags:
- id, name
Categories:
- id, name
PostTags:
- post_id, tag_id

Frontend:
| Blog CMS | Home | Write | Dashboard | Profile/Login |
Navbar:
 Shows “Write” for Writers, “Dashboard” for Admins
 Login/Register
 Use Bootstrap navbar, dropdown, nav-link

Public Blog View (Reader-Friendly)

 Clean card layout for posts
 Each card: Title, short snippet, author, tags
 Pagination or infinite scroll

Editor UI - Add “Save Draft” and “Publish” buttons

4. Invoice Generator
Problem Statement: Freelancers frequently need to create and send invoices for
services rendered. Manual methods like Excel or Word.
Build a web application for freelancers to:
 Create professional invoices with tax.
 Download them as PDFs.
 Store and manage previous invoices.
Invoice Creation
 Add freelancer and client details.
 Add multiple line items (description, quantity, price).
 Enter tax percentage (auto-calculation).
 Real-time invoice preview.

PDF Generation: Download invoices in a clean, professional layout using HTML →

PDF conversion.

Invoice Management
 Save invoices in SQLite database.
 View, delete, and re-download past invoices.

User Interface: Responsive design using HTML, CSS, and Bootstrap.

Backend:
 /clients/, /invoices/, /items/
 /generate-invoice/{id} – returns rendered PDF
 /invoice-history/

Schema: Clients, Items, Invoices, Invoice Items

Frontend:
Navbar
 Brand
 Links: Invoices, Clients, New Invoice, Logout
 Display username when logged in

5. Contact Form System with Dashboard

Problem Statement: Many businesses and personal websites need a simple yet
efficient way to receive, store, view, and manage contact form submissions.
Instead of relying on third-party services, this system allows website owners or
admins to view and manage contacts from a dashboard interface, keeping the data
private, organized, and easily accessible.

Core Features:
User Authentication
 /register – Create a new admin account (optional in single-user mode).
 /login – Login page for admin.
  /logout – Logout endpoint.

Contact Form Endpoints

 /contact (POST): Public endpoint to submit a contact form.
 /dashboard/messages/ (GET): View all contact messages (admin only).
 /dashboard/messages/{id} (GET, PUT, DELETE): View, edit, or delete a single
contact message.

Search & Filtering: /dashboard/search/ – Search messages by name, email, and

message content.

Schema:
 users Table
 contact_messages Table

Frontend:
Public Contact Form Page
 Input fields: Name, Email, Subject, Message
 Form validation and success alert using Bootstrap.

Admin Dashboard (after login)

 Clean, responsive layout.
 Navbar with links: Dashboard, Search, Logout.
 Message entries shown as rows in a table.
 Each entry has buttons: View, Edit, Delete, Mark as Responded.
 A badge/pill to show whether a message is "Responded" or "Pending".
 Placed in the navbar or above the message list.
 Search by keywords or filter by tag.

6. Habit Tracker App

Problem Statement: People struggle to build habits. A simple interface with visual
tracking can motivate users to stay consistent.

Core Features:
 Create habits
 Mark daily completion
 Streak tracking and summaries

Backend:
  /habits/, /track/{habit_id}, /summary/
 Scheduled job (optional) to reset daily status

Schema:
 Habits, DailyStatus (habit_id, date, is_done)

Frontend:
 Calendar view (colored status)
 Summary dashboard (weekly/monthly)

7. Simple Online Store

Problem Statement: A small business or individual may need a basic e-commerce
site to showcase and sell products online.

This Simple Online Store allows for:

 Browsing products
 Adding items to a cart
 Checkout flow
 Admin dashboard for managing products and orders
Core Features:
User Authentication
 /register – Create user accounts (optional for guest checkout)
 /login – Login users
 /logout – Logout

Product & Store Endpoints

 /products/ - View all products
 /products/{id} - View single product
 /cart/ (GET, POST) - View and update cart
 /cart/remove/{id} (POST) - Remove product from cart
 /checkout/ (POST) - Place order

Admin Endpoints
 /admin/products/ (GET, POST) - View & add products
 /admin/products/{id} (PUT, DELETE) - Edit or delete product
 /admin/orders/ (GET) - View all orders

Schema:
  Users
 Products
 cart_items
 Order
 OrderItems
Frontend:
Public Product Page (/products)
 Display products as Bootstrap cards
 Each card shows:
o Product name, price, image
o Button: Add to Cart
o Link to View Details

Cart Page (/cart)

 List items in a table
 Show quantity, subtotal, and total
 Allow item removal and quantity update

Checkout Page (/checkout)

 Summary of items
 Collect shipping details (optional)
 Place order button

Admin Dashboard
 View/add/edit/delete products
 View all orders (with status control)
 Manage inventory

8. Content Scheduler
Problem Statement: Creators and social media managers need a tool to plan,
track, and schedule content (blogs, posts, videos). This app helps organize
publishing timelines with deadlines, tags, and status tracking.

Core Features
 Register/Login/Logout for secure access
 Create scheduled content entries
 Set publish date, platform, tags, and status (e.g., Draft, Scheduled, Published)
 View calendar-style and list-style dashboards
 Edit/Delete content entries
 Filter by tag, platform, or date
Database Schema
content_items
id, title, platform, content_type eg:blog, post, video
publish_date DATE,
status eg: Draft, Scheduled, Published,
notes,
tags,
created_at
users
id, username, password

Backend:
 /register - SignUp
 /login – Signin
 /logout - Signout
 /dashboard/ - Calendar/List view of content
 /content/ - Create new content item
 /content/{id} – View/Edit/Delete Content item

Frontend:
 Dashboard: cards in date order with filters for platform/status
 Calendar: Use Bootstrap + table/grid to display upcoming posts
 Modals: Add/edit content with input fields for all data

9. Reading Log App

Problem Statement: Readers want to track their reading habits and organize their
book lists. Helps users track their reading habits, log books/articles, take notes, set goals,
and review progress.

Core Features:
 Add entries with book/article title, author, pages read, start/end date
 Add personal notes or review
 Mark items as “Reading”, “Completed”, or “Abandoned”
 Dashboard with stats: total read, in-progress, etc.
 Search by title, author, or tag

Backend:
 /register – Create Account
 /login - Login
 /logout – Logout
  /books – Viewing books list
 /books/add – Add a book
 /books/{id} – View/Edit/Delete Book

Schema:
reading_entries
id, title, author, status eg:Reading, Completed, Abandoned
pages_read, total_pages, start_date,end_date, notes, tag
users
id, username, password

Frontend:
Reading Cards: Display book title, status, and progress bar
Status Badges: Bootstrap badge showing “Completed” or “In Progress”
Search & Filter: By tag or title
Modals: For adding/editing entries
10. Portfolio Website Builder
Problem Statement: Non-technical users need a simple CMS to manage their
personal portfolio and blog. Allows users (especially freelancers or developers) to
build a personal portfolio website by entering details into a dashboard instead of
hard coding.

Core Features:
 Admin panel to manage site content
 Portfolio/project section - Create a profile: name, bio, social links, profile image
 Add projects: title, description, tech used, live/demo links
 Blog integration (optional)

Backend:
 /login – Admin Login
 /logout – Logout
 /admin/profile – Edit Profile
 /admin/Projects – Add, View Projects
 /admin/projects/{id} - Edit, Delete project

Schema:
 Profile, Projects, Users

Frontend:
 Home Page: Profile header, project list in cards or grid
 Projects: Tech used (Bootstrap badges), links to GitHub/Demo
 Admin UI:
 Navbar for managing profile/projects
 Bootstrap forms for editing content
 Responsive layout using container, row, and card