A clone of Instagram built with React, TypeScript and Firebase.
- Login with Gmail or create your own account
- Crop and upload images with captions, tags and a location to your profile
- View user profiles with dynamic routing
- Search for, follow and tag other users in your posts
- Comment on and Like other users' posts
- View the posts of the users you follow on the home page
- View the explore page to view all posts on to Reactagram
- Receive notifications upon user interactions
Tasked with creating a clone of a favourite website, this was created for the final project in The Odin Project's JavaScript section. I went with Instagram as I figured I could showcase my skills by going deep with features. It's also very familiar and recognizable to most people.
For this project, I set out to build the most complete clone of Instagram on the internet. Shoot for the moon and land among the stars, right? Although it's missing Instagram's chat and some small QoL features, I think I managed to do fairly well considering it was made solely by myself in 2.5 weeks rather than by the undoubtedly massive collective efforts of Facebook.
Hammering down the functionality and interaction with Firebase was undoubtedly one of the biggest challenges of this project. I also had a tough time with the dynamic routing for user profiles, but with some grit and perseverance, I overcame these challenges.
This project made use of React, TypeScript, Firebase (partly through Reactfire), React Router, and styled-components. I also didn't want to waste time reinventing the wheel and used Bootstrap for just on UI element - a popover.
I chose React and TypeScript as they synergise incredibly well, with React allowing for blazingly fast website creation and TypeScript allowing for type-checking and reduced debugging time. Firebase was an obvious choice as I have yet to learn backend and NodeJS (that's next!). Firebase is a backend-as-a-service that allows the data to be hosted for free by Google. Thanks Google!
The next time I create such an app, I hope to use a backend created by myself as well as learn more about animation in React.