My First Movie App

Projects Personal Projects
1

Hello, world! I just wanna share a little success :partying_face: over here regarding a project that I have finished. I have just finished building my movie app using React :point_down:!

Here is an example of my project →

Movie App Live Site

If you want to contribute to it, I’m open to it. Don’t worry, it’s very beginner-friendly, anyone at any level can contribute. Here is the GitHub repo →

2 Likes
2

This site is very impressive.
Congrats on building your first web app.
The colors are perfectly chosen and it is nice :slightly_smiling_face:

1 Like
3

I agree with leafkn, but I would also like to give some feedback, in TheMovieDB.js, you have the following:

const Reqs = {
  fetchTrending: `${URL}/trending/movie/week?api_key=${API}`,
};

export default Reqs;

I would use an axios instance here instead, see the documentation:

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

you can set a baseUrl:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

and use the params option:

  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },

to send the API key.

then export this axios instance and use it wherever you need to make requests to this API. Saves on repetitive code.

1 Like
4

Yes, this method is really impressive.
I will use this on my future projects .
Thanks

5

Hi there, thanks for your feedback. I have looked at the documentation but I still can’t get it. May I know what does axios.create({}) do?

6

it creates an axios instance, we can set certain values for this axios instance (like a base-url and url query parameters)

this instance we can then use to simplify making request (to a specific api for example), so we don’t have to repeat the base url and query parameters every time

1 Like
7

I can’t thank you enough for recommending this :smiling_face_with_three_hearts:. Can you help me check if my code is correct? I have tested it and get data from TheMovieDB API.

Here is the link to the GitHub repo →

8

I think I would personally do:

const instance = require("axios").create({
  baseURL: "https://api.themoviedb.org",
  params: {
     api_key: '0e94f803d16ffacb3a17c146abab30a2',
  }
});

and the export the instance:

export instance;

then when you need to make a request, import the instance and make the request:

instance.get("/3/trending/movie/week")
9

Can I have an explanation for the parameter? What is a parameter?

10

here:

"/3/trending/movie/week?api_key=0e94f803d16ffacb3a17c146abab30a2"

the api_key is a url parameter/query string. I am sure you can find a good explanation for this on the internet :slight_smile:

axios then includes the parameter in every request we sent with that axios instance

1 Like
11

Okay, thanks for explaining :grinning: I will search for more info on the internet.