CSS

How to Create Netflix Clone with React.js, Tailwind CSS and Styled Components

Sep 29, 2021

10 min read

Hello folks. Welcome to this tutorial. We will build a Netflix UI clone with React.js, Tailwind CSS, and Styled Components that looks like this:

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is concerned with how it should be displayed. This makes it easier for developers to test out new styles, and change the layout.

What are Styled-Components?

Styled Components are one of the new ways to use CSS in modern JavaScript. It is meant to be a successor to CSS Modules,and is a way to write CSS that's scoped to a single component without leaking to any other element on the page.

Can we use Tailwind with Styled-Components at the same time?!

Yes, of course, thanks to the Twin.macro package! It allow us to use both of them at the same time. 😎

Let’s start

First, before you start this project, you have to know JavaScript basics and install Node.js on your machine.

Let’s start by creating an empty React project!

Go to where you want to save your project with the terminal, and type npx create-react-app netflix-ui

After it finishes, type code netflix-ui to open the project in your VSCode

Open a new terminal in VScode and type yarn start. This will open your browser automatically.

Okay now, let's clean up! Go to src/App.js, delete all the code, and replace all the code with this:

function App() {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  );
}

export default App;

Now it will look like this:

Great! Let's add Netflix's colors. Go to src/index.css, and add these style properties in the body.

background-color: #111;
color: white;

Let's install the twin.macro

Open a new terminal in VSCode and enter this command

yarn add tailwindcss twin.macro @emotion/core @emotion/styled @emotion/react

Next up, we initialize Tailwind.

npx tailwindcss init --full

Add a new babelMacros key to the package.json file

"babelMacros": {
  "twin": {
    "config": "tailwind.config.js"
  }
},

Congratulations! You did it🎉

TMDB APIs

TMDb.org is a crowd-sourced movie information database used by many film-related consoles, sites, and apps! We will use their APIs to get the movie’s data, and to use their APIs we need to get an API key!

Go to themoviedb.org/signup, and create an account.

After creating an account log in, go to settings:

Then select 'API':

And you will find your API key there! Save it, because we will need it in the next step:

Get movies data and save it in state

In this step, we will get all the data we need from TMDB servers, and save it in our app to use it.

First, we need to install Axios. This is the library that will handle the API requests for us.

Open a new terminal and type:

yarn add axios

Importing axios, useState and useEffect Go to src/App.js, and add the next line at the top of it.

import { useState, useEffect } from 'react';
import axios from 'axios';

Next, we need the API URL, key (We got this in the previous step), and the movies endpoints

const URL = "https://api.themoviedb.org/3";
const API_KEY = "Put your API key here";

const endpoints = {
  originals: "/discover/tv",
  trending: "/trending/all/week",
  now_playing: "/movie/now_playing",
  popular: "/movie/popular",
  top_rated: "/movie/top_rated",
  upcoming: "/movie/upcoming",
};

We are getting the movies data from TMDB of 6 categories!

Initializing the states We will use useState to initialize a state for each movies category.

const [originals, setOriginals] = useState([]);
const [trending, setTrending] = useState([]);
const [nowPlaying, setNowPlaying] = useState([]);
const [popular, setPopular] = useState([]);
const [topRated, setTopRated] = useState([]);
const [upcoming, setUpcoming] = useState([]);

Now, our file will look like this:

Okay Let's get the data for each category

In the App component, we will add useEffect with the next pattern for each movie category.

useEffect(() => {
  // Load Originals
  axios
    .get(`${URL}${endpoints.originals}`, {
      params: {
        api_key: API_KEY,
      },
    })
    .then((res) => setOriginals(res.data.results));

  // Get other categories with the same pattern here

}, []);

Use the same pattern to get the other categories inside the useEffect.

Important note: Use only one useEffect for getting data

App Components

So in this project, we will need to build only three components.

Header
Hero (Which is the banner with a random movie)
Movies (Which is the Movies slider)

Let's start with the Movies component

Movies component is simple. It's made from three styled components.

1- Go to src folder, and create a new folder in it called components.

2- Inside src/components create new 2 files Movies.js and Movies.styles.js.

3- Go to Movies.styles.js.

Let's talk a little bit about using twin.macro

We need to import 2 things from twin.macro

styled to use Styled components
tw to use Tailwind CSS classes

You can import them with the next line.

import tw, { styled } from "twin.macro";

How we will use both of them at the same time? We will use this simple pattern to mix both of them.

export const YourStyledComponent = styled.div`

  // Put your pure CSS here.

  ${tw`

    // Put the Tailwind CSS classes here.

  `}

`;

Now Let's back to the Movies component!

MoviesContainer: It only needs the top and bottom margin my with 1 rem.

export const MoviesContainer = styled.div`
  ${tw`
    my-8
  `}
`;

MoviesTitle: It's h2 with bigger font size text-2xl, font weight font-bold, and uppercased uppercase with two rem left, and a right margin: mx-8.

export const MoviesTitle = styled.h2`
  ${tw`
      text-2xl
      font-bold
      uppercase
      mx-8
    `}
`;

Okay now let's import them in the Movies.js:

import { MoviesContainer, MoviesTitle } from "./Movies.styles";

Add the Movies component function. It accepts two values: title and movies.

function Movies({ title, movies }) {
  return (
    <MoviesContainer>
      <MoviesTitle>{title}</MoviesTitle>
    </MoviesContainer>
  );
}

export default Movies;

Go to src/App.js and import the Movie component.

import Movies from "./components/Movies";

And replace the hello world h1 with our movies component.

So we import the Movie component, and passed two props to it: the title, and the movie array state (We will use it later).

Now, save the file and look at the browser.

Great let's build the MoviesRow now, and render the movies.

Go to Movies.styles.js.

We need the MoviesRowto be

Flexbox flex
Scrolls left and right overflow-x-auto
Has one rem of margin top mt-4
Has one rem of padding p-4
Also we want to hide the scrollbar (Not supported in Tailwind CSS so we will use pure CSS).

the result:

export const MoviesRow = styled.div`
  ${tw`
      flex
      overflow-x-auto
      mt-4
      p-4
    `}

  &::-webkit-scrollbar {
    display: none;
  }
`;

As you can see, we hide the scrollbar in a way that is similar to SCSS because styled components support it.

Inside MoviesRow we will put multiple MoviesPoster which is img styled component.

MoviesPoster should have:

0.5 rem margin m-2
10 rem width w-40
Scale when user hover on it (We will use pure CSS)

The result:

export const MoviesPoster = styled.img`
  ${tw`
    m-2
    w-40
  `}

  // Scale the movie img when the user hovers on it.
  transition: all 0.2s;
  &:hover {
    transform: scale(1.09);
  }
`;

Next step, let's import the MoviesRow and 'MoviesPoster' styled components in the Movies.js component, and use .map to render the movies.

<MoviesRow>
  {movies.map((movie) => (
    <MoviesPoster
      key={movie.id}
      src={"https://image.tmdb.org/t/p/w300" + movie.poster_path}
      alt={movie.name}
    />
  ))}
</MoviesRow>

Your Movies.js file should look like this now

And if you go to the browser now, you should see this:

Let's copy the same Movies component in App.js for the other categories, and change the title and movies: Netflix UI all rows

Great, we did it. 😎

Hero component

The Hero component is simple:

Go to src/components, and create two new files: Hero.js and Hero.styles.js.

Inside Hero.styles.js, we need to add the first styled component which is the HeroContainer.

HeroContainer should have

Two rem of padding p-8
Height 80% of the screen's height (we will add it with pure CSS)
Background image (we will add it from props)
Background size cover important (pure CSS)

The result:

export const HeroContainer = styled.div`
  ${tw`
    p-8
  `}
  height: 80vh;
  background-size: cover !important;

  ${(props) =>
    `background: url('https://image.tmdb.org/t/p/original${props.background}');`}
`;

And we will pass a background prop to this styled component later.

HeroTitle is h1, should have

Bigger text size text-5xl
More font weight font-bold
One rem of margin bottom mb-4
Margin top of 40% of the screen's height (pure CSS)

The result:

export const HeroTitle = styled.h1`
  ${tw`
    text-5xl
    font-bold
    mb-4
  `}

  margin-top: 40vh;
`;

HeroDescription is p, should have

Bigger text size text-lg
Medium font weight font-medium
One rem with margin bottom mb-4
Width of 45 rem (pure CSS because 45 rem isn't supported in Tailwind CSS)
Max width of 80% of the screen's width (pure CSS)
Line height of 130%

The result:

export const HeroDescription = styled.p`
  ${tw`
    font-medium
    text-lg
    mb-4
  `}
  width: 45rem;
  max-width: 80vw;
  line-height: 1.3;
`;

And finally HeroButton.

export const HeroButton = styled.button`
  ${tw`
    cursor-pointer
    font-bold
    rounded
    px-8
    py-2
    mr-2
  `}

  background-color: rgba(51, 51, 51, 0.5);

  &:hover {
    background-color: #e6e6e6;
    color: black;
    transition: all 0.2s;
  }
`;

Let's go to Hero.js, and build everything.

import React from "react";
import {
  HeroButton,
  HeroContainer,
  HeroDescription,
  HeroTitle,
} from "./Hero.styles";

function Hero({ movie }) {
  console.log(movie);
  return (
    <HeroContainer background={movie?.backdrop_path}>
      <HeroTitle>{movie?.name}</HeroTitle>
      <HeroDescription>{movie?.overview}</HeroDescription>
      <HeroButton>Play</HeroButton>
      <HeroButton>My List</HeroButton>
    </HeroContainer>
  );
}

export default Hero;

Go to App.js, import it, and pass a random movie in the Hero component

<Hero movie={originals[Math.floor(Math.random() * originals.length)]} />

Now the Hero section is DONE🥳 Netflix UI hero

Header component

The Header component is the last component in this project and it's so simple because it's only one styled component. When you scroll down the header background, it should change to black!

Go to src/components, and create two new files: Header.js and Header.styles.js.

Inside Header.styles.js we need to add the first styled component which is the HeroContainer.

HeaderContainer should have

Flex & justify-between.
Fixed to top of the screen.
Z-index value bigger than other elements.
Switch background color based on the dark prop.
Images inside it should have height with two rem.

The result:

export const HeaderContainer = styled.div`
  ${tw`
    flex
    justify-between
    p-4
    fixed
    top-0
    w-full
    transition-all
    z-10
  `}

  ${(props) => (props.dark ? tw`bg-black` : tw`bg-transparent`)}

  img {
    ${tw`
      h-8
    `}
  }
`;

Let's go to Header.js, and put the Netflix logo and the Avatar in.

import React from "react";
import { HeaderContainer } from "./Header.styles";

function Header() {
  return (
    <HeaderContainer>
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/6/67/NewNetflixLogo.png"
        alt=""
      />
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png"
        alt=""
      />
    </HeaderContainer>
  );
}

export default Header;

Finally, Let's add an event listener for the window.scroll using useEffect and useState.

const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 100) {
        setIsDark(true);
      } else setIsDark(false);
    });

    return () => {
      window.removeEventListener("scroll");
    };
  }, []);

Now, pass isDark to the Header component.

<HeaderContainer dark={isDark}>

Import the Header component in the App.js, and go to your browser.

Congratulations! We made it! 🥳

Source Code

Also, here is the Github repo.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Mark Shenouda

@MarkSShenouda @markshenouda

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

How to create and use custom GraphQL Scalars

How to create and use custom GraphQL Scalars In the realm of GraphQL, scalars form the bedrock of the type system, representing the most fundamental data types like strings, numbers, and booleans. As explored in our previous post, "Leveraging GraphQL Scalars to Enhance Your Schema," scalars play a pivotal role in defining how data is structured and validated. But what happens when the default scalars aren't quite enough? What happens when your application demands a data type as unique as its requirements? Enter the world of custom GraphQL scalars. These data types go beyond the conventional, offering the power and flexibility to tailor your schema to precisely match your application's unique needs. Whether handling complex data structures, enforcing specific data formats, or simply bringing clarity to your API, custom scalars open up a new realm of possibilities. In this post, we'll explore how to understand, create, and effectively utilize custom scalars in GraphQL. From conceptualization to implementation, we'll cover the essentials of extending your GraphQL toolkit, empowering you to transform abstract ideas into concrete, practical solutions. So, let's embark together on the journey of understanding and utilizing custom GraphQL scalars, enhancing and expanding the capabilities of your GraphQL schema. Understanding Custom Scalars Custom scalars in GraphQL extend beyond basic types like String or Int, allowing data to be defined, validated, and processed more precisely. They're instrumental when default types don't quite capture the complexity or specificity of the data, such as with specialized date formats or unique identifiers. The use of custom scalars brings several benefits: * Enhanced Clarity: They offer a clearer representation of what data looks like and how it behaves. * Built-in Validation: Data integrity is bolstered at the schema level. * Flexibility: They can be tailored to specific data handling needs, making your schema more adaptable and robust. With this understanding, we'll explore creating and integrating custom scalars into a GraphQL schema, turning theory into practice. Creating a Custom Scalar Defining a Custom Scalar in TypeScript: Creating a custom scalar in GraphQL with TypeScript involves defining its behavior through parsing, serialization, and validation functions. * Parsing: Transforms input data from the client into a server-understandable format. * Serializing: Converts server data back to a client-friendly format. * Validation: Ensures data adheres to the defined format or criteria. Example: A 'Color' Scalar in TypeScript The Color scalar will ensure that every color value adheres to a valid hexadecimal format, like #FFFFFF for white or #000000 for black: ` In this TypeScript implementation: * validateColors: a function that checks if the provided string matches the hexadecimal color format. * parseValue: a method function that converts the scalar’s value from the client into the server’s representation format - this method is called when a client provides the scalar as a variable. See parseValue docs for more information * serialize: a method function that converts the scalar’s server representation format to the client format, see serialize docs for more information * parseLiteral: similar to parseValue, this method function converts the scalar’s value from the client to the server’s representation format. Still, this method is called when the scalar is provided as a hard-coded argument (inline). See parseLiteral docs for more information In the upcoming section, we'll explore how to incorporate and validate these custom scalars within your schema, ensuring they function seamlessly in real-world scenarios. Integrating Custom Scalars into a Schema Incorporating the 'Color' Scalar After defining your custom Color scalar, the next crucial step is effectively integrating it into your GraphQL schema. This integration ensures that your GraphQL server recognizes and correctly utilizes the scalar. Step-by-Step Integration 1. Add the scalar to Type Definitions: Include the Color scalar in your GraphQL type definitions. This inclusion informs GraphQL about this new scalar type. 2. Resolver Mapping: Map your custom scalar type to its resolver. This connection is key for GraphQL to understand how to process this type during queries and mutations. ` 1. Use the scalar: Update your type to use the new custom scalar ` Testing the Integration With your custom Color scalar integrated, conducting thorough testing is vital. Ensure that your GraphQL server correctly handles the Color scalar, particularly in terms of accepting valid color formats and rejecting invalid ones. For demonstration purposes, I've adapted a creation mutation to include the primaryColor field. To keep this post focused and concise, I won't detail all the code changes here, but the following screenshots illustrate the successful implementation and error handling. Calling the mutation (createTechnology) successfully: Calling the mutation with forced fail (bad color hex): Conclusion The journey into the realm of custom GraphQL scalars reveals a world where data types are no longer confined to the basics. By creating and integrating scalars like the Color type, we unlock precision and specificity in our GraphQL schemas, which significantly enhance our applications' data handling capabilities. Custom scalars are more than just a technical addition; they testify to GraphQL's flexibility and power. They allow developers to express data meaningfully, ensuring that APIs are functional, intuitive, and robust. As we've seen, defining, integrating, and testing these scalars requires a blend of creativity and technical acumen. It encourages a deeper understanding of how data flows through your application and offers a chance to tailor that experience to your project's unique needs. So, as you embark on your GraphQL journey, consider the potential of custom scalars. Whether you're ensuring data integrity, enhancing API clarity, or simply making your schema a perfect fit for your application, the possibilities are as vast as they are exciting. Embrace the power of customization, and let your GraphQL schemas shine!...

Apr 10, 2024

5 mins

GraphQLJavaScript

Bun v1.0

On September 8, 2023, Bun version 1 was released as the first production-ready version of Bun, a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript. Why a new JS runtime You may ask, we already have Node and Deno, so why would we need another javascript runtime, Well yes we had Node for a very long time, but developers face a lot of problems with it, and maybe the first problem is because it’s there for a very long time, it has been changing a lot between different versions and one of the biggest nightmares for JavaScript developers these days is upgrading the node version. Also, Node lacks support for Typescriptt. Zig programming language One of the main reasons that Bun is faster than Node, is the programming language it has been built with which is Zig. Zig is a very fast programming language, even faster than C) (here is some benchmarks), it focuses on performance and memory control. The reasons it’s faster than C is because of the LLVM optimizations it has, and also the way it handles the undefined behavior under the hood Developer Experience Bun delivers a better developer experience than Node on many levels. First, it’s almost fully compatible with Node so you can use Node packages without any issues. Also, you don’t need to worry about JS Common and ES Modules anymore, you can use both in the same file, yup you read that right, for example: ` Also, it has a built-in test framework similar to Jest or Vitest in the project so no need to install a different test framework with different bundler in the same project like Webpack or Vite ` Also, it supports JSX out-of-the-box ` Also, Bun has the fastest javascript package manager and the most efficient you can find as of the time of this post ` Bun Native APIs Bun supports the Node APIs but also they have fun and easy APIs to work with like * Bun.serve() : to create HTTP server * Bun.file() : to read and write the file system * Bun. password.hash(): to hash passwords * Bun.build(): to bundle files for the browser * Bun.FileSystemRouter(): a file system router And many more features Plugin system Bun also has an amazing plugin system that allows developers to create their own plugins and add them to the Bun ecosystem. ` Conclusion Bun is a very promising project, and it’s still in the early stages, but it has a lot of potential to be the next big thing in the JavaScript world. It’s fast, easy to use, and has a lot of amazing features. I’m very excited to see what the future holds for Bun and I’m sure it will be a very successful project....

Oct 25, 2023

2 mins

BunJavaScriptnpmNodeJS

How to Go from Software Engineer to AI Engineer with Shawn Wang

Shawn Wang discusses AI engineering’s potential impact on the software development labor market and developer experience. With the rise of artificial intelligence technologies, there is an increasing demand for professionals who can bridge the gap between AI and software engineering, and engineers are looking around for guidance on how to best learn AI. Shawn emphasizes the importance of acquiring core knowledge and skills in AI engineering, highlighting the need for a systematic approach to education and development. He envisions a future where AI engineering becomes a recognized profession, with specialized training programs and certifications. He further talks about mental models for approaching AI literacy, and skill building. Shawn also discusses the use of advanced AI technology in software development. He showcases tools like GPT Vision, which can automate tasks and generate code efficiently. While acknowledging the potential of AI in enhancing productivity, Shawn emphasizes the need to leverage AI tools to augment human capabilities rather than replace them. Download this episode here....

Apr 17, 2024

1 min

Artificial IntelligenceEngineering Leadership

How to Create Netflix Clone with React.js, Tailwind CSS and Styled Components

What is Tailwind CSS?

What are Styled-Components?

Can we use Tailwind with Styled-Components at the same time?!

Let’s start

Let's install the twin.macro

TMDB APIs

Get movies data and save it in state

Okay Let's get the data for each category

App Components

Let's start with the Movies component

Let's talk a little bit about using twin.macro

Hero component

Header component

Source Code

Mark Shenouda

You might also like

Overview of the New Signal APIs in Angular

How to create and use custom GraphQL Scalars

Bun v1.0

How to Go from Software Engineer to AI Engineer with Shawn Wang

You might also like

Overview of the New Signal APIs in Angular

How to create and use custom GraphQL Scalars

Bun v1.0

How to Go from Software Engineer to AI Engineer with Shawn Wang