Use these tables for portfolio, lab, or course work in the browser. Each row: S. no., Project idea, Core idea, Small description (numbers 1–45). Pair with backend project ideas when you add APIs; compare with Python and Java idea pages. Continue with HTML simple projects and the Full stack development hub on Nikhil Learn Hub.
Basic frontend web apps
Responsive layout, DOM events, localStorage, timers, and public APIs with fetch.
| S. no. | Project idea | Core idea | Small description |
|---|---|---|---|
| 1 | Personal portfolio website | HTML, CSS, responsive design | Responsive portfolio for skills, projects, and contact. Flexbox/Grid and media queries for mobile. |
| 2 | To-do list app | DOM manipulation, localStorage | Add, edit, delete, complete tasks; persist in localStorage; filter All / Active / Completed. |
| 3 | Calculator | JavaScript events, eval() / Function | Basic operations; decimals, clear, backspace, and keyboard support. Display calculation history. |
| 4 | Countdown timer | setInterval, Date | Target date/time; days, hours, minutes, seconds; browser notification when done. |
| 5 | Weather widget | Fetch API, async/await | OpenWeatherMap (or similar): temp, condition, humidity, wind; city search or geolocation. |
| 6 | Random quote generator | Fetch API, DOM | Quotes from API or local array; author; tweet/share link for the quote. |
| 7 | Color palette generator | JavaScript, CSS variables | Random 5-color palettes; hex display; lock colors; copy hex to clipboard. |
| 8 | Digital clock | setInterval, Date | Live HH:MM:SS; 12/24-hour toggle; show date. |
| 9 | Tip calculator | Forms, math | Bill, tip %, party size; tip and total per person; live results. |
| 10 | BMI calculator | Forms, math | Height (cm/ft) and weight (kg/lb); BMI and category (underweight–obese). |
| 11 | Drum kit | Keyboard events, Audio API | Press keys (A, S, D, F, …) for drum sounds; button animation on key press. |
| 12 | Rock, paper, scissors game | Events, game logic | User clicks; computer random choice; results and win/loss/tie counts; animated emojis or icons. |
| 13 | Notes app | CRUD, localStorage | Create, edit, delete, search; auto-save; markdown or basic rich text. |
| 14 | Pomodoro timer | setInterval, state | 25 min work / 5 min break; start, pause, reset; sound on complete. |
| 15 | Image slider / carousel | JavaScript, CSS transitions | Auto-play; prev/next; dots; pause on hover; touch/swipe on mobile. |
Intermediate frontend web apps
REST APIs, cart state, charts, drag-and-drop, and richer UI patterns.
| S. no. | Project idea | Core idea | Small description |
|---|---|---|---|
| 16 | Movie search app | REST API, async/await | OMDB or TMDB: posters, ratings, date, plot; pagination or infinite scroll. |
| 17 | E-commerce product page | Cart, localStorage | Filters (category, price, rating); cart CRUD; total; persist cart. |
| 18 | Quiz app | State, timers | MCQ with per-question timer; score; review answers; difficulty levels. |
| 19 | Expense tracker | Chart.js, localStorage | Income/expense entries; balance; pie chart; date filter; export CSV. |
| 20 | Weather dashboard | Multiple APIs | Current + 5-day forecast; humidity, wind, UV; favorite cities; weather-themed background. |
| 21 | GitHub profile finder | GitHub API, async/await | Search users; profile, repos (stars/forks), followers; contribution-style viz if available. |
| 22 | Recipe finder app | Recipe API, pagination | Search by ingredient/name; cards with image, time, difficulty; detail view. |
| 23 | Memory card game | Game logic, CSS animation | Match pairs; moves, time, high score; flip animation; shuffle; win modal. |
| 24 | Typing speed test | Timer, text compare | Timed passage; WPM, accuracy; high scores. |
| 25 | Markdown previewer | Markdown (marked.js) | Textarea + live HTML preview; GitHub-flavored markdown. |
| 26 | Chat interface (frontend only) | Mock data, simulated realtime | Bubbles, typing indicator, mock replies; optional history in localStorage. |
| 27 | Drag-and-drop Kanban board | Drag & Drop API, state | Columns To Do / In Progress / Done; task CRUD; drag between columns; save to localStorage. |
| 28 | Music player | HTML5 Audio, playlist | Play/pause, next/prev, progress, volume; playlists; album art. |
| 29 | Form validator | Regex, live validation | Signup: email, password strength, confirm match; inline errors; submit gated until valid. |
| 30 | News aggregator | News API, infinite scroll | Categories (business, tech, sports); headlines, images, source; open article in new tab. |
Advanced frontend web apps
WebSockets, WebRTC, PWAs, 3D, and large SPA-style UIs (often with a framework).
| S. no. | Project idea | Core idea | Small description |
|---|---|---|---|
| 31 | Social media dashboard | Realtime, WebSockets | Metrics (likes, shares, comments); live updates (e.g. Socket.io); dark/light theme. |
| 32 | Video conferencing UI | WebRTC, getUserMedia | P2P video; camera/mic controls; screen share; text chat; participant list. |
| 33 | Real-time collaborative editor | CRDT, WebSockets | Docs-style editor (e.g. Yjs or ShareDB); remote cursors; live sync. |
| 34 | E-commerce store (full frontend) | Redux / Zustand / Pinia | Listings, cart, checkout, order summary, payment UI; filter, sort, search, wishlist; auth UI. |
| 35 | Data visualization dashboard | D3.js, realtime data | Bar, line, pie, scatter; filters, drill-down, export; WebSocket updates. |
| 36 | PWA (progressive web app) | Service workers, manifest | Installable app; offline shell; push notifications; background sync (where supported). |
| 37 | Drag-and-drop form builder | React/Vue, state | Drag fields onto canvas; JSON schema output; preview and submit. |
| 38 | Resume builder | jsPDF, html2canvas | Multi-step form; PDF export; templates; live preview. |
| 39 | Travel itinerary planner | Leaflet / Mapbox | Map markers; routes and distances; save trips; reorder stops by drag-and-drop. |
| 40 | Stock trading dashboard (simulated) | WebSocket, charts | Live-style prices; simulated orders; portfolio; watchlist; candlestick charts (e.g. TradingView-style lib). |
| 41 | Portfolio with Three.js | Three.js 3D | Interactive 3D scenes, particles, transitions; projects in 3D space. |
| 42 | Expense tracker with budgeting | Complex state, persistence | Budgets, recurring items, goals, insights; charts; CSV import/export. |
| 43 | Authentication system UI | JWT, route guards | Login, register, forgot password, OAuth (Google/GitHub); protected routes; refresh; profile. |
| 44 | Admin dashboard | CRUD tables, filtering | Sortable, searchable, paginated tables; users/roles; analytics cards and charts. |
| 45 | Full-stack clone (frontend) | Large SPA architecture | UI for a major app style (Twitter, Instagram, Reddit): infinite scroll, engagement, profiles, search, notifications. |
Total: 45 frontend project ideas (15 basic, 15 intermediate, 15 advanced). Respect API keys and CORS; for WebRTC and notifications, handle permissions and HTTPS. Prefer accessible, keyboard-friendly controls on every screen.