Skip to content

Project to build a simple instagram media viwer with ReactJs and NodeJs.

Notifications You must be signed in to change notification settings

IanKarlo/instagram-simple-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

Project to build a simple instagram media viwer with ReactJs and NodeJs.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published