Product Admin App - Frontend
Product Admin App es una aplicación de gestión de productos con una interfaz intuitiva, construida con React, Vite, Tailwind CSS y Axios para interactuar con el backend. Esta aplicación permite realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en productos a través de una API.
Descripción
La aplicación se comunica con una API RESTful desplegada en Render para gestionar un catálogo de productos. Los usuarios pueden agregar nuevos productos, editar los existentes, eliminar productos y visualizar el listado completo.
Tecnologías Utilizadas
- React: Biblioteca de JavaScript para construir interfaces de usuario dinámicas.
- Vite: Herramienta de construcción rápida para aplicaciones modernas en frontend.
- Tailwind CSS: Framework CSS de utilidad para diseños rápidos y responsivos.
- Axios: Cliente HTTP para realizar solicitudes a la API backend.
- React Router: Para la navegación entre páginas.
- Environment Variables: Uso de variables de entorno con Vite para gestionar configuraciones como la URL de la API.
Características
- Interfaz limpia y moderna utilizando Tailwind CSS.
- Operaciones CRUD para gestionar productos.
- Responsividad: diseño completamente adaptado a dispositivos móviles.
- Conexión con API: comunicación con una API RESTful para gestionar productos.
Enlace al Proyecto
Instrucciones de Instalación
- Clona este repositorio:
git clone https://github.com/roxanatera/Frontend-Appproduct.git
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Este repositorio contiene el frontend de la Product Admin App, una aplicación web que permite a los usuarios administrar productos mediante una interfaz sencilla y moderna. El frontend está construido con React, TypeScript, Tailwind CSS, y se comunica con un backend para realizar operaciones CRUD sobre los productos.
11cfbd19096d757f3a0c292c5ac7d3d0ad2a32ea
Descripción
La Product Admin App - Frontend es una aplicación de administración de productos que permite a los usuarios realizar las siguientes operaciones:
- Ver productos: Listar todos los productos disponibles.
- Agregar productos: Crear nuevos productos mediante un formulario sencillo.
- Editar productos: Actualizar los detalles de productos existentes.
- Eliminar productos: Eliminar productos de la base de datos.
Este proyecto se conecta a un backend desarrollado con Node.js y MongoDB para manejar las operaciones CRUD, y usa Axios para hacer las solicitudes HTTP a la API.
Características:
- Interfaz moderna: Desarrollada con React y TypeScript para garantizar un código seguro y escalable.
- Diseño responsivo: Utiliza Tailwind CSS para crear un diseño completamente adaptable a dispositivos móviles.
- Conexión con el backend: Realiza operaciones CRUD a través de una API RESTful.
- Formulario de validación: Asegura que los productos sean creados con los campos requeridos.
- Confirmaciones modales: Utiliza modales para confirmar la eliminación de productos.
Tecnologías Utilizadas
- React: Framework JavaScript para construir la interfaz de usuario.
- TypeScript: Para asegurar un desarrollo robusto y un sistema de tipos que reduce los errores durante el desarrollo.
- Tailwind CSS: Utilizado para un diseño limpio, moderno y completamente responsivo.
- Axios: Para hacer las solicitudes HTTP hacia el backend y realizar las operaciones CRUD.
- React Router: Para manejar la navegación dentro de la aplicación.
- React Hooks: Para gestionar el estado de los productos y las interacciones con la UI.