Hands-On JavaScript Bootcamp: Build 20 Real World Projects

Build an intelligent flashcard web app that creates, manages, and reviews flashcards from images using OCR with Tesseract.js; store data locally with a React/Node.js stack.

Set up a react project with npx create react app, install leucite, react, and tesseract.js, then create src/components flashcard.js, image-upload.js, and study.js, and run npm start.

Build the homepage layout with a navigation bar and logo, manage a study again state, render flashcards or placeholders with a flashcard component that flips automatically after three seconds.

Build an image-to-flashcards workflow in React by uploading an image, extracting text with tesseract.js OCR, splitting text into question–answer pairs, and storing flashcards in local storage for reuse.

Manage flashcard flow by removing cards, updating flash and study again lists, moving cards to study again, and syncing changes to local storage.

Build a movie mania web app to search and sort TMDb movie data, featuring popular, upcoming, now playing detail pages, and responsive design using Node.js, React, Tailwind CSS, and Axios.

Set up a React app, install dependencies, and configure Tailwind; organize src into components, pages, and images, then integrate the TMDB API to fetch now playing, popular, and upcoming movies.

Build a dynamic movie website with a homepage, navbar, carousel, and reusable movie cards, supporting popular, upcoming, now playing, and search results pages through react router and axios data fetching.

Create now playing, popular, and upcoming movie pages using React hooks, TMDB API data, and Axios, rendering movie cards and a results page with sorting and genre filtering.

Read the movie id from the url parameter with useParams. Fetch details with axios from tmdb and render a backdrop, poster, and panel with title, genres, release date, overview.

Build the mood tracker Emoji Track app with Node.js, React, Tailwind CSS, and Chart.js to log daily moods, visualize mood history with charts, and export data as CSV or PDF.

Build a web mood tracker app with React.js to track moods, gain insights, and export data, setting up with npx create-react-app, tailwind, and src structure of components, images, and pages.

Create an interactive home page by building mood cards, handling clicks to set mood, collecting reasons and tags, and storing submissions for routing to feedback.

Import and render a navbar, route with react router dom, and build a dashboard. Create insights from mood data using common and recent mood components, and CSV and PDF exports.

Visualize mood over time with a line chart mapping dates to mood scores. Show common reasons with a pie chart linking family, friends, and office to colors.

Build a responsive gym website in react with home, plans, trainers, contact, and book a session pages, using react router dom, forms, and tailwind css for styling.

Set up a react app with create react app, install routing and icons, build a data-driven navbar and footer, and implement a scroll-triggered navbar background with hashed routes.

Builds the homepage by composing reusable components—main header, services, FAQs, offer, and testimonials—with a fixed background image, hover effects, and a data-driven FAQ and testimonial navigation.

Build a plans page and a trainers page by creating reusable header and card components, mapping plan and trainer data from a database, and displaying features, pricing, and trainer socials.

Create a contact and book session pages in React, manage form data with useState, update fields via a single handleChange, and reset on submit.

Build a responsive personal portfolio with React and Tailwind CSS, fetch data from GitHub to showcase projects, skills, and experience, and present a professional online resume.

Create a portfolio with a new React app, install Axios and Tailwind CSS, configure Tailwind, and set up a GitHub token to fetch repos and user data.

Create a horizontal homepage with slide-based navigation and a smooth scroll using a container reference. Sync the navbar color to the active slide and provide interactive dots for navigation.

Create the introduction component that fetches GitHub profile details and repo count via the GitHub API, then render animated SVG circular skill indicators using useEffect and useRef.

Create an experience timeline in React by mapping data to an alternating horizontal timeline, and build a projects grid that fetches GitHub repositories and shows project cards with hover language.

Create paws for life, a pet adoption platform that connects adopters with street animals, using node.js, react.js, tailwind css, and firebase authentication, firestore, and cloud storage for images.

Set up a new React app with routing and Firebase, configure auth, Firestore, and Storage for paws for life. Build a navbar with login and signup modals and route pages.

Create a home page with a header that scrolls to available pets and supports adopting and donating, plus an add-pet form uploading images to Firebase storage and Firestore.

Fetches available pets from Firestore, displays them with images and details, and enables adoption requests via a detail page with a form and toasts using routing.

build an AI conversational assistant named Eclipse AI with real-time code assistance, an interactive chat, and a history sidebar in a responsive web app built with Node.js and React.

Set up a new React app from scratch, install dependencies, and run npm start; organize src into components, config, and pages, and configure the Gemini API key and generation settings.

Build a responsive home interface with a toggleable sidebar and header in a Gemini API project, using React and react-router to navigate to about and manage chat history in home.js.

Build a homepage chat component with responsive layout, local storage input history, and a history-driven UI that shows user and bot messages via Gemini API and markdown rendering.

Learn to render markdown in React with a code block renderer using a code highlighter, include copy-to-clipboard and local history, and build an about page with a sidebar and header.

Build a Travel Gist React blog app with Firebase Authentication, Firestore, and Firebase Storage to create, view, and comment on travel posts, track views, images, and a responsive carousel.

Set up a React blog project with Firebase authentication and storage, install dependencies like react-router-dom and react-icons, configure Firebase, and implement routes for home, auth, and blog detail.

Build a dynamic navbar and authorization page with react, react-router-dom, and firebase. Implement login and signup flows using firestore users collection, handle authentication, and fetch current user to personalize navbar.

Create a new block post with title, content, and image using react and firebase, storing author, createdAt, and views; display via homepage carousal.

Develop a blog detail page by fetching blog data and comments from Firestore using the url id, incrementing views, and showing image, title, author, timestamp, and an authenticated comment section.

Create a resume app with React and Tailwind that lets students add and save sections like basic info, work experience, and education, then export to pdf via local storage.

Learn to set up a React-based resume generator with Tailwind CSS, install and configure dependencies, build components and pages, enable PDF export, and route between views.

Set up home page by rendering the navbar and resume form with tailwind styles, and implement a resume editor with sections for basic info, work experience, projects, education, and achievements.

Create a dynamic resume form page with a JavaScript editor managing sections like basic info, work experience, projects, education, and achievements, saving updates to local storage.

Convert stored resume data into a printable, customizable resume using color themes, draggable sections, and a pdf export via react to print.