📘 AAC – Aprende Ahora y Crece

Plataforma web de educación financiera para estudiantes preuniversitarios.

AAC es una solución integral diseñada para jóvenes de 15 a 18 años, que combina una experiencia de aprendizaje interactiva con un potente panel administrativo para el seguimiento de métricas en tiempo real.

---

🌐 Enlaces del Proyecto

(https://aac-web-self.vercel.app)

---

✨ Características Principales

🎓 Módulo de Aprendizaje

• Contenido Curado: 3 módulos educativos especializados en finanzas personales.
• Tracking Automático: Registro de interacción mediante popups y eventos almacenados en MongoDB cada vez que un usuario accede.

📊 Panel Administrativo (Dashboard)

• Autenticación Segura: Acceso protegido mediante JWT (JSON Web Tokens).
• Analíticas Avanzadas: * Conteo de personas únicas por día, semana y mes.
  • Gráficos dinámicos de barras para visualizar el interés por módulo.
  • Resumen de actividad total y gestión de mensajes de contacto (CRUD).

🎨 Experiencia de Usuario

• Landing Page Moderna: Diseño responsivo y minimalista desarrollado con CSS Modules.
• Formularios Funcionales: Sección de contacto totalmente integrada con el backend y validaciones.

---

🛠️ Stack Tecnológico

[Image of MERN stack architecture diagram]

Frontend:

• React + Vite (Entorno de desarrollo ultra rápido).
• React Router (Gestión de rutas de la SPA).
• CSS Modules (Estilos modulares y aislados).

Backend:

• Node.js & Express (API REST robusta).
• Mongoose (Modelado de datos para MongoDB).
• JWT (Seguridad y manejo de sesiones).
• MongoDB $dateTrunc (Agregaciones avanzadas para analíticas temporales precisas).

Infraestructura:

• Vercel: Hosting del Frontend.
• Render: Hosting del Backend.
• MongoDB Atlas: Base de datos NoSQL en la nube.

---

📁 Estructura del Proyecto

aac-web/
│── aac-front/           # Aplicación React (Frontend)
│   ├── src/
│   │   ├── components/  # Componentes reutilizables (UI)
│   │   ├── pages/       # Vistas: Home, Aprender, Admin Dashboard
│   │   ├── assets/      # Recursos estáticos
│   │   └── App.jsx      # Configuración de rutas y estados
│
│── aac-back/            # Servidor Node.js (Backend)
│   ├── src/
│   │   ├── controllers/ # Lógica de los endpoints
│   │   ├── middlewares/ # Validación de token y seguridad
│   │   ├── models/      # Esquemas de datos (Contacts, Analytics)
│   │   ├── routes/      # Definición de rutas de la API
│   │   └── server.js    # Punto de entrada del servidor
└── README.md

👨‍💻 Autor
Victor Callahui Cusipaucar Proyecto académico – Universidad de Lima