LinkedIn Clone
Building LinkedIn Clone App with React Js, TypeScript, Redux, Styled Component,
Material-UI, Firebase Realtime Database, Vercel Hosting,
with complete user authentication (a mobile-friendly).
Table of contents
Author
@Saddam Arbaa
Technologies
Client:
- React Js
- Redux
- Styled Component
- Material-UI
- TypeScript
Server:
- Firebase Realtime Database
- Vercel Hosting
- Firebase Google Authentication
- Firebase Email and password Authentication
Demo
LIVE DEMO
Features
- Complete user authentication users can sign in, sign out
- Add post
Optimizations
- Memoization (useMemo, Memo)
- react-lazy-load-image-component
- Code-Splitting – React
- Function components
- React hooks
- React useEffect cleanup
- Server-side rendering - Next.js(TODO)
- TypeScript
Contributing
Contributions are always welcome!
Related_Projects
Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons
Github Repo
LIVE DEMO
Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components
Github Repo
LIVE DEMO
Messenger Clone App built with React Js + Next Js + Redux + Styled Components + Material-UI
Github Repo
LIVE DEMO
Gmail Clone App built with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
Github Repo
LIVE DEMO
Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link
Github Repo
WhatsApp Clone App built with React Js + React Context API + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting
Github Repo
LIVE DEMO
Slack Clone App built with React Js + Next Js + Styled Components + firebase-hooks + Material-UI
Github Repo
LIVE DEMO
Airbnb Clone App built with React Js + Next Js + Redux + Tailwind CSS
Github Repo
LIVE DEMO
Amazon Clone App built with React Js + TypeScript + Redux + Styled Components
Github Repo
LIVE DEMO
Tesla Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting
Github Repo
LIVE DEMO
Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase
Github Repo
LIVE DEMO
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/LinkedIn-clone-app-react-typescript
Go to the project directory
cd LinkedIn-clone-app-react-typescript
Install dependencies
npm install
Start the server
npm start
Environment
-
To run this project, you will need to create a new project on firebase, setup Firebase Realtime Database and add the following environment variables to your .env file
-
REACT_APP_FIREBASE_API_KEY
-
REACT_APP_AUTH_DOMAIN
-
REACT_APP_STORAGE_BUCKET
-
REACT_APP_PROJECT_ID
-
REACT_APP_MESSAIN_SENDER_ID
-
REACT_APP_APPID
Status
Project is now complete in React js so my next step I would love to convert to React + TypeScript + Next.js
Inspiration
Build By Saddam Arbaa Project inspired by [linkedIn] https://www.linkedin.com/
Deployment
To deploy this project on firebase Flow the firebase documentation Firebase Documentation
- create a new project on firebase
- npm install -g firebase-tools
- firebase init
- npm run build
- firebase deploy
Screenshots
Responsive on large screens - Home Page
Responsive on mobile and tablet screens
Loading screen
Sign in page
LogIn Page
Welcoming Page