Ultimate React JS Course: Build 15 Web Projects with React

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.

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.

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

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.

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.

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.

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.

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 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.

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 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 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.

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.

Create a weather widget by building the JSX structure, integrating the OpenWeatherMap API, handling user input, and displaying dynamic weather data with box 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.

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 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.

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.

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.

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 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.