Tienda Virtual.

Tienda Virtual

Descripción del Proyecto

El objetivo es construir una tienda virtual básica utilizando Django para el backend, React con Vite y TailwindCSS para el frontend, y PostgreSQL como base de datos. Se empleará Docker para un entorno de desarrollo consistente, con contenedores separados para el backend y base de datos. El sistema incluirá funcionalidades básicas para gestión de usuarios, productos y pedidos.

Objetivo General

Crear una tienda virtual funcional y accesible, enfocada en simplicidad y rendimiento, con un diseño modular y tecnología moderna.

Funcionalidades Principales

  1. Usuarios:

    • Registro e inicio de sesión.
    • Gestión de perfiles.

  2. Productos:

    • CRUD de productos con imágenes.

  3. Carrito y Pedidos:

    • Agregar productos al carrito.
    • Crear y gestionar pedidos.

  4. Pagos:

    • Integración básica con PayPal Sandbox para validación de pagos.

  5. Frontend:

    • Diseño responsivo y accesible con TailwindCSS.

  6. Infraestructura:

    • Configuración con Docker Compose para desarrollo local.

Fases del Proyecto

Fase 1: Configuración Inicial

  1. Crear estructura del proyecto:

    • Backend: Django con Django REST Framework.
    • Frontend: React con Vite y TailwindCSS.

  2. Configurar un archivo docker-compose.yml para el backend y base de datos.

  3. Crear archivo .env con variables esenciales:

    • Backend: DATABASE_URL, SECRET_KEY.
    • Frontend: URL del backend.

Fase 2: Desarrollo del Backend

  1. Modelos:

    • User: Roles (cliente y administrador).
    • Product: Nombre, precio, inventario, imágenes.
    • Order: Asociado a usuarios y productos.

  2. Endpoints:

    • Usuarios: Registro, login, perfil.
    • Productos: CRUD.
    • Pedidos: Crear y listar.

  3. Autenticación:

    • Implementar autenticación con JWT.

Fase 3: Desarrollo del Frontend

  1. Configurar React con Vite y TailwindCSS.

  2. Crear componentes básicos:

    • Navbar, ProductList, ProductDetails, Cart, CheckoutForm.

  3. Implementar rutas principales con React Router:

    • Home: Lista de productos.
    • Product Details: Detalles de un producto.
    • Cart: Resumen del carrito.
    • Checkout: Confirmación de pedido.

  4. Consumir APIs del backend con Axios.

Fase 4: Integración de Pagos

  1. Configurar PayPal Sandbox en el backend.

  2. Implementar lógica básica en el frontend para manejar pagos.

Fase 5: Pruebas

  1. Pruebas unitarias en backend (modelos y vistas).

  2. Pruebas de integración básica:

    • Flujo completo (registro → carrito → pedido).

Fase 6: Despliegue

  1. Configurar despliegue en:

    • Backend: Railway.
    • Frontend: Vercel.

  2. Validar funcionalidad en producción.

Resultado Esperado

Una tienda virtual básica funcional, lista para ser extendida en el futuro con más características como métodos de pago adicionales, monitoreo y accesibilidad avanzada.