My FeedDiscussionsHashnode Enterprise
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Our Own Instagram

Just in 5 days....

Ramlala Yadav's photo
Ramlala Yadav
·Oct 3, 2021·

2 min read

Our Own Instagram

Hello everyone, I am Ramlala Yadav, In this blog, I am going to share my experience with my construct week project at Masai School. we had given 5 days to clone the Instagram website with four members in a team. First, we began with visiting the original website to mark important features which are required and we divided the work among us. The challenge was to create a backend, we were having some basic knowledge of MongoDB and express, but we were not much confident. But we learned the things which are needed by doing UI Parts at the front-end side by side and completed the project. Overall it was an amazing experience.

We used React.js, for the front-end and Node.js, Moongoose, express.js, etc for the back-end.

What is Instagram.com and what functionalities have we added to our project?

Instagram is an entirely visual platform. Unlike Facebook, which relies on both text and pictures, or Twitter, which relies on text alone, Instagram's sole purpose is to enable users to share images or videos with their audience

We made a homepage, login/register page, navbar, posting a photo, texting, commenting on post, sharing stories, etc.

Home Page

At home page you can see navbar at top and posts below and even follow suggestion side,

Screenshot from 2021-10-03 18-28-29.png

Profile Page

In profile page you can see user profile details and the post which are posted, saved posts from other users, etc.

Screenshot from 2021-10-03 18-37-47.png

Settings Edit Profile Page

In this Page you can change the profile photo add or edit bio and other details.

Screenshot from 2021-10-03 18-39-57.png

Posting a photo

You can post your photo with caption and it will add to the post section.

Screenshot from 2021-10-03 18-41-17.png

Screenshot from 2021-10-03 18-41-57.png

Screenshot from 2021-10-03 18-42-08.png

Stories

You can see the stories of the people whom you follow in this.You can also add your story.

Screenshot (376).png

For storing photos we used Cloudly.com , which provide free photos, videos uploading feature for free till 1GB, for the back-end data we used Mongoose atlas which provide free online data storage. So thank you very much #Cloudly and #mongoose/atlas. You can visit my Github repo MyInstagram. thank you so much for your valuable time. we are open to feedback.

65d4a33521f6f15d4b8f3b5cdeaec29d.gif