Crear un gestor de snippets con Angular usando MongoDB y Node.js
En este ejercicio construiremos una aplicación simple para guardar snippets de código en la nube usando:
- Angular
- MongoDB Atlas
- Node.js
La aplicación permitirá:
- crear categorías (
html,css,javascript) - asignar un nombre al snippet
- guardar el código en un textarea
- almacenar todo en MongoDB Atlas
1. Crear el proyecto Angular
Se recomienda generar el proyecto con Angular CLI, si no lo tienes ejecuta el siguiente comando:
1
npm install -g @angular/cli
Crear el proyecto:
1
2
ng new angular-code-snippets
cd angular-code-snippets
Durante la creación el asistente preguntará algunas opciones:
1
2
3
4
✔ Which stylesheet system would you like to use? → CSS
✔ Do you want to enable Server-Side Rendering (SSR)? → No
✔ Which AI tools do you want to configure with Angular best
practices? → None
Generar componente:
1
ng generate component snippets
2. Crear el backend con Express
Crear carpeta para el backend e inicializar un package.json:
1
2
3
mkdir backend-express-code-snippets
cd backend-express-code-snippets
npm init -y
Instalar dependencias:
1
npm install express mongoose cors
Crear archivo server.js:
1
touch server.js
3. Conectar con MongoDB Atlas
Crear cuenta en MongoDB Atlas y obtener la URI.
Ejemplo:
1
mongodb+srv://user:password@cluster.mongodb.net/snippets
En server.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const express = require("express")
const mongoose = require("mongoose")
const cors = require("cors")
const app = express()
const PORT = process.env.PORT || 3000
const MONGO_URI = process.env.MONGO_URI || "mongodb+srv://user:password@cluster0.igvcwzf.mongodb.net/?appName=Cluster0"
app.use(cors())
app.use(express.json())
// conexión a MongoDB
mongoose.connect(MONGO_URI)
.then(() => {
console.log("✅ Conectado a MongoDB Atlas")
})
.catch(err => {
console.error("❌ Error conectando a MongoDB:", err)
})
// esquema
const SnippetSchema = new mongoose.Schema({
category: String,
title: String,
code: String
})
const Snippet = mongoose.model("Snippet", SnippetSchema)
// ruta de prueba
app.get("/", (req,res)=>{
res.send("API Snippets funcionando 🚀")
})
// crear snippet
app.post("/snippets", async (req,res)=>{
try {
const snippet = new Snippet(req.body)
await snippet.save()
res.status(201).json(snippet)
} catch(error){
res.status(500).json({
error:"Error guardando snippet"
})
}
})
// listar snippets
app.get("/snippets", async (req,res)=>{
const snippets = await Snippet.find()
res.json(snippets)
})
// iniciar servidor
app.listen(PORT, ()=>{
console.log(`🚀 Servidor corriendo en http://localhost:${PORT}`)
})
Ejecutar:
1
node server.js
Abrimos el navegador en http://localhost:3000:
4. Crear formulario en Angular
En snippets.component.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
<form (submit)="saveSnippet()">
<input [(ngModel)]="snippet.category" name="category" placeholder="Category">
<input [(ngModel)]="snippet.title" name="title" placeholder="Snippet name">
<textarea [(ngModel)]="snippet.code" name="code"></textarea>
<button type="submit">
Guardar
</button>
</form>
5. Enviar datos al backend
Instalar cliente HTTP.
1
ng add @angular/common
En snippets.component.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { HttpClient } from '@angular/common/http'
snippet:any={}
constructor(private http:HttpClient){}
saveSnippet(){
this.http.post(
'http://localhost:3000/snippets',
this.snippet
).subscribe()
}
6. Ejecutar la aplicación
Frontend:
1
ng serve
Backend:
1
node server.js
Ahora puedes abrir:
1
http://localhost:4200
y guardar snippets en MongoDB Atlas.
7. Build para producción
Compilar Angular:
1
ng build --configuration production
Esto generará la carpeta:
1
dist/code-snippets
8. Desplegar backend
Puedes desplegar el backend en servicios como:
- Render
- Railway
- Vercel
Sube el backend y conecta la variable:
1
MONGODB_URI
Resultado
Con este pequeño proyecto construiste:
- un formulario Angular
- un API con Express
- una base de datos en MongoDB Atlas
- un flujo completo de guardado de snippets
Este patrón es la base para construir herramientas más grandes como:
- gestores de snippets
- plataformas tipo gist
- repositorios de código personal.