30 Projects in 30 Days – Build Real-World Frontend Skills
30 Projects in 30 Days helps you build real-world frontend projects using HTML, CSS, and JavaScript, improving your logic, interactivity, and confidence through daily hands-on practice.
Day 1 : Login & Signup System
User signup and login system with validated credentials and a clean UI.
Concepts: DOM manipulation, form validation, LocalStorage.
Day 2 : Multi-Step Form
A step-by-step form with progress tracking and input validation.
Concepts: DOM manipulation, form validation, progress tracking.
Day 3 : OTP Verification UI
Generates an OTP shown via alert and verifies it through a popup-based input UI.
Concepts: DOM manipulation, modal UI, random OTP generation, input handling.
Day 4 : Search Autocomplete Feature
Displays real-time search suggestions with keyboard navigation and highlighted matches.
Concepts: DOM manipulation, debounce, keyboard events, array filtering.
Day 5 : Pagination Component
A reusable pagination UI with page navigation and active state handling.
Concepts: DOM manipulation, event handling, conditional rendering.
Day 6 : Accordion / FAQ
Expandable FAQ component with smooth animations and single-item toggle behavior.
Concepts: DOM manipulation, event handling, UI state management
Day 7 : Tabs Navigation System
Switches content dynamically using a tab-based navigation UI.
Concepts: DOM manipulation, event handling, UI state management.
Day 8 : Star Rating Component
Interactive star-based rating UI with hover and click functionality.
Concepts: User interaction, dynamic styling, state handling.
Day 9 : Notification Toast System
Displays temporary notifications with auto-dismiss and manual close support.
Concepts: Dynamic UI updates, timed interactions, visual feedback.
Day 10 : Skeleton Loader (Shimmer Effect)
Displays animated placeholders while content is loading.
Concepts: Loading states, shimmer animation, UI feedback, conditional rendering.
Day 11 : User Profile Card Generator
Generates a user profile card dynamically from form inputs.
Concepts: User input processing, live UI generation, state-based rendering.
Day 12 : Comment System (Add / Edit / Delete)
Interactive comment feature allowing users to add, update, and remove comments dynamically.
Concepts: Real-time content management, interactive data flow, UI behavior logic.
Day 13 : Like / Dislike Counter System
Interactive counter system that tracks user likes and dislikes in real time.
Concepts: User interaction handling, state tracking, dynamic count updates, UI feedback.
Day 14 : Image Upload Preview Tool
Displays a real-time preview of an uploaded image before submission.
Concepts: File handling, FileReader API, dynamic rendering, UI feedback.
Day 15 : Email Subscription Form
Simple email subscription form with validation and feedback messages.
Concepts: Form validation, user input handling, dynamic UI feedback.
Day 16 : Shopping Cart (Add / Remove / Total)
Interactive cart with real-time item management and total calculation.
Concepts: Cart state handling, dynamic price calculation, user interaction logic.
Day 17 : Coupon Code Validator
Validates coupon codes and applies discounts dynamically.
Concepts: Conditional logic, user input validation, dynamic price calculation.
Day 18 : Age Calculator
Calculates a user’s age in years, months, and days based on date of birth.
Concepts: Date manipulation, input validation, dynamic UI updates.
Day 19 : Loan EMI Calculator
Calculates monthly loan EMI based on amount, interest rate, and tenure.
Concepts: Mathematical calculations, form handling, dynamic UI updates.
Day 20 : Form Auto-Save (Local Storage)
Automatically saves form input data and restores it on reload.
Concepts: LocalStorage usage, input event handling, persistent UI state.
Day 21 : Country Info Finder (API)
Fetches and displays real-time country information using a public REST API.
Concepts: API integration, fetch API, async data handling, dynamic UI rendering.
Day 22 : News App
Displays latest news headlines dynamically based on search input.
Concepts: Async data handling, dynamic UI rendering.
Day 23 : GitHub User Finder
Searches and displays GitHub user profiles using the GitHub public API.
Concepts: API fetching, async data handling, dynamic UI rendering.
Day 24 : Crypto Price Tracker
Displays real-time cryptocurrency prices using a public crypto API.
Concepts: API integration, async data fetching, dynamic UI updates.
Day 25 : Stock Price UI (Mock / API)
Displays stock prices and daily changes using mock data with API-ready structure.
Concepts: UI state management, dynamic rendering, data simulation.
Day 26 : Job Search App (API)
Searches and displays job listings dynamically using a public jobs API.
Concepts: API integration, async data fetching, dynamic UI rendering.
Day 27 : Recipe Finder App
Searches and displays recipes dynamically using a public food API.
Concepts: API integration, async data fetching, dynamic UI rendering.
Day 28 : Language Translator
Translates text between multiple languages using a public translation API.
Concepts: API integration, async data handling, form handling, dynamic UI updates.
Day 29 : IP Address Tracker
Tracks and displays location details of an IP address using a public API.
Concepts: API integration, async data fetching, dynamic UI rendering.
Day 30 : Public Holiday Finder
Finds and displays public holidays by country and year using a public API.
Concepts: API integration, async data fetching, dynamic UI rendering.