Ultimate React JS Course: Build 15 Web Projects with React

Build a responsive calendar app in React that lets users view and navigate months and years, add, edit, and delete events via a popup with time and description.

Set up a React project by installing Node.js, scaffolding with Veet, creating a calendar app, installing dependencies with npm, and running the dev server to view the app.

Create the JSX for a calendar app in a React project by structuring divs with class names, headers, weekdays, days, and an interactive event pop-up with inputs and buttons.

Configure global styles for a calendar app using Google Fonts Pepper's Neue and Conferta, convert sizing to rems, and apply clamp typography with responsive grid.

Build a dynamic calendar in React that renders weekdays and days from state. It computes the days in the current month and enables prev/next month navigation with year adjustments.

Learn to display and manage an event popup on calendar dates, validate dates, and add new events with time and text, updating state and rendering on the right.

Learn to edit and delete events in a React calendar, preserving IDs for edits and using map, filter, and sort by date to update the events, plus time handling.

Make the calendar app responsive across desktop, tablet, and mobile by applying CSS media queries, flex layout changes, centered content, and responsive typography with clamp and aspect ratio adjustments.

Build a live weather app with React.js that fetches and displays real-time data for any location. Include temperature, humidity, wind, error handling for invalid locations, and dynamic backgrounds.

Set up a React weather app with Node.js and npm using Veet, install node modules, and run the dev server at localhost:5174.

Learn to create JSX by merging JavaScript and HTML to build React components, including a weather app UI with Font Awesome icons, image imports, and humidity, wind, and temperature data.

Explore styling a weather app in React with Lilita One from Google fonts, global resets, rem-based sizing, and flexbox layouts for a gradient container and gradient temperature text.

Fetch real-time weather data from Open Weather Map API using a URL with city name and API key, convert kelvin to Celsius with metric units, and display location.

Learn to make weather data dynamic by wiring an input to update the location in URL, handle input change and enter key, and use useEffect for default weather.

Update the weather visuals by mapping weather types to images and backgrounds, using a weather images object and a data.weather[0].main selector to drive dynamic styles for the app and container.

Create a dynamic date in a React app by defining current date, days and months arrays, compute day, month, and date with get methods, and render formatted date in JSX.

Handle bad requests by checking search data.cod against 200 and render a not found message. Show a loader during React search using useState and useEffect, with a loading gif.

Build a React app using Quotable API to fetch quotes, display text and author, and manage a responsive favorites section with add, delete, and no duplicates.

Set up and start a React project, install Node.js, use Veet to scaffold, run npm run dev, and review the created quotes app structure and files.

Create a quotes page in a React project by building JSX markup, applying className, integrating box icons, and styling with custom CSS and Google fonts.

Fetch data from the quotable API and replace the hard coded quote and author with dynamic state managed by React's useState, then update on button click.

Build and style a favorites section in a react app by creating JSX for favorite quotes, adding a delete button, and using flexbox and gradient css.

Learn to build a functional favorites section in a React app by toggling visibility with state, adding and removing quotes, and preventing duplicates, all while ensuring responsive design.

Enable responsive design across desktop, tablet, and mobile by adding css media queries, adjusting font sizes and aspect ratios, and implementing a customized WebKit scrollbar for the favorites section.

Build an AI chatbot app from scratch with real-time chat, typing indicators, emoji picker, local storage, and a responsive layout across devices.

Set up a react project with git, nodejs, npm, and vite using the react template, install dependencies, and run the dev server to launch the AI chatbot.

Create and customize the app's start page using a chatbot start component in React, building JSX, styling with a gradient button, and integrating font libraries via CDN links.

Create the chatbot app page by building the JSX structure and styling, with a chat list, chat window, prompts, responses, typing indicator, and a message form.

Navigate between the start and chat pages by toggling isChatting in app.js. Use handleStartChat and handleGoBack to conditionally render the chatbot start or chatbot app and pass the respective props.

Create and manage a chat state in a React app, handle user input and send messages, render chats and messages, and enable enter-to-send for a dynamic chat experience.

Learn to create and manage chats in a React AI chatbot app by adding new chat creation, tracking the active chat, and deleting chats, with unique identifiers via uuid.

Integrate the ChatGPT API into a React app to generate AI-powered responses, add a typing indicator, and implement smooth scrolling for a dynamic, user-friendly chatbot.

Add an emoji picker to the chat app using the emoji mod library, toggle visibility with state, handle emoji selection to append to input, and style for proper layout.

Store chats and messages in the browser's local storage to preserve history across sessions, using JSON.stringify and JSON.parse, and load them with useEffect to restore the active chat.

Master responsive web design by making the chat app adapt to tablet and mobile through media queries, a menu toggle, and a state-driven chat list visibility.

Build a from-scratch react color converter app that converts between rgb and hex, with a live color preview and real-time updates as you tweak rgb sliders or enter hex codes.

Set up a modern React project from scratch with vite, NodeJS, and npm, configure folder structure, install dependencies, and run the dev server to build a Color converter app.

Create a color converter in React with RGB and hex inputs, manage state via useState, and update the color preview using inline styles and change handlers.

build a color converter in react that converts rgb to hex and hex to rgb with a clamp helper and padStart for two-digit hex values, ensuring real-time sync between formats.

Build a responsive React news and blogs app with search, category filters, and local storage bookmarks; add a weather widget using the Openweathermap API, a calendar, and blog CRUD features.

Set up a react project using NodeJS, npm, and the Vit template to build the News and Blogs app, then run npm run dev to preview locally.

Set up the news and blogs app in React by establishing the initial layout and global styles, including a container and news blocks, and applying Google fonts.

Build the basic news and blogs app layout by structuring the news JSX file and styling with CSS, including header, nav, headline, news grid, my blocks, weather, and calendar.

Style a header with a logo and a growing search bar using CSS flexbox, focus transitions, and a font awesome magnifying glass icon for a polished top area.

Style and customize the navigation bar for a news and blogs app, including a user section and category links, while handling images in React and applying responsive css with flexbox.

Style and customize the news content section, including a headline with an overlaid title and a six-item news grid, using JSX, images, CSS grid, and responsive styling.

Fetch real-time news data in a React app using the Genius API and Axios, moving from hard-coded content to dynamic latest headlines, article metadata, and category filtering.

Fetch live headlines from the genius API with Axios, manage headline and news state with React hooks, and render a dynamic headline with a six-item news grid.

Build a dynamic React news app that fetches articles by category using the news API, with updates triggered by the effect hook and clickable category links that re-fetch content.

Add a search feature to the news and blogs app by implementing search input and search query state. Update the query on form submission to fetch articles from the API.

Build a news modal that opens from a headline or grid click to show article details with an overlay, image, title, source, date, content, read more, and close behavior.

Implement a functional modal by adding show model and selected article state, a handle article click function, and pass show, article, and onclose as props to render dynamic article details.

Create and style a bookmarks modal component to save and display favorite news articles, using hard coded jsx content, images, titles, and a delete button in a list.

Add a functional bookmarks feature to the news app, storing articles in state and displaying them in a modal with interactive icons, paving the way for local storage persistence.

Implement local storage to persist bookmarks across refreshes and browser reopen, using setItem with JSON.stringify and getItem with JSON.parse to initialize a bookmarks array in useEffect.

Create a weather widget by building the JSX structure, integrating the OpenWeatherMap API, handling user input, and displaying dynamic weather data with box icons.

Style and customize the weather widget with CSS and flexbox, applying padding, gaps, typography, and icon styling to create an appealing, user-friendly component, with real-time data fetched via Openweathermap API.

Build a functional weather widget in React by fetching real time data from the Openweathermap API, with state management, search, default location, error handling, and dynamic icons.

Create a calendar component by building the JSX structure, styling with CSS, and adding navigation, weekdays, day grid, and a highlighted current date to integrate into the app.

Build a fully functional React calendar by managing current date, month, and year with state, rendering weekdays and days dynamically, and enabling month navigation.

Design a React footer with JSX content labeled News and Blogs app, and a copyright notice using ©. Style with flexbox, padding, and Bebas Neue typography.

Explore a dynamic blog section in the React course, enabling users to create, view, edit, and delete posts via a user-driven interface navigated from the main page image.

Create a styled blog post form in the blog section to add new posts with a title, text, and image. Implement JSX and styling to integrate with the app.

Build interactive navigation between news and blog sections in a React app. Use state variables and conditional rendering to show the new post form and switch views.

Create and customize the my blogs section inside the news component, building JSX content and styling with flexbox, images, and edit and delete post buttons.

Submit and display user posts from the blog section in the news component, including image, title, and content. Show a placeholder image when no image is uploaded.

This lecture enhances the blog section with a submission message and form validation for title and content, then navigates back to the news page after posting.

Persist blog posts by saving them to the browser's local storage and loading them on component mount. Use JSON.stringify/parse, setBlocks, and the useEffect hook to ensure data survives page refreshes.

Learn how to display blog posts in a modal by creating a blocks model component, opening it on post click, and closing it with a dedicated on close handler.

Learn to edit and delete blog posts, validate image size to one megabyte, manage editing state with selected post, and keep changes in local storage for a seamless blog section.

Master responsive web design by transforming a sandbox app with CSS media queries, clamp-based sizing, and flexible grid layouts to look great on desktop, tablet, and mobile.

Build a responsive, interactive FAQ accordion with expand/collapse, light/dark themes via local storage, and an expand all feature using smooth transitions and scroll into view with Tailwind.

Set up a new React app named faq app with git and npm, install Tailwind CSS v4, and configure Tailwind directly without a separate config file for a simpler setup.

Set up the FAQ page header, gradient title, and description, then implement the FAQ list with an expand all button and a dark mode toggle using Tailwind CSS classes.

Implement a dark and light theme toggle in a React app using Tailwind CSS v4, employing useState and useEffect to toggle the dark class and swap sun/moon icons.

Display and dynamically render the questions and answers by importing faq data, mapping through questions, and rendering each answer with an expandable, accessible button, styled for light and dark modes.

Implement an interactive FAQ with expand and collapse by tracking the open item and an expand all state. Use toggle item, refs for height, and smooth scrolling.

Learn to persist user theme preferences with local storage by initializing dark mode from saved data, storing toggles with JSON.stringify and JSON.parse, and applying the saved theme on reload.

Preview a modern header built with React and Tailwind CSS, featuring a dark and light mode toggle, gradient text, interactive badges, and a responsive code-editor style visual.

Initialize a fresh React project with Vite, configure Tailwind CSS v4, import Tailwind in index.css, create a hero component, and run the dev server to preview the app.

Create a dark and light theme toggle in a React app using state and useEffect, persist the choice with block storage, and auto-match system preference while refining the hero section.

Create an eye catching hero background by adding a grid of lines and dots using layered absolute divs, z-index, and tailwind isolation to keep elements stacked correctly.

Design a responsive hero banner using Tailwind to showcase new and next generation design system badges, a gradient headline, a descriptive paragraph, two call-to-action buttons, avatars, and ratings.

Build a responsive hero with two bouncing badges, implement a dark/light theme toggle in React with Tailwind CSS, and persist the choice via local storage, including system theme detection.

Build a dynamic shopping cart with React state management and Context API, rendering products, implementing add to cart, quantity controls, remove, total price, local storage, and responsive Tailwind styling.

Create a React application with Tailwind CSS, install and configure Tailwind, and clean up files. Set up data in data/index.js and images in public, then run npm run dev locally.

learn to pull product data from assets/data/index.js, merge hoodies, jackets, and shoes into all products, and render a responsive three-column grid using map and unique IDs.

Create a reusable CartItem component to render each product in the grid, pass item prop, destructure id, name, image, and price, and connect with app.js using key item.id.

Master the React context API to manage and share shopping cart state across components by creating a cart context, provider, and useCart hook, and integrating it across the app.

Build a React shopping cart with add to cart, remove, and quantity controls using a cart context. Implement conditional rendering and wire the components across product cards.

Implement the update quantity function in the cart context to adjust item quantities via plus and minus buttons, updating state with setAllItems and map, and removing items when needed.

Design and style a shopping cart ui in React using Lucid React icons, install the library, create a shopping cart component, and implement dynamic open-close behavior with useState.

Creates a card items state and filters the item list from context to show only cart items, then maps them for rendering in reverse order with from cart styling.

Create and manage a total price state, compute it with reduce over cart items, and format it as currency, while showing live item count and auto-opening the cart.

Add local storage to the shopping cart in the React course by building setItem, getItem, getParsedItem, and removeItem utilities to persist and restore cart data across reloads.

Implement responsive tailwind utilities to resize the h1 and product grid across breakpoints, achieving three columns on large screens, two on medium, and one on small devices.