https://github.com/tomascuevas/evlun
Evlun | Clon de twitter creado desde 0 por Tomás Cuevas
https://github.com/tomascuevas/evlun
cloudinary docker express mongodb nextjs nodejs reactquery responsive-design social-media tailwindcss typescript
Last synced: about 2 months ago
JSON representation
Evlun | Clon de twitter creado desde 0 por Tomás Cuevas
- Host: GitHub
- URL: https://github.com/tomascuevas/evlun
- Owner: TomasCuevas
- Created: 2022-08-19T21:03:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-28T11:52:52.000Z (over 1 year ago)
- Last Synced: 2025-08-13T20:54:02.613Z (10 months ago)
- Topics: cloudinary, docker, express, mongodb, nextjs, nodejs, reactquery, responsive-design, social-media, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://evlun.vercel.app
- Size: 466 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Evlun
Una aplicación de red social tipo microblogging construida con un monorepo (cliente y servidor) que permite autenticación, publicación de posts, likes, guardados, seguidores/seguidos y configuración de perfil.
---
## ✨ Características
- Autenticación con JWT (registro, login, verificación, reactivación/desactivación)
- Feed de posts (global, seguidos, respuestas)
- Likes y guardados
- Búsqueda de usuarios y perfiles
- Seguidores/seguidos
- Configuración de cuenta (usuario, email, teléfono, país, género, contraseña, avatar/banner vía Cloudinary)
- Subida de archivos con `express-fileupload`
---
## 🧱 Arquitectura del proyecto
Monorepo con workspaces para cliente (Next.js) y servidor (Node/Express).
```
Evlun/
packages/
client/ # Next.js + React + Tailwind + React Query + Zustand
server/ # Express + TypeScript + Mongoose + JWT + Cloudinary
```
---
## 🛠️ Stack técnico
- Cliente: Next.js 12, React 18, TailwindCSS, React Query, Zustand, Formik, Yup, React Quill, Axios
- Servidor: Node.js, Express, TypeScript, Mongoose (MongoDB), JWT, CORS, express-fileupload, Cloudinary
- Base de datos: MongoDB (Docker)
- Despliegue: Vercel (config para server incluida)
---
## 📦 Requisitos previos
- Node.js 16+
- Yarn (recomendado, los scripts del root usan `yarn --cwd`)
- Docker (para MongoDB local)
---
## 🔐 Variables de entorno
Configura entornos por paquete.
### Servidor (`packages/server/.env`)
```
PORT=4000
MONGODB_URI=mongodb://localhost:27017/evlundb
PRIVATE_SECRET_KEY_JWT=tu_clave_secreta
CLOUDINARY_URL=cloudinary://:@
# Orígenes permitidos separados por espacios
ORIGINS=http://localhost:3000 http://localhost:4000
```
- `PORT`: puerto del servidor (por defecto 4000)
- `MONGODB_URI`: cadena de conexión de MongoDB
- `PRIVATE_SECRET_KEY_JWT`: clave para firmar JWT
- `CLOUDINARY_URL`: credenciales de Cloudinary en formato de conexión
- `ORIGINS`: dominios permitidos por CORS, separados por espacio
### Cliente (`packages/client/.env.local`)
```
NEXT_PUBLIC_API_URI=http://localhost:4000/api
```
- El cliente usa `NEXT_PUBLIC_API_URI` para formar `baseURL` de Axios:
- `/auth`, `/post`, `/settings`, `/user`
---
## 🗄️ Base de datos local (Docker)
El `docker-compose.yaml` se encuentra en `packages/server/`.
```bash
cd packages/server
docker compose up -d
```
MongoDB quedará disponible en `mongodb://localhost:27017` y el proyecto usa la BD `evlundb`.
---
## 🚀 Instalación
Instala dependencias desde la raíz usando Yarn (workspaces):
```bash
yarn install
```
---
## 🧪 Scripts disponibles
Desde la raíz del proyecto:
```bash
# Desarrollar
npm run dev:server # Levanta el API (usa yarn internamente)
npm run dev:client # Levanta el cliente Next.js
# Cliente
npm run build:client # Construye el cliente
npm run start:client # Inicia cliente en modo producción
```
En cada paquete:
- Cliente (`packages/client`): `yarn dev | build | start | lint`
- Servidor (`packages/server`): `yarn dev | build | start`
---
## ▶️ Ejecución en desarrollo
1. Levanta MongoDB con Docker
```bash
cd packages/server
docker compose up -d
```
2. Configura variables de entorno en `packages/server/.env` y `packages/client/.env.local`
3. Arranca servidor y cliente (en dos terminales):
```bash
npm run dev:server
npm run dev:client
```
- API: `http://localhost:4000`
- Web: `http://localhost:3000`
Asegúrate de incluir ambos orígenes en `ORIGINS` del servidor.
---
## 🌐 Endpoints (overview)
Base API: `http://localhost:4000/api`
- Auth (`/auth`)
- POST `/create` – Registro
- POST `/login` – Login
- GET `/check` – Renovación de JWT (requiere header `evluntoken` y middleware `JWTValidation`)
- PUT `/deactivate` – Desactivar usuario (JWT)
- PUT `/reactivate` – Reactivar usuario
- Post (`/post`)
- POST `/create` – Crear post (JWT)
- GET `/id/:id` – Obtener post por id
- GET `/user/:id` – Posts de un usuario
- GET `/answers/:postId` – Respuestas de un post
- GET `/all` – Feed global (JWT)
- GET `/following` – Feed seguidos (JWT)
- GET `/saved` – Guardados (JWT)
- GET `/saved/list` – IDs de posts guardados (JWT)
- PUT `/like/:postId` – Like/Unlike (JWT)
- PUT `/save/:postId` – Guardar/Quitar guardado (JWT)
- PUT `/report/:postId` – Reportar post (JWT)
- PUT `/delete/:postId` – Eliminar (soft delete) (JWT)
- User (`/user`)
- GET `/username/:username` – Datos de usuario
- GET `/search?search=...&skip=...` – Buscar usuarios
- PUT `/follow/:userId` – Seguir (JWT)
- PUT `/unfollow/:userId` – Dejar de seguir (JWT)
- GET `/following/:userId` – Listado de seguidos (JWT)
- GET `/followers/:userId` – Listado de seguidores (JWT)
- Settings (`/settings`)
- PUT `/profile` – Actualizar perfil (JWT)
- PUT `/username` – Cambiar username (JWT)
- PUT `/phone` – Cambiar teléfono (JWT)
- PUT `/email` – Cambiar email (JWT)
- PUT `/country` – Cambiar país (JWT)
- PUT `/gender` – Cambiar género (JWT)
- PUT `/password` – Cambiar contraseña (JWT)
### Autenticación
- Header esperado por el backend: `evluntoken: `
- El cliente inyecta automáticamente este header desde la cookie `evluntoken` usando interceptores de Axios.
- Tiempo de expiración del token: 2h.
---
## 🖼️ Media y uploads
- Se utiliza Cloudinary (SDK v2). Configuración vía `CLOUDINARY_URL`.
- Subidas gestionadas con `express-fileupload`.
---
## 🎨 UI/UX
- TailwindCSS con tokens de color y breakpoint custom (`xs: 500px`).
- Carga diferida e infinite scrolling mediante React Intersection Observer.
- Editor enriquecido con React Quill.
---
## 🧰 Utilidades destacadas del cliente
- Estado global con Zustand (`packages/client/store`)
- React Query para fetching y cache de datos
- Validación de formularios con Formik + Yup
- Helpers de fechas y validaciones (`packages/client/helpers` y `packages/server/src/helpers`)
---
## ☁️ Despliegue
- El servidor incluye `packages/server/vercel.json` para despliegue en Vercel (`@vercel/node`).
- Variables a configurar en el provider: `MONGODB_URI`, `PRIVATE_SECRET_KEY_JWT`, `CLOUDINARY_URL`, `ORIGINS`.
- El cliente (Next.js) puede desplegarse en Vercel, configurando `NEXT_PUBLIC_API_URI` apuntando al dominio del backend.
---
## 📜 Licencia
ISC © Tomas Cuevas