Building a React Cine World - Movie Application using typescript

This blog post is about will give you complete knowledge about how to start with React & Typescript and the common view component

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

This is what we are going to create:

Our project's structure:

Before we begin let's talk about how our project is going to be organized.

Once we create our React app using create-react-app, we will have our base React app. Once inside that application, we will create a component pattern and Our folder structure will look like the following:

Our goal today is to:

1. Create a new React cine world Movie App
2. Have Themoviedb Api account setup and generate API KEY
3. Using React Routing, be able to navigate our app

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-app --template typescript

API :

The frontend will have to fetch the data from an API, I choose Themoviedb 🎬 : It's free, we just create an account to get your API key

let's start coding.

Building our React components

In this application, we are going to have fives pages for templates:

• All Movies List with Filter
• All Movies List with Sorting
• Movie details with Production companies list

Let’s create those files. In the src/ folder, create the following folder: src/pages. Within that newly created folder.

Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:

npm install --save react-router-dom

create router.ts file, copy and paste this code :

import * as React from "react";
import { Route, BrowserRouter } from "react-router-dom";
import Header from "./components/header";
import { ListController } from "./pages/movie-page/movie-listing-container";
import { ItemController } from "./pages/movie-page/movie-details-container";

export const Routes = () => {
  return <BrowserRouter>
    <React.Fragment>
     <Header />
      <Route path="/" exact={true} component={ListController} />
      <Route path="/:movieId" component={ItemController} />
    </React.Fragment>
  </BrowserRouter>;
};

Putting it all together

Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

Feel free to ask questions in any area you don't understand.

To be continued ...