Instagram Post Sharing Web App Built With React And MongoDB
Instagram Post-Sharing-Web-App
Instagram Post-Sharing-Web-App
Inspiration?
Today, the world is full of posts, videos of every kind, this makes me curious about how this all works, it inspires me a lot to make something similar to, day today’s apps like Instagram, TikTok, etc.
What it does?
Instagram Post-Sharing-Web-App (commonly abbreviated to IG, Insta, or the gram)[is a photo-sharing social networking platform. The app allows users to upload media i.e photos that can be liked and disliked. Posts can be shared publicly or with pre-approved followers. Users can like photos and follow other users to add their content to a personal feed.
It is a full-stack web application, we made using the MERN stack. It first opens with a login screen, a user needs to log in if an account exists or need to create an account and if new to the platform, after successful signup it redirects the user to the login screen and now user need to login, that’s how the auth works.
Now after login, the home screen appears with lots of posts of users, they make like, unlike, or go to any user’s profile from home screens posts, may follow and unfollow them as per their preference, see the gallery of other peoples, and if they wish to make a new post they may select create post camera icon from the home screen.
Also, the search icon is at the top, if someone wants to find their friend and wants to connect, they may make use of the search feature.
Most lovingly if users want to appreciate someone’s post they may comment on the post and express themselves.
And finally, they can log out of the app if they want using the logout button.
How We built it?
I started by creating a prototype in Figma. The mobile application was built using MERN stack and VS-Studio as a tool. We made use of JWT(javascript web token) for authentication and for saving user data. I used cloudinary API for image storage and SendGrid API for sending welcome emails. And finally deployed at Heroku.
Challenges We ran into?
I was very new to JWT authentication, I find it difficult to integrate it with the web app, then at deployment time(It was my first deployment with Heroku) too much difficulty arises because of secure keys, which was very new to me and I was not aware of, how to hide them before production.
Accomplishments that I’m proud of?
I was able to create our proper authentication system along with the forgetting password option which I never really tried before. I also explored JWT, Cloudinary API, SendGrid API in a deep way and got to understand how a few things worked a particular way. At last how to deploy a web application to Heroku.
What I learned?
I got more experience in MERN stack and JWT by building this application. Got to learn about different authentication systems and how everything interacts in the web application during auth. I also wished to integrate video in the app and hence got a chance to work around how video solutions parse using URLs.And how to integrate different APIs in web applications.
What’s next for Instagram Post-Sharing-Web-App?
The current point system that I have is dynamic but I would love to introduce videos and story feature options into the application to make the whole experience even more rewarding.
Project demo Vedio/Gallery?
https://www.linkedin.com/feed/update/urn:li:activity:6839890014701182976/
2021-08-15-12-00-48.mp4
Try it out here
You can download It from the google play store
Try it here – http://instagram-twin.herokuapp.com/signin