This is the first collaborative project.
Twitter Clone Project
Introduction This project is a comprehensive clone of the popular social media platform Twitter. It aims to replicate the key functionalities and user experience of Twitter, offering users the ability to interact through tweets, messages, and notifications. The main features include user authentication (sign-up and login), a dynamic home feed that updates with the latest tweets from followed users, the ability to search for users and tweets, notifications for user interactions, direct messaging, and extensive profile management options.
Key Features:
User Authentication: Users can create an account, log in, and log out securely. The sign-up process includes form validation to ensure valid inputs.
Home Feed: The main page displays a feed of tweets from users that the current user follows. Users can post new tweets, like, retweet, and comment on tweets in their feed.
Search Functionality: Users can search for other users or tweets by entering keywords. The search results are updated in real-time and can be filtered for better accuracy.
Notifications: Users receive notifications for various activities such as likes, retweets, comments, and new followers. The notifications are displayed in real-time to keep users engaged.
Direct Messaging: Users can send and receive direct messages in real-time. The messaging interface is designed to be user-friendly and intuitive.
Trending Topics: The Grok page displays trending hashtags and popular tweets, allowing users to stay updated with the latest trends and join conversations.
Profile Management: Users can view and edit their profiles. The profile page displays user information, tweets, likes, and followers. Users can also update their bio and profile picture.
Enhance your user experience with updated visuals for profile customization.
Fresh visuals to improve the look and feel of various app functionalities.
Project Type
Frontend
Deployed App
Frontend: https://deployed-site.frontend
Directory Structure
my-app/ ├──
├── frontend/ │ ├── public/ │ ├── src │ │ ├── components/ │ │ ├── pages/ │ │ ├── index.html │ │ └── Home.html └── README.md
Features
List out the key features of your application:
Sign Up Page
Home Page
Search Page
Notifications Page
Messages Page
Grok Page
Profile Page
Edit Profile Page
Page Explanations
Sign Up Page
Purpose: Allows new users to create an account by providing their username, email, and password. Features:
Form validation to ensure all required fields are filled out correctly.
Error handling for duplicate accounts or invalid inputs.
A link to the login page for existing users.
Home Page
Purpose: Displays the user's feed, which includes tweets from the people they follow. Features:
Users can post new tweets.
Users can like, retweet, and comment on existing tweets.
Real-time updates for new tweets and interactions.
Search Page
Purpose: Allows users to search for other users or tweets by entering keywords into the search bar. Features:
Real-time search results as the user types.
Filters for narrowing down search results (e.g., by users, tweets).
Displays user profiles and tweets matching the search criteria.
Notifications Page
Purpose: Displays notifications related to the user's activity, such as likes, retweets, comments, and new followers. Features:
Real-time updates for new notifications.
Clear indication of unread notifications.
Links to the relevant content (e.g., the tweet that was liked).
Messages Page
Purpose: Allows users to send and receive direct messages from other users. Features:
Real-time messaging with instant updates.
Chat-like interface displaying conversations.
Notification for new messages.
Grok Page
Purpose: Allows users to explore trending topics, hashtags, and popular tweets. Features:
Displays trending hashtags and topics.
Shows popular tweets under each trending topic.
Enables users to join conversations on trending topics.
Profile Page
Purpose: Allows users to view their personal information, including their bio, profile picture, and tweet history. Features:
Displays user’s tweets, likes, and retweets.
Shows the user’s follower and following counts.
Other users can follow/unfollow the user from this page.
Edit Profile Page
Purpose: Allows users to edit their profile information, such as their bio, profile picture, and other personal details. Features:
Form for updating profile information.
Preview of the new profile picture before saving.
Save button to apply changes.
Design Decisions or Assumptions
Responsive Design: Ensuring the application works well on various device sizes.
User-Friendly Interface: Prioritizing ease of use and intuitive navigation.
Installation & Getting Started
git clone https://github.com/Dayapal/Twitter-clone.git
Provide instructions and examples on how to use your project.
Include screenshots as necessary.
Credentials
Provide user credentials for authenticated pages:
Username: demo_user@a
Password: password123
Technology Stack
List and provide a brief overview of the technologies used in the project:
HTML CSS Javascript, DOM