Dummygram

It's a functioning clone of Instagram where we have posts feature, authentication, comment, delete and like feature. It uses ReactJs in the front-end and Firebase for the back-end.

Comment

Inspiration

When you learn ReactJs it seems obvious to work on some projects and for the projects you might want to choose something that interests you. How about a clone of the app developed by the company that released ReactJs ? Yes, that's the original inspiration behind Dummygram

What it does

DummyGram is a Clone of Instagram where we have posts feature, authentication, comment, delete and like feature. It uses ReactJs in the frontend for the UI and Firebase for the backend storing the users, posts and comments.

How we built it

I built it by following the designs and features of Instagram App. I had to start from basic layout and ability to post. Then moved on to enhancing layout, features for the post like like,comment,share,delete and many more.

Challenges we ran into

One of the challenges was pagination. The project was deployed on Firebase and storage was available from Firebase as well, so to access the project media we had to make API calls for each component and with the original implementation, where our project was loading as a whole, every media had to be called and hence there were too many API calls , and there came a situation where our project went into downtime due to excess API calls. Firebase has a free limit of about 50,000 API calls per day for the storage and my page was calling around 5,000 times for the whole page to load for every media like icons,post data, post pictures, comment data, comment content, likes, etc and hence just 10 reloads caused the limit to exceed and site went down as early as morning 4 am. I didn't understand why that happened at first , but then in Firebase console I saw everything ,analysed and came to this conclusion. To tackle this I had to make sure I only call API when the data is needed. So for this I took suggestions and help from open source communities and implemented pagination where we only load around 10 posts at a time and when user reaches end of the page, next 10 posts load, reducing API calls to around 300. I felt great implementing this.

Accomplishments that we're proud of

I managed to reduce API calls to database to around 300,400 from around 3000,4000 and that's an accomplishment I am proud of.

What we learned

I learned to work with open source community and maintain open source project. Also I learned a lot in react and utilised it to a great extent in my project.

What's next for Dummygram

There are loads of features to be implemented in our Dummygram like story feature, Ui enhancements,user profiles and many more.

Built With

Share this project:

Updates