Twitter Clone

A full-stack Twitter clone built with modern web technologies. This application replicates core Twitter features including user authentication, tweets, likes, and follows.

Features

• User Authentication

  • Sign up and log in with email and password
  • JWT-based authentication
  • Protected routes

• Tweets

  • Create and delete tweets
  • Like and unlike tweets
  • View tweet feed

• User Profiles

  • View user profiles
  • Follow/Unfollow users
  • Edit profile information
  • Upload profile pictures (Cloudinary integration)

• Real-time Updates

  • Real-time tweet updates
  • Like and follow notifications

Tech Stack

Frontend

• Framework: React.js
• Styling: Tailwind CSS
• State Management: React Context API
• Data Fetching: TanStack Query (React Query)
• Routing: React Router
• Icons: React Icons

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose
• Authentication: JWT (JSON Web Tokens)
• File Storage: Cloudinary
• API: RESTful API

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MongoDB Atlas account or local MongoDB instance
• Cloudinary account (for image uploads)

Getting Started

1. Clone the repository

   git clone https://github.com/namodynamic/x-clone.git
   cd twitter-clone

2. Install dependencies

   npm install
   cd frontend
   npm install
   cd ..

3. Environment Setup

   Create a .env file in the root directory with the following variables:

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4. Start the development server

   # Run both frontend and backend
   npm run dev

   The application will be available at http://localhost:3000

5. Build for production

   npm run build
   npm start

📂 Project Structure

twitter-clone/
├── backend/            # Backend server code
│   ├── config/         # Configuration files
│   ├── controllers/    # Route controllers
│   ├── middleware/     # Custom middleware
│   ├── models/         # MongoDB models
│   ├── routes/         # API routes
│   └── server.js       # Express server
├── frontend/           # Frontend React application
│   ├── public/         # Static files
│   └── src/
│       ├── components/ # Reusable UI components
│       ├── context/    # React context providers
│       ├── pages/      # Page components
│       ├── services/   # API services
│       └── App.js      # Main application component
├── .env                # Environment variables
└── package.json        # Project dependencies and scripts

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request