Instagram Clone
React clone project that includes most of Instagram’s features. (Register, Login, Forgot Password, Feed, Profile, Edit Profile, Direct Chat, Post, Follow, Unfollow, Like, Comment etc.)
Click to view live demo
(jubstaa-igclone-myproject.netlify.app)
Techs I Used
- react
- redux
- react-router
- tailwind
- firebase auth
- firestore
- firebase realtime database
- firebase cloud storage
- classnames
- axios
- formik
- yup
- emoji-picker-react
- react-drag-drop-file
- react-helmet
- react-hot-toast
- react-share
- react-icons
- react-timeago
- react-twitter-embed
- react-hot-toast
- uuid
Features
UI
- I worked on UI based on the Instagram design.
- According to the page you are on, the title is dynamically updated with react-helmet.
- Responsive Design
Login Page
- You can login with your registered account.
- You can login with Facebook(Soon)
- You can sign up for app.
- You can use the forgot password option. You will receive a password change link in your email address.
Header
- You can search registered users with search bar.
- Available buttons on the right. Home, Direct, Notifications, Add Post, Profile, Saved, Settings, Logout.
Main Page (Feed & Sidebar)
- Shows you and your followers posts by posting date.
- Your profile appears on sidebar, you can click and go to your profile.
Post
- You can like, comment, send to your friend via direct message and save post.
- You can go to url of post by clicking on 3 dots, copy url and share post on your social media accounts.
- If the post belongs to you, you can delete or edit the post as an extra.
- You can translate the post title to your language by clicking on "See translation" text below the post.
- You can add emoji to your comment using the emoji box.
Add Post
- You can select post you want to share from your computer or use drag and drop method.
- You can add title, location, alt text information to your post and share it.
Notifications
- Follower, like and comment notifications are displayed in this section in time order.
- If notifications are not read, they are displayed with an extra marker.
Direct
- In this section, you can chat with user you want in realtime.
- Chats are sorted by date of most recent message.
- Unread chats appear in bold with a blue dot next to them. Number of unread chats is displayed on direct icon in header
- You can use emoji, send picture and heart in the message section.
- If a url is detected in message it will turn it into a clickable link.
Notifications
- You can see likes, comments and follow notifications.
- Red dot appears when there are unread notifications.
Profile
- In this section you can see your profile information.
- You can see posts you have shared and posts you have saved.
- You can see users of followers and users you follow.
Settings(Edit Profile & Change Password)
- In this section you can change or remove your profile photo.
- You can update your name, username, website, bio and email information.
- You can deactive your account temporarily.
- You can change your password.
