Build an application using JavaScript and/or PHP which has the following features:
- 3 button components which trigger API GET requests;
- A component that renders the API results in a presentable way;
Clicking each button should fetch data using their own API URL. Once the data is fetched, it needs to be stored in a local database.
If a record has a poster, the poster should be stored in its own table and create a relevant relation to the record.
You should fetch data on the back-end, and store only unique data in the database.
The development process included the following steps:
- Creating buttons, movies and movieItem components;
- Writing a function to fetch data from a 3rd party API and display it on the front-end;
- Setting up a local postgres database, creating Movies and Posters tables;
- Writing the backend and connecting it to existing database;
- Testing the endpoints with Postman;
- Connecting front-end and backend (getting data from the react state and inserting it into local database);
- Using react bootstrap for styling UI components.
| Movies | |
|---|---|
| title | text |
| year | smallint |
| type | varchar(30) |
| imdbid | varchar(30) |
imdbid - primary key
| Posters | |
|---|---|
| url | text |
| movie_id | varchar(3) |
movie_id - foreign key, references movies(imdbid)
- React: front-end JavaScript library;
- Express: web application framework for Node. js;
- Postgres: relational database management system;
- React-Bootstrap: React UI library;