React Marathon: 70 Hands-On React Web Development Projects

Build a React photo editor using CSS filter effects like blur, contrast, brightness, and grayscale. Manage state with useState to update image styles via property objects and the spread operator.

Build a beautiful image editor with HTML, CSS, and Reactjs, adjusting contrast, brightness, saturation, and gray skin, using a link input, and a fully responsive design for all devices.

Learn to build an image editor with React and CSS, using a filter object and useState to control brightness, contrast, grayscale, saturation, hue-rotate, and blur on an image tag.

Learn to apply css filters to images in React, using a range input to adjust brightness, contrast, blur, and grayscale and apply the filter via style.

Explore how to implement and combine css filters like brightness, contrast, grayscale, saturation, and blur in a React app, using input ranges and styling to create interactive image effects.

Update the image filter styling in a React app by applying brightness, contrast, saturation, grayscale, sepia, and blur, with a wrapper and mode options, plus announcement and navbar sections.

Wire up announcement and navbar components in a React project, update header text, and add a photo editor with an image link input that updates the displayed image.

Use the input onChange event to update a state string holding the image link and pass it as the background prop to dynamically change the image.

Apply CSS to the glass header to create an interactive navbar, using flex display, justify-content center or space-between, align-items center, color, font-weight, padding, and a border radius.

Learn to style an image with wrappers, flex layouts, a background color, padding, 95% width, object-fit: cover, and a thin 1px white border on the image and filters.

Add CSS styling to filters in a React app by styling filter spans with inline-block display, black background, white text, padding and margins, and make the UI responsive across devices.

Learn to build a small online code-sharing clone to showcase HTML, CSS, and JavaScript skills. Edit CSS styles and manage three text areas using useState and useEffect.

Build a CodePen-style React editor with HTML, CSS, and JavaScript panels and a live output. Use useState to update the output as you type.

Learn to set up a React app with Create React App, prune unused public files, and use index.js, app.js, and index.css to run on localhost port 3001.

Create three text areas and manage their content with useState, so their state updates as you type. Use useEffect to set a two-second timer that governs live output.

Explore implementing the useEffect hook with useState to drive a timer that updates code output and styling in a live preview, using setTimeout to trigger changes after a short delay.

Discover how an iframe loads another HTML page within the document to separate code from output, enabling embedded content in the parent page during web development.

Add an iframe to display output while building a header with a logo and input and output sections, configuring class names and layout to render live code results.

Add and style header using css, include an image with src and alt attributes, import index.css, and set a black header with white text while mastering absolute and relative positioning.

Add the tile store image and refine header styling using flex display, apply display tweaks, object filter, and uppercase transformation, then style inputs and text areas in header part 2.

Style the header, text areas, and output iframe with CSS, adjust backgrounds, borders, spacing, and scrollbar design, and save changes with local storage.

Add a local storage object to persist your input and output across refreshes using a localStorage key; initialize from storage, JSON.stringify, and useEffect to save changes.

Build a Game of Thrones app in React with a home, characters list, and character detail pages; learn routing with React Router DOM and consuming APIs for data and dialogues.

Create a Game of Thrones character app in React that routes between a character list and detail pages, pulling characters and famous quotes from two APIs using useState and useEffect.

Create a header section in the project by editing header.js, using a snippet extension in VS Code, and testing on localhost to render a hero area with a paragraph.

Import an image and render it with an img tag using a src and alt attribute, then style the header in index.css with a black background and white text.

We add a background image to the header and animate it to preview the header design. Then we apply the image to the index page to see the result.

Build a navbar in app.js with a logo image and links for home and characters, then style it using css flex, space-between alignment, and uppercase 12px menu items.

Write the main.js code to fetch data from the Game of Thrones API using fetch, await the JSON response, store characters with useState, and render them with map inside useEffect.

Apply the map function to render a list from API data in a React app, displaying each character's full name, title, and image, and enhance visuals with Bootstrap styling.

Style map items by adding a main wrapper and a project card with a title, text, and full name, rendering item.title for each character, and applying CSS for uppercase headings.

Style the map display by applying CSS to the main container and project cards, including hover color changes and image sizing. Use Bootstrap grid to arrange three cards per row.

Add bootstrap row and column to create a fully responsive grid layout, using breakpoints and classes to arrange cards across devices.

learn to use React Router Dom to enable routing in your app by installing react-router-dom, setting up browser router, wrapping your components, and defining routes for home and characters pages.

Learn to implement React Router navigation with NavLink, create routes for home and characters, and build dynamic routes using character IDs to render pages.

Learn how to access the current route parameter using the useParams hook in a React app, inspect params in the console, and map the parameter to an item id.

Render a single character from the api (not a list) by displaying its full name and image URL, using the id in the request and removing the semicolon.

Learn to build a quotes API by declaring a quotes array, fetching a URL, transforming names to lowercase, updating state, and rendering the quotes list.

Use the map function to display a list of quotes by rendering each item from an array in a React project, and style the output with layout and CSS.

Apply layout and CSS to the search component. Define a parent div search and a search detail section, center content, and use a linear-gradient background with h5 typography.

Install the material UI icons package and import the icons into your code. Then display house icons beside character names to complete the Game of Thrones app.

Build a React birthday reminder app, created with Create React App, that shows today's birthdays and upcoming ones this month using a contacts array and the date object.

Build a responsive birthday reminder app using React and CSS only, displaying today's birthday and age, as well as upcoming birthdays this month, with interactive state changes powered by useState.

Learn how to scaffold a React birthday reminder app with Create React App, remove unused files, and run and update the app on localhost 3000 with live changes.

Create a card file and an upcoming birthday file, import a data.js array of people with id, name, day, month, age, and gender, and render birthdays in the React app.

Create a date object with new Date, extract month, day, and year, import birthday data, and map over it to display today’s and upcoming birthdays, handling JavaScript date indexing.

Write code to compute upcoming birthdays by comparing day values, importing data.js, treating day greater than today as future, equal as today, and past as already occurred, then add styling.

Learn to add a layout and dynamic styling to a card in React by using useState to toggle class names on click, creating a smooth transition and on-click style updates.

Style a React card by updating app.js and index.css, center content with flex, apply a gradient background, design a rounded card, and add a click interaction that toggles a class.

Apply styles to an imported image in a React project using absolute positioning, shadows, borders, and transforms to build a responsive image card with an h4 and button.

Increase the click div height to 150 pixels, apply background color changes, and use a media query to make the React app responsive on small screens.

apply layout to an upcoming birthday card by importing an image, assigning class names, and tweaking background color and styles to align with the card design.

Style the upcoming birthday file with hover effects and color changes, and fix alignment on narrow screens using a media query. The app displays the current date and upcoming birthdays.

Build a multipage React app to search books using the Google Books API, route between pages, and display genre-specific results with purchasable options.

Build a responsive bookstore app with search, genre pages, and Google Books integration using React Router and Bootstrap, featuring CSS animations and fully responsive design.

Create a React app with the template, prune unused files, configure app.js and index.js, run the development server on localhost 3000, and plan to integrate Google API and bootstrap.

Create a navbar component in the components folder, import a logo from images, render an ordered list with home and items, then add CSS and test at port 3000.

Create a dedicated stylesheet, reset defaults, and apply styling to the navbar with a white background, gray text, 50px height, and a space-between flex layout for logo and links.

Build a home page hero section with a div class hero and a hero banner, add a bookstore heading, a search input, and a search button, preview on localhost 3000.

Learn to style the hero section with css on the home file, adding a gradient background, background image, and centered flex layout for text, inputs, and button.

Install React Router Dom and wrap your app in BrowserRouter. Define routes with static and dynamic paths to build a navigable React app.

Set up React Router Dom routes in app.js, import pages, and use nav links to navigate genre and home pages, with a dynamic main page for book search.

Learn to obtain a Google api key by visiting credentials page, creating a credential, copying the key, and securing it by never sharing it before using it in your project.

Learn to use the Google Books API by forming queries with q, author, text, and subject, applying filters and max results, and writing code to fetch results.

Fetch books from the Google Books API using axios, handle errors with catch, and store results in state to map thumbnails, titles, and authors for display.

Explore how useNavigate enables programmatic navigation from the home page to a book collection page based on a user search.

Explore how to implement the useNavigate hook alongside useState to capture input, update state on changes, and navigate to a named route on search button click.

Discover how the useParams hook lets you access the current dynamic route parameter (like a book name) to drive navigation and render on the main page.

Add useParams to the main file to fetch dynamic data with useEffect, reading params.name to call the API via axios and render results as routes change.

Apply Bootstrap grid to build a responsive book gallery, using rows and columns, add Bootstrap assets and button styles, and tailor card layouts for phones, tablets, and desktops.

Build a React genre page by importing images, providing a search input, and navigating image clicks to dynamic routes with useNavigate to display genre book collections via an API.

Display a search page that reuses the main page style to show a book collection by genre, navigate via router to dynamic name routes, and prepare the search page code.

Reuse the same code for the main and search pages, using a subject in the get url to search genres via the google books api and apply css styling.

Apply css techniques to style a genre page by configuring body background, positioning, image fitting, and hover animations for book cards, with responsive media queries and an interactive search input.

Learn to build a multi-page React app with routing via React Router, Bootstrap styling, and video integration, featuring home, travel, and pricing pages with destinations and costs.

Explore a travel app prototype built with Bootstrap and React Router Dom that showcases destinations, pricing, and a state-driven total price calculation for a responsive user experience.

Learn to scaffold a React app with create react app, organize images as assets and components, implement a navigation bar, run locally with npm start, and iterate on the ui.

Create and style a navbar for our app by writing the component code, wiring a logo, and populating a two-item menu with driver and building links in React.

Create and style the app's hero section on the homepage by wiring hero, footer, video, and pricing components, and apply CSS to the hero area for a polished layout.

Learn to style the hero section with css, centering the heading and paragraph, applying a cover background, uppercase text, responsive typography, and interactive hover effects.

Add a responsive main section of premium packages using bootstrap's row and column grid, bootstrap CDN, and data.js to populate cards with place names, images, prices, and days.

Style the map page by targeting the section’s h4 with uppercase text, white color, 30px font, and 0.4 letter spacing, then adjust image and price button positioning with hover effects.

Add break points and media screen rules for the main section's responsiveness, using mobile around 750px and 900–1200px, and adjust the right alignment of the button and price.

Add a video section to the homepage by installing a React player, importing a video from the images folder, and enabling playback, upload, and basic controls with styling.

Learn to style the video section in a React project with relative positioning, padding, margins, and responsive breakpoints to ensure visibility on mobile and desktop, plus adding a footer.

Add and style a footer in a React web project by updating css, using relative and absolute positioning, centering text, and refining padding to complete the hero and pricing sections.

Build and compare the travel page by adapting the main.js code, using destination and data arrays, and adding add and reset buttons with React Router navigation.

Learn to install and integrate React Router DOM, wrap the app in BrowserRouter, define routes for home, travel, and price pages, and implement NavLink-based navigation.

This lecture demonstrates building a pricing section in a React app, using useState for a string and an array to add costs and places to visit.

design a dynamic pricing section in a react app using useState to manage cost and a places array, passing price and places as props and updating via spread operator.

Develop and apply css to the pricing section, including gradient backgrounds, typography adjustments, color schemes, interactive list styling, and cursor pointer interactions to render dynamic price cards.

Build an admin dashboard in React using Material UI and Chart.js, covering project setup, cards, charts, and progress bars to visualize customer data, user profiles, and operational status.

Build an admin dashboard with React and Material UI, featuring a chart with Chart.js and progress bars using rc-progress. Implement dark mode and full responsiveness for any device.

Create a React app with npx, install material UI and icons, and configure fonts; clean up unused public and src files, then run the app on port 3001.

Learn to implement a Material UI theme provider in a React app, customize primary purple and secondary green, and toggle between light and dark modes.

Build a responsive navbar for a React app using app bar, toolbar, and input base, with a logo, dashboard title, a search input, and background color handling.

Style the navbar with scss, set background and text colors, apply responsive typography and display rules for small to tablet screens, and build a dashboard with a sidebar and feed.

Learn stack-based layout in React to build a three-section app with a nav bar, a functional map, and a sidebar, feed, and a light bar, arranging items vertically or horizontally.

Build a responsive layout in a React app using flexbox to divide the screen into three parts—a left, a middle, and a right sidebar—assigning widths, padding, and flex properties.

Build the right bar with paper components and material design elevation to display the admin name and avatar, arranging text and image in a row stack with absolute positioning.

Create a fixed sidebar in a React app using a list with list items, icons, and links, and add light/dark mode support.

Add a dark mode toggle in the sidebar to switch between light and dark themes using mode and setMode, with a switch button changing the UI.

Build a material profile card in React by declaring a material card, setting width 310 and height 150, and composing icon, text, and image in stacked layouts with paper elevation.

Build a profile card using custom stack components with column layout, typography variants (subtitle, h5), absolute positioning, and dividers to separate text and icons.

Create a customizable profile card in React by passing props for bgcolor, h1, h2, paragraph, and image, then render and style the card to display revenue and users.

Explore building a reusable card component with media, content, typography, and progress indicators in React, using stacks, flex layouts, and modular files like media control card and progress line.

Add live progress bars in a React app with rc-progress. Configure line progress (percent, stroke width, stroke color, trail color) and place bars beside profile and media cards.

Install chart.js for React, set up labels and datasets in state, create a userData object, and render a bar or pie chart by passing data as props.

Add charts in the app by implementing bar and pie charts, arranging them with stack directions and custom layouts, and styling within an admin dashboard.

Learn to implement a circular progress bar in a React app by adapting the light progress approach, customizing styles, and displaying status text with a custom stack, below charts.

Learn to style a React app responsively by switching layout direction from row to column across devices, toggle light and dark mode, and enable routing with React Router DOM.

Learn to build a travel advisor React app that lists popular destinations by user location, displays a map via two APIs, uses React Router, and routes from search to results.

Design a travel advisor app that simplifies planning, offers visit suggestions with distances and coordinates, and reloads maps using Open Trip Map and Google Maps APIs in a React-based interface.

Create a React app from a template, install material, add map packages and routing, and clean up files.

Create a home page component inside a components folder, add a header, a text input, and a search button, then style with CSS and run to verify.

Add CSS to the home page by styling a hero section with flex layout, a gradient background image, and styled header, paragraph, input bar, button, and hover effects, plus routing.

Wrap your app in a browser router using react router dom, and define static and dynamic routes to render pages based on the url.

Explore routing between the homepage and main page using react-router-dom, and dynamic state with useState and onChange to drive the search input and navigate on click.

Integrate the open trip map API on the main page and build language and place parameter URL to fetch JSON data (name, latitude, population, time zone) with your API key.

Read a dynamic route parameter with useParams and fetch data via axios. Use useEffect to update on parameter changes, store results in places, and pass them to the detail component.

Build the detail view by wiring the places prop to a new api, configuring language, radius, latitude, and longitude, and rendering the features with place names, distances, and types.

Demonstrates building a main page layout with Material UI by using Box and Stack containers, controlling direction and spacing, and rendering a list with map.

Render a list of places on a map in React by mapping over a data array to display each place’s name, distance, guide, and coordinates using a material paper component.

Add an interactive map to a React app using a maps API key, render the map in a container, and update center with longitude and latitude while adding markers.