Práctica: Interfaz en Angular de Messenger

Esta aplicación desarrollada en Angular tiene como objetivo brindarte la oportunidad de fortalecer tus habilidades en el desarrollo web mediante la creación de una interfaz de usuario inspirada en la popular aplicación de mensajería, Messenger. A lo largo de este proyecto, usaré mis conocimientos en el uso de las directivas básicas de Angular, como ngIf, ngClass, ngFor, además de la utilización de componentes y módulos de Angular, así como implementar enrutamiento con Angular Router y seguir buenas prácticas de Git, incluyendo branches y merge requests. También, tendré la oportunidad de la manipulación de objetos JSON y TypeScript para la gestión de datos dinámicos en el lado del FrontEnd.

Descripción del Proyecto

Proyecto práctico de Angular, Angular Material y TailwindCSS para recrear la interfaz desktop de la aplicación de mensajería Messenger de Meta.

Características Principales

• Interfaz Estilo Messenger: Este proyecto es una práctica para crear una interfaz de usuario que se asemeje a la popular aplicación de mensajería, Messenger. Esto incluye la capacidad de mostrar conversaciones, mensajes y contactos de forma similar a como lo hace Messenger haciendo uso de datos dinámicos.

• Uso de Directivas: A lo largo del desarrollo de esta aplicación, se hará uso intensivo de las directivas básicas de Angular, como ngIf, ngClass y ngFor, para controlar y personalizar la visualización de los mensajes, chats y otros elementos de la interfaz.

• Componentes y Módulos: El proyecto sigue una estructura en componentes y módulos para mantener un código organizado, reutilizable y fácil de mantener. Cada componente deberá cumplir una función específica, como la lista de contactos o las conversaciones individuales.

• Enrutamiento con Angular Router: El enrutamiento de Angular Router es una funcionalidad muy útil y completa para navegar entre diferentes secciones de la aplicación, como la lista de contactos y las conversaciones individuales.

• Gestión de Datos: El uso objetos JSON y TypeScript permite manejar los mensajes y otros datos dinámicos de la aplicación. Las conversaciones y mensajes serán generados o gestionados dinámicamente a través de archivos JSON o llamadas a servicios.

Requisitos

Asegúrate de tener instalado lo siguiente:

• Node.js
• Angular CLI

Cómo Iniciar

1. Clona este repositorio a tu máquina local:

   git clone https://github.com/Yayo22124/Angular-Messenger.git

2. Cambia al directorio del proyecto

   cd ./Angular-Messenger/

3. Instala las dependencias

   npm install

4. Levanta el proyecto

   ng serve

Sígueme

Conoce otros de mis proyectos en: