---

Sabrina

Sabrina is a full-stack application for online clothing shopping. With an intuitive and friendly interface, users can browse and search for their favorite products easily. In addition, they have the option to apply filters for a more specific and efficient search. The application boasts 25 pages, including fundamental ones like Home, ProductsPage with a product catalog, CartPage, and an exclusive Dashboard accessible only to administrators. The Dashboard provides access to various statistics, tables of orders, products, and users, allowing administrators to perform operations such as deletion, update, and creation.

You can click here to see an overview and key features of the app in action.

Features

• Enjoy a seamless and intuitive design that enhances the shopping experience for users of all levels.
• Explore a vast array of products across different categories, ensuring a diverse and satisfying shopping journey.
• Easily find your favorite products using advanced search filters, making the shopping process efficient and enjoyable.
• Experience a hassle-free checkout process with clear and easy-to-follow steps, ensuring a smooth transaction.
• Seamlessly complete transactions with integrated payment methods such as PayPal and MercadoPago, providing users with flexibility and convenience.
• Gain exclusive access to a comprehensive dashboard with detailed statistics, tables, and management tools for orders, products, and users.
• Benefit from a robust user authentication system with token-based security, ensuring the safety of user data.
• Enhance user security with email verification, adding an extra layer of authenticity to the registration process.
• Experience peace of mind with a password recovery feature. Users can easily restore or reset their passwords through a secure email sent by the application, ensuring a smooth recovery process.
• The application uses Cloudinary for cloud storage of product images.
• Enjoy a responsive design that adapts to various devices, providing an optimal experience on desktops, tablets, and mobiles.

Technologies Used

Backend

• Node.js: A runtime environment for executing JavaScript code server-side.
• Express: A web application framework for Node.js, simplifying the creation of robust APIs.
• Express Async Handler: A utility to handle exceptions in asynchronous route handlers.
• MongoDB: A NoSQL database based on a document data model used for storing and retrieving data.
• Mongoose: An ODM (Object Data Modeling) library for MongoDB and Node.js.
• Mongoose Paginate: Pagination support for Mongoose.
• Dotenv: A zero-dependency module for loading environment variables.
• Bcryptjs: A library for hashing passwords.
• JWT: A library for generating and verifying JSON Web Tokens (JWT).
• NodeMailer: A Node.js library for sending emails.
• Cors: Middleware for enabling Cross-Origin Resource Sharing in Express apps.
• Multer: Middleware for handling form/multipart data, used in the application to upload image files.
• Cloudinary: Cloud-based service for managing and delivering images and videos.
• MercadoPago: Integration for handling payments using Mercado Pago.

Frontend

• React: A JavaScript library for building interactive user interfaces.
• TypeScript: A superset of JavaScript that adds static types and other features to the language syntax.
• Sass: A CSS preprocessor that provides additional features and a more readable syntax.
• Axios: A popular library for making HTTP requests.
• ReactQuery: Versatile library that simplifies the management, caching, synchronization, and updating of asynchronous data. It is often regarded as the essential data-fetching solution for web applications, streamlining the process of handling server state with ease.
• ChartJs: JavaScript library that makes it easy to create interactive and visually appealing graphics.
• Redux: A predictable state container for managing the state of a JavaScript application.
• React Router Dom: It is a library for declarative and dynamic navigation in React applications, allowing the management of routes and views efficiently.
• React Toastify: It is a library that facilitates the creation of interactive and customizable notifications for React.
• React Helmet Async: It is a React library that allows you to easily and dynamically manage document header elements (head), such as titles, meta tags and other elements, asynchronously to improve application performance.
• React Infinite Scroll Component: Is a React component that makes it easy to implement infinite scrolling, automatically loading more content as the user gets closer to the end of the page.
• Swiper: Library of touch sliders, designed to create smooth and responsive scrolling experiences in user interfaces.
• Material UI: A popular React UI framework based on Material Design principles.
• PayPal: PayPal's official React integration.

Project Structure

Backend

• src/controllers: Within this directory, you'll find controller files responsible for handling the business logic and operations related to different resources. For example, product.controller.ts, order.controller.ts, and user.controller.ts.
• src/data: Contains data files used in the application, such as sample products and users.
• src/models: This directory holds the models that define the data structures used within the backend. Each model file, such as orderModel.ts, productModel.ts, userModel.ts, and request.ts, outlines the structure and properties of different data entities.
• src/routes: Contains files that define the API routes and their corresponding controllers.
• src/utilities: Contains utilities and helper functions used in the application.

Frontend

• src/assets: Contains static assets such as images and icons used in the application.
• src/components: Contains reusable components used in different parts of the application.
• src/hooks: Contains custom hooks responsible for encapsulating and managing complex logic used across various sections. The hooks are strategically divided into three separate files:

  • userHooks.ts: This file includes custom hooks related to user-related functionalities. It encapsulates logic such as user authentication, sign-up, and any other user-specific operations.

  • productHooks.ts: This file contains hooks related to products-related functionalities. It may involve logic for fetching, creating, updating or deleting product data.

  • orderHooks.ts: This file contains hooks related to order-related functionalities. This may include logic for fetching order history, creating new orders, deleting or updating existing ones.

• src/models: Contains TypeScript interfaces or types used for defining data structures.
• src/pages: Contains all the pages within the application. Each page has its dedicated folder with the same name, which have its corresponding file (.tsx) and potentially additional subdirectories, such as a "components" folder containing components used only in it.
• src/redux: This directory is dedicated to managing the application's states y reducers using Redux.
• src/services: The services directory encapsulates essential service files such as apiClient.ts, which is responsible for interacting with the backend API. You are responsible for configuring Axios to make HTTP requests to the appropriate server (local in development or the server deployed in production). Additionally, it includes an interceptor to attach the user's authorization token to the headers of outgoing requests if the user is authenticated.
• src/styles: Contains Sass style files for each page of the application. Most pages have their own Sass file, except in cases where styles are shared (for example, LoginPage.tsx and RegisterPage.tsx share AuthenticatedPages.scss).
• src/utilities: Contains utilities and helper functions used in the application.

Authors

• Matías Gonta

If you have any questions, concerns or interest, feel free to contact me.

---

---

Sabrina

Sabrina es una aplicación full-stack completa para comprar ropa en línea. Con una interfaz intuitiva y amigable, los usuarios pueden navegar y buscar sus productos favoritos fácilmente. Además, tienen la opción de aplicar filtros para una búsqueda más específica y eficiente. La aplicación cuenta con 25 páginas, que incluyen las fundamentales como Inicio, Productos con un catálogo de productos, Carrito y un exclusivo Panel de Control (Dashboard) accesible solo para administradores. El Panel de Control brinda acceso a diversas estadísticas, tablas de pedidos, productos y usuarios, permitiendo a los administradores realizar operaciones como eliminación, actualización y creación.

Puedes hacer click aquí para ver una visión general y características clave de la aplicación en acción.

Características

• Disfruta de un diseño fluido e intuitivo que mejora la experiencia de compra para los usuarios.
• Explora una extensa gama de productos en distintas categorías.
• Encuentra fácilmente tus productos favoritos utilizando filtros de búsqueda avanzados, haciendo que el proceso de compra sea eficiente y placentero.
• Experimenta un proceso de pago sin complicaciones con pasos claros y fáciles de seguir, garantizando una transacción fluida.
• Completa transacciones de forma fluida con métodos de pago integrados como PayPal y MercadoPago, brindando a los usuarios flexibilidad y comodidad.
• Obtén acceso exclusivo a un panel de control integral con estadísticas detalladas, tablas y herramientas de gestión para pedidos, productos y usuarios.
• Benefíciese de un sólido sistema de autenticación de usuarios con seguridad basada en tokens, garantizando la protección de los datos del usuario.
• Refuerza la seguridad del usuario con la verificación por correo electrónico, añadiendo una capa adicional de autenticidad al proceso de registro.
• Experimenta tranquilidad con la función de recuperación de contraseña. Los usuarios pueden restaurar o restablecer fácilmente sus contraseñas a través de un correo electrónico seguro enviado por la aplicación, garantizando un proceso de recuperación sin problemas.
• La aplicación utiliza Cloudinary para el almacenamiento en la nube de las imágenes de los productos.
• Disfruta de un diseño responsive que se adapta a diferentes dispositivos, brindando una experiencia óptima en computadoras de escritorio, tabletas y dispositivos móviles.

Tecnologías utilizadas

Backend

• Node.js: Un entorno de ejecución para llevar a cabo código JavaScript en el servidor.
• Express: Un framework para Node.js que simplifica la creación de APIs sólidas.
• Express Async Handler: Una utilidad para manejar excepciones en los controladores de rutas asíncronas.
• MongoDB: Una base de datos NoSQL basada en un modelo de datos de documentos utilizada para almacenar y recuperar datos.
• Mongoose: Una biblioteca ODM (Mapeo de Datos de Objetos) para MongoDB y Node.js.
• Mongoose Paginate: Soporte de paginación para Mongoose.
• Dotenv: Un módulo sin dependencias para cargar variables de entorno.
• Bcryptjs: Una biblioteca para cifrar contraseñas.
• JWT: Una biblioteca para generar y verificar Tokens Web JSON (JWT).
• NodeMailer: Una biblioteca de Node.js para enviar correos electrónicos.
• Cors: Middleware para habilitar el intercambio de recursos entre distintos orígenes (CORS) en aplicaciones Express.
• Multer: Middleware para el manejo de datos de form/multipart, utilizado en la aplicación para cargar archivos de imágenes.
• Cloudinary: Servicio basado en la nube para gestionar y distribuir imágenes y videos.
• MercadoPago: Integración para manejar pagos utilizando Mercado Pago.

Frontend

• React: Una biblioteca de JavaScript para crear interfaces de usuario interactivas.
• TypeScript: Un superconjunto de JavaScript que agrega tipos estáticos y otras funciones a la sintaxis del lenguaje.
• Sass: Un preprocesador de CSS que proporciona funciones adicionales y una sintaxis más legible.
• Axios: Una biblioteca popular para realizar solicitudes HTTP.
• ReactQuery: Biblioteca versátil que simplifica la gestión, almacenamiento en caché, sincronización y actualización de datos asíncronos. Solución esencial para la obtención de datos en aplicaciones web, agilizando el proceso de manejo del estado del servidor con facilidad.
• ChartJs: Biblioteca de JavaScript que facilita la creación de gráficos interactivos y visualmente atractivos.
• Redux: Un contenedor de estado predecible para gestionar el estado de una aplicación JavaScript.
• React Router Dom: Es una biblioteca para la navegación declarativa y dinámica en aplicaciones React, que permite gestionar rutas y vistas de manera eficiente.
• React Toastify: Es una biblioteca que facilita la creación de notificaciones interactivas y personalizables para React.
• React Helmet Async: Es una biblioteca de React que te permite gestionar de manera fácil y dinámica los elementos del encabezado del documento (head), como títulos, metaetiquetas y otros elementos, de forma asíncrona para mejorar el rendimiento de la aplicación.
• React Infinite Scroll Component: Es un componente de React que facilita la implementación del desplazamiento infinito, cargando automáticamente más contenido a medida que el usuario se acerca al final de la página.
• Swiper: Biblioteca de deslizadores táctiles, diseñada para crear experiencias de desplazamiento suaves y receptivas en interfaces de usuario.
• Material UI: Un popular framework de interfaz de usuario (UI) para React basado en los principios de Material Design.
• PayPal: Integración oficial de PayPal para React.

Estructura del proyecto

Backend

• src/controllers: Dentro de este directorio, encontrarás los controladores responsables de manejar la lógica empresarial y las operaciones relacionadas con diferentes recursos. Por ejemplo, product.controller.ts, order.controller.ts y user.controller.ts.
• src/data: Contiene archivos de datos utilizados en la aplicación, como productos y usuarios de ejemplo.
• src/models: Este directorio contiene los modelos que definen las estructuras de datos utilizadas dentro del backend. Cada archivo de modelo, como orderModel.ts, productModel.ts, userModel.ts y request.ts, describe la estructura y propiedades de diferentes entidades de datos.
• src/routes: Contiene archivos que definen las rutas de la API y sus controladores correspondientes.
• src/utilities: Contiene utilidades y funciones auxiliares utilizadas en la aplicación.

Frontend

• src/assets: Contiene activos estáticos como imágenes e iconos utilizados en la aplicación.
• src/components: Contiene componentes reutilizables utilizados en diferentes partes de la aplicación.
• src/hooks: Contiene hooks personalizados responsables de encapsular y gestionar lógica compleja utilizada en varias secciones. Los hooks están estratégicamente divididos en tres archivos separados:

  • userHooks.ts: Este archivo incluye hooks personalizados relacionados con funcionalidades relacionadas con el usuario. Encapsula lógica como autenticación de usuario, registro y cualquier otra operación específica del usuario.

  • productHooks.ts: Este archivo contiene hooks relacionados con funcionalidades relacionadas con productos. Puede incluir lógica para recuperar, crear, actualizar o eliminar datos de productos.

  • orderHooks.ts: Este archivo contiene hooks relacionados con funcionalidades relacionadas con pedidos. Esto puede incluir lógica para recuperar el historial de pedidos, crear nuevos pedidos, eliminar o actualizar los existentes.

• src/models: Contiene interfaces o tipos de TypeScript utilizados para definir estructuras de datos.
• src/pages: Contiene todas las páginas dentro de la aplicación. Cada página tiene su carpeta dedicada con el mismo nombre, la cual tiene su archivo correspondiente (.tsx) y posiblemente directorios adicionales, como una carpeta "components" que contiene componentes utilizados solo en esa página.
• src/redux: Este directorio está dedicado a gestionar los estados y reductores de la aplicación mediante Redux.
• src/services: El directorio de servicios encapsula archivos esenciales de servicio, como apiClient.ts, que es responsable de interactuar con la API del backend. Es el se configura Axios para realizar solicitudes HTTP al servidor correspondiente (local durante el desarrollo o el servidor implementado en producción). Además, incluye un interceptor para adjuntar el token de autorización del usuario a los encabezados de las solicitudes salientes si el usuario está autenticado.
• src/styles: Contiene archivos de estilo Sass para cada página de la aplicación. La mayoría de las páginas tienen su propio archivo Sass, excepto en casos donde los estilos son compartidos (por ejemplo, LoginPage.tsx y RegisterPage.tsx comparten AuthenticatedPages.scss).
• src/utilities: Contiene utilidades y funciones auxiliares utilizadas en la aplicación.

Autores

• Matías Gonta

Si tiene alguna pregunta, inquietud o interés, no dude en ponerse en contacto conmigo.