Centro Milele es una aplicación web completa para un centro multidisciplinar de psicología, logopedia y pedagogía terapéutica. El proyecto incluye un sitio web informativo con formulario de contacto y un backend API para la gestión de datos.
Esta aplicación está diseñada para Centro Milele, un centro multidisciplinar ubicado en Málaga que ofrece servicios de:
El proyecto está dividido en dos partes principales que funcionan de manera independiente pero complementaria:
git clone <url-del-repositorio>
cd centro-psicologia
# Abrir Command Prompt como administrador
mongod --version
# El servicio debería iniciarse automáticamente, pero si no:
net start MongoDB
# Conectar a MongoDB
mongosh
# Debería conectarse a: mongodb://localhost:27017
mongodb+srv://...)cd backend
# Instalar dependencias
npm install
# Crear archivo de configuración desde el ejemplo
copy .env.example .env
Editar el archivo .env con tus configuraciones:
# Puerto del servidor (opcional, por defecto 5000)
PORT=5000
# URI de conexión a MongoDB
# Para MongoDB local:
MONGODB_URI=mongodb://localhost:27017/milele
# Para MongoDB Atlas:
# MONGODB_URI=mongodb+srv://usuario:password@cluster.mongodb.net/milele
# API Key de Resend para envío de emails
# Obtener en: https://resend.com/api-keys
RESEND_API_KEY=re_xxxxxxxxxx
# Email donde recibir las notificaciones del formulario
NOTIFICATION_EMAIL=contacto@centromilele.com
.envcd ../frontend
# Instalar dependencias
npm install
La base de datos se crea automáticamente al enviar el primer formulario, pero puedes verificar la conexión:
# Desde la carpeta backend
npm run dev
# Deberías ver en la consola:
# 🔗 Connected to MongoDB (milele database)
# 🚀 Server is running on port 5000
Terminal 1 - Backend:
cd backend
npm run dev
Terminal 2 - Frontend:
cd frontend
npm run dev
# Desde la carpeta raíz, crear un script para ejecutar ambos:
# En package.json del directorio raíz (si existe) o crear uno nuevo
# Ejecutar backend en una terminal:
cd backend && npm run dev
# En otra terminal, ejecutar frontend:
cd frontend && npm run dev
http://localhost:5173/contact# Conectar a MongoDB local
mongosh
use milele
db.contacts.find()
centro-psicologia/
├── README.md # Documentación principal del proyecto
├── frontend/ # Aplicación React (Puerto 5173)
│ ├── src/
│ │ ├── components/ # Componentes reutilizables
│ │ │ ├── ImageCarousel.jsx # Carousel de imágenes
│ │ │ ├── ImageModal.jsx # Modal para visualizar imágenes
│ │ │ └── layout/ # Componentes de layout
│ │ │ ├── Footer.jsx # Pie de página con contacto
│ │ │ └── NavBar.jsx # Barra de navegación
│ │ ├── pages/ # Páginas de la aplicación
│ │ │ ├── Home.jsx # Página principal
│ │ │ ├── About.jsx # Quiénes somos + equipo
│ │ │ ├── Professional.jsx # Perfil individual de profesionales
│ │ │ ├── Spaces.jsx # Galería de instalaciones
│ │ │ └── Contact.jsx # Formulario de contacto
│ │ ├── assets/ # Recursos estáticos
│ │ │ ├── fonts/ # Fuente personalizada Moontime
│ │ │ └── images/ # Imágenes del sitio
│ │ └── lib/ # Utilidades y configuración
│ │ └── api.js # Cliente API para backend
│ ├── public/ # Archivos públicos
│ ├── package.json # Dependencias React
│ ├── vite.config.js # Configuración Vite
│ ├── index.html # HTML base
│ └── README.md # Documentación frontend
└── backend/ # API Node.js (Puerto 5000)
├── src/
│ ├── controllers/ # Lógica de negocio
│ │ └── contact.controller.js # Controlador formulario contacto
│ ├── models/ # Modelos de MongoDB
│ │ └── contact.model.js # Esquema contacto
│ ├── routes/ # Rutas de la API
│ │ └── contact.route.js # Rutas formulario contacto
│ ├── lib/ # Utilidades
│ │ └── email.js # Configuración envío emails
│ └── server.js # Configuración servidor Express
├── .env.example # Plantilla variables entorno
├── package.json # Dependencias Node.js
└── README.md # Documentación backend
npm run dev # Servidor de desarrollo (http://localhost:5173)
npm run build # Build de producción
npm run preview # Preview del build
npm run lint # Linting del código
npm run dev # Servidor con nodemon (http://localhost:5000)
npm start # Servidor de producción
/api/contactEnvía un formulario de contacto
Cuerpo de la petición:
{
"name": "Nombre completo",
"email": "email@ejemplo.com",
"phone": "600123456",
"message": "Mensaje del usuario"
}
Respuesta exitosa (201):
{
"message": "Mensaje enviado correctamente. Nos pondremos en contacto contigo pronto.",
"contact": {
"id": "66f8a1b2c3d4e5f6g7h8i9j0",
"name": "Nombre completo",
"email": "email@ejemplo.com",
"phone": "600123456",
"createdAt": "2024-01-15T10:30:00.000Z"
}
}
/api/contactObtiene todos los formularios de contacto (para uso administrativo)
Respuesta exitosa (200):
{
"contacts": [
{
"_id": "66f8a1b2c3d4e5f6g7h8i9j0",
"name": "Nombre completo",
"email": "email@ejemplo.com",
"phone": "600123456",
"message": "Mensaje del usuario",
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z"
}
]
}
El proyecto utiliza un sistema de diseño personalizado basado en TailwindCSS:
Puede desplegarse en cualquier servicio de hosting estático:
Puede desplegarse en servicios como:
Se recomienda usar un servidor MongoDB o MongoDB Atlas para producción.
Centro Milele
Desarrollado con ❤️ para Centro Milele