https://github.com/yousefkhalaf0/frontend-beginner-twitter-clone
This responsive X (Twitter) clone uses HTML5, CSS3, Bootstrap 5, and JavaScript. It features a landing page with modals and a dynamic feed page powered by The Movie Database API. A top 10 project in my ITI cohort, it highlights my frontend skills. Explore and enjoy! 🚀
https://github.com/yousefkhalaf0/frontend-beginner-twitter-clone
bootstrap clone-website css frontend html javascript responsive twitter twitter-clone webapp
Last synced: about 1 month ago
JSON representation
This responsive X (Twitter) clone uses HTML5, CSS3, Bootstrap 5, and JavaScript. It features a landing page with modals and a dynamic feed page powered by The Movie Database API. A top 10 project in my ITI cohort, it highlights my frontend skills. Explore and enjoy! 🚀
- Host: GitHub
- URL: https://github.com/yousefkhalaf0/frontend-beginner-twitter-clone
- Owner: yousefkhalaf0
- Created: 2025-01-21T19:17:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-21T19:46:28.000Z (over 1 year ago)
- Last Synced: 2025-02-01T10:18:08.891Z (over 1 year ago)
- Topics: bootstrap, clone-website, css, frontend, html, javascript, responsive, twitter, twitter-clone, webapp
- Language: HTML
- Homepage:
- Size: 686 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# X Clone - Responsive Frontend Project
## Overview
This project is a responsive clone of the X (formerly Twitter) platform, developed as part of my ITI (Information Technology Institute) frontend track. The project focuses on implementing responsive design concepts using **Bootstrap** and includes two main pages: a **landing page** and a **feed page**. It was one of the **top 10 projects** in my cohort.
The project demonstrates my understanding of:
- **HTML5** for structuring the content.
- **CSS3** for styling and responsiveness.
- **Bootstrap 5** for layout, components, and utilities.
- **JavaScript** for form validation and dynamic content rendering.
- **API integration** to fetch and display data dynamically.
---
## Features
### Landing Page
- **Responsive Design**: Adapts to different screen sizes (desktop, tablet, mobile).
- **Sign-In/Sign-Up Modals**: Includes modals for user authentication with form validation.
- **Social Login Options**: Buttons for signing up with Google or Apple.
- **Footer Links**: Links to various X platform policies and resources.
### Feed Page
- **Responsive Layout**: Features a left sidebar, main content area, and right sidebar (hidden on smaller screens).
- **Bottom Navigation Bar**: Mobile-friendly navigation bar for smaller screens.
- **Dynamic Posts**: Fetches and displays posts from an external API (The Movie Database API).
- **Trending Section**: Displays trending topics with mock data.
---
## Technologies Used
- **HTML5**: For structuring the web pages.
- **CSS3**: For custom styling and responsiveness.
- **Bootstrap 5**: For responsive layout, components, and utilities.
- **JavaScript**: For form validation and dynamic content rendering.
- **The Movie Database API**: For fetching and displaying posts dynamically.
---
## Project Structure
### Files
1. **`index.html`**: The landing page with sign-in and sign-up modals.
2. **`feed.html`**: The feed page with dynamic posts and trending section.
3. **`styles.css`**: Custom CSS for styling the project.
4. **`javascript.js`**: JavaScript for form validation, API integration, and dynamic content rendering.
### Folder Structure
```
/x-clone/
├── index.html
├── feed.html
├── css/
│ └── styles.css
├── java script/
│ └── javascript.js
├── bootstrap-5.3.3-dist/
│ └── (Bootstrap files)
├── resources/
│ └── person.png
```
---
## How to Run the Project
1. Clone the repository or download the project files.
2. Open the `index.html` file in your browser to view the landing page.
3. Open the `feed.html` file to view the feed page with dynamic posts.
---
## Key Code Snippets
### Landing Page (Sign-In Modal)
```html
```
### Feed Page (Dynamic Posts)
```javascript
function GetData() {
var xhr = new XMLHttpRequest();
var token = 'Bearer YOUR_API_TOKEN';
var url = `https://api.themoviedb.org/3/trending/all/day?language=en-US`;
xhr.open("GET", url);
xhr.setRequestHeader("Authorization", token);
xhr.onload = function () {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
apiData = response.results.map(item => ({
overview: item.overview,
}));
displayPosts();
}
};
xhr.send();
}
function displayPosts() {
apiData.forEach((card) => {
container.innerHTML += `
Yousef Khalaf @yk369 . 18h
${card.overview}
`;
});
}
```
---
## Challenges Faced
1. **Responsive Design**: Ensuring the layout adapts seamlessly to different screen sizes.
2. **Form Validation**: Implementing real-time validation for email, password, and username fields.
3. **API Integration**: Fetching and displaying data dynamically from an external API.
---
## Future Improvements
- Add user authentication functionality.
- Implement a backend to store user data and posts.
- Enhance the UI/UX with animations and transitions.
- Add more interactive features like liking, sharing, and commenting on posts.
---
## Screenshots
Landing Page:  
Feed Page:   
---
## License
This project is open-source and available under the MIT License.
---
## Acknowledgments
- **Bootstrap** for providing a robust framework for responsive design.
- **The Movie Database API** for providing data for dynamic posts.
- **ITI** for providing the platform and resources to learn and grow.