Skip to content

Commit

Permalink
Merge pull request #77 from josemoracard/jose1-README
Browse files Browse the repository at this point in the history 
fixed text README.md
  • Loading branch information
@tommygonzaleza
tommygonzaleza authored Nov 9, 2023
2 parents 163985f + 87f0011 commit 0a36662
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 58 deletions.
68 changes: 36 additions & 32 deletions README.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,72 +4,76 @@

Tecnologías: HTML, CSS, JS, React, React Router y Context.

¡Hola! Es hora de empezar a hacer aplicaciones frontales profesionales. Esta vez
¡Hola! Es hora de empezar a hacer aplicaciones de front-end profesionales. Esta vez
Crearemos una pequeña aplicación de gestión de contactos que permitirá a los usuarios:
Leer, crear, actualizar y eliminar contactos.

Puedes usar este gif:
[Compruébalo aquí!](https://github.com/breatheco-de/exercise-contact-list/blob/master/preview.gif?raw=true)
[¡Mira el ejemplo aquí!](https://github.com/breatheco-de/exercise-contact-list/blob/master/preview.gif?raw=true)

O bien estas imágenes:
[Imagen 1](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-1.png?raw=true) y
[Imagen 2!](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-2.png?raw=true)
[Imagen 1](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-1.png?raw=true) e
[Imagen 2](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-2.png?raw=true)


## 🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el `react boilerplate` usando una herramienta de aprovisionamiento como [Codespaces](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.
Recomendamos abrir el `react boilerplate` usando un entorno de desarrollo como [Codespaces](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.

Este es el repositorio que necesitas abrir o clonar:

```
```text
https://github.com/4GeeksAcademy/react-hello-webapp
```

**👉 Por favor sigue estos pasos** [cómo comenzar un proyecto de codificación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).
**👉 Por favor sigue estos pasos sobre** [cómo comenzar un proyecto de programación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin <your new url>`) y subiendo el código a tu nuevo repositorio usando los comandos `add`, `commit` y `push` desde la terminal de git.
> 💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin <your new url>`) y subiendo el código a tu nuevo repositorio usando los comandos `add`, `commit` y `push` desde la terminal de git.
2. Instala /nodes_modules
```
1. Instala `/node_modules`

```bash
$ npm install
```
3. Ejecuta el servidor webpack development
```

2. Ejecuta el servidor webpack development

```bash
$ npm run start
```
Este boilerplate no tiene funcionalidades, pero si tiene el 99.9 % del HTML/CSS que necesitarás en este proyecto, lo que te permitirá enfocarte en las funcionalidades.

**Por favor, use el Contexto para este proyecto:** La plantilla viene con el Contexto configurado. Verifique la carpeta ```/ store```.
Este boilerplate no tiene funcionalidades, pero si tiene el 99.99% del HTML/CSS que necesitarás en este proyecto, lo que te permitirá enfocarte en las funcionalidades.

**Por favor, use el Contexto para este proyecto:** La plantilla viene con el Contexto configurado. Verifique la carpeta `/store`.

**Nota: necesitarás codificar todas las funcionalidades.**
## 📝 Instrucciones:

### :memo: El proyecto se divide en:
- Debes agregar el código necesario para que su aplicación maneje los contactos, específicamente:
- Crear
- Actualizar
- Eliminar
- (Opcional) Solicite al usuario una confirmación antes de eliminar un contacto, usa un componente Modal para eso.

#### :two: vistas diferentes:
Todas las funcionalidades deben implementarse en el objeto `actions` que está en `flux.js`.

1. Contacto: Contiene la lista de contactos.
2. AddContact: es solo un formulario utilizado para crear o actualizar contactos.
`fetch` la data desde la API: https://playground.4geeks.com/apis/fake/contact/

#### Un componente:
Tarjeta de contacto: muestra solo un contacto.
## El proyecto se divide en:

## TO-DO funcionalidades
### Dos vistas diferentes:

- Debes agregar el código necesario para que su aplicación maneje los contactos, específicamente:
- crea,
- actualiza,
- y elimina.
- (Opcional) Solicite al usuario una confirmación antes de eliminarla, use el componente modal para eso.
1. Contact: Contiene la lista de contactos.
2. AddContact: Es el formulario utilizado para crear o actualizar contactos.

Todas las funcionalidades deben implementarse en el objeto ```actions``` (store.js).
### Un componente:

Sugerencia: comience con algún contenido ficticio en la tienda (store.js).
1. ContactCard: Muestra un solo contacto.

```Fetch``` la data desde la API: https://playground.4geeks.com/apis/fake/contact/
## 💡 Pistas:

Sugerencia: usa Postman para probar los puntos finales de la API antes de codificar.
+ Comience con algún contenido ficticio en la *store* (`flux.js`).
+ Usa Postman para probar los *endpoints* de la API antes de codificar.

Este y otros proyectos son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
Este y otros proyectos son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
56 changes: 30 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,62 +14,66 @@ Or you can use these images:
[Image 1](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-1.png?raw=true) and
[Image 2](https://github.com/breatheco-de/exercise-contact-list-context/blob/master/src/img/contact-list-2.png?raw=true)

## 🌱 How to start this project
## 🌱 How to start this project

Do not clone this repository because we are going to be using a different template.

We recommend opening the `react boilerplate` using a provisioning tool like [Codespaces](https://4geeks.com/lesson/what-is-github-codespaces) (recommended) or [Gitpod](https://4geeks.com/lesson/how-to-use-gitpod). Alternatively, you can clone it on your local computer using the `git clone` command.

This is the repository you need to open or clone:

```
```text
https://github.com/4GeeksAcademy/react-hello-webapp
```

**👉 Please follow these steps on** [how to start a coding project](https://4geeks.com/lesson/how-to-start-a-project).

💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin <your new url>`), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal.
> 💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin <your new url>`), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal.
2. Install the /node_modules
```
1. Install the `/node_modules`

```bash
$ npm install
```
3. Run the webpack development server
```

2. Run the webpack development server

```bash
$ npm run start
```

This boilerplate contains no real functionalities but it has 99.99% of the HTML/CSS that you'll need for the project, allowing you to focus on the functionality.
This boilerplate contains no real functionalities, but it has 99.99% of the HTML/CSS that you'll need for the project, allowing you to focus on the functionality.

**Please use the Context for this project:** The boilerplate comes with the Context configured. Check the ```/store``` folder.
**Please use the Context for this project:** The boilerplate comes with the *Context* already configured. Check the `/store` folder.

**Note: You'll need to code all functionalities.**
## 📝 Instructions:

### :memo: This project is divided in:
1. You have to add the code needed to make your application handle contacts, specifically:
- Create
- Update
- Delete
2. (Optional) Ask the user for confirmation before deleting, use the Modal component for that.

#### :two: different views:
All the functionalities must be implemented in the `actions` object inside the `flux.js` file.

1. Contact: Contains the list of contacts.
2. AddContact: It's just a form used to create or update contacts.
`fetch` the data from the API: https://playground.4geeks.com/apis/fake/contact/

#### One component:
ContactCard: displays just one contact.
## This project is divided in:

## TO-DO functionalities
### Two different views:

- You have to add the code needed to make your application handle contacts, specifically:
- create,
- update,
- and delete.
- (Optional) Ask the user for confirmation before deleting, use the Modal component for that.
1. Contact: Contains the list of contacts.
2. AddContact: It's just a form used to create or update contacts.

All the functionalities must be implemented in the ```actions``` object (store.js).
### One component:

Hint: start with some dummy content in the store (store.js).
1. ContactCard: It just displays one contact.

```Fetch``` the data from the API: https://playground.4geeks.com/apis/fake/contact/
## 💡 Hints:

Hint: Use Postman to try the API endpoints before coding.
+ Start with some dummy content in the store (`flux.js`).

+ Use Postman to try the API endpoints before coding.

That is it! Start coding your React Application :)

Expand Down

0 comments on commit 0a36662

Please sign in to comment.