Skip to content

git-since2005/Linkedin-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

2 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

LinkedIn Community Platform

A mini LinkedIn-like community platform built with modern web technologies. This platform allows users to create profiles, share posts, follow other users, and interact through likes and comments.

πŸš€ Features

Core Features

  • User Authentication: Register and login with email/password
  • User Profiles: Complete profiles with name, email, bio, and avatar
  • Public Post Feed: Create, read, and display text posts
  • Profile Pages: View user profiles and their posts
  • Follow System: Follow/unfollow other users
  • Like & Comment: Interact with posts through likes and comments
  • Search Users: Search for users by name
  • Responsive Design: Mobile-first responsive UI

Additional Features

  • Real-time Updates: Posts and interactions update in real-time
  • Pagination: Load more posts with pagination
  • Form Validation: Comprehensive client and server-side validation
  • Toast Notifications: User-friendly notifications for actions
  • Modern UI: Clean, professional design with Tailwind CSS

πŸ›  Tech Stack

Frontend

  • Next.js 14 - React framework with App Router
  • TypeScript - Type-safe JavaScript
  • Tailwind CSS - Utility-first CSS framework
  • React Hook Form - Form handling and validation
  • Axios - HTTP client for API calls
  • React Hot Toast - Toast notifications
  • Lucide React - Icon library

Backend

  • Node.js - JavaScript runtime
  • Express.js - Web application framework
  • MongoDB - NoSQL database
  • Mongoose - MongoDB object modeling
  • JWT - JSON Web Tokens for authentication
  • bcryptjs - Password hashing
  • Express Validator - Input validation

Database

  • MongoDB Atlas - Cloud database service

πŸ“‹ Prerequisites

Before running this application, make sure you have:

  • Node.js (v16 or higher)
  • npm or yarn
  • MongoDB database (local or Atlas)

πŸš€ Quick Start

1. Clone the Repository

git clone <repository-url>
cd linkedin-community-platform

2. Install Dependencies

# Install backend dependencies
npm install

# Install frontend dependencies
cd client
npm install
cd ..

3. Environment Setup

Create a .env file in the root directory:

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/linkedin-community
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
CLIENT_URL=http://localhost:3000

4. Start the Development Servers

# Start both frontend and backend (recommended)
npm run dev

# Or start them separately:
# Backend only
npm run server

# Frontend only (in client directory)
cd client && npm run dev

5. Access the Application

πŸ“ Project Structure

linkedin-community-platform/
β”œβ”€β”€ server/                 # Backend code
β”‚   β”œβ”€β”€ index.js           # Main server file
β”‚   β”œβ”€β”€ models/            # Database models
β”‚   β”‚   β”œβ”€β”€ User.js
β”‚   β”‚   └── Post.js
β”‚   β”œβ”€β”€ routes/            # API routes
β”‚   β”‚   β”œβ”€β”€ auth.js
β”‚   β”‚   β”œβ”€β”€ posts.js
β”‚   β”‚   └── users.js
β”‚   └── middleware/        # Middleware
β”‚       └── auth.js
β”œβ”€β”€ client/                # Frontend code
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ app/          # Next.js app directory
β”‚   β”‚   β”‚   β”œβ”€β”€ login/
β”‚   β”‚   β”‚   β”œβ”€β”€ register/
β”‚   β”‚   β”‚   β”œβ”€β”€ profile/
β”‚   β”‚   β”‚   β”œβ”€β”€ search/
β”‚   β”‚   β”‚   β”œβ”€β”€ globals.css
β”‚   β”‚   β”‚   β”œβ”€β”€ layout.tsx
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   β”œβ”€β”€ components/   # React components
β”‚   β”‚   β”‚   β”œβ”€β”€ Header.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Feed.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ CreatePost.tsx
β”‚   β”‚   β”‚   └── PostCard.tsx
β”‚   β”‚   β”œβ”€β”€ contexts/     # React contexts
β”‚   β”‚   β”‚   └── AuthContext.tsx
β”‚   β”‚   └── lib/          # Utilities
β”‚   β”‚       └── api.ts
β”‚   β”œβ”€β”€ package.json
β”‚   └── tailwind.config.ts
β”œβ”€β”€ package.json
└── README.md

πŸ”§ API Endpoints

Authentication

  • POST /api/auth/register - Register a new user
  • POST /api/auth/login - Login user
  • GET /api/auth/me - Get current user

Posts

  • GET /api/posts - Get all posts (paginated)
  • POST /api/posts - Create a new post
  • GET /api/posts/:id - Get a specific post
  • DELETE /api/posts/:id - Delete a post
  • PUT /api/posts/:id/like - Like/unlike a post
  • POST /api/posts/:id/comment - Comment on a post

Users

  • GET /api/users/profile/:id - Get user profile
  • PUT /api/users/profile - Update user profile
  • GET /api/users/search - Search users
  • PUT /api/users/follow/:id - Follow/unfollow user
  • GET /api/users/:id/followers - Get user's followers
  • GET /api/users/:id/following - Get user's following

🎯 Demo Accounts

You can create your own account or use these demo credentials:

Demo User 1:

Demo User 2:

πŸš€ Deployment

Frontend (Vercel)

  1. Push your code to GitHub
  2. Connect your repository to Vercel
  3. Set environment variables in Vercel dashboard
  4. Deploy

Backend (Render)

  1. Push your code to GitHub
  2. Create a new Web Service on Render
  3. Connect your GitHub repository
  4. Set environment variables:
    • MONGODB_URI
    • JWT_SECRET
    • NODE_ENV=production
  5. Deploy

Database (MongoDB Atlas)

  1. Create a MongoDB Atlas account
  2. Create a new cluster
  3. Get your connection string
  4. Update your environment variables

πŸ”’ Security Features

  • Password hashing with bcrypt
  • JWT token authentication
  • Input validation and sanitization
  • CORS protection
  • Rate limiting (can be added)
  • XSS protection

🎨 UI/UX Features

  • Responsive design for all devices
  • Modern, clean interface
  • Loading states and animations
  • Toast notifications
  • Form validation with error messages
  • Accessible design patterns

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

πŸ“ License

This project is licensed under the MIT License.

πŸ“ž Support

For support or questions, please contact:

πŸš€ Live Demo

  • Frontend: [Vercel Deployment URL]
  • Backend: [Render Deployment URL]

Note: This is a demo project for assessment purposes. In a production environment, additional security measures, error handling, and performance optimizations would be implemented.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published