FIFA World Cup 2026

This is a React + Tailwind CSS application that provides information about the FIFA World Cup 2026.

Tools used:

• React
• Tailwind CSS
• Framer motion
• Flag icons
• React Simple Maps
• React Router

React

Download the latest version of React from the official website: https://reactjs.org/
npm create vite@latest

Tailwind CSS

Download the latest version of Tailwind CSS from the official website: https://tailwindcss.com/
npm install -D tailwindcss postcss autoprefixer

Framer motion

Download the latest version of Framer motion from the official website: https://framer.com/motion
npm install framer-motion

Flag icons

Download the latest version of Flag icons from the official website: https://flagicons.lipis.dev/
npm install flag-icons

React Simple Maps

Download the latest version of React Simple Maps from the official website: https://www.react-simple-maps.io/

npm install react-simple-maps

Warning: The React Simple Maps library is not compatible with React 18.2.0 or higher as it is officially built for React 16, 17, or 18.

React Router

Download the latest version of React Router from the official website: https://reactrouter.com/
npm install react-router-dom

Also, there is a possibility that react router dom may not install because of dependency conflict with react-simple-maps. If that is the case, try running the command:

npm install react-router-dom --legacy-peer-deps.

App Structure

The app is structured as follows:

• fifa2026
  • public
  • src
    • assets
      • images
      • WorldCup2026 logo
    • Components
      • canada.json
      • mexico.json
      • statesUS.json
      • northAmerica.json
      • FanGuide.jsx
      • FifaMap.jsx
      • FAQs.jsx
      • Groups.jsx
      • Map.jsx
      • Slider.jsx
    • App.css
    • App.jsx
    • index.css
    • main.jsx
  • index.html
  • vite-env.d.ts
  • package.json
  • README.md
  • vite.config.js