{"id":24879970,"url":"https://github.com/yousefkhalaf0/frontend-beginner-twitter-clone","last_synced_at":"2026-05-11T03:03:39.584Z","repository":{"id":273591222,"uuid":"920221833","full_name":"yousefkhalaf0/frontend-beginner-twitter-clone","owner":"yousefkhalaf0","description":"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! 🚀","archived":false,"fork":false,"pushed_at":"2025-01-21T19:46:28.000Z","size":702,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T10:18:08.891Z","etag":null,"topics":["bootstrap","clone-website","css","frontend","html","javascript","responsive","twitter","twitter-clone","webapp"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yousefkhalaf0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-21T19:17:14.000Z","updated_at":"2025-01-21T19:57:04.000Z","dependencies_parsed_at":"2025-01-21T20:41:58.937Z","dependency_job_id":null,"html_url":"https://github.com/yousefkhalaf0/frontend-beginner-twitter-clone","commit_stats":null,"previous_names":["yousefkhalaf0/first-bootstrap-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousefkhalaf0%2Ffrontend-beginner-twitter-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousefkhalaf0%2Ffrontend-beginner-twitter-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousefkhalaf0%2Ffrontend-beginner-twitter-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousefkhalaf0%2Ffrontend-beginner-twitter-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yousefkhalaf0","download_url":"https://codeload.github.com/yousefkhalaf0/frontend-beginner-twitter-clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245785821,"owners_count":20671634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","clone-website","css","frontend","html","javascript","responsive","twitter","twitter-clone","webapp"],"created_at":"2025-02-01T10:18:11.629Z","updated_at":"2026-05-11T03:03:39.479Z","avatar_url":"https://github.com/yousefkhalaf0.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# X Clone - Responsive Frontend Project\n\n## Overview\nThis 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.\n\nThe project demonstrates my understanding of:\n- **HTML5** for structuring the content.\n- **CSS3** for styling and responsiveness.\n- **Bootstrap 5** for layout, components, and utilities.\n- **JavaScript** for form validation and dynamic content rendering.\n- **API integration** to fetch and display data dynamically.\n\n---\n\n## Features\n\n### Landing Page\n- **Responsive Design**: Adapts to different screen sizes (desktop, tablet, mobile).\n- **Sign-In/Sign-Up Modals**: Includes modals for user authentication with form validation.\n- **Social Login Options**: Buttons for signing up with Google or Apple.\n- **Footer Links**: Links to various X platform policies and resources.\n\n### Feed Page\n- **Responsive Layout**: Features a left sidebar, main content area, and right sidebar (hidden on smaller screens).\n- **Bottom Navigation Bar**: Mobile-friendly navigation bar for smaller screens.\n- **Dynamic Posts**: Fetches and displays posts from an external API (The Movie Database API).\n- **Trending Section**: Displays trending topics with mock data.\n\n---\n\n## Technologies Used\n- **HTML5**: For structuring the web pages.\n- **CSS3**: For custom styling and responsiveness.\n- **Bootstrap 5**: For responsive layout, components, and utilities.\n- **JavaScript**: For form validation and dynamic content rendering.\n- **The Movie Database API**: For fetching and displaying posts dynamically.\n\n---\n\n## Project Structure\n\n### Files\n1. **`index.html`**: The landing page with sign-in and sign-up modals.\n2. **`feed.html`**: The feed page with dynamic posts and trending section.\n3. **`styles.css`**: Custom CSS for styling the project.\n4. **`javascript.js`**: JavaScript for form validation, API integration, and dynamic content rendering.\n\n### Folder Structure\n```\n/x-clone/\n├── index.html\n├── feed.html\n├── css/\n│   └── styles.css\n├── java script/\n│   └── javascript.js\n├── bootstrap-5.3.3-dist/\n│   └── (Bootstrap files)\n├── resources/\n│   └── person.png\n```\n\n---\n\n## How to Run the Project\n1. Clone the repository or download the project files.\n2. Open the `index.html` file in your browser to view the landing page.\n3. Open the `feed.html` file to view the feed page with dynamic posts.\n\n---\n\n## Key Code Snippets\n\n### Landing Page (Sign-In Modal)\n```html\n\u003cdiv class=\"modal\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" id=\"signInModal\"\u003e\n  \u003cdiv class=\"modal-dialog modal-dialog-centered\"\u003e\n    \u003cdiv class=\"modal-content bg-black text-white\"\u003e\n      \u003cdiv class=\"position-relative mb-5\"\u003e\n        \u003cbutton class=\"btn\" data-bs-dismiss=\"modal\"\u003e\n          \u003ci class=\"bi bi-x fs-4\"\u003e\u003c/i\u003e\n        \u003c/button\u003e\n        \u003ci class=\"bi bi-twitter-x fs-3 position-absolute start-50 translate-middle-x mt-3\"\u003e\u003c/i\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"container mb-5\"\u003e\n        \u003ch3\u003eEnter your email and password\u003c/h3\u003e\n        \u003cform id=\"signInForm\" class=\"d-flex flex-column mt-5 align-items-center\"\u003e\n          \u003cinput type=\"text\" class=\"w-100 rounded mb-2 form-control\" id=\"emailId\" placeholder=\"Email\"\u003e\n          \u003cp id=\"emailErrorId\" class=\"e-none error\"\u003ePlease enter a valid email address.\u003c/p\u003e\n          \u003cinput type=\"text\" class=\"w-100 rounded mb-2 form-control\" id=\"passwordId\" placeholder=\"Password\"\u003e\n          \u003cp id=\"passwordErrorId\" class=\"p-none error\"\u003ePlease enter a strong password.\u003c/p\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"d-flex flex-column align-items-center\"\u003e\n        \u003cbutton onclick=\"submitForm()\" class=\"btn btn-light w-100 fw-bold rounded-pill\"\u003e\n          Log in\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Feed Page (Dynamic Posts)\n```javascript\nfunction GetData() {\n  var xhr = new XMLHttpRequest();\n  var token = 'Bearer YOUR_API_TOKEN';\n  var url = `https://api.themoviedb.org/3/trending/all/day?language=en-US`;\n\n  xhr.open(\"GET\", url);\n  xhr.setRequestHeader(\"Authorization\", token);\n  xhr.onload = function () {\n    if (xhr.status === 200) {\n      var response = JSON.parse(xhr.responseText);\n      apiData = response.results.map(item =\u003e ({\n        overview: item.overview,\n      }));\n      displayPosts();\n    }\n  };\n  xhr.send();\n}\n\nfunction displayPosts() {\n  apiData.forEach((card) =\u003e {\n    container.innerHTML += `\u003cdiv class=\"row mx-1 mt-2 border rounded\"\u003e\n      \u003cdiv class=\"col-2 mt-3\"\u003e\n        \u003cimg class=\"rounded-circle\" src=\"/resources/person.png\" height=\"50px\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-10\"\u003e\n        \u003cdiv class=\"row ps-1 pt-2\"\u003e\n          \u003cdiv class=\"col-11\"\u003e\n            \u003cp\u003e\u003cspan class=\"fw-bold\"\u003eYousef Khalaf \u003c/span\u003e@yk369 . 18h\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-1 ps-0\"\u003e\n            \u003ci class=\"btn bi bi-three-dots\"\u003e\u003c/i\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col\"\u003e\n          ${card.overview}\n          \u003cbr\u003e\n          \u003cdiv class=\"row my-3\"\u003e\n            \u003cdiv class=\"col\"\u003e\u003ci class=\"postIcon bi bi-chat-fill\"\u003e\u003c/i\u003e\u003c/div\u003e\n            \u003cdiv class=\"col\"\u003e\u003ci class=\"postIcon bi bi-reply-fill\"\u003e\u003c/i\u003e\u003c/div\u003e\n            \u003cdiv class=\"col\"\u003e\u003ci class=\"postIcon bi bi-heart-fill\"\u003e\u003c/i\u003e\u003c/div\u003e\n            \u003cdiv class=\"col\"\u003e\u003ci class=\"postIcon bi bi-share-fill\"\u003e\u003c/i\u003e\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e`;\n  });\n}\n```\n\n---\n\n## Challenges Faced\n1. **Responsive Design**: Ensuring the layout adapts seamlessly to different screen sizes.\n2. **Form Validation**: Implementing real-time validation for email, password, and username fields.\n3. **API Integration**: Fetching and displaying data dynamically from an external API.\n\n---\n\n## Future Improvements\n- Add user authentication functionality.\n- Implement a backend to store user data and posts.\n- Enhance the UI/UX with animations and transitions.\n- Add more interactive features like liking, sharing, and commenting on posts.\n\n---\n\n## Screenshots\nLanding Page: ![image](https://github.com/user-attachments/assets/95f59563-4cfa-445e-8aed-c2f01e00c474) ![image](https://github.com/user-attachments/assets/0484f7ad-57bb-4fd5-ad82-31ca08574c27)\n ![image](https://github.com/user-attachments/assets/ce06f2fb-dd1c-421d-8cfc-e433f6b1ad59)\n\nFeed Page: ![image](https://github.com/user-attachments/assets/8dd2e846-5a58-4170-bffd-75c346a55701) ![image](https://github.com/user-attachments/assets/3a3619c6-a347-4e49-ae03-6442e7f1e7fb) ![image](https://github.com/user-attachments/assets/dcc81f22-5f58-40c6-a9c6-1aa7dedaf434)\n\n---\n\n## License\nThis project is open-source and available under the MIT License.\n\n---\n\n## Acknowledgments\n- **Bootstrap** for providing a robust framework for responsive design.\n- **The Movie Database API** for providing data for dynamic posts.\n- **ITI** for providing the platform and resources to learn and grow.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousefkhalaf0%2Ffrontend-beginner-twitter-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyousefkhalaf0%2Ffrontend-beginner-twitter-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousefkhalaf0%2Ffrontend-beginner-twitter-clone/lists"}