Mi proyecto final del bootcamp de Core Code School
Web Grow
Web Grow se trata de una pagina web, motivación de unos de mis hermanos que tiene una pequeña tienda. Y tanto a el como a mi nos hace bastante ilusión que pueda dedicarle tiempo a intentar hacerla, el objetivo de la pagina en general es presentar mercancia que hay en la tienda, una parte de peticiones de los clientes de ciertos productos y compra de los productos.
En proceso ...
backend
├───📁 src/
│ ├─📁 lib/
│ │ └───📄 db.ts
│ ├───📁 models/
│ │ └───📄 product.model.ts
│ ├───📁 routes/
│ │ ├───📄 index.plugin.ts
│ │ └───📄 productRouter.ts
│ ├───📁 types/
│ │ └───📄 interfaceProduct.ts
│ ├───📄 app.ts
│ ├───📄 config.ts
│ ├───📄 seed.ts
│ └───📄 server.ts
├───📄 .env
├───📄 .gitignore
├───📄 package.json
└───📄 yarn.lock
frontend
├───📁 components/
│ ├───📁 conocenos/│
│ │ └───📄 Horario.tsx
│ ├───📁 form/
│ │ ├───📄 BotonMas.tsx
│ │ ├───📄 BotonMenos.tsx
│ │ ├───📄 FormActualizar.tsx
│ │ └───📄 FormProduct.tsx
│ ├───📁 index/
│ │ ├───📄 CartaFondo.tsx
│ │ └───📄 Section.tsx
│ ├───📁 layout/
│ │ ├───📄 Footer.tsx
│ │ ├───📄 Layout.tsx
│ │ ├───📄 LinkNavbar.tsx
│ │ ├───📄 NavbarAdmin.tsx
│ │ ├───📄 NavbarCliente.tsx
│ │ └───📄 Registro.tsx
│ └───📁 products/
│ ├───📄 Card.tsx
│ └───📄 CardCliente.tsx
├──📁 hooks/
│ └───📄 useProductList.ts
├──📁 lib/
│ ├───📄 Api.ts
│ ├───📄 backendFetcher.ts
│ └───📄 fistLetterToUpper.ts
├──📁 pages/
│ ├───📁 admin/
│ ├───📄 alta.tsx
│ │ ├───📄 baja.tsx
│ │ └───📄 productos.tsx
│ ├───📁 api/
│ │ └───📁 auth/
│ ├───📄 conocenos.tsx
│ ├───📄 index.tsx
│ ├───📄 productos.tsx
│ ├───📄 semillas.tsx
│ └───📄 _app.tsx
├──📁 public/
│ ├───📁 css/
│ │ └───📄 globals.css
│ ├───📄 cafeCanabis.png
│ ├───📄 cannabis.png
│ ├───📄 cbdAromas.png
│ ├───📄 fondo_flor.jpg
│ ├───📄 liquidoCBD.png
│ ├───📄 monasterio.jpg
│ ├───📄 monasterioFondoNegro.jpg
│ ├───📄 multi.png
│ ├───📄 page.png
│ ├───📄 productosCultivo.jpg
│ ├───📄 raw.png
│ ├───📄 semillas.jpg
│ ├───📄 tienda.jpg
│ ├───📄 vapeador.jpg
│ └───📄 vapeador1.jpg
├──📁 types/
│ └───📄 interfaceProduct.ts
├──📄 .babelrc
├──📄 .env.local
├──📄 .gitignore
├──📄 next-env.d.ts
├──📄 package.json
├──📄 postcss.config.js
├──📄 tailwind.config.js
├──📄 tsconfig.json
└──📄 yarn.lock
Clone the repository:
git clone https://github.com/nadaronda/web-Grow
Initiate yarn:
yarn init
Or use this instead:
yarn init -y
Install dependencies:
yarn install
Execute the project:
yarn run dev
Al exportar una función llamada getServerSideProps (Server-Side Rendering) desde una página, Next.js pre-renderizará esta página en cada solicitud utilizando los datos devueltos por getServerSideProps. Esto es útil para obtener datos que cambian con frecuencia y hacer que la página se actualice para mostrar los datos actuales. Esta es la estrucxtura básica
export async function getServerSideProps(contexto){
return {
props:{
}
}
}Ejemplo En primer lugar defines la función getServerSideProps(), la dataProduct, es lo que devuelve la props, pero la devuelve en la terminal.
export async function getServerSideProps() {
const url = "http://localhost:5000/products";
const respuesta = await fetch(url);//fetch para obtener recursos de forma asincrona
const dataProducts = await respuesta.json();
console.log(dataProducts); //los datos se ven en la terminal
return { props: { dataProducts } };//data que quiero recibir
}
Para poder utilizarla, debes pasarla como parametro de la función de la pagina, en este caso la pagina se llama editar, le he pasado la props del getServerSideProps, como parametro. Una vez hecho esto ya podemos utilzar la dataProduct en la pagina editar.
const editar = ({ dataProducts }) => {
console.log(dataProductos); //para poder ver los datos en la consola
const productos = dataProducts.map((elemento) => { return <p>{elemento.nameProduct}</p>;});
return (
<>
{productos}
</>
);
};
export default editar;En el caso de que necesites leer la información te dejo el enlace. Next.JS getServerSideProps
- El proyecto estará desarrollado en React y Next Js
- Trabajado en el entorno de Node.js
- Lenguaje de programacion typescript
- Se utiliza yarn como gestor de paquete
- Se utiliza Visual Studio Code como editor de código.
- Node package manager: npm
- To run the HTML: Vite
- Tailwind es un framework para trabajar estilos CSS. Instalación
- Lenguajes de programación: typescript
- Otros paquetes de Node: Lodash
- React icons
Agradecimientos principalemente a Core code school por la oportunidad que me estan dando. A mi profesor Juan Pablo, mi compañero Daniel Cortina . Y a mi familia por toda la ayuda recibida y su gran apoyo, sin ellos no lo hubiera logrado.
