Link to Instagram clone project
Tech Stack: NextJS + React, TypeScript, Tailwind, Zustand, Radix UI + ShadCN UI, html-react-parser
I spent the past 4 weeks working on an Instagram clone to develop my front end skills. I challenged myself to build more features than my Twitter clone project. The features I focused on were:
- Modal routing
- Virtual List
- Dark mode
- Carousel
- Custom video player (shoutout to Web Dev Simplified for his tutorial!)
- Autoplay behavior
- Text parsing for hashtags and @ links
Please check out the project and let me know what you think. I tried to mimic Instagram as closely as possible. I also share my thoughts about implementing the features above in the post descriptions. If you have any questions, feel free to ask me in the comments of this article!
This is only part 1 of the project. I will turn it into a full stack app with the following features:
- User Authentication
- Reels
- Messenger
- Stories
- Notifications
- And many more
I’ll also implement end-to-end testing and fix some bugs (NextJS modal routing has a known issue I need to work around). I would have fixed these issues before deployment but I spent too long on this project and I needed to ship it for my own sanity 😭.
I’ll also implement the following optimizations and compare the differences in speed:
- useMemo
- useCallback
- React.memo
- React.lazy + Suspense
- React Hook Form
- Loading UI
Follow me here on LinkedIn or DEV to follow me on my journey to building robust web apps!
Top comments (0)