Skip to content

==> Building Facebook Clone App with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting + User Authentication (a mobile-friendly)

License

Notifications You must be signed in to change notification settings

saddamarbaa/facebook-clone-app-nex-js

Repository files navigation

Facebook

Building Facebook Clone App with React Js, Next Js, TypeScript, Redux, Styled Components, Material-UI, Firebase, Vercel Hosting, with complete user authentication (a mobile-friendly).

Table of contents

Author

Technologies

Client:

  • React Js
  • Next Js
  • TypeScript
  • Redux
  • Styled Components
  • Material-UI

Server:

  • Firebase Realtime Database
  • Vercel Hosting
  • Firebase Google Authentication
  • Firebase Email and password Authentication

Demo

Optimizations

  • Next' Js Image component
  • Next' Js file-system based router
  • Next' Js Server-side rendering
  • Memoization (useMemo, Memo)
  • Function components
  • React hooks
  • React useEffect cleanup
  • TypeScript

Features

  • Complete user authentication users can sign in, sign out
  • Add post

Contributing

Contributions are always welcome!

Related_Projects

Messenger Clone App built with React Js + Next Js + Redux + Styled Components + Material-UI

LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting

Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons

Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link

WhatsApp Clone App built with React Js + React Context API + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting

Slack Clone App built with React Js + Next Js + Styled Components + firebase-hooks + Material-UI

Airbnb Clone App built with React Js + Next Js + Redux + Tailwind CSS

Amazon Clone App built with React Js + TypeScript + Redux + Styled Components

Tesla Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting

Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase

Support

For support, email [email protected].

Feedback

If you have any feedback, please reach out to me at [email protected]

Twitter https://twitter.com/ArbaaSaddam/

Linkedin. https://www.linkedin.com/in/saddamarbaa/

Github https://github.com/saddamarbaa

Instagram https://www.instagram.com/saddam.dev/

Facebook https://www.facebook.com/saddam.arbaa

Run_Locally

Clone the project

https://github.com/saddamarbaa/facebook-clone-app-nex-js

Go to the project directory

  cd facebook-clone-app-nex-js

Install dependencies

  npm install

Start the server

npm run dev
# or
yarn dev

Environment

  • To run this project, you will need to create a new project on firebase, setup Firebase google authentication as well as Firebase Email and password Authentication and add the following environment variables to your next.config.js

  • API_KEY

  • AUTH_DOMAIN

  • PROJECT_ID

  • STORAGE_BUCKET

  • MESSAIN_SENDER_ID

  • APPID

Status

Project is now complete in (React js + Next js + TypeScript + Styled Components) so my next step I would love to converted to (React + TypeScript + Next.js + Node.js + Express + MongoDB)

Inspiration

Build By Saddam Arbaa Project inspired by [Facebook] https://www.facebook.com/

Screenshots

Responsive on large screens - Home Page

image

image

Responsive on mobile and tablet screens

image

Signup Page

image

image

LogIn Page

image

image

About

==> Building Facebook Clone App with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting + User Authentication (a mobile-friendly)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published