Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/checkpoint-2
https://github.com/eugenia1984/checkpoint-2
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/eugenia1984/checkpoint-2
- Owner: eugenia1984
- Created: 2022-09-11T15:56:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-13T14:55:27.000Z (over 2 years ago)
- Last Synced: 2023-03-05T11:23:47.131Z (almost 2 years ago)
- Language: JavaScript
- Size: 635 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :star: CHECKPOINT 2
🚀 Bienvenidos al segundo **Checkpoint** de la  *Skill Factory* realizda con **Avalith**.
---
##  Consigna
###  Objetivo principal:
Migrar el sitio construido en el checkpoint #1 en HTML, CSS y JS a ReactJS.
###  Descripción:
- Todos los elementos de la UI deben estar **componetizados**. Esto implica que solo tendremos un HTML y todas las páginas de nuestro sitio deben estar en componentes funcionales de React.
- Los estilos del sitio pueden variar de una entrega a otra, se puede implementar alguna librería/framework de CSS en caso de que no hayan utilizado y no necesariamente deben verse igual desde la UI, sino que debe cumplir con los mismos requisitos.
- El producto debe estar ruteado con **React Router Dom v6**. Además, no debe generar recarga del sitio en ningún momento, por lo que debe tener el comportamiento de una **SPA** (Single Page Application).
- Se deben realizar los mismos pedidos a las APIs y se debe controlar por medio de los hooks que hemos trabajado.
- En la sección de **Rick & Morty**, se debe generar una vista detallada de cada personaje (Sigue vigente la opción de NO paginar y utilizar solo los primeros 20 resultados).
- La fecha de entrega está pactada para el día Lunes 12 de septiembre a las 23.59h (para que tengan todo el día para trabajar). La entrega se realizará a través de Classroom.
- Como **plus** de esta entrega, habrá que generar un archivo Readme.md para documentar todo lo que se trabajó en el checkpoint #2, desde que empezamos a trabajar con React. Vamos a comentar sobre la migración del sitio (por lo que deberían comentar de qué se trató el Checkpoint #1), tienen que figurar las dependencias que están utilizando en el proyecto y debe figurar la secuencia de pasos para poder clonar el repositorio y hacerlo funcionar de forma local.
[https://docs.github.com/es/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax](https://docs.github.com/es/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
### La consigna del Checkpoint #1 era:
- Desarrollar un sitio en HTML, CSS y JS, pudiendo utilizar librerías solamente para CSS, que contenga los siguientes elementos:
- **Objetivo principal**: Realizar un checkpoint de las tecnologías utilizadas en clase, brindar un espacio de investigación e implementar las habilidades adquiridas en un proyecto integrador. Una **página principal** que contenga **tres enlaces**. La temática para el background y la paleta de colores es a total elección. Un enlace debe llevar a **Users**, otro enlace debe llevar a **API Rick & Morty** y la última debe llevar a **Formulario de Contacto**.
-**Objetivo de esta tarea**: Lograr un maquetado correcto, cumplimiento de los requerimientos del proyecto, enlazar páginas que conforman un sitio web.
- **Formulario de Contacto**: Deberán investigar cómo capturar los datos de un formulario en JS y aplicar a una página que muestre los siguientes campos:
-Nombre de contacto
-Correo electrónico
-Campo para el comentario.
Los datos registrados deben verse en la consola del navegador (no es imprescindible renderizarlos en el DOM).
-**Objetivo de esta tarea**:
-Poder interactuar con un formulario, entender los eventos asociados, realizar tareas de investigación autodidacta.
- **Users**: Realizar una petición a la API Rest de JSONPlaceholder (El endpoint a utilizar se encuentra aquí: https://jsonplaceholder.typicode.com/users. Obtener el resultado de la petición asíncrona y renderizar el DOM a partir de un archivo JS en el que se muestren las siguientes keys: Nombre, Id, email, teléfono, ciudad del usuario, nombre de la compañía. Se debe mostrar por medio de una tabla con sus correspondientes cabeceras.
**Objetivo de esta tarea**:
-Trabajar con asincronismo
-Implementar Fetch o Axios para la petición
-Implementar .then o async/await para el manejo de las promesas.
-Control de DOM por medio de JS, utilización de tablas.
- **API Rick & Morty**: Realizar una petición a la API Rest de Rick & Morty, en su formato Rest (El endpoint a utilizar se encuentra aquí[https://rickandmortyapi.com/]. Obtener el resultado de la petición asíncrona y renderizar el DOM a partir de un archivo JS en el que se muestren los personajes de la serie a través de unas cards de presentación. Como la API se encuentra paginada, es suficiente con renderizar los 20 primeros personajes. Pueden renderizar más si así lo desean.
-**Objetivo de esta tarea**:
-Trabajar con asincronismo
-Implementar Fetch o Axios para la petición
-Implementar .then o async/await para el manejo de las promesas.
-Control de DOM por medio de JS, implementación de cards en una UI.
-> Se puede ver en [https://github.com/eugenia1984/checkpoint-1](https://github.com/eugenia1984/checkpoint-1)
---
##  Tecnologías utilizadas 🛠️
-  HTML5
-  CSS3
-  JavaScript
-  React
- Dependencias:
```JSON
"dependencies": {
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.35.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1"
}
```
---
##  Por favor: 🎁
Comparte este proyecto con otros 📢
Invita una cerveza 🍺 o un café ☕ a alguien del equipo.
Muchas gracias 🤓.
---
##  Nota
Agradezco su interés en este proyecto ⌨️ con ❤️ de **María Eugenia Costa** 😊 y sígueme en [LinkedIn](https://www.linkedin.com/in/mar%C3%ADaeugeniacosta/).
---
---
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)