Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/numen-react
The final proyect wih React do it in group.
https://github.com/eugenia1984/numen-react
javascript jsx react
Last synced: about 2 months ago
JSON representation
The final proyect wih React do it in group.
- Host: GitHub
- URL: https://github.com/eugenia1984/numen-react
- Owner: eugenia1984
- Created: 2022-08-03T12:46:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T14:26:19.000Z (about 1 year ago)
- Last Synced: 2024-01-24T06:25:51.748Z (12 months ago)
- Topics: javascript, jsx, react
- Language: JavaScript
- Homepage:
- Size: 4.66 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :star: Proyecto final grupal con React en el Curso de Numen (Full Stack con React y Node)
---
Realizamos una SPA.
---
Links:
[Acá se puede ver el tablero de Trello con el que trabajamos](https://trello.com/b/3g5jnbhr/proyecto-final-react)
[Aca se puede ver la consigna en PDF](https://github.com/eugenia1984/numen-react/blob/main/proyecto_react.pdf), que es esta:
El proyecto consistirá en realizar una aplicación web en React, respetando el diseño entregado en Figma, los requerimientos técnicos y la funcionalidad deseada.
### Requerimientos de Diseño:
1. En primer lugar, es necesario entrar al link donde se encuentra el diseño:
[Modelo Figma](https://www.figma.com/file/ptZy1a106K1UbSFh1O4v93/Food-store-template-(Community)?node-id=0%3A1)
2. El diseño propuesto es flexible y está sujeto a cambios y mejoras. No obstante, hay ciertos requerimientos que deben ser respetados:
• Layout, dimensiones y posicionamiento de los elementos en la página (menú superior, carrito de compras a la derecha, logo a la izquierda, imagen de bienvenida de fondo, etc).
3. Queda a criterio de los desarrolladores el contenido de la Homepage:
• Las imágenes a utilizar, el estilo de íconos, el nombre de la empresa u organización, el logo, el texto y la paleta de colores.
### Requerimientos Técnicos:
1. La aplicación web deberá estar dividida en componentes funcionales.
2. Los estilos deben estar hechos con el approach de mobile first.
3. El diseño debe ser responsivo, pudiendo ajustarse al tamaño del dispositivo desde el cual se accede a la página.
4. La información deberá ser consumida de un backend mockeado con json-server.
5. Para las consultas al backend, deberá utilizarse la librería axios.
6. Para facilitar los estilos, se puede utilizar Bootstrap o alguna otra librería de CSS (opcional).
### Requerimientos Funcionales:
1. Al presionar el botón de compra, se deberá abrir un modal para confirmar la compra.
2. Al confirmar la compra, el número del carrito deberá aumentar en uno.
3. La galería de imágenes de Instagram deberá desplegar al menos 10 imágenes en un carrusel.
---
## 
Tecnologías utilizadas:
- HTML5 
- CSS3 
- JavaScript 
- React 
con:
1. React Router DOM
2. JSON Server
3. Axios
4. JSX
- Material UI
---
## Integrantes:
[María Eugenia Costa](https://github.com/eugenia198)
[Ekelhtml](https://github.com/Ekelhtml)
[Martin Larossa](https://github.com/Martin8398)
[Julieta Marcer](https://github.com/jmercer)
---
## Para poder ver este repositorio en tu local:
Luego de bajarte el repositorio corre ```nmp install``` y luego ```npm start``` ya situado dentro del proyecto.
---
## ¿ Qué instalamos ?
- [React Router DOM](https://v5.reactrouter.com/web/guides/quick-start) ```npm install react-router-dom ```
- [JSON Server](https://www.npmjs.com/package/json-server) ```npm install json-server```
- [Axios](https://axios-http.com/docs/intro) ```npm install axios```
- [Material UI](https://mui.com/) ```npm install @mui/material @emotion/react @emotion/styled ```
---
Seguime en: [LinkedIn - maria-eugenia-costa](https://www.linkedin.com/in/maria-eugenia-costa/)
---