Project Overview

Taking inspiration from Twitter, I embarked on this project for the purpose of learning and personal growth. It brings together the best of social media, allowing you to post updates, join conversations, and even create your own communities. Your account is protected with secure login options, and the platform ensures everything runs smoothly. It's a safe and engaging space for connecting with others, all while serving as a valuable learning experience

  

  

Technology Stack

This project employs a range of cutting-edge technologies:

OpenAI API: Generate users bios

Clerk js: Handle authentication and communities

Next JS: Full stack Framework

Tailwind CSS: Styling library for modern and responsive user interfaces.

Postgres: Database for efficient data storage.

TypeScript: Superset of JavaScript with static typing for enhanced development.

Zustland: State management library

Prisma: Database toolkit

Cloudinary: Cloud storage for images

Key Features

Feed

• Primary Purpose: Share posts and view other users' posts.
  • The feed includes:
    • See suggested threads.
    • Users can react/reply to a thread.
    • Users can see who replied.
    • Users can write a thread with images.
    • User can delete his thread

User Account

• User Authentication:
  • Users can log in with Google/GitHub OAuth (customizable).
  • Users can log in using a password.
  • Access granted after completing onboarding.  

   

• Profile Viewing:
  • User can lookup other users
  • View other users profiles, including their posts and activity.
  • users can edit their own profiles.

Community!

• Users can create communities.
• Invite members via email to join a community.
• Users can update/remove their communities.
• Community admins can manage members' roles.

   

    

    

    

Performance & Optimization

• Feed:
  • Implemented a Virtual List to optimize the rendering of feed posts.
• General:
  • Utilized Cloudnify for optimized image uploading and loading.
  • Leveraged Server-Side Rendering (SSR) for efficient page rendering.
  • Used lazy loading to reduce the bundle size.
  • Loaded third-party libraries using a service worker (Party Town).
  • Compressed images before uploading them. (on new post creation)
  • Loaded images with the appropriate size depending on the screen size.
• Nginx:
  • Used brotli to compress assets

Security Concerns

• Comprehensive form validation on the frontend.
• Robust form validation in server actions.

Installation

To run Twitter Clone locally, follow these steps:

1. Clone the project repository to your local machine.
2. Setup .env.local (you need clerk)

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
NEXT_CLERK_WEBHOOK_SECRET=your_webhook_secret

2. Run The following commands to start the application.

npm i
npm run start

Once the application is built and launched, access it by visiting http://localhost:3000 in your web browser. If you encounter any issues during installation, please let me know.

Contributing

Contributions and feedback are welcome! Please feel free to create issues or submit pull requests to help improve this project.

---

Disclaimer: This project, Twitter Clone, is created for educational purposes and is not affiliated with Twitter or any other social media platform.