Creating an Impressive Movie Website with React JS, Tailwind CSS & TMDB Api for Project Showcase

In this tutorial, we will be building a stunning movie website using React JS, Tailwind CSS, and TMDB Api. This project showcase will demonstrate how to create a dynamic and visually appealing website that displays information about movies fetched from the TMDB Api.

Before we begin, make sure you have Node.js and npm installed on your machine. If you don’t have them, you can download them from the Node.js website. Once you have Node.js and npm installed, we can start building our movie website.

Step 1: Create a New React App
To create a new React app, open your terminal and run the following command:

npx create-react-app movie-website
cd movie-website

Step 2: Install Tailwind CSS
Next, we need to install Tailwind CSS in our project. Run the following command in your terminal:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

After installing Tailwind CSS, we need to create a Tailwind CSS configuration file. Run the following command in your terminal:

npx tailwindcss init -p

Step 3: Configure Tailwind CSS
Open the tailwind.config.js file in the root directory of your project and add the following code to configure Tailwind CSS:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Step 4: Import Tailwind CSS
Open the src/index.css file and import Tailwind CSS by adding the following line at the top of the file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 5: Create Components
Inside the src directory, create a new folder called components. Inside the components folder, create the following components: Navbar.js, MovieList.js, MovieCard.js, and MovieDetails.js.

Step 6: Fetch Data from TMDB Api
To fetch data from the TMDB Api, we need to create an account on the TMDB website and generate an API key. Once you have the API key, create a new file called api.js inside the src directory and add the following code:

const apiKey = 'your_api_key_here';

export const fetchMovies = async () => {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1`);
    const data = await response.json();
    return data.results;
  } catch (error) {
    console.error(error);
  }
};

export const fetchMovieDetails = async (id) => {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=en-US`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
};

Step 7: Display Movie List
Open the MovieList.js component and add the following code to display a list of movies:

import React, { useState, useEffect } from 'react';
import { fetchMovies } from '../api';
import MovieCard from './MovieCard';

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const getMovies = async () => {
      const data = await fetchMovies();
      setMovies(data);
    };

    getMovies();
  }, []);

  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {movies.map((movie) => (
        <MovieCard key={movie.id} movie={movie} />
      ))}
    </div>
  );
};

export default MovieList;

Step 8: Create Movie Card Component
Open the MovieCard.js component and add the following code to display a movie card:

import React from 'react';

const MovieCard = ({ movie }) => {
  return (
    <div className="bg-white shadow-lg rounded-lg overflow-hidden">
      <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} className="w-full h-56 object-cover" />
      <div className="p-4">
        <h2 className="text-xl font-semibold">{movie.title}</h2>
        <p className="text-sm mt-2">{movie.release_date}</p>
        <p className="text-sm mt-2">{movie.overview}</p>
      </div>
    </div>
  );
};

export default MovieCard;

Step 9: Create Navbar Component
Open the Navbar.js component and add the following code to create a navbar:

import React from 'react';

const Navbar = () => {
  return (
    <nav className="bg-gray-800 p-4">
      <div className="container mx-auto flex justify-between items-center">
        <a href="/" className="text-white font-semibold text-xl">Movie Website</a>
      </div>
    </nav>
  );
};

export default Navbar;

Step 10: Display Movie Details
Open the MovieDetails.js component and add the following code to display movie details:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { fetchMovieDetails } from '../api';

const MovieDetails = () => {
  const { id } = useParams();
  const [movie, setMovie] = useState(null);

  useEffect(() => {
    const getMovieDetails = async () => {
      const data = await fetchMovieDetails(id);
      setMovie(data);
    };

    getMovieDetails();
  }, [id]);

  if (!movie) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{movie.title}</h1>
      <p>{movie.overview}</p>
      <p>{movie.release_date}</p>
    </div>
  );
};

export default MovieDetails;

Step 11: Setup Routes
Open the App.js file and add the following code to setup routes in your app:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/Navbar';
import MovieList from './components/MovieList';
import MovieDetails from './components/MovieDetails';

const App = () => {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={MovieList} />
        <Route path="/movie/:id" component={MovieDetails} />
      </Switch>
    </Router>
  );
};

export default App;

Step 12: Start the Development Server
To start the development server, run the following command in your terminal:

npm start

Open your browser and navigate to http://localhost:3000 to see your stunning movie website in action! You can further customize the website by adding additional features and styling using Tailwind CSS.

Congratulations! You have successfully built a beautiful movie website using React JS, Tailwind CSS, and TMDB Api. Feel free to explore more features and functionalities to enhance your website further. Happy coding!