Skip to content

Latest commit

 

History

History
58 lines (50 loc) · 2.95 KB

README.md

File metadata and controls

58 lines (50 loc) · 2.95 KB
Raw

Instagram Simple Viewer frontend

About Application

The purpose of this application is to display the media of an Instagram user through a token received using the Instagram Basic Display API. This application use ReactJS in the frontend and NodeJS (with Express) in the backend.:

Installing and running application

  • Download repository

    You need to download/clone the repository on your machine. You can use the following git command for it:

     git clone https://github.com/IanKarlo/instagram-simple-viewer.git

  • Install front-end dependencies

    To install front-end dependencies, go to repository directory in your machine and you can use the following command:

     cd frontend
 npm install
 or
 yarn install

  • Install back-end dependencies

    To install back-end dependencies, inside the repository directory in your machine use the followings commands:

     cd backend
 npm install
 or
 yarn install

  • Run front-end

    First of all you need to configure the .env file, change the name of .env.example file to .env and put the url to your backend in REACT_APP_API_URL enviromental variable. Then in your terminal in the repository directory root run the following commands:

     cd frontend
 npm start
 or
 yarn start

  • Run back-end

    To run backend, in the repository directory root run the following commands:

     cd backend
 npm start
 or
 yarn start

Backend routes

The backend of project had 3 routes:

  • GET API/user-details?userToken In this route, the backend recieves the token from Instagram Basic Display API and get the user data. This route seems like an authentication route for this application, by recieving a token and serve the user basic data.
  • GET API/user-media?userToken In this route, the backend recieves the token from Instagram Basic Display API and get the user media. In this case, this route just serve the first 25 media from the user, but if it had more, is send to client the pagination data, that consists in a link to get more media.
  • GET API/page-media?next&previous In this route, the backend recieves if is next or previous page of media to get. It made a verification and made a request do Instagram API. If next or previous is not provided, it returns an error.

Frontend screens

  • Token authentication screen In this screen the user can put the Instagram API token in the input to enter in the application.
  • Media screen In this screen the media of user is showed. The application had a pagination system, that shows only 25 media per page, and when the user can navigate through pages a button going to next/previous page is showed.