Congratulations!

Congratulations, Starlight Cinema is a React app, and you've reached the end of the Web Development path!

One last touch. The header doesn't say which page you're on. Give the button of the current page the gold of the logo: Header gets page in its props too, and each of its two buttons chooses between two sets of classes:

className={
    page === "home"
        ? "cursor-pointer text-gold"
        : "cursor-pointer text-white hover:text-gold"
}

A look back. Think of where the cinema started: two HTML pages with three film cards and two tables, which you styled with CSS and put online at an address of its own. Then JavaScript loaded its showtimes and let visitors choose seats and book them, Tailwind gave it a look that works on phones, and now it's an app made of components, which draws itself from data and state. You built every step of it yourself.

Now you can make a website from the first tag to its address on the internet: pages in HTML, styles in CSS or Tailwind for every screen, scripts in JavaScript that react to visitors, load data, check forms and remember things, and whole apps in React. That's how today's web is made.

The app online. Your app goes online as the flashcards did at the end of the React course: Vite makes the project on your computer and builds the finished app. With Tailwind, Vite needs one more thing: Tailwind's plugin for Vite. You'll need Node.js, as at the end of the Tailwind and React courses.

1. In the terminal, create the project:

   npm create vite@latest cinema-react

   Choose the framework React and the variant JavaScript, and when Vite offers to install the project and start it now, answer No. For any other question, the answer it suggests is fine. Then go into the folder and install the packages, together with Tailwind and its plugin:

   cd cinema-react
   npm install
   npm install tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.js, as Tailwind's guide for Vite shows: a line that imports it, and tailwindcss() next to react():

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import tailwindcss from "@tailwindcss/vite";
   
   export default defineConfig({
       plugins: [react(), tailwindcss()],
   });

   Vite writes its texts in single quotes and leaves out the semicolons, which works just as well.
3. Copy your files from the editor into the project, as you did with the flashcards. App.jsx, Header.jsx, Home.jsx, FilmCard.jsx, Showtimes.jsx, DayButtons.jsx, SeatPicker.jsx, useLocalStorage.js and style.css go into src. In Vite's src/main.jsx, change ./index.css to ./style.css, and delete App.css, index.css and the folder assets from src. showtimes.json goes into public. In index.html, in the project's folder, change the title to Starlight Cinema, add the line with the description (the viewport line is there from Vite already) and give the body its classes.
4. Try the app with npm run dev. Then npm run build makes the finished app in the folder dist. On Netlify, open your cinema's project, and on its Deploys page, drag the folder dist onto the area at the bottom of the page, as with the earlier versions of your site. The address stays the same, and the cinema online becomes your React app. The app has only one page, so an old link that ends in showtimes.html now shows Netlify's "Page not found"; the site's own address works as before.

What's next. The path ends here, but your cinema can keep growing, and you know everything these ideas need: the films loaded from a films.json, as the showtimes are; the tab's title following the page, with an effect as in the exercise Your First Effect; prices for students and children in the seat picker; or a dark mode with the variant dark: from the Tailwind course. And there's more to learn on Start Coder:

• The TypeScript course teaches JavaScript with types, which find many mistakes before you even run the code. Many React projects are written in TypeScript, and Vite has the variant TypeScript for them.
• The SQL course teaches the language of databases, where bigger websites keep their data, such as the bookings of a real cinema.