Twitter Clone

🚀 Welcome to my Twitter Clone project – a platform designed to replicate the Twitter experience with features like posting, liking, retweeting, commenting, and more.

Purpose

🌐 The main purpose of this project is to simulate the functionalities of Twitter, providing users with a social media space to express thoughts, create profiles, and share content.

Why Build This?

🛠️ This project serves as a showcase for my skills and knowledge, demonstrating my ability to develop a real-world application. It's a portfolio piece highlighting my proficiency in creating scalable solutions and utilizing technology effectively.

Problem Solving

🤔 In the realm of social media, this project addresses the need for users to share ideas, create profiles, and express themselves through images and text – solving the typical challenges faced by social media applications.

Motivations

💡 My passion for creating things from scratch and utilizing technology to solve problems drove the development of this project. It provided valuable lessons in large-scale project planning and execution.

About the project

📽️ This Next.js project was bootstrapped with create-next-app.
📄 For commits we are using conventional-commits.
✍🏼 This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Design Solutions 🎨

Take a closer look at my design solutions in Figma to get a visual sense of the project's aesthetics. I've used designs for both desktop and responsive versions to ensure a seamless and engaging user experience.

Desktop Design: View Desktop Design
Responsive Design: View Responsive Design

Explore these designs to see how we've translated our project ideas into visually appealing and user-friendly interfaces. Your feedback and insights are always welcome!

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Features 🚀

Project Overview

A Twitter clone project with the main purpose of simulating the Twitter experience. It includes features such as creating ⬆️, liking ❤️, retweeting 🔄, and commenting 📝 on posts.

Key Features

Mock Data API:

Utilizes a mock data API to extract and display posts and images. Learn more here.

User Authentication:

Implements user registration and login functionalities using NextAuth. Learn more here.

Database Connection:

Connects to a MongoDB database (MongoDB) for storing user information.

Theme Switching:

Manual button to switch between light and dark modes. Learn more here

Main Page:

Displays a set of posts with mock data, images, and loaders for a seamless user experience. Learn more here.

Profile Page:

Renders detailed information about the authenticated user and their posts. Also gives the user the ability to edit their profiles. Learn more here

Post Interactions:

Allows users to like, retweet, comment, and share posts, updating both the database and Redux state. Learn about likes, retweets, and comments

User Posts:

Users can create their own posts, add text, and upload images managed by the Edgestore service.

User page:

Users can go the post's owners profile page and interact with their profile. Learn more here

Welcome Page:

A landing page that redirects authenticated users to the /home route or provides registration/login options. Learn more here

Additional Functionalities

Sign Out: Enables users to log out across the application.
Dynamic Routing: Unique pages for each post and user profile, facilitating easy sharing.
New Route Pages: Created home/notifications, home/more, home/messages, and home/explore pages.

Endpoint Overview 🌐

api/login: Validates user credentials and returns a success or error message. Learn more here.
api/register: Creates a new user in the database. Learn more here.
api/posts: Fetches posts from JSONPlaceholder and Piscum APIs and returns an array of posts. Learn more here.
api/posts/likePost: Modifies the likes count for a post in the MongoDB database. Learn more here
api/posts/addComment: Adds a new comment to the user structure in the database. Learn more here
api/posts/findPost: Returns the post that matches the post ID.
api/user: Retrieves user information based on the provided email. Learn more here
api/user/addPost: Adds a new post to the user's posts array. Learn more here
api/user/findById: Finds a user based on the user ID.
api/user/update: Updates user information. Learn more here

How to Contribute

Thank you for showing interest in contributing to our 'Twitter-Clone' project! Your help is greatly appreciated. To get started, please follow these steps:

Find a Ticket: Browse our project's issues and identify a ticket you'd like to contribute to. This helps maintain a clear and organized development process.
Express Your Interest: Leave a comment on the chosen ticket with your name and a clear statement indicating your intent to contribute. This helps us track who's working on what.
Ticket Assignment: The first contributor to express interest in a ticket will be assigned to it, provided they confirm their readiness within 24 hours. This ensures efficient ticket allocation.
Single Contributor per Ticket: To ensure focused development, only one contributor may work on a ticket at a time. However, we welcome feedback and suggestions from everyone.
Time Commitment: Once a ticket is assigned to you, coordinate a suitable development timeline with the project's owner or lead developer. Please honor this commitment, as other contributors and project timelines depend on it.
Code Review: Prior to merging any code, the project owner or lead developer will review your changes to ensure alignment with project standards and objectives.

In rare cases where guidance is extremely necessary, you can refer to the other 'Twitter-Clone' repository to guide yourself. See here.

By following these steps and communicating clearly, you can make valuable contributions to our project while keeping the development process organized and collaborative. Happy coding! 👨🏻‍💻

Showcase Your Contributions

We encourage contributors to feature their 'Twitter-Clone' project contributions in their portfolios and resumes. This helps you demonstrate your skills and experience to potential employers or collaborators. Here's how:

List Your Contributions: In your portfolio, create a section for your 'Twitter-Clone' project contributions. Provide a brief description of each contribution and its impact.
Link to the Repository: Include a direct link to the 'Twitter-Clone' repository, allowing others to explore your code and the overall project.
Highlight Achievements: Spotlight specific challenges you tackled, improvements you made, or unique solutions you implemented.
Share Your Experience: Discuss the valuable experience you gained while working on the project, including collaboration with the development team, adherence to coding standards, and real-world problem-solving.
Connect with Us: Let us know when you've added your 'Twitter-Clone' contributions to your portfolio. We'd love to celebrate your success and promote your work within our community.

Your contributions are a testament to your skills and dedication. We're thrilled to have you as part of our project. Share your portfolio with us, and let's continue to grow and learn together!

Technologies Used

License

This project is licensed under the MIT License.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Matdweb / Twitter-Clone