{"id":15570169,"url":"https://github.com/saddamarbaa/linkedin-clone-app-react-typescript","last_synced_at":"2025-04-24T02:11:23.767Z","repository":{"id":41452254,"uuid":"382093159","full_name":"saddamarbaa/LinkedIn-clone-app-react-typescript","owner":"saddamarbaa","description":"==\u003e Building LinkedIn Clone App with React Js + Vite + TypeScript + Tailwind CSS + Firebase Realtime Database +  Vercel Hosting + User Authentication (a mobile-friendly) ","archived":false,"fork":false,"pushed_at":"2025-02-02T07:47:48.000Z","size":15199,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T09:34:32.577Z","etag":null,"topics":["firbase","google-login","react","reacticons","tailwindcss","typescipt","vite"],"latest_commit_sha":null,"homepage":"https://linked-in-clone-app-react-typescript.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saddamarbaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-01T16:24:04.000Z","updated_at":"2025-04-12T01:33:03.000Z","dependencies_parsed_at":"2025-04-17T21:06:51.002Z","dependency_job_id":"c9036ff1-e4f7-41b1-9fbb-e74d9c7c60b9","html_url":"https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saddamarbaa%2FLinkedIn-clone-app-react-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saddamarbaa%2FLinkedIn-clone-app-react-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saddamarbaa%2FLinkedIn-clone-app-react-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saddamarbaa%2FLinkedIn-clone-app-react-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saddamarbaa","download_url":"https://codeload.github.com/saddamarbaa/LinkedIn-clone-app-react-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546086,"owners_count":21448260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firbase","google-login","react","reacticons","tailwindcss","typescipt","vite"],"created_at":"2024-10-02T17:41:28.449Z","updated_at":"2025-04-24T02:11:23.751Z","avatar_url":"https://github.com/saddamarbaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# LinkedIn Clone - Full-Stack Professional Networking Platform\n\nWelcome 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.\n\n[![Build Status](https://img.shields.io/badge/build-passing-brightgreen)](https://your-build-link)\n[![License](https://img.shields.io/badge/license-MIT-blue)](https://opensource.org/licenses/MIT)\n[![React](https://img.shields.io/badge/react-18.3.1-61DAFB?style=flat\u0026logo=react\u0026logoColor=white)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.6.2-blue)](https://www.typescriptlang.org/)\n[![Version](https://img.shields.io/badge/version-0.0.0-blue)](https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript/releases)\n[![Last Commit](https://img.shields.io/github/last-commit/saddamarbaa/LinkedIn-clone-app-react-typescript)](https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript/commits/main)\n\n\n\n---\n\n## ✨ Features\n\n### Core Features:\n- **User Authentication**: Secure user sign-up and login functionality using **email \u0026 password** or **OAuth (Google)**.\n- **Shimmer UI**: Loading placeholders for a smoother user experience during data fetching.\n- **Responsive Design**: Fully responsive UI optimized for both desktop and mobile devices.\n- **User Profiles**: View and edit personal profiles, showcasing professional details like job title, education, and work experience.\n- **Create and Manage Posts**: Users can create posts, add comments, like posts, and view post interactions such as the number of views.\n- **Delete Posts (To Be Implemented)**: Users will soon be able to delete their own posts.\n- **Network Page**: View your network and connections in a dedicated network page.\n- **Notifications**: Stay updated with new notifications on the notifications page.\n- **Jobs Section**: Explore job listings and apply for jobs directly from the platform.\n- **Connections**: Manage connections, see who is in your network, and connect with others.\n- **Dark/Light Mode**: Toggle between dark and light mode for a personalized user experience.\n- **Loading Skeleton**: Improved page loading experience with a skeleton loader for smoother transitions during data fetches.\n\n### Planned Features:\n- **Delete Posts**: The ability to delete posts is in the pipeline.\n- **Skills Endorsements**: Endorse the skills of your connections to boost their credibility.\n- **Profile Analytics**: View who has visited your profile and track the performance of your posts.\n- **Advanced Search**: Search for people, companies, and jobs with advanced filters.\n- **Real-Time Messaging**: Chat with connections through real-time messaging (WebSocket integration planned).\n\n### Bonus Features:\n- **Optimized Performance**: Enhanced loading performance and interaction for a smooth user experience.\n- **Responsive Design**: Fully responsive UI, optimized for both desktop and mobile devices, ensuring seamless experience across platforms.\n\n---\n\n## 🚀 Live Demo\n\nYou can check out the live demo of the LinkedIn Clone project at: [Live Demo](https://linked-in-clone-app-react-typescript.vercel.app/)\n\n\n## 📸 Screenshots\n\n### Responsive on large screens - Home Page\n\n![image](https://user-images.githubusercontent.com/51326421/176983604-da9965c6-4cad-4d3c-8a38-75d67471c70b.png)\n\n### Responsive on mobile and tablet screens\n\n![image](https://user-images.githubusercontent.com/51326421/176983621-8cacc724-03bb-4e75-b00d-13cb81277d67.png)\n\n### Loading screen\n\n![image](https://user-images.githubusercontent.com/51326421/176983781-b2dc2a1b-ff9e-4b85-97b4-2c44d92aeff8.png)\n\n### Sign in page\n\n![image](https://user-images.githubusercontent.com/51326421/176983699-fcd9cbbb-7bc4-4e0b-ac8c-e4d71e6f8119.png)\n\n![image](https://user-images.githubusercontent.com/51326421/176983709-f8c94795-3952-47ec-96bf-e5a4ca81afaa.png)\n\n### LogIn Page\n\n![image](https://user-images.githubusercontent.com/51326421/176983730-1a229a63-8de7-4c71-a77b-1dc8f245084f.png)\n\n![image](https://user-images.githubusercontent.com/51326421/176983743-36e6f01c-ef2f-4cc2-87b4-c73acca6a124.png)\n\n### Welcoming Page\n\n![image](https://user-images.githubusercontent.com/51326421/128429995-55619601-d721-4ecf-acd2-1b815c9ed253.png)\n\n\n---\n\n## 🛠 Tech Stack\n\n### Front-End:\n- **React.js** with **TypeScript** – for building a scalable, maintainable, and type-safe user interface.\n- **Vite** – a fast build tool for development, ensuring quick reloads and a smooth developer experience.\n- **Tailwind CSS** – for utility-first CSS styling that enhances the user experience.\n- **React Router** – for client-side routing and smooth page transitions.\n\n### Back-End:\n- **Firebase** – for authentication, real-time database, and file storage (e.g., user data, posts, job listings).\n\n### Deployment:\n- **Vercel/Netlify** – for front-end hosting, providing fast and reliable content delivery.\n- **Firebase Hosting** – for hosting both front-end and back-end in a serverless environment.\n\n### Tools \u0026 Libraries:\n- **Prettier** – for code formatting to maintain consistent code style across the project.\n- **ESLint** – for ensuring consistent code quality and identifying potential issues during development.\n\n---\n\n## 🧑‍💻 Author\n\nThis project is developed by:\n\n- [Saddam Arbaa](https://github.com/saddamarbaa)\n\n\n---\n\n## Getting Started\n\nFollow these instructions to set up the project locally.\n\n### Prerequisites\n\n- Node.js (v18 or higher) - You can download it from [here](https://nodejs.org/en/).\n\n### Installation\n\n#### 1. Clone the Repository\n\nTo get started, clone the repository to your local machine using the following command:\n\n```bash\ngit clone https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript.git\n```\n\n#### 2. Go to the Project Directory\n\n```bash\ncd LinkedIn-clone-app-react-typescript\n```\n\n#### 3. Install Dependencies and Set Up Environment Variables\n\nOnce you’ve cloned the repository, navigate to the project folder and install the required dependencies:\n\n```bash\nnpm install\n```\n\nCopy `.env.example` to `.env` and update the necessary values.\n\n#### 4. Set up Firebase\n\nFor user authentication, you'll need to set up Firebase:\n\n1. Go to the [Firebase Console](https://console.firebase.google.com/).\n2. Create a new project or select an existing project.\n3. Enable Firebase Authentication (Email/Password and Google).\n4. Copy the Firebase config and add it to the `.env` file in your project.\n\n#### 5. Run the Project\n\nOnce the setup is complete, you can run the project locally using:\n\n```bash\nnpm run dev\n```\n\nThis will start the development server, and you can view the app in your browser at `http://localhost:3000`.\n\n## 🌍 Environment Variables\n\nTo configure the project, you'll need to add the necessary environment variables. Follow these steps:\n\n1. Copy `.env.example` to `.env`.\n2. Update the environment variables with your Firebase configuration:\n\n```env\nVITE_REACT_APP_FIREBASE_API_KEY=\"\"\nVITE_REACT_APP_AUTH_DOMAIN=\"\"\nVITE_REACT_APP_PROJECT_ID=\"\"\nVITE_REACT_APP_STORAGE_BUCKET=\"\"\nVITE_REACT_APP_MESSAGING_SENDER_ID=\"\"\nVITE_REACT_APP_APP_ID=\"\"\n```\n\n## 📦 Deployment\n\n### Deploying to Production\n\n1. **Prepare Environment Variables**:\n\n   Ensure that the necessary environment variables are set up in your production environment:\n\n   - `VITE_REACT_APP_FIREBASE_API_KEY`\n   - `VITE_REACT_APP_AUTH_DOMAIN`\n   - `VITE_REACT_APP_PROJECT_ID`\n   - `VITE_REACT_APP_STORAGE_BUCKET`\n   - `VITE_REACT_APP_MESSAGING_SENDER_ID`\n   - `VITE_REACT_APP_APP_ID`\n\n2. **Push Your Code to a Git Repository**:\n\n   Push your code to a remote repository like GitHub, GitLab, or Bitbucket.\n\n3. **Set Up a Hosting Service**:\n\n   You can deploy the app on platforms like:\n\n   - **Vercel**:\n     ```bash\n     npm i -g vercel\n     vercel login\n     npm run build\n     vercel --prod\n     ```\n\n   - **Netlify**:\n     ```bash\n     npm i -g netlify-cli\n     netlify login\n     npm run build\n     netlify deploy --prod\n     ```\n\n   Set the necessary environment variables in the respective dashboard (Vercel or Netlify).\n\n4. **Set Up Firebase**:\n\n   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.\n\n5. **Additional Considerations**:\n\n   - **Security**: Ensure that sensitive information (like API keys) is securely stored in environment variables.\n   - **Build Process**: Always run `npm run build` before deploying to ensure an optimized production build.\n\nOnce deployed, your application will be live, and you can access it through the provided URL from Vercel or Netlify.\n\n\n\n## 🤝 Contributing\n\nContributions are welcome! If you'd like to contribute, please follow these steps:\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/YourFeatureName`).\n3. Commit your changes (`git commit -m 'Add some feature'`).\n4. Push to the branch (`git push origin feature/YourFeatureName`).\n5. Open a pull request.\n\n---\n\n\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n\n\n## 🔄 Status\n\n- **Current Status**: This project is in **active development**.\n\n## 💡 Inspiration\n\nThis 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.\n\n## 🛠️ Support\n\nIf 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.\n\n## 📝 Feedback\n\nWe value your feedback and would love to hear from you! If you have any suggestions, improvements, or bugs to report, please feel free to:\n\n- Open an issue on the [GitHub Issues page](https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript/issues).\n- Send us an email at [linkedinclone@example.com].\n\nYour feedback helps us improve the project and provide a better experience for everyone.\n\n\n## 🌟 Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=saddamarbaa/LinkedIn-clone-app-react-typescript\u0026type=Date)](https://star-history.com/#saddamarbaa/LinkedIn-clone-app-react-typescript\u0026Date)\n\n---\n\n## 🌐 Social Links\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue?style=for-the-badge\u0026logo=linkedin)](https://www.linkedin.com/in/saddamarbaa/)\n[![Twitter](https://img.shields.io/badge/Twitter-Follow-blue?style=for-the-badge\u0026logo=twitter)](https://twitter.com/ArbaaSaddam)\n\n---\n\n\n\n## 📝 Related Projects\n\n---\n\n## 🛠️ **APIs \u0026 Backend Projects**\n\n### **Open Source Blog REST API**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/node-express-mongodb-typescript-blog-rest-api)  \nA RESTful API for managing blog posts and user authentication, built with modern technologies.  \n\n- **Features:**  \n  ✅ JWT-based authentication with role-based access control.  \n  ✅ Advanced filtering, pagination, and search functionalities.  \n  ✅ Scalable and maintainable architecture.  \n\n- **Tech Stack:**  \n  🛠️ Node.js | Express | MongoDB | TypeScript  \n\n---\n\n### **Dev Match App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/developer-match-app-vite-react-typescript)  \nA developer matchmaking app designed to connect developers based on skills and interests.  \n\n- **Features:**  \n  ✅ Developer matching algorithm.  \n  ✅ Real-time chat for seamless communication.  \n  ✅ Dynamic and responsive user interface.  \n\n- **Tech Stack:**  \n  🛠️ React | Vite | TypeScript | REST API  \n\n---\n\n## 🎥 **Video Streaming Platforms**\n\n### **YouTube Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/Youtube-clone-app-react-vite-typescript)  \nA fully functional YouTube clone with video uploads, comments, and playlists.  \n\n- **Features:**  \n  ✅ Video streaming with like/comment functionality.  \n  ✅ Playlist creation and management.  \n  ✅ User profile customization.  \n\n- **Tech Stack:**  \n  🛠️ React | Vite | TypeScript  \n\n---\n\n### **Netflix Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/netflix-clone-app-react-typescript)  \nA Netflix-inspired platform for movie streaming and user authentication.  \n\n- **Features:**  \n  ✅ Movie streaming with Firebase authentication.  \n  ✅ Real-time search powered by ChatGPT.  \n  ✅ Sleek and responsive design.  \n\n- **Tech Stack:**  \n  🛠️ React | TypeScript | Firebase  \n\n---\n\n## 🐦 **Social Media Platforms**\n\n### **Twitter Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/twitter-clone-app-nextjs-typescript)  \nA real-time Twitter clone with tweet posting and updates.  \n\n- **Features:**  \n  ✅ Tweet creation and commenting.  \n  ✅ Real-time notifications and follow system.  \n  ✅ Secure user authentication.  \n\n- **Tech Stack:**  \n  🛠️ Next.js | TypeScript | Firebase  \n\n---\n\n### **Instagram Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/Instagram-clone-app-nex-js)  \nAn Instagram-inspired app with image uploads and interactive features.  \n\n- **Features:**  \n  ✅ Photo uploads with comments and likes.  \n  ✅ User authentication via Firebase.  \n  ✅ Responsive and visually appealing design.  \n\n- **Tech Stack:**  \n  🛠️ Next.js | TypeScript | Firebase  \n\n---\n\n## 💬 **Messaging Platforms**\n\n### **Messenger Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/messenger-clone-app-nex-js)  \nA real-time messaging app inspired by Facebook Messenger.  \n\n- **Features:**  \n  ✅ Real-time chat using Firebase Firestore.  \n  ✅ Group chat and media sharing.  \n  ✅ User-friendly interface.  \n\n- **Tech Stack:**  \n  🛠️ Next.js | Firebase | Material-UI  \n\n---\n\n## 🛒 **E-Commerce Platforms**\n\n### **Amazon Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/amazon-clone-app-react-typescript)  \nAn Amazon-inspired e-commerce platform with product listings and cart management.  \n\n- **Features:**  \n  ✅ Product browsing and add-to-cart functionality.  \n  ✅ User authentication and order history.  \n  ✅ Secure payment integration.  \n\n- **Tech Stack:**  \n  🛠️ React | Redux | Firebase  \n\n---\n\n## 🔍 **Search \u0026 Discovery Platforms**\n\n### **Google Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/google-clone-app-nex-js-typeScript)  \nA Google homepage clone with real-time search functionality.  \n\n- **Features:**  \n  ✅ Real-time search bar with suggestions.  \n  ✅ Mobile-friendly, responsive design.  \n  ✅ Minimalistic and fast UI.  \n\n- **Tech Stack:**  \n  🛠️ Next.js | TypeScript | Tailwind CSS  \n\n---\n\n## 📧 **Email \u0026 Productivity Platforms**\n\n### **Gmail Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/Gmail-clone-app-nex-js)  \nA Gmail-inspired app for email management and composition.  \n\n- **Features:**  \n  ✅ Email sending with secure authentication.  \n  ✅ Responsive inbox interface.  \n  ✅ Easy-to-use email composition tools.  \n\n- **Tech Stack:**  \n  🛠️ Next.js | Firebase | Tailwind CSS  \n\n---\n\n## 🚗 **Other Platforms**\n\n### **Tesla Clone App**  \n[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-blue)](https://github.com/saddamarbaa/tesla-clone-app-react-typescript)  \nA Tesla-inspired app for browsing cars and managing user accounts.  \n\n- **Features:**  \n  ✅ Interactive car browsing with detailed specs.  \n  ✅ Secure user authentication and account management.  \n  ✅ Modern and sleek design.  \n\n- **Tech Stack:**  \n  🛠️ React | TypeScript | Styled Components  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaddamarbaa%2Flinkedin-clone-app-react-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaddamarbaa%2Flinkedin-clone-app-react-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaddamarbaa%2Flinkedin-clone-app-react-typescript/lists"}