Master React JS and Tailwind CSS with Real-World Projects

Install tailwind css in a react app by running terminal commands and creating tailwind.config.js and PostgreSQL.config.js. Update index.css with the tailwind directives and test with npm run dev to verify.

Build a React project structure, edit index.css and app.css to center content, create components and pages (home), and wire the header with navigation through nested components.

Build a responsive application header by importing a logo, adding a React icon in the search bar, and toggling light-dark mode with useState and Tailwind CSS.

Learn to implement dark mode in tailwind css by enabling dark mode, configuring tailwind.config.js, and applying dark: utilities to components with a useState theme toggle.

Wrap the app with a theme context provider, pass theme and setTheme, and read them via useContext to toggle dark and light modes across nested components.

Learn to build a responsive two-panel layout with Tailwind CSS grid, hiding the genre on small screens and expanding the game list, while persisting light/dark theme using local storage.

fetch data from an api by calling the game listing endpoints with axios, manage the api key, and extract the genres list from the response data.

Fetch the games list via the /games endpoint, wire it to a global api module, and load data with axios in a use effect, storing results in state.

Implement a game banner in React with Tailwind CSS, pass the first API game as data, and display its background image with gradient overlay, title, and a get now button.

Fetches games by genre via a global API endpoint, passing the genre ID and key, and renders results in a Games by Genre ID component.

Enable child-to-parent communication by passing the genre id from the selected genre to the home API and refresh the list.

Explore how to dynamically change heading text by passing the selected genre from child to parent using props and useState to render genre-specific games.