Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/karlangaxz/project-twitter-clone

Twitter Clone is a project that simulates the user interface of Twitter. This clone includes home pages, login pages, and a news feed, as well as functionalities such as posting messages and managing accounts.
https://github.com/karlangaxz/project-twitter-clone

ccs html5 js responsive-design twitter

Last synced: about 4 hours ago
JSON representation

Host: GitHub
URL: https://github.com/karlangaxz/project-twitter-clone
Owner: KarlangaXZ
Created: 2024-07-25T15:34:33.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-07-25T20:07:40.000Z (4 months ago)
Last Synced: 2024-07-25T22:56:10.950Z (4 months ago)
Topics: ccs, html5, js, responsive-design, twitter
Language: CSS
Homepage: https://karlangaxz.github.io/Project-twitter-clone/
Size: 17.7 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

**Description in english**

# Twitter Clone

## Description

## Key Features

- **User Interface**: Simulates Twitter's interface with an intuitive and modern design.
- **Home Page**: Includes sections to explore interests, follow what people are talking about, and a login button.
- **Login Page**: Allows users to enter their phone number, email, or username along with their password to access their account.
- **News Feed**: Displays user posts with options to comment, retweet, like, and share.
- **Posts**: Allows users to create new posts with text and options to add images.
- **Sidebar**: Provides shortcuts to account information, lists, bookmarks, ads, and analytics, along with options to change settings and log out.
- **Dark Mode**: Option to toggle between light and dark modes for better reading experience in different lighting conditions.
- **Account Management**: Access to profile information and the ability to follow or unfollow other users.
- **Login Error Modal**: Displays an error message if the entered credentials are incorrect.
- **Responsiveness**: Designed to work on various screen sizes and devices.

These features provide a Twitter-like user experience, allowing interaction with content and effective profile management.

## Technologies Used

- **HTML:** For page structure and content.
- **CSS:** For styling and visual design.
- **JavaScript:** For interactive functionality and data validation.

## Prerequisites

A modern browser (such as Chrome, Firefox, or Edge) to view the project.

## Usage

1. **Home Page:** The main page presents options to log in or sign up.
2. **Login Page:** Allows users to enter their credentials to access the news feed.
3. **News Feed:** Displays user posts and allows for creating new posts.
4. **Sidebar:** Includes options for account management, settings, and other functionalities.
5. **Dark Mode:** Dark mode can be activated through the button in the sidebar.

## Author

Developed by Carlos Linares ([KarlangaXZ](https://github.com/KarlangaXZ)).

Thank you for reviewing this project! We hope you find this project useful. If you have any questions or suggestions, feel free to reach out to us.

**Descripcion en español**

# Twitter Clone

## Descripción

Twitter Clone es un proyecto que simula la interfaz de usuario de Twitter. Este clon incluye páginas de inicio, inicio de sesión, y un feed de noticias, además de funcionalidades como la publicación de mensajes y la gestión de la cuenta.

## Características Principales

- **Interfaz de Usuario**: Simula la interfaz de Twitter con un diseño intuitivo y moderno.
- **Página de Inicio**: Incluye secciones para explorar intereses, seguir lo que la gente está diciendo, y un botón de inicio de sesión.
- **Página de Inicio de Sesión**: Permite a los usuarios ingresar su número de teléfono, correo electrónico o nombre de usuario junto con su contraseña para acceder a su cuenta.
- **Feed de Noticias**: Muestra publicaciones de usuarios con opciones para comentar, retuitear, dar me gusta y compartir.
- **Publicaciones**: Permite a los usuarios crear nuevas publicaciones con texto y opciones para añadir imágenes.
- **Barra Lateral**: Ofrece accesos directos a información de cuenta, listas, marcadores, anuncios y análisis, junto con una opción para cambiar la configuración y salir.
- **Modo Oscuro**: Opción para alternar entre el modo claro y oscuro para una mejor experiencia de lectura en diferentes condiciones de iluminación.
- **Gestión de Cuenta**: Acceso a información del perfil y la capacidad de seguir o dejar de seguir a otros usuarios.
- **Modal de Error de Inicio de Sesión**: Muestra un mensaje de error si las credenciales ingresadas son incorrectas.
- **Responsividad**: Diseñado para funcionar en diferentes tamaños de pantalla y dispositivos.

Estas características permiten una experiencia de usuario similar a la de Twitter, con la posibilidad de interactuar con el contenido y gestionar el perfil de manera efectiva.

## Tecnologías utilizadas:
- **HTML:** Para la estructura y el contenido de la página.
- **CSS:** Para estilos y diseño visual.
- **JavaScript:** Para la funcionalidad interactiva y la validación de datos.

# Requisitos Previos
Un navegador moderno (como Chrome, Firefox o Edge) para visualizar el proyecto.

# Uso
1. **Página de Inicio:** La página principal presenta opciones para iniciar sesión o registrarse.
2. **Página de Inicio de Sesión:** Permite a los usuarios ingresar sus credenciales para acceder al feed de noticias.
3. **Feed de Noticias:** Muestra publicaciones de usuarios y permite crear nuevas publicaciones.
4. **Barra Lateral:** Incluye opciones para la gestión de la cuenta, ajustes y otras funcionalidades.
5. **Modo Oscuro:** Se puede activar el modo oscuro a través del botón en la barra lateral.

## Autor:
Desarrollado por Carlos Linares ([KarlangaXZ](https://github.com/KarlangaXZ)).

¡Gracias por revisar este proyecto! Esperamos que encuentres útil esta página de registro de boletines informativos. Si tienes alguna pregunta o sugerencia, no dudes en comunicarte con nosotros.