MERN Stack con Context API (Subida de imagenes, TailwindCSS, Formik)

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ธ.ค. 2024

ความคิดเห็น • 180

  • @dadas8366
    @dadas8366 2 ปีที่แล้ว +17

    Valió la pena cada maldito segundo, pude hacerlo desde principio hasta fin y solucionar problemas de paso ;). Sin duda eres el mejor creador de contenido de programación que he visto de habla hispana. Muy completo, y lo que mas me gusta es que siempre te enfocas en dejar la menor cantida de es huecos posibles. Incluso me sorprendió que explicaras el useContext hook en este vídeo, ya que se supone que quienes vemos esto ya hemos trabajado con las siglas de MERN antes. Te agradezco mucho porque con estos conocimientos puedo crear una web completa de inicio a fin y a medida.

  • @franciscovalladares4676
    @franciscovalladares4676 2 ปีที่แล้ว +1

    Excelente video, se nota que sabes y mucho, me sirvió demaciado tu video tutorial, solo que al finar, me hice bolas completamente con tanto modulos que utilizabas, gran video!

  • @danielaltamiranoborja
    @danielaltamiranoborja 2 ปีที่แล้ว +1

    Order!! To be orderly is to read what goes first. Thank you Fazt. I love you

    • @danielaltamiranoborja
      @danielaltamiranoborja 2 ปีที่แล้ว +1

      ¡¡Orden!! Ser ordenado es leer lo que va primero. Gracias Fazt. Te amo

  • @brokeneyes8951
    @brokeneyes8951 ปีที่แล้ว +2

    Si ves esto actualmente ya el fs que trae Nodejs ya soporta promesas asi que no necesitas instalar fs-extra, solo importas fs y utilizas "await fs.promises.rm(req.files.image.tempFilePath)" y listo :3 excelente curso Fazt

  • @nixiu2605
    @nixiu2605 2 ปีที่แล้ว +2

    4:01:24 si al actualizar les sale un rerror de react que debe tener una key o no les renderiza, Estuve un rato y bueno era que en mi controller desde mi backend en la parte de updatepost Yo retornaba un mensaje Cuando deberia retornar el post, La funcion findByIdAndUpdate retorna el objeto nuevo, entonces deberiamos ponerle eso con un json -> return res.json(post) y listo por si alguno se quedo jaja ;)

  • @fergutierrez
    @fergutierrez 2 ปีที่แล้ว +17

    ¿Crees que me voy a pasar casi 5 horas viendo tu video?, pues sí, estás en lo correcto, bueno Fazt siempre un placer ver tus videos!.

  • @Dj-jose-vi2.0
    @Dj-jose-vi2.0 2 ปีที่แล้ว +1

    Fazt Code. Sí lo colocaste " async ". Minuto 54:39 . Pero igual que lo colocaste lo borraste. sin darte cuenta. Un saludo. Muchas gracias. Fazt. Aprendo mucho contigo.

  • @RingOfFaia
    @RingOfFaia 2 ปีที่แล้ว +2

    3:17:05 Configurar tabs de espacios y prittier
    4:17:47 Stop Propagation (Detener la propagacion de evento click)

  • @joseantonioapariciogallego5620
    @joseantonioapariciogallego5620 2 ปีที่แล้ว

    Hi, me encanta como explicas y me he hecho Miembro Prémium, ya lo fui, pero no sabía mucho, ahora estoy bastante avanzado para seguir lo que haces e incluso implementar. Muchas gracias

  •  ปีที่แล้ว

    Terminado. No lo subí, queda pendiente para cuando me ponga a aprender producción. Gracias Totales!!!

    • @matiasricci9570
      @matiasricci9570 ปีที่แล้ว

      si lo pudiste hacer el deploy messirve jaja el ayudin

  • @JosSSMr
    @JosSSMr 2 ปีที่แล้ว +1

    Hola Fazt , disfruto mucho de tus videos ya que ademas de aprender me resultan muy entretenidos
    Gracias por todo lo que he aprendido!!

  • @rouko77
    @rouko77 2 ปีที่แล้ว

    que JEFE , me viene de lujo, estoy haciendo un proyecto ahora muy parecido, Muchas gracias Fazt

  • @Dj-jose-vi2.0
    @Dj-jose-vi2.0 2 ปีที่แล้ว

    Minuto 1:24:00 Cuando explicas que puedes subir o bien la ruta o bien el archivo. creo tener un error. Me pide el parámetro file. se crea un error message: {
    "message": "Missing required parameter - file"
    }
    Si lo ve conveniente dejo este error ya solucionado. solamente me falto una letra por eso sale ese error. no me reconocía uploadImage(req.files.image.temFilePath) me faltó una letra en tempFilePath. Ahora ya funciona.

  • @josemartinez-ue7qj
    @josemartinez-ue7qj 2 ปีที่แล้ว

    Hola de nuevo un agradecimiento enorme tus videos me han servido de mucho para mi propio desarrollo

  • @kevincay2683
    @kevincay2683 2 ปีที่แล้ว

    Gracias por esto Fazt, justo estaba buscando un tutorial de MERN...

  • @NovatoWTF
    @NovatoWTF 2 ปีที่แล้ว +1

    Creo que lees la mente para saber q necesitamos Fazt 😍

  • @edgararcosmartin5924
    @edgararcosmartin5924 ปีที่แล้ว

    Muchas gracias amigo por este videazo gracias a este video he aprendido mucho eres un grande

  • @alejandrodavidbenolol
    @alejandrodavidbenolol 2 ปีที่แล้ว +1

    No puedo expresar el placer que me dio conocer la extencion de MongoDB del VS Code. Siempre use la terminal pero tener esa interfaz grafica en el mismo editor junto con el Thunder Client que remplazo a mi viejo Postman estan haciendo que ya no salga del editor para nada. Gracias por esto

    • @ProgramaThor
      @ProgramaThor 2 ปีที่แล้ว

      Al momento de instalar esa extensión me arroja un warning en mi package.json, me podrías ayudar?

    • @alejandrodavidbenolol
      @alejandrodavidbenolol 2 ปีที่แล้ว

      @@ProgramaThor Puedo intentarlo. tenes una foto del warning?

  • @FordNdji
    @FordNdji 2 ปีที่แล้ว

    Me gustó mucho tu video Fazt..y por cierto eres un crack....en cuando puedas, me gustaría ver lo mismo pero con Vuejs...gracias

  • @DanielCodContent
    @DanielCodContent 2 ปีที่แล้ว

    Muy util este tutorial!!! justo me hacia falta conocer de cloudinary

  • @joshsanders2479
    @joshsanders2479 2 ปีที่แล้ว

    Hola Fazt
    Excelente, cada vez te superas más y más.
    Gracias

  • @perrochokoo
    @perrochokoo 2 ปีที่แล้ว

    Gracias Fazt.... me ayudo mucho este video-tutorial... como siempre.!!! 🙌

  • @edwinimd1333
    @edwinimd1333 2 ปีที่แล้ว +2

    Buenas, en el momento 1:17:52, en el apartado subir imagen, cuando yo le doy "enviar" me da un error el cual dice "Connection was forcibly closed by a peer." ya busque en bastantes sitios pero no encontré nada parecido, me gustaría que me ayudaras, de antemano gracias.

    • @sparkiedoteth
      @sparkiedoteth 2 ปีที่แล้ว

      Tengo el mismo problema ya encontraste la solucion?

  • @SonGoku-pc7jl
    @SonGoku-pc7jl 2 ปีที่แล้ว

    Muchisimas Gracias Fazt, ha sido como siempre una marabilla! :D Es increible aprender contigo! :D

  • @franciscocalix7579
    @franciscocalix7579 2 ปีที่แล้ว +1

    gran aporte fazt, no sabes lo que he aprendido contigo, seria bueno que hagas un video de react pero usando SWR, solo te doy una idea mas, para tus futuros videos

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Buenísima idea, lo anoto para hacer algunos ejemplos

  • @jesusjavierzambranozambran2295
    @jesusjavierzambranozambran2295 2 ปีที่แล้ว +1

    Eres un crack, gracias por compartir tus conocimientos.

  • @tidyodooy
    @tidyodooy 2 ปีที่แล้ว

    Fazt: sube un nuevo video.
    Yo: -messirve

  • @luisaquinoc6548
    @luisaquinoc6548 2 ปีที่แล้ว

    Excelente Fazt gracias por tus conocimientos !!!

  • @justcode7908
    @justcode7908 ปีที่แล้ว +1

    No entiendo!! por que me da error en el deployd. El error es el siguiente: e.map is not a function en Homepage.js My ERROR: return (
    {posts.map((post) => (
    ))}
    );
    };
    e.map es posts.map, pero no es leido....

  • @juanfernandocogollodoria278
    @juanfernandocogollodoria278 2 ปีที่แล้ว

    UN HEROE SIN COMPARACIÓN

  • @brokeneyes8951
    @brokeneyes8951 ปีที่แล้ว

    Cual es la diferencia de http y https ?

  • @emilianooliveto5028
    @emilianooliveto5028 2 ปีที่แล้ว +2

    Buenas, en el modulo de subir imagen, cuando yo le doy "enviar" me da un error el cual dice "JSON: Unexpected token position at 0" y me decía también "Payload to large error: request entity too large". Espero que alguien me pueda ayudar :/

    • @khalilaliviera3200
      @khalilaliviera3200 2 ปีที่แล้ว

      Hola buenas buenas ! pudiste solucionarlo???

    • @emilianooliveto5028
      @emilianooliveto5028 2 ปีที่แล้ว

      @@khalilaliviera3200 Hola, nono lo dejé sin la subida de imágenes

  • @jhonnyagudelo2467
    @jhonnyagudelo2467 2 ปีที่แล้ว +1

    buenas tardes, cuando trato de hacer el edit me aparece esto "A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:" so me pueden ayudar, gracias

    • @z0mbie_code
      @z0mbie_code 2 ปีที่แล้ว

      ¿Lo solucionaste? Me sale lo mismo :(

  • @santiagocostanti3113
    @santiagocostanti3113 3 หลายเดือนก่อน

    Excelente video, lastima que no puedo avanzar ya que cuando intento hacer un post desde el form en thunder me tira un error Unexpected token "-" y todavia no doy en la tecla.

  • @cristian_27
    @cristian_27 2 ปีที่แล้ว +1

    cuando desde el front-end hace la peticion POST, Fazt le pone el signo de (?) al condicional req.files?.image ,si les marca error al guardar como fue mi caso, hice asi y pude hacer la peticion POST sin enviar image,y nada es solo para colaborar si es que puedo ,exelente trabajo de Fazt de quien siempre aprendo =>
    if (!req.files) {
    const newPost = new Post({ title, description, image })
    await newPost.save();
    res.send(newPost);
    }
    if (req.files.image) {
    const result = await uploadImageCloudinary(req.files.image.tempFilePath)
    await fs.remove(req.files.image.tempFilePath)
    image = {
    url: result.secure_url,
    public_id: result.public_id
    }
    const newPost = new Post({ title, description, image })
    await newPost.save();
    res.send(newPost);
    }

    • @perrochokoo
      @perrochokoo 2 ปีที่แล้ว +1

      hola Cristian... yo he seguido y he usado también y he desplegado el repo del hace mas menos 2 días desde esta fecha.. no puedo cargar las imágenes. tu código soluciona eso???? quiero implementar pero no estoy seguro si hablamos de mismas fechas desde el repo descargado..... Saludos y gracias por cualquier ayuda-.

    • @cristian_27
      @cristian_27 2 ปีที่แล้ว +1

      @@perrochokoo hola campeón mira por lo que estuve viendo esta app tiene instalado
      React- scripts 5.0.0 en el packjson ,y se e ve que tiene cambios de versiones anteriores muy novedosas ,para algunos errores lo desintalaba instalaba alguna versión 4 u después volvía a instalar la 5 y me curaba errores,(((lo que si es que si vas a usar una versión 4 de react-scripts no te reconoce tailwinds,tenés que usar Bootstrap))también instale una versión anterior de thunder client,creo que la 10 o 12 y si instalas la última creo que es la 16 y el content-type no lo reconoce para el post (hablo por mi)..por ahora hasta la el edit de los posts en react me funciona perfecto ,todavía no probé subir archivo de imagen desde el postform ,saludos

    • @perrochokoo
      @perrochokoo 2 ปีที่แล้ว +1

      @@cristian_27 gracias... Voy a revisar por ese lado, aun que el código no es muy antiguo al pareser... De todas maneras veremos por ese lado si mejora o revienta en algún punto 😅

    • @cristian_27
      @cristian_27 2 ปีที่แล้ว

      @@perrochokoo con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))

  • @cristian_27
    @cristian_27 2 ปีที่แล้ว +2

    Si no les carga la imagen en Thunder Client, prueben en el Headers en vez de Content-Type prueben Accept-Charset.

    • @yasmani8335
      @yasmani8335 2 ปีที่แล้ว +1

      gracias brother,llevaba estancado 2 dias

    • @cattleya6802
      @cattleya6802 2 ปีที่แล้ว +1

      Ufff Muchas gracias brother!!!!!!!!

    • @cristian_27
      @cristian_27 2 ปีที่แล้ว

      @@cattleya6802 con la versión de thunder client 10 no tuve que poner nada en el headers(ni content-type ni aplicaciónJson ni nada) para mandar la peticion post y haces el código tal cual fazt y carga las imágenes desde cloudinary desde postform de react tal cual hace fazt((cuando vas a desinstalar la última versión de thunder aparece una solapita que te da la opción de elegir versiones anteriores,proba alguna anterior))

  • @mrbluuh8925
    @mrbluuh8925 2 ปีที่แล้ว +2

    Bro eres un crack, oye no se si hayas subido algun tutorial de MERN para un e-commerce, gracias por todo me has ayudado mucho para mis trabajos :D

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +10

      Justo estoy creando uno porque me lo piden mucho a más tardar lo publico el viernes entrante

    • @franmartin2758
      @franmartin2758 2 ปีที่แล้ว

      @@FaztCode Estaría genial usar React Hook Form en vez de Formik

    • @blinkerflame
      @blinkerflame 2 ปีที่แล้ว

      Uff, que buena idea para un video

    • @blinkerflame
      @blinkerflame 2 ปีที่แล้ว +1

      @@FaztCode Ya lo estamos esperando con ansias :)

  • @derlisdiaz9944
    @derlisdiaz9944 2 ปีที่แล้ว

    Tengo un error al subirlo a heroku me dice react-scripts not found y falla el build, alguna idea?

  • @galoborelli725
    @galoborelli725 ปีที่แล้ว

    hola amigo, tehago una pregunta. Puedo llevar a cabo este proyecto tal como lo hiciste vos pero creando el proyecto con vite en vez de create-react-app ?? espero tu respuesta y gracias !

  • @serva00c
    @serva00c 2 ปีที่แล้ว

    1:34:06 Extraño fallo de sonido en el video.

  • @RingOfFaia
    @RingOfFaia 2 ปีที่แล้ว

    Exelente video Fazt, oye como redirecciono a otra pagina fuera de este proyecto dentro del onClick() del div del Componente PostCard?
    En vez de esto:
    onClick={() => navigate(`/update-post/${post._id}`)}
    que deberia ir dentro para redireccionar a una url fuera de este proyecto? lo que quiero es pasarle la url de la imagen de cloudinary para cuando se clickee la card me lleve a esa url de la imagen, se que deberia ir dentro algo asi:
    {post.image ? post.image.url : null}
    pero dentro de que??
    Gracias Fazt

  • @darkness35869
    @darkness35869 2 ปีที่แล้ว

    Gracias por todos los videos que haces Fazt

  • @brunomontd
    @brunomontd 2 ปีที่แล้ว

    Gracias por compartirnos esto, fazt. 🤩🤩

  • @MiguelFerrePorcel
    @MiguelFerrePorcel ปีที่แล้ว

    Una última cosa, alguien conoce la manera de poder ver la imagen a pantalla completa al pulsar en ella?, no he dado con la solución. Gracias

  • @juandavidorozcoclavijo9186
    @juandavidorozcoclavijo9186 2 ปีที่แล้ว +1

    Hola Fazt excelentes explicaciones. Tengo una duda al final de la explicación del BackEnd. Cuando se desea subir una publicación o post son requeridos los campos title y description y la imagen es opcional. Luego de implementar la parte del cloudinary me pasa que si no envío la imagen ya no me permite crear la publicación. Como se podría solucionar esto gracias.

  • @therrymiranda454
    @therrymiranda454 2 ปีที่แล้ว

    Increíble tu contenido! Eres de los mejores en YT. El cloudinary sirve también para videos?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Si por supuesto, tambien puedes subir videos, audios, hasta pdfs

  • @gabrieltrinidad6397
    @gabrieltrinidad6397 2 ปีที่แล้ว

    Eres el mejor Fazt gracias por todos tus vídeos

  • @sebastianvaldez1986
    @sebastianvaldez1986 2 ปีที่แล้ว

    Excelente contenido fazt, de lo mejor como siempre

  • @helloWorldPlus
    @helloWorldPlus 2 ปีที่แล้ว

    Hola! Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :( cuando en realidad solo tendría que salir el modal sin redireccionar a ningún lado. Me pueden orientar sobre el porque sucede esto? no encuentro diferencia entre mi código con lo hecho en el tutorial.

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Mas adelante lo explico y según recuerdo si lo he añadido. Lo que pasa es que como el botón está dentro de la tarjeta ambos eventos se disparan. Para evitar esto hay una función que puedes añadirle al click del botón delete llamado e.stopPropagation() el cual hace cuando desde click en el button acabe allí y no dispare el evento del elemento padre, en este caso la tarjeta

    • @helloWorldPlus
      @helloWorldPlus 2 ปีที่แล้ว

      @@FaztCode geniaaal. Pensé algo así pero estuve usando el z-index en el botón pero no sirvió. Seguiré viendo el tutorial entonces. Gracias!

  • @helloWorldPlus
    @helloWorldPlus 2 ปีที่แล้ว +1

    Hola! Estoy por iniciar la 3ra hora del tutorial pero tengo este problema de Formik: Warning: An unhandled error was caught from submitForm() TypeError: createPost is not a function . Está relacionado con el handleSubmit y el createPost. Cuando paso como prop createPost desaparece ese Warning pero igual no me funciona.

    • @MrJackferson
      @MrJackferson 2 ปีที่แล้ว +1

      Estás exportando la función desde el postContext?

    • @helloWorldPlus
      @helloWorldPlus 2 ปีที่แล้ว

      ​@@MrJackferson Gracias! ese era mi problema. Ahora estoy en la hora 3:54:00 y tengo el problema de que al darle en Delete no solo sale el modal para eliminar sino que me redirecciona a posts/:id :(

  • @spartan51701
    @spartan51701 2 ปีที่แล้ว

    Buenas una pregunta en la parte subir las imagenes con cloudinary añado la variable image que contiene la url y el id pero cuando se "sube" a mongo db no pone esos datos aunque sí que se sube a cloudbinary

  • @romancebada8577
    @romancebada8577 2 ปีที่แล้ว

    tengo una duda, ya que estoy realizando algo parecido con un crud en mern en el cual ocupo estar almacenando imagenes, pero si es necesario que suba mas de 2 imagenes como puedo realizarlo

  • @helloWorldPlus
    @helloWorldPlus 2 ปีที่แล้ว +1

    Hola!! Ya he logrado desplegar la aplicación pero me queda un par de dudas: 1) En el caso de que a la url le agregue /posts me devuelve un json con todos los posts. Como se evitaría esto? POr ejemplo, yo quiero aplicar esto a una aplicación para registrar ventas pero no sería adecuado que con ponerle algo como /ventas le muestre todas las ventas que hay a cualquier persona; 2) Hay algún video sobre el despliegue de alguna aplicación final osea ya para producción teniendo en cuenta los aspectos de seguridad para evitar que sea vulnerada la aplicación? Yo tengo mi shared hosting en namecheap y quiero desplegar el aplicativo que estoy creando en base a este tutorial allí pero me preocupa que sea fácilmente vulnerado porque seguro hay cosas que no considero al desplegar. Mil gracias por el tutorial! Me sirvió bastante para consolidar mis conocimientos y resolver dudas existenciales que tenía. Ahora me falta poder desplegar la aplicación a un escenario real con dominio propio y evitar que sea fácilmente vulnerada.

  • @cristiancornacchiola4362
    @cristiancornacchiola4362 2 ปีที่แล้ว

    Gracias por tus videos. Se puede decir que la primera parte antes de iniciar con REACT es una API?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Si así es, sería una REST API :)

  • @juanisantillan519
    @juanisantillan519 2 ปีที่แล้ว

    Muchas gracias Fazt por este video, aprendi muchisimo a comprender react y el uso del contexto. Te quiero hacer una consulta, en el momento de crear un post y el usuario no llena los campos, el boton save sigue funcionando, como se podria validar y que el boton se desactive si todavia no se llenaron los campos? Desde ya, mucas gracias.

  • @ownag
    @ownag 2 ปีที่แล้ว

    Fazt, ame tu video y me sirvio de mucho, muchas gracias. Tengo una duda, en caso de que quiera subir multiples imagenes, este metodo, de subirlo a cloudinary, tambien funcionaria?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +2

      Por supuesto, cloudinary como esta especializado en subir solo archivos permite subir cualquier tipo de archivos y varios al mismo tiempo tambien, solo cambiaria el metodo con el que lo subes. solo cambias en lugar de upload.simple() por upload.array()
      y le pasas tus multiples imagenes

  • @urielperez6775
    @urielperez6775 2 ปีที่แล้ว

    hay alguna manera de editar la terminal cuanto se ejecute en c/c++ por visual estudio , un ejemplo serie que en la terminal se ejecute un menu y este te pida que ingreses un numero de 1 al 4 pero esta no me deja ingresar nada (no me permite editar), asi que si te sabes la solucion por favor comunicamela

  • @Gomplayer12
    @Gomplayer12 2 ปีที่แล้ว

    habrá curso de webassembly usando c++? la mayoría de tutoriales que vi eran con C

  • @sashalehedza
    @sashalehedza 2 ปีที่แล้ว

    Hello bro really really good tutorial but is problem with item update, when select another image it works not correct, instead of the obj with new image is inputed empty obj and because of that img not showing

  • @tidyodooy
    @tidyodooy 2 ปีที่แล้ว +1

    Puedo conectar todo eso con angular ?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      El backend tal y como está lo puedes usar con angular sin problemas

    • @tidyodooy
      @tidyodooy 2 ปีที่แล้ว

      @@FaztCode Perfecto! Gracias fazt siempre tan genio

  • @helloWorldPlus
    @helloWorldPlus 2 ปีที่แล้ว

    Holaaaa! Estoy en la hora 4:55:57 (Ya terminando después de una semana de amanecidas jeje) y antes de hacer el build deberíamos borrar el node_modules del client? como para que el build no lo considere? Por que el peso de mi compilado sigue siendo 87.1M y veo que el node_modules sigue en el build a pesar del cambio implementado en package.json. Mil gracias!

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      No recuerdo, pero creo que si mostre como eliminarlo en el video añdiendo el comando 'rm -rf', o simplemente añadelo a tu gitignore y haria un proceso similar.

  • @jesus_84_
    @jesus_84_ 2 ปีที่แล้ว +1

    Maestro de maestros

  • @flavio5693
    @flavio5693 2 ปีที่แล้ว

    Buenos días, por favor en el minuto 1.17.30 tengo este error:
    SyntaxError: Unexpected token - in JSON at position 0
    at JSON.parse ()
    at createStrictSyntaxError (C:\Users\Usuario1\Desktop\carpetas-de-proyectos\carpeta-nodejs-andmore-29-11-22\mern-crud-2
    ode_modules\body-parser\lib\types\json.js:160:10)
    Que puede ser?

    • @flavio5693
      @flavio5693 2 ปีที่แล้ว

      He podido resolver el problema creo, porque ahora me apareció la carpeta upload, creo porque en thunder client tenia marcado Content-type application/json; me podrías explicar el error? si explicaras un poco en 'Headers' en Tunder client cosa hay que marcar y porque me sería util entender. muchas gracias

    • @sparkiedoteth
      @sparkiedoteth 2 ปีที่แล้ว

      Reinicia el servidor :)

    • @flavio5693
      @flavio5693 2 ปีที่แล้ว

      @@sparkiedoteth lo hice varias veces hoy y ayer...

    • @flavio5693
      @flavio5693 2 ปีที่แล้ว

      @@sparkiedoteth no se aquí en youtube como poner un screen shot pero en la consola dice esto:
      bundle.js:229 Uncaught (in promise) AxiosError {message: 'Request failed with status code 431', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 431"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '', status: 431, statusText: 'Request Header Fields Too Large', headers: AxiosHeaders, config: {…}, …}stack: "AxiosError: Request failed with status code 431
      at settle (localhost:3000/static/js/bundle.js:55392:12)
      at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:54103:66)"[[Prototype]]: Error
      getPosts @ bundle.js:229
      y también:
      Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)

    • @flavio5693
      @flavio5693 2 ปีที่แล้ว

      @@sparkiedoteth parece que hay un problema con los 'headers' que le llega demasiada información pero no se como hacer para que le llegue menos o permitir que pueda recibir más, eliminé y he creado otra vez la base de datos y sigue igual

  • @MiguelFerrePorcel
    @MiguelFerrePorcel ปีที่แล้ว

    @Nixlu tiene la solución al problema descrito por en los comentarios más abajo gracias

  • @sdfsfsfd437
    @sdfsfsfd437 2 ปีที่แล้ว

    ¡Qué buenos videos! El mejor.

  • @helloWorldPlus
    @helloWorldPlus 2 ปีที่แล้ว

    Hola! De vuelta por aquí jeje, quería consultarte sobre Eslint, yo le puse Eslint a mi proyecto pero al final tuve que eliminarlo porque no hacía el build por un conflicto con la librería de airbnb. Mi mayor duda es en la cofiguración de Eslint que me dice si va a usar import/export o require, o si va a ejecutar en Browser vs Node... En este caso tengo un Package Json en la raíz del proyecto y otro package json en la carpeta client que está dentro del proyecto. Eslint lo instalé dos veces. En este sentido, no sería redundante tener 2 package json? que me recomendarías hacer? Gracias!!!

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 2 ปีที่แล้ว

    amigo entonces, next () se utilizar para saltar un middleware a otro ? en el caso de uso de return que pasa ?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      estas cerca, next basicamente se utiliza para saltar a la siguiente funcion. Por ejemplo, si tienes esta funcion:
      app.use('/hello', first, second)
      en donde first y second son funciones. si usas next() dentro de la funcion 'first', este continuará con la funcion 'second'; pero si ejecutaste return en la funcion 'first', ya no continuará, acabará allí

    • @SanchayanPackiyanathan
      @SanchayanPackiyanathan 2 ปีที่แล้ว

      @@FaztCode okis muchas gracias!!!!

    • @dadas8366
      @dadas8366 2 ปีที่แล้ว

      @@FaztCode entonces el return sería equivalente a next('route'), según la documentación de expressJS

  • @vinciijac369blaile5
    @vinciijac369blaile5 2 หลายเดือนก่อน

    El thunder client ahora no te deja subir imagenes solo en la version de pagaaa :((

  • @inforux
    @inforux 2 ปีที่แล้ว

    Al momento de declarar Los hooks, considerar que deben empezar (Obligatoriamente) con MAYUSCULAS, en el ejemplo "PostContaniner", yo lo declare como "postContainer" estuve 2 dias con ese bendito error, tuve q leerme la API Hooks. Saludos y espero sirvan el comentario.

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Correcto. De hecho es un componente, por eso sigue las mismas reglas para crear componentes en React. Gracias por comentar tu solución :)

    • @inforux
      @inforux 2 ปีที่แล้ว

      @@FaztCode dr una consulta, y es que no puedo solucionarlo. Como haria para acceder desde el archivo App.js al estado (useState) "posts " que pertenece al archivo postContext.js. Intente importarlo, pero me salta errores del react-router-dom. creo que entra en un ciclo sin fin. Espero puedas ayudarme. Saludos

  • @fernandoandres658
    @fernandoandres658 2 ปีที่แล้ว

    Podrías explicar los fallos de CORS al hacer fetch o con axios?

  • @GOPUBLICIDADEstudioCreativo
    @GOPUBLICIDADEstudioCreativo 2 ปีที่แล้ว

    el backend no esta terminado si sigues el video, caso contrario al backend/files q esta en el Github

  • @sebastiansosa2582
    @sebastiansosa2582 2 ปีที่แล้ว

    Una pregunta querida comunidad !! Alguno tuvo un error en el despliegue , no le deja subir la aplicación , cuando intenta ejecutar el comando build del server !! No encuentra la carpeta del front o algo mal en el path no direcciona bien . Alguna recomendación , la aplicación me anda perfecto en mi máquina jajajajajajaja

  • @cuartajusta
    @cuartajusta ปีที่แล้ว +3

    Si alguien obtiene este error:
    Access to XMLHttpRequest at 'localhost:3000/posts' from origin 'localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:247 GET
    La solucion es la siguiente:
    instalar cors : npm i cors .
    Luego en app.js abajo de const app = express(); escribir lo siguiente:
    (Fijese donde dice el numero delocal host pongan el de ustedes,el de su front.)
    app.use(
    cors({
    origin: "localhost:5173",
    methods: ["GET","POST","PUT","DELETE"]
    })
    );
    con eso el problema queda solucionado.

  • @jeisongarzon6066
    @jeisongarzon6066 2 ปีที่แล้ว

    Oye una pregunta, porque tu no tuviste que instalar CORS para permitir hacer el fetch del frontend al backend ? que hciste que no me di cuenta o que ? gracias

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Añadí un proxy al package.json que hace que sirva la api en el mismo dominio del frontend. Pero si vas a desplegar la aplicación en servicios separados vas a necesitar probablemente el paquete cors

    • @jeisongarzon6066
      @jeisongarzon6066 2 ปีที่แล้ว

      @@FaztCode Con razon es que no me funciono el proxy, por eso tuve que recurrir a esa opcion, pero mirare que estoy haciendo mal. Por cierto, otra cosita, mira que me percate que ya al final del proyecto si actualizas un post sin imagen y le añades alguna, esto no hace nada, no modifica ni el backend ni la ingresa en Cloudinary, podrias sugerirme como corregir este problema ? gracias por tu tiempo.

  • @klaynospina9236
    @klaynospina9236 2 ปีที่แล้ว

    The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. puedes hacer un videos explicando este error ya que no encuentro la solucion

    • @MrJackferson
      @MrJackferson 2 ปีที่แล้ว

      Estas seguro de no tener un error tipográfico?, tu problema debe ser una falta de comillas o algo por el estilo

    • @josbexerra8115
      @josbexerra8115 2 ปีที่แล้ว

      El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos

    • @josbexerra8115
      @josbexerra8115 2 ปีที่แล้ว

      El problema es que el archivo .env lo tiene en la carpeta tiene que estar fuera en la carpteta raiz....y se soluciona tu problemas....saludos de los andes peruanos

  • @matiasricci9570
    @matiasricci9570 ปีที่แล้ว

    puede ser que heroku no sea gratuito para desplegar la app?

    • @FaztCode
      @FaztCode  ปีที่แล้ว

      ya no es gratuito, ahora hay otras alternativas:
      th-cam.com/video/BqLVnocxxF0/w-d-xo.html
      th-cam.com/video/C3NhmT__Mn4/w-d-xo.html

    • @matiasricci9570
      @matiasricci9570 ปีที่แล้ว

      @@FaztCode Gracias bro!! Cuestion que lo segui todo al pie de la letra, repasandolo y haciendolo, de forma local anda perfecto, pero mi unica traba fue hacer el deploy... y no lo puedo lograr, una lastima! seguramente haya que actualizar un poco el codigo...

  • @josecastillo1938
    @josecastillo1938 2 ปีที่แล้ว

    Excelente como siempre, esperamos el curso de TailwindCSS o No?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Tengo uno introductorio que publicaré pronto :)

  • @josephespitiacorrea6702
    @josephespitiacorrea6702 2 ปีที่แล้ว

    A alguien le ha salido el error ""msj": "Cannot read properties of undefined (reading 'image')"?, no he dado para solucionarlo y desaparece si quito la sección de código que se encarga de procesar la imagen

    • @Dj-jose-vi2.0
      @Dj-jose-vi2.0 2 ปีที่แล้ว

      Revise su sintaxis al igual le faltó una simple letra. A mi me a pasado con tempFilePath. Me faltó una simple letra.

    • @josephespitiacorrea6702
      @josephespitiacorrea6702 2 ปีที่แล้ว

      En este caso, se solucionó agregando if (req.files?.image)

    • @Dj-jose-vi2.0
      @Dj-jose-vi2.0 2 ปีที่แล้ว

      @@josephespitiacorrea6702 Lo importante es que funcione. Saludos.

  • @genkoz
    @genkoz 2 ปีที่แล้ว

    Cuando añado un nuevo post si se pinta en el frontend pero cuando edito o elimino no se vuelve a renderizar, tengo que refrescar la página... creo que el problema soy yo xd

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Puede pasar quizas porque no estas actualizando el estado del Context, o si en caso si lo estas actualizando, puede que al actualizar estés actualizando la dirección de la imagen a vacío (" ") otra vez🤔
      Te recomiendo revisar el repo de la descripción

  • @tidyodooy
    @tidyodooy 2 ปีที่แล้ว

    Ya estoy en ese nivel en donde entiendo todo el código pero aún así no podría escribirlo como fazt

  • @GOPUBLICIDADEstudioCreativo
    @GOPUBLICIDADEstudioCreativo 2 ปีที่แล้ว

    tus videos son muy buenos..en un futuro puedes agregar a este mismo proyecto JWT para que cada usuario tenga permisos CRUD ?

  • @lean_tate
    @lean_tate 2 ปีที่แล้ว

    sos el verdadero 1 faztsito

  • @brokeneyes8951
    @brokeneyes8951 ปีที่แล้ว +1

    Si alguien esta utilizando *Vite* y tiene problemas para declarar configurar el proxy solo basta con aplicar esta linea: axios.defaults.baseURL = "localhost:3000"; justo debajo del import de axios

  • @insaneabrokenheroofficial
    @insaneabrokenheroofficial 2 ปีที่แล้ว

    Oye y si quiero actualizar la imagen, requiero volverlo al formato form al server

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +2

      varios lo mencionarón, asi que añadi unas cuantas lineas de código en el repositorio de código que esta en la descripción, de alli te puedes guiar. Basicamente sí, tienes que volver a enviar la imagen y eliminas la anterior la vuelves a subir y el nuevo enlace es el que guardas en tu colección de mongodb

    • @insaneabrokenheroofficial
      @insaneabrokenheroofficial 2 ปีที่แล้ว

      @@FaztCode de hecho hace rato que las vi, pero muchas gracias por responder mi pregunta Lindo

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 2 ปีที่แล้ว

    Amigo, hace un videos cortos sobre los funciones de node por fa, consulta cual es la diferencia entre next() con un return en node?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Hola Amigo, ¿Cuando mencionas las funciones te refieres a los modulos de node, como path, url, http, y esos?
      El next() es un callback de Javascript en realidad, que no es un metodo de Nodejs sino de express, el framework, asi que para entenderlo primero debes saber que es un middleware en express. Por ahora te dejo un video
      th-cam.com/video/794Q71KVw1k/w-d-xo.html
      pero ya estoy planeando renovar ese video esta semana y tambien uno de manejo de errores.
      SI tienes otra duda, dejalo en nuevo comentario para poder verlo en mi feed :)

    • @SanchayanPackiyanathan
      @SanchayanPackiyanathan 2 ปีที่แล้ว

      @@FaztCode como path, url, http, y esos? siii son muchichimos... :)

  • @davidgabrielcayllahuabetal2637
    @davidgabrielcayllahuabetal2637 2 ปีที่แล้ว

    Todo muy perfecto, pero no se puede editar las imágenes, solo crearlas ¿Cómo se podrían? ayuda uu

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Hola David, acabo de actualizar el respositorio y ahora puedes actualizar las imágenes tambien usando el mismo formulario. El proceso de subida es actualizar es con la misma lógica que la subida. Es decir, cuando actualizas subes una nueva imagen, esta se guarda en cloudinary y solo cambias la url y el public_id en la base de datos.
      github.com/FaztWeb/mern-context-crud
      Colocale tus credenciales y pruebalo. Cualquier otra duda, hacerlo en un comentario nuevo que de esa forma me entero. Saludos

    • @davidgabrielcayllahuabetal2637
      @davidgabrielcayllahuabetal2637 2 ปีที่แล้ว

      @@FaztCode Muchas gracias eres un crack, lo único que faltaría es que haga una validación para las imágenes, si funciona al crearla y que sea requerida, pero cuando se quiere editar se cruza solo seria ese pequeño detalle de ahí todo esta perfecto :3, verdad gente si desean que al actualizar también se borre la imagen de cloudinary y ingrese la otra para que de esa manera no les consuma espacio en cloudinary pueden ejecutar este código en los post.controllers.js
      let post = await Post.findById(req.params.id)
      await deleteImage(post.image.public_id);

    • @davidgabrielcayllahuabetal2637
      @davidgabrielcayllahuabetal2637 2 ปีที่แล้ว

      en la funcion export const updatePost = async (req, res) => {let post = await Post.findById(req.params.id)
      await deleteImage(post.image.public_id); } pongalo primero antes de cargar la imagen actualizada

  • @gianfrancoperaltabravo6004
    @gianfrancoperaltabravo6004 2 ปีที่แล้ว

    Genial fazt! gran video, tengo una duda, cuando mando por consola req.files.image.tempFilePath me dice que Property 'tempFilePath' does not exist on type 'UploadedFile | UploadedFile[]'.
    Psdt: Lo estoy haciendo con ts

  • @xander9225
    @xander9225 2 ปีที่แล้ว

    Hola Fazt. ¿qué distro de Linux utilizas en este proyecto?

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Hola Bob. Estoy usando xubuntu

  • @martinruizcl
    @martinruizcl 2 ปีที่แล้ว

    ¿el tuyo actualiza la imagen y la muestra? Me parece que te faltó esa parte. Por demás, me encanta y estimula tu contenido

    • @davidgabrielcayllahuabetal2637
      @davidgabrielcayllahuabetal2637 2 ปีที่แล้ว

      Exacto digo lo mismo, todo muy bien, pero faltaría ese toque que también se pueda editar las imágenes, para evitar problemas de bug, ya que lo hay, cuando se quiere editar la imagen uu

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +2

      Hola Martín, he actualizado el respositorio de código, y ahora tambien permite actualizar desde frontend la imagen. Puedes ver el código en github:
      github.com/FaztWeb/mern-context-crud
      o clonar el repo, colocarle tus credenciales y ver como funciona.

  • @soycristiam
    @soycristiam 2 ปีที่แล้ว

    Que tipo más capo 👏

  • @rauljauregi6615
    @rauljauregi6615 2 ปีที่แล้ว

    Contenido genial, Gracias!!

    • @rauljauregi6615
      @rauljauregi6615 2 ปีที่แล้ว

      Es muy bueno este vídeo, gracias señor Fazt!!

  • @nicolearias5328
    @nicolearias5328 2 ปีที่แล้ว

    para los que se conectaron con Mongo DB Atlas e instalaron mongo db for vsc, a mi solo me conecto poniendo la url que va en dotenv

  • @kevinramon9855
    @kevinramon9855 2 ปีที่แล้ว

    Fazt haciendo un tutorial con linux, eso si que no se ve a menudo

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว +1

      Si creo que en este canal lo voy a usar más en videos, y en el principal al ser más generico solo Windows :)

  • @paoloose
    @paoloose 2 ปีที่แล้ว

    estoy emocionado

  • @serva00c
    @serva00c 2 ปีที่แล้ว

    no me funciono el proxy

    • @FaztCode
      @FaztCode  2 ปีที่แล้ว

      Estás usando webpack o Vite?

    • @serva00c
      @serva00c 2 ปีที่แล้ว

      @@FaztCode Vite

  • @renzogiancarloriosrugel2331
    @renzogiancarloriosrugel2331 2 ปีที่แล้ว

    Grande Fazt 🚀

  • @FrankGP.Systems
    @FrankGP.Systems 2 ปีที่แล้ว

    gracias Fazt

  • @nicolasramirez2258
    @nicolasramirez2258 2 ปีที่แล้ว

    Te quiero.

  • @Holri
    @Holri 2 ปีที่แล้ว

    Master 🫡

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 2 ปีที่แล้ว

    super!!!!