Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pushkarm029/insta-clone-app

INSTA-CLONE-APP is an social media application that I created using React.js, Go and Firestore. In this app, you can explore posts, upload post, interact with posts,check your friend's posts etc.
https://github.com/pushkarm029/insta-clone-app

css docker firebase firebase-auth firestore gin github-actions go html instagram instagram-clone javascript jest kubernetes react reactjs redux

Last synced: about 2 months ago
JSON representation

INSTA-CLONE-APP is an social media application that I created using React.js, Go and Firestore. In this app, you can explore posts, upload post, interact with posts,check your friend's posts etc.

Awesome Lists containing this project

README

        

![Insta-Clone-App](https://drive.google.com/uc?export=view&id=1z6BjGrL8-iiryYssnh1qSzKV4ODgVg7T)

## **πŸ”₯ Introduction**

**Insta-Clone-App** is a web app which can be used to upload posts, explore posts, check your friend's posts etc. It is built using React.js for frontend, Go for backend and Firebase for database.

Frontend is deployed using Github Pages ->
pushkarm029.github.io/insta-clone-app

Full Stack Application Will be ***Deployed soon***.

## **πŸ’₯ Features**
- It enables users to log in and create an account.
- User can upload their images in the application.
- User can visit explore page where user can see the new post of other users.
- User can visit home page where user can see the all posts of other users whom the current users follow.
- User can interact with posts by liking & commenting.
- The User can enjoy Reels.
- User can deep dive into chill-zone to play some mini-games created by me.

## **πŸ› οΈ Local Development** :

1. Open your terminal and then type
```shell
$ git clone https://github.com/Pushkarm029/insta-clone-app
```
2. cd into the folder
```shell
$ cd insta-clone-app/
```
3. cd into the frontend folder
```shell
$ cd frontend
```
4. install the required dependencies for frontend
```shell
$ npm install
```
5. To start the application on localhost
```shell
$ npm start
```
6. To Deploy the frontend application on Github Pages
```shell
$ npm run deploy
```
7. To Run Tests on Frontend Locally
```shell
$ npm run test
```
8. cd into backend folder
```shell
cd ../backend
```
9. install the required dependencies for backend
```shell
go get -u ./...
```
10. Start the server on :8080
```shell
go run main.go
```

**Note : You need to restart backend server after every change in any .go file.**

## **❀️ Learnings** :

- I have learned how to use components, props, and state to create interactive user interfaces.
- I have also gained a better understanding of how to structure a React project, including the use of ES6 syntax and styling with CSS.
- I have learned how to implement React Redux to make a global state and then use it anywhere.
- I have also become familiar with the React Router library for creating dynamic routes in my web applications.
- I have also gained experience in deploying React applications to production.
- I have also gained a better understanding of Firebase Authentication, Storage and Firestore.
- Got Better Understanding of GO while implementing this as backend in this app.
- I learned how to iterate over data present in Firestore, converging it into JSON, and making HTTP requests using the Go-Gin Framework.
- Created REST API's using GO to perform CRU (CREATE, READ and UPDATE) operation.
- I learned how to build Unity games for the web and then implement them in a full-stack application.
## **⛑️ Maintenance** :

Feel free to open issue to add a feature request or report any BUG. It will be appreciated from the depth of my heart❀️.

## **πŸ“… Future**

- Add infinite scroll and Lazy Loading.
- Implement the delete operation in the REST API.
- Lots of Bugs and css needs to be fixed.
- Jest Framework will be used for testing.
- Firebase will be used for Real Time Messaging Options.
- More Creativity will be added from my side.
- Make it more responsive.
- Migrate to TypeScript.
- Implement VideoCall Feature using WebRTC.
- Docker will be used for containerization.