Welcome to my LinkedIn Clone project! This dynamic, full-stack professional networking platform mimics key features of LinkedIn, built using React, TypeScript, Vite, React Router, and Tailwind CSS. It includes functionalities such as user authentication, profile management, post creation, job listings, and more, providing a seamless and engaging user experience.
- User Authentication: Secure user sign-up and login functionality using email & password or OAuth (Google).
- Shimmer UI: Loading placeholders for a smoother user experience during data fetching.
- Responsive Design: Fully responsive UI optimized for both desktop and mobile devices.
- User Profiles: View and edit personal profiles, showcasing professional details like job title, education, and work experience.
- Create and Manage Posts: Users can create posts, add comments, like posts, and view post interactions such as the number of views.
- Delete Posts (To Be Implemented): Users will soon be able to delete their own posts.
- Network Page: View your network and connections in a dedicated network page.
- Notifications: Stay updated with new notifications on the notifications page.
- Jobs Section: Explore job listings and apply for jobs directly from the platform.
- Connections: Manage connections, see who is in your network, and connect with others.
- Dark/Light Mode: Toggle between dark and light mode for a personalized user experience.
- Loading Skeleton: Improved page loading experience with a skeleton loader for smoother transitions during data fetches.
- Delete Posts: The ability to delete posts is in the pipeline.
- Skills Endorsements: Endorse the skills of your connections to boost their credibility.
- Profile Analytics: View who has visited your profile and track the performance of your posts.
- Advanced Search: Search for people, companies, and jobs with advanced filters.
- Real-Time Messaging: Chat with connections through real-time messaging (WebSocket integration planned).
- Optimized Performance: Enhanced loading performance and interaction for a smooth user experience.
- Responsive Design: Fully responsive UI, optimized for both desktop and mobile devices, ensuring seamless experience across platforms.
You can check out the live demo of the LinkedIn Clone project at: Live Demo
- React.js with TypeScript – for building a scalable, maintainable, and type-safe user interface.
- Vite – a fast build tool for development, ensuring quick reloads and a smooth developer experience.
- Tailwind CSS – for utility-first CSS styling that enhances the user experience.
- React Router – for client-side routing and smooth page transitions.
- Firebase – for authentication, real-time database, and file storage (e.g., user data, posts, job listings).
- Vercel/Netlify – for front-end hosting, providing fast and reliable content delivery.
- Firebase Hosting – for hosting both front-end and back-end in a serverless environment.
- Prettier – for code formatting to maintain consistent code style across the project.
- ESLint – for ensuring consistent code quality and identifying potential issues during development.
This project is developed by:
Follow these instructions to set up the project locally.
- Node.js (v18 or higher) - You can download it from here.
To get started, clone the repository to your local machine using the following command:
git clone https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript.gitcd LinkedIn-clone-app-react-typescriptOnce you’ve cloned the repository, navigate to the project folder and install the required dependencies:
npm installCopy .env.example to .env and update the necessary values.
For user authentication, you'll need to set up Firebase:
- Go to the Firebase Console.
- Create a new project or select an existing project.
- Enable Firebase Authentication (Email/Password and Google).
- Copy the Firebase config and add it to the
.envfile in your project.
Once the setup is complete, you can run the project locally using:
npm run devThis will start the development server, and you can view the app in your browser at http://localhost:3000.
To configure the project, you'll need to add the necessary environment variables. Follow these steps:
- Copy
.env.exampleto.env. - Update the environment variables with your Firebase configuration:
VITE_REACT_APP_FIREBASE_API_KEY=""
VITE_REACT_APP_AUTH_DOMAIN=""
VITE_REACT_APP_PROJECT_ID=""
VITE_REACT_APP_STORAGE_BUCKET=""
VITE_REACT_APP_MESSAGING_SENDER_ID=""
VITE_REACT_APP_APP_ID=""-
Prepare Environment Variables:
Ensure that the necessary environment variables are set up in your production environment:
VITE_REACT_APP_FIREBASE_API_KEYVITE_REACT_APP_AUTH_DOMAINVITE_REACT_APP_PROJECT_IDVITE_REACT_APP_STORAGE_BUCKETVITE_REACT_APP_MESSAGING_SENDER_IDVITE_REACT_APP_APP_ID
-
Push Your Code to a Git Repository:
Push your code to a remote repository like GitHub, GitLab, or Bitbucket.
-
Set Up a Hosting Service:
You can deploy the app on platforms like:
-
Vercel:
npm i -g vercel vercel login npm run build vercel --prod
-
Netlify:
npm i -g netlify-cli netlify login npm run build netlify deploy --prod
Set the necessary environment variables in the respective dashboard (Vercel or Netlify).
-
-
Set Up Firebase:
Ensure that Firebase Authentication, Firestore, and Storage are configured as needed in your Firebase Console. Ensure that the Firebase environment variables are correctly set in your deployment platform.
-
Additional Considerations:
- Security: Ensure that sensitive information (like API keys) is securely stored in environment variables.
- Build Process: Always run
npm run buildbefore deploying to ensure an optimized production build.
Once deployed, your application will be live, and you can access it through the provided URL from Vercel or Netlify.
Contributions are welcome! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeatureName). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/YourFeatureName). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
- Current Status: This project is in active development.
This project was inspired by LinkedIn's platform, with an additional focus on building a modern, feature-rich web application using React. The goal is to replicate core LinkedIn features while adding enhancements like dark mode and Firebase authentication.
If you encounter any issues while setting up or using the app, feel free to raise an issue on the GitHub repository, and we will do our best to assist you. Alternatively, you can contact us via email or through social media.
We value your feedback and would love to hear from you! If you have any suggestions, improvements, or bugs to report, please feel free to:
- Open an issue on the GitHub Issues page.
- Send us an email at [linkedinclone@example.com].
Your feedback helps us improve the project and provide a better experience for everyone.
A RESTful API for managing blog posts and user authentication, built with modern technologies.
-
Features:
✅ JWT-based authentication with role-based access control.
✅ Advanced filtering, pagination, and search functionalities.
✅ Scalable and maintainable architecture. -
Tech Stack:
🛠️ Node.js | Express | MongoDB | TypeScript
A developer matchmaking app designed to connect developers based on skills and interests.
-
Features:
✅ Developer matching algorithm.
✅ Real-time chat for seamless communication.
✅ Dynamic and responsive user interface. -
Tech Stack:
🛠️ React | Vite | TypeScript | REST API
A fully functional YouTube clone with video uploads, comments, and playlists.
-
Features:
✅ Video streaming with like/comment functionality.
✅ Playlist creation and management.
✅ User profile customization. -
Tech Stack:
🛠️ React | Vite | TypeScript
A Netflix-inspired platform for movie streaming and user authentication.
-
Features:
✅ Movie streaming with Firebase authentication.
✅ Real-time search powered by ChatGPT.
✅ Sleek and responsive design. -
Tech Stack:
🛠️ React | TypeScript | Firebase
A real-time Twitter clone with tweet posting and updates.
-
Features:
✅ Tweet creation and commenting.
✅ Real-time notifications and follow system.
✅ Secure user authentication. -
Tech Stack:
🛠️ Next.js | TypeScript | Firebase
An Instagram-inspired app with image uploads and interactive features.
-
Features:
✅ Photo uploads with comments and likes.
✅ User authentication via Firebase.
✅ Responsive and visually appealing design. -
Tech Stack:
🛠️ Next.js | TypeScript | Firebase
A real-time messaging app inspired by Facebook Messenger.
-
Features:
✅ Real-time chat using Firebase Firestore.
✅ Group chat and media sharing.
✅ User-friendly interface. -
Tech Stack:
🛠️ Next.js | Firebase | Material-UI
An Amazon-inspired e-commerce platform with product listings and cart management.
-
Features:
✅ Product browsing and add-to-cart functionality.
✅ User authentication and order history.
✅ Secure payment integration. -
Tech Stack:
🛠️ React | Redux | Firebase
A Google homepage clone with real-time search functionality.
-
Features:
✅ Real-time search bar with suggestions.
✅ Mobile-friendly, responsive design.
✅ Minimalistic and fast UI. -
Tech Stack:
🛠️ Next.js | TypeScript | Tailwind CSS
A Gmail-inspired app for email management and composition.
-
Features:
✅ Email sending with secure authentication.
✅ Responsive inbox interface.
✅ Easy-to-use email composition tools. -
Tech Stack:
🛠️ Next.js | Firebase | Tailwind CSS
A Tesla-inspired app for browsing cars and managing user accounts.
-
Features:
✅ Interactive car browsing with detailed specs.
✅ Secure user authentication and account management.
✅ Modern and sleek design. -
Tech Stack:
🛠️ React | TypeScript | Styled Components