Skip to content

Build an instagram clone using React in the frontend, firebase in the backend and styling with TailWind CSS.

Notifications You must be signed in to change notification settings

aghsa97/Instagram-clone

Repository files navigation

Instagram-clone from scratch using React, Tailwind CSS and Firebase

📣 Summary

This single page app (instagram-clone) was built using react (Custom Hooks and context), firebase firestore and tailwind css.

I enjoyed using the custom hooks and context in react due to its appility to get the data easly from the parents components and the hooks allowed me to handle the life-cickle of the componenets without any complitcations.

Tailwind css is really fun and easy to use. Setting up Tailwind can be a bit hard but once everything is satup you will enjoy styling and builing your own components. (It can help you a lot in case your building a responsive app).

there are four main pages (Sign up, sign in, dashboard and profile page) some are public and some are private with auth listeners. Firebase firestore handles all the data, and that data is retrieved using a custom hook.

In this app as a user can:

  • Sign in / sign up.
  • Have an account and a profile page.
  • Check other users profile pages.
  • Follow / unfollow users.
  • Get suggested users that not in your followers.
  • Comment and like pictuers.
  • Sign out from your account.

This app has three four pages:

  • Sign up.
  • Sign in.
  • Dashboard.
  • Profile Page.

This app has:

  • Auth user feature.
  • Protected routes.
  • Storing Username, email, fullname, capture, followers, followed accounts, likes and comments in the database.

alt text

About

Build an instagram clone using React in the frontend, firebase in the backend and styling with TailWind CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published