Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/eugenia1984/full-stack-react-node

Full Stack React and Node
https://github.com/eugenia1984/full-stack-react-node

node reactjs

Last synced: about 2 months ago
JSON representation

Full Stack React and Node

Host: GitHub
URL: https://github.com/eugenia1984/full-stack-react-node
Owner: eugenia1984
Created: 2024-06-10T18:15:10.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-08-13T14:45:19.000Z (5 months ago)
Last Synced: 2024-08-13T17:49:05.206Z (5 months ago)
Topics: node, reactjs
Language: HTML
Homepage: https://eugenia1984.github.io/full-stack-react-node/
Size: 185 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Full Stack - React.js & Node.js

Bienvenidos a mis ejercicios de práctica del **Curso Full Stack React / Node** de CILSA.

---

##  ¿Qué se va a ver en el mismo?

###  Primera parte del curso

 Clase 0: Introducción al curso, recomendaciones, nivelación

  Clase 1: Introducción al Testing

  Clase 2: Implementación de un proyecto en Hosting, Servicios en la nube

  Clase 3: Introducción a Git

 Clase 4-5: Introducción a Bootstrap

 Clase 6: **Trabajo integrador**    

###  Segunda parte del curso

 Clase 7: Introducción a la Gestión de proyectos / Desarrollo de Webinar con empresas

 Clase 8: Metodologías ágiles de Desarrollo / Desarrollo de webinar con empresas

- Clase 9 - 10 - 11: Introducción a las bases de datos

- Clase 12: **Trabajo integrador**

  

---

###  Tercera parte del curso

- Clase 13: Introducción a Node.js y Express.js

- Clase 14: Introducción a React.js

- Clase 15: Integración con Base de Datos

- Clase 16: Desarrollo de Aplicaciones Full Stack con React.js y Node.js

- Clase 17: Explicación del Trabajo Final y Desarrollo en Grupo

- Clase 18: Presentación del Trabaj Final y Demostración

---     

##   Ejercicios

- **Primer ejercicio**: Formulario con HTML5, CSS3 y JavaScript que se puede ver en: [https://eugenia1984.github.io/full-stack-react-node/](https://eugenia1984.github.io/full-stack-react-node/)

---

- **Segundo ejercicio**: A partir del formulario elaborado para la tarea 1, se pide:

1. Detallar los pasos que realizan para poder cargar el mismo.

2. Indicar para cada campo cuales son los valores válidos y cuales inválidos. ¿Se realiza esa validación de alguna forma?

3. Realizar una exploración del formulario y verificar si mediante el lector de pantalla NVDA pueden acceder a cada campo mediante la tecla TAB y completa el mismo. ¿Hay algún campo o acción que no resulte accesible?

-> [En este link pueden ver la resolución del ejercicio](https://eugenia1984.github.io/full-stack-react-node/ejercicio4/index.html)

---

- **Tercer ejercicio**: Los y las invitamos a realizar una primera actividad, para comenzar deben:

1. Buscar 2 servicios de hosting en internet

2. Identificar si es gratuito y en ese caso que limitaciones tiene o si ofrece un modelo de pago por servicios.

3. Si no es gratuito o corresponde a una empresa, identificar si se trata de una empresa nacional o extranjera y en qué moneda se realizan los pagos.

4. Identificar los servicios ofrecidos por la empresa en función de los criterios mencionados tomando en cuenta si la contratación es mensual o anual

5. Por último, realizar una comparación entre los dos servicios explorados.

-> [En este link pueden ver la resolución del ejercicio](https://eugenia1984.github.io/full-stack-react-node/ejercicio5/index.html)

---

- **Cuarto ejercicio**: 

1. Retomar el ejercicio del formulario de registro de las primeras clases y adaptarlo utilizando Bootstrap.

2. Deberán realizar las validaciones correspondientes y asegurar los campos obligatorios. 

3. Explorar la posibilidad de pensar en 3 resoluciones: notebook, Tablet y celular de 7”

-> [En este link pueden ver la resolución del ejercicio](https://eugenia1984.github.io/full-stack-react-node/ejercicio6/index.html)

---

- **Quinto ejercicio**:

-Tarea en duplas: **Creación de una página de perfil**.

  

-Crear una página utilizando Bootstrap y los elementos que hemos visto durante las últimas dos clases.

-La página debe incluir lo siguiente:

**Barra de Navegación**: utiliza la barra de navegación de Bootstrap para crear un menú simple con al menos tres secciones: Inicio, Perfil, y Contacto.

**Carrusel de Imágenes**: agrega un carrusel con al menos tres imágenes representativas en la sección de "Inicio". Utiliza las clases de Bootstrap para el carrusel y deben asegurarse de incluir controles de navegación.

**Tarjeta de perfil**: En la sección de "Perfil", deben crear una tarjeta con una imagen de perfil, tu nombre como título y una breve descripción acerca de tu persona en el cuerpo de la tarjeta. Pueden agregar un botón para ver más información.

**Formulario de Contacto**: en la sección de "Contacto", deben utilizar un formulario básico de Bootstrap con campos para Nombre, Correo Electrónico y Mensaje. A su vez, deben agregar un botón de enviar con el estilo de Bootstrap.

-Importante: deben asegurarse que la página sea responsiva utilizando las clases de grid de Bootstrap para distribuir los elementos correctamente en diferentes tamaños de pantalla.

-> [En este link pueden ver la resolución del ejercicio - código-](https://github.com/eugenia1984/profile-page) y [aca la página](https://eugenia1984.github.io/profile-page/)

---

- **Sexto ejercicio - Trabajo integrador**

  

-Proyecto:  Desarrollo de un sitio web para una tienda online

-Descripción del Proyecto: Desarrollar un sitio web responsivo para una tienda online que permita a los usuarios explorar los productos desde diferentes dispositivos, como computadoras de escritorio, tablets y celulares (3 resoluciones).

-Características del Sitio Web:

**Frontend**:

- Diseño responsivo utilizando Bootstrap para garantizar una experiencia de usuario consistente en diferentes dispositivos y tamaños de pantalla.

- Página principal que muestra los productos destacados y las promociones actuales de la tienda.

- Páginas de categorías que permiten a los usuarios explorar productos por categorías específicas (definan máximo 2 categorías)

- Página de detalles del producto que muestra información detallada sobre un producto seleccionado (pueden trabajar con un máximo de 3 productos por categoría).

**Git**:

- Utilización de Git para el control de versiones del código fuente del proyecto.

- Implementación de ramas para trabajar en diferentes características o correcciones de forma aislada.

- Uso de commits descriptivos y mensajes claros para documentar los cambios realizados.

**Entrega del Proyecto**:

- Desarrollo del sitio web completo, incluyendo frontend responsivo y optimizado para distintos dispositivos y orientaciones.

- Documentación del código que explique la estructura del proyecto, las decisiones de diseño y las funcionalidades implementadas.

- Implementación de Git para el control de versiones del código y la colaboración entre los miembros del equipo.

-> [En este link pueden ver la resolución del ejercicio - código-](https://github.com/eugenia1984/todo-para-tu-compu) y [aca la página](https://eugenia1984.github.io/todo-para-tu-compu/)

---

## `notas`

En la carpeta [`notas`](https://github.com/eugenia1984/full-stack-react-node/tree/main/notas) dejo algunas cosas de teorias vistas, sobre los temas:

- Gestión de proyectos

- Base de datos

- Metodologías ágiles

---

## Glosario

En [GLOSARIO](https://github.com/eugenia1984/full-stack-react-node/blob/main/glosario.md) podran encontrar el glosario con algunos términos y también el significado de algunas **Abreviaciones**.

---