/utn-app

🍃 This is my fullstack final work for the FullStack Development degree

Primary LanguageTypeScript

Pancake App

Proyecto de final de cursada Desarrollo Web Full Stack, UTN FRBA.

Desarrollo

Ademas de lo aprendido en la cursada, he hecho investigación por mi cuenta para añadir tecnologías que no se vieron en la cursada, y tener un código más moderno y seguro.

Empecé el proyecto con la idea de hacer un e-commerce, pero en la vista de hacer algo más original, decidí hacer una aplicación de recetas de cocina. La idea es una especie de todo app, donde se puedan ver recetas, subir recetas, y tener un perfil de usuario.

La idea es que esto se pueda extender para convertirse en una red social, asi que parte del desarrollo está pensado para eso.

Tecnologías

MERN - Estrategia de desarrollo

El proyecto está desarrollado teniendo en mente el stack MERN.

  • MongoDB: Base de datos no relacional.
  • Express: Framework de backend en Node.js.
  • React: Biblioteca de JavaScript para construir interfaces de usuario.
  • Node.js: Entorno de ejecución para JavaScript.

Vite-Express - Servidor de desarrollo

Utilizo no solo Vite para el bundling del frontend, sino también para el desarrollo del backend. Vite-Express es un servidor de desarrollo que combina Vite y Express.

TypeScript - Lenguaje de programación

Se utiliza TypeScript para el desarrollo del backend y el frontend. Esto permite tener un código más seguro y predecible, ya que TypeScript es un superconjunto de JavaScript que añade tipado estático.

Zod - Validación

Para la validación de los datos que se reciben en el backend, como las de los formularios, se utiliza la librería Zod

Front-end

Tailwind CSS - Framework de estilos

He estiliado el proyecto utilizando Tailwind CSS, un framework de estilos que me gusta mucho. Permite usar clases de CSS directamente en el HTML, lo que hace el desarollo más rapido

DaisyUI - Componentes de Tailwind CSS

Me gusta esta librería de componentes para Tailwind CSS, ya que tienen un estilo muy bonito y son muy fáciles de usar y personalizar.

Formik - Formularios

Prefiero utilizar Formik antes que React Hook Form, ya que me parece que es más fácil de usar y tiene una mejor documentación, y esta mejor optimizado.

Axios - Cliente HTTP

Para realizar peticiones HTTP desde el frontend, utilizo Axios, es más sencillo de usar que el fetch de JavaScript.

Back-end

Firebase

Se hace uso de Firebase para la subida de imagenes, y se utiliza desde el backend.

MongoDB Atlas - Base de datos

La base de datos se encuentra alojada en MongoDB Atlas, un servicio de base de datos en la nube.

Otras tecnologías

  • Express File Upload - Subida de archivos
  • Mongoose - Modelado de datos
  • JWT - Autenticación
  • Bcrypt - Encriptación de contraseñas
  • Cors - Seguridad