/capstone2-frontend

An Instagram Clone: Instapost

Primary LanguageJavaScript

Instapost (An Instagram Clone)

Description:

This application is a responsive React front end for my Instapost API, which works together to create a social media website where users can share, like, and comment on photos. Users can search for other users and follow them, and stay up to date with posts that their friends have created.

This project was bootstrapped with Create React App. This project uses Bootstrap 5 and react-strap components for much of its CSS, as well as Material UI and the CSS Flex Grid System. And I combined reactstrap elements with React Hook Form for all of my form components. Client side routing is handled by react-router-dom v6 and HTTP requests for AJAX functionality is done using the Axios library. The backend API was written in Node using the Express web framework and a PostgreSQL database. Users upload photos with the help of Amazon's S3 Bucket webservice which allows for efficient image storage. Furthermore, users have access to a bidirectional event-based communication system I incorporated using Socket.io. This feature enables seamless messaging between users, fostering connections and enhancing the overall user experience.

Tools Used:

Installation

After cloning the repository, install all dependencies by executing npm install within the top level project directory. This program requires the use of an external API to function.

If you wish to run this API locally on your machine, see my repository for the Instapost API for installation instructions and more info. This app expects the Instapost API to be listening on port 3001 of localhost; make sure to change the port number of the localhost URL in Api.js if your local deployment of the API is listening on a different port. With your local API set up, start this app in developer mode with the following command:

npm start