🚀 Welcome to my Twitter Clone project – a platform designed to replicate the Twitter experience with features like posting, liking, retweeting, commenting, and more.
🌐 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.
🛠️ 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.
🤔 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.
💡 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.
📽️ 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.
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!
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen 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.
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.
- Utilizes a mock data API to extract and display posts and images. Learn more here.
- Implements user registration and login functionalities using NextAuth. Learn more here.
- Connects to a MongoDB database (MongoDB) for storing user information.
- Manual button to switch between light and dark modes. Learn more here
- Displays a set of posts with mock data, images, and loaders for a seamless user experience. Learn more here.
- Renders detailed information about the authenticated user and their posts. Also gives the user the ability to edit their profiles. Learn more here
- Allows users to like, retweet, comment, and share posts, updating both the database and Redux state. Learn about likes, retweets, and comments
- Users can create their own posts, add text, and upload images managed by the Edgestore service.
- Users can go the post's owners profile page and interact with their profile. Learn more here
- A landing page that redirects authenticated users to the /home route or provides registration/login options. Learn more here
- 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, andhome/explorepages.
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 hereapi/posts/addComment: Adds a new comment to the user structure in the database. Learn more hereapi/posts/findPost: Returns the post that matches the post ID.api/user: Retrieves user information based on the provided email. Learn more hereapi/user/addPost: Adds a new post to the user's posts array. Learn more hereapi/user/findById: Finds a user based on the user ID.api/user/update: Updates user information. Learn more here
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! 👨🏻💻
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!
- Next.js
- React
- Tailwind CSS
- TypeScript
- NextAuth
- EdgeStore
- React Icons
- MongoDB
- jsonPlaceholder
- Picsum
- Ouch! illustrations
This project is licensed under the MIT License.
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!
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.