
This is the introduction of this course and what we are going to build in this course.
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.
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.
Enable child-to-parent communication by passing the genre id from the selected genre to the home API and refresh the list.
In this course, you will learn how to build a game listing app with React, Tailwind CSS, Vite, and Vercel. You will start by setting up a React project with Vite, and then you will add Tailwind CSS to your project. Next, you will learn how to fetch data from an API in React, and how to render data in React. Finally, you will learn how to create a responsive layout in React, and how to deploy your React app to Vercel.
By the end of this course, you will have built a fully functional game listing app with React, Tailwind CSS, Vite, and Vercel.
Prerequisites
No prior experience with React, Tailwind CSS, Vite, or Vercel is required.
What you will learn
How to set up a React project with Vite
How to add Tailwind CSS to your React project
How to fetch data from an API in React
How to render data in React
How to create a responsive layout in React
How to deploy your React app to Vercel
Who is this course for?
This course is for anyone who wants to learn how to build a game listing app with React, Tailwind CSS, Vite, and Vercel.
This course is also for anyone who wants to learn more about React, Tailwind CSS, Vite, and Vercel.
What you will get
Access to all course materials, including videos, code, and quizzes
A certificate of completion
A community of learners to support you on your journey
Enroll today and start building your game listing app with React, Tailwind CSS, Vite, and Vercel!