https://github.com/nikcladis/instagram
🔗 Social media application, built with React, React Router, Zustand, Chakra UI, Firebase
https://github.com/nikcladis/instagram
authentication chakra-ui firebase hooks localstorage react react-router social-app social-media social-media-app state-management ui ux zustand
Last synced: 3 months ago
JSON representation
🔗 Social media application, built with React, React Router, Zustand, Chakra UI, Firebase
- Host: GitHub
- URL: https://github.com/nikcladis/instagram
- Owner: nikcladis
- Created: 2023-12-07T18:40:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-04T15:31:42.000Z (over 2 years ago)
- Last Synced: 2025-07-05T23:36:13.246Z (12 months ago)
- Topics: authentication, chakra-ui, firebase, hooks, localstorage, react, react-router, social-app, social-media, social-media-app, state-management, ui, ux, zustand
- Language: JavaScript
- Homepage: https://nikcladis-social-app.vercel.app/
- Size: 4.51 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📱 SocialApp - Instagram Clone
SocialApp is a realtime social app built with Vite, React, Firebase, and other technologies. This chat app is purposefully made for the web, but it also works on mobile devices.
# 🚀 Features
- 🗝 Signup/Login with Google (authentication)
- 👤 View your own profile, name, bio, posts, etc.
- 👀 View others' profiles, posts, comments, etc.
- 🏠 View recent posts on the home page.
- ✍️ Create posts and captions.
- ❤️ Like/unlike posts.
- 🗨 Create comments on posts.
- 👥 Follow/unfollow users.
- 🖼️ Edit profile picture, name, bio, etc.
- 🗑️ Delete posts.
- 💬 View comments on posts.
- 🧐 View suggested users.
# 🛠️ Main Technologies
- `React`
- `Firebase`
- `Chakra UI`
- `Zustand`
- `Vite`
# 📝 Process
I started by highlighting down in my notebook what features I wanted for my social app. I use Instagram a lot so I drew inspiration from that.
I started with the designing part, with the Home Page ("/"), the Authentication Page ("/auth") and Profile Page ("/{username}"), then focused on the Sidebar.
After I set up routing, making the default path to be the authentication page when the user isn't signed up, and setting the Firebase for storing my users credentials.
Then I started adding features to the user's Profile Page, like editing his profile picture/name/bio, uploading posts.
# 🤔 How Can It Be Improved?
It would be amazing if users were able to receive notifications when someone follows them or likes/comments on posts. Adding testing would be benificial as well, something I definitely plan to do next time.