Deploy de React en Netlify

Yo realice el deploy con Vercel:

Live App
Repositorio

Agregue algunos estilos y funcionalidades

• Autenticacion de usuario
• Local storage
• Rutas privadas
• Animaciones

Les presento mi proyecto como va hasta ahora
a nivel de logica tiene muchos cambios con respecto al proyecto presentado por la profe

• tiene lazy loding, y loading skeleton en las imagenes
• cuando filtra por categoria lo que hago es una peticion al servidor paa que me traigas los productos por categoria
• implemente varios Custom Hooks
• en vez de inhabilitar el botn al agregar un producto, lo que hice fue que sumara la cantidad de productos del mismo producto
  Entre otro cambios que hice
  https://shopistore.netlify.app/

Aqui esta el repo por si le quieren echar un ojo
aun me falta implementar varias cosas que tengo en mente
https://github.com/amaneiro7/shopistore

🚀 Pasos para hacer el deploy en Github 🚀

• Ir a la terminal, cambiar a la rama main (que es la que queremos hacer deploy) :

git checkout main

• En la terminal verificar si en modo de producción funciona la app:

npm run build

• Se va a generar una carpeta llamada dist, para visualizar la app se corre:

npm run preview

• Se abre el navegador y debe salir la app con todas las funciones. 🎉
   
• En la terminal ejecutar:

npm install gh-pages --save-dev

• Vamos a VS Code y abrimos el archivo package.json, antes del cierre de la última llave, se
  agrega:

"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"

• En la parte de los scripts se agrega "deploy": "gh-pages -d dist" queda así:

"scripts": {
	"dev": "vite",
	"build": "vite build",
	"lint": "eslint src --ext js,jsx --report-unused-disable-directives --
	max-warnings 0",
	"preview": "vite preview",
	"predeploy": "npm run build",
	"deploy": "gh-pages -d dist"
},

• Abrimos el archivo vite.congig.js y agregamos base: "./", el código queda:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	base: "./",
})

• Guardamos, y en la terminal ejecutamos:

npm run deploy

• Si sale Published es que todo salió bien. ✅
   
• Vamos al repositorio en GitHub. En la página de GitHub, al recargarla, en la lista desplegable
  de las ramas deben salir al menos las ramas main y gh-pages.
   
• Vamos a la pestaña de “Settings”, luego en el panel izquierdo en la pestaña de “Pages”, en las
  opciones de “Branch” ya la herramienta que instalamos de gh-pages seleccionó por nosotros la
  opción de la rama gh-pages y la carpeta raíz: /root.
   
• Después de unos minutos debe aparecer la dirección del despliegue. 🙏
   
• Al entrar a la url, debe estar el proyecto funcionando, probar con todas las funciones. ✌️
   

🤖 Hola comunidad para resolver el problema:

Encontré un tutorial que explicaba básicamente que las rutas que nosotros manejamos con React, se conocen internamente en la aplicación pero que Netlify no las conoce, solo conoce la raíz, entonces al recargar la página o dirigirnos por medio de la url a otra ruta diferente a Netlify le llega una ruta que no existe para su entorno. La solución propuesta es redirigir la aplicación al index.html que contiene toda la app y nuestras rutas.
Pasos:
1.- Abren su proyecto y afuera de todo (donde está el package.json) crean un archivo con el nombre: netlify.toml
2.- En el agregan las siguientes líneas de código:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
3.- Guardan, hacen commit, push y Netlify ya debería gestionar correctamente todas las rutas.
A mi me funcionó, espero a ustedes también les funcione.

https://curious-kashata-0907d5.netlify.app/

Les comparto mi proyecto:
https://shoppi-bh.netlify.app/
Quise ir mas alla, hice logica para usarios y toda la informacion la guardo en localStorage para que el usuario pueda guardar sus direcciones, ordenes y cambiar su informacion.
Este es el repositorio:
https://github.com/JUAN-BH/simpleEcommerce

hola veo que todos tienen el MISMO ERROR que me gustaría solucionar y no me deja dormir, cuando recargamos en una ruta /clothes o cualquier categoría en general da un error, lo ideal seria cargar la categoría normal, o llevarnos a la raíz “/”, igual trataré de buscar la solución (lo hice con nextjs13) pero si alguien sabe le agradezco

Aquí está mi proyecto finalizado, mi reto personal fue pasar todo con TypeScript así que espero que le pongan un ojo por si quieren revisar como está la lógica, los interfaces y toda esta magia del tipado fuerte:

Sitio deploy: https://dulcet-griffin-d705e5.netlify.app
Github: https://github.com/Javier0727/platzi-course-react-vite

https://main--gilded-malabi-00223d.netlify.app/

Esoooooo!

https://juanpa7799.github.io/react-course-vite/

Aquí esta mi sitio:
master chef sv

No pude hacer deploy con github lastimosamente. Hice varios cambios y prove varias cosas, por suerte Netlify te deja hacer drag and drop de los build files.

Buen dato por si alguien le sirve 😉

Otra opcion es Versel que actualmente tiene mejores servicios.
Saurte a todos!!!

Les comparto el mío:
https://platzy-shop.netlify.app/

WEB: Click aquí
Repo: Click aqupi aqui

Cada usuario tiene sus productos de manera individual. y se gurada en local storage.
Lo único malo es que tocan demasiado la Fake API y suben cosas muy raras o borran todo.

Maquetación de las Vistas de Usuario

Flujo de Sign In:

• Página para hacer login (si el usuario no está autenticado)
• Página de Sign up para crear un nuevo usuario (si el usuario no está autenticado)
• Página con la información del usuario y botón para hacer logout (si el usuario ya está autenticado)

Navbar Dinámica

La navbar o menú principal de la aplicación debe cambiar su estructura dependiendo de si el usuario está autenticado o no:

• Mostrar el correo del usuario (si ya está autenticado)
• Mostrar botón para hacer Sign (si no está autenticado)

Protección de Rutas

• Hacer redirect a la página de login si el usuario no está autenticado
• Mostrar común y corriente las páginas anteriormente mencionadas si el usuario ya está autenticado

Diseño

• Responsive Design

Así quedo el mio, utilice la API que un compañero comento (fakestoreapi)

Repo

Les dejo la URL y el repo por si quieren mirar 🙃

Les comparto mi proyecto:
Live APP
Cosas por hacer:

• Registro de usuarios

• Vista de “TU CUENTA”

Así va mi proyecto: https://degiraldod-shopi.netlify.app/
Las cosas que tengo por hacer son:

• Hacerlo responsive.
• Implementar lazy loading y loading squeletons
• Autenticación de usuario y vistas de My Account y Sign In.
• Implementar una vista para cuando no se tiene ningún resultado.

Gran curso y, gran explicación:)
https://tiendafy.netlify.app/

Muchas gracias
https://carlostoroshoppy.netlify.app/

https://n40m10.github.io/ReactJSConViteJSAndTailwind/

Mi proyecto:
https://apps.alexanderweb.cloud/shopi/

Siempre es emocionante cuando se puede compartir un deploy exitoso:
mi aplicación mega re pro OMG que felicidad haber terminado sin problemas.

Dejo por acá el repo del proyecto, lleno de machetazos, pero completo.

https://juli6464.github.io/curso-practico-react/

Aquí dejo mi proyecto ya desplegado:
https://e-commerce-react-fjsb.netlify.app/
Aquí pueden acceder al código:
https://github.com/FranciscoJSB12/e-commerce-react

https://cesdevs.com

Excelente curso
saludos

Hola comunidad les dejo la información de mi e-commerce “Astro Place”. Lo personalicé a mi gusto, tiene un diseño responsive, una landing page y lo hice con mi propia API deployada en Render.
La página web la pueden revisar aquí: https://astro-place-bg.netlify.app/
La API: https://astroplace-fake-api.onrender.com/
Los repositorios en Github: https://github.com/BryanGaray99/Astro-Place-e-commerce y https://github.com/BryanGaray99/astroplace-fake-api

Les presento el proyecto: https://rainbow-pastelito-da17c2.netlify.app/

Proyecto finalizado, ire agregando mas detalles porque lo usare como trabajo estrella en mi portfolio. ⭐

• 🔴 LIVE: https://ecommerce-logo.netlify.app/
• 📅 REPO: https://github.com/mt-alejo/pj-ecommerce-react

Ideas de los compañeros:

• Lazy loding
• Loading skeleton
• Loading initial state
• El Shopping Cart aside
• Mas estilo

Quiza o quiza nunca:

• Paginas no encontradas
• Sign In & Sign up

La mayoría de los proyectos veo que dan error si se accede directamente a una página que no sea el home, ojalá compartieran una solución :c

• Mi proyecto

Encontré un Tutorial perfectamente explicado para subirlo a Github Pages.

Listo
https://courageous-puppy-70f706.netlify.app/
incluí un formulario para sign In
y uno de registro

Hola como están gracias por este gran curso

Demo

Les comparto mi proyecto:

• Pueden ver mi repositorio aquí
• Pueden ver mi deploy aquí

https://viteplatzi.netlify.app/

Para los que tienen problemas cuando se recarga la pagina directamente con una ruta en el navegador y netlify les arroja un 404, pueden agregar un archivo en la carpeta public bajo el nombre _redirects: ‘public/_redirects’ solo con el siguiente contenido:

/* /index.html 200

Luego corren el comando de build y con eso deberia funcionar el enrutamiento de la pagina.
fuente:
Netlify says “Page not found” upon reloading in Vite and React site

Proyecto finalizado:
https://higiniecito-frist-site.netlify.app/

Hola, dejo el resultado de este curso, no le hice muchas modificaciones al producto final comparado con el que tiene la profe, lo pueden ver aqui tambien dejo la repo por aca

Le comparto mi deploy AQUI

repo: https://github.com/JuanVaquiro/react-course
demo: https://dulcet-gnome-39817c.netlify.app/

https://6486586aad38cc643a1d3c72--cosmic-biscuit-e74852.netlify.app/
tarde me di cuenta lo de hacer que los estilos css sean responsive casi no tengo a quien mostrarles mis proyectos y quienes lo hacen desdes el cel para la proxima yo pararelo los hire haciendo,

https://glistening-mandazi-07d93e.netlify.app/

El mío lo hizo en Next.js y usando TypeScript, es muy interesante el uso de rutas en Next.js, la funcionalidad de las rutas ya viene por defecto:
https://github.com/enrique1994mex/app-store
https://app-store-mk9wgh0nz-enrique1994mex.vercel.app/

Les dejo el mio 😃

https://main--ornate-puffpuff-e3ef9d.netlify.app/

A mi proyecto le agregué varias funcionalidades extras:

• Local Storage
• Transiciones y animaciones ante cada modal
• Spinner animado antes de que carguen los productos para mejorar la experiencia de usuario
• Paleta de colores personalizada
• Tengo pensado en el futuro agregarle autenticación de usuarios

Hola a todos, les dejo mi aplicación y el repositorio

Demo

Git Hub

Hola, mi avance actual del sitio es el siguiente y este es el repositorio .

Conecté la búsqueda a la url y traté de realizar a mi manera la lógica de juntar el fltrado de categorías al tiempo de la búsqueda. El menú depende de un filtrado rápido de lo que devuelve el fetch la primera vez para que muestre las categorías, dado que el api cambia mucho su data y consideré interesante que se actualizara según los datos que recibe. En caso de que los resultados no devuelvan nada, Coloqué un mensaje amigable dando la opción de hacer clic en las categorías para que el usuario no se quede solo con que no encontró nada.

Espero sea de ayuda y considero que todo puede mejorarse, optimizarse, etc. por tanto, todos los comentarios son bienvenidos 🙂.

• Aplicación en vivo
• repo en github