Descripción del proyecto
Una plataforma de blog moderna y personalizable con un potente sistema de gestión de contenidos. Ideal para escritores, desarrolladores y creadores de contenido que buscan una solución profesional y fácil de usar.
Características principales
- •Sistema de gestión de contenidos
- •Editor de texto enriquecido
- •Sistema de comentarios
- •Categorías y etiquetas
- •SEO optimizado
- •Autenticación de usuarios
- •Panel de administración
- •Análisis de tráfico
Stack tecnológico
Frontend
- React 18
- TipTap para el editor
- Tailwind CSS
- React Router
Backend
- Node.js con Express
- PostgreSQL
- Prisma ORM
- JWT para autenticación
Características
- Markdown support
- Imágenes optimizadas
- Búsqueda full-text
- RSS feed
Ejemplos de código
Modelo de Post
// models/Post.js
const postSchema = new Schema({
title: { type: String, required: true },
content: { type: String, required: true },
slug: { type: String, unique: true },
author: { type: Schema.Types.ObjectId, ref: 'User' },
categories: [{ type: Schema.Types.ObjectId, ref: 'Category' }],
tags: [String],
publishedAt: Date,
status: { type: String, enum: ['draft', 'published'] }
});Sistema de Comentarios
// components/Comments.jsx
export function Comments({ postId }) {
const { data: comments, isLoading } = useQuery(
['comments', postId],
() => fetchComments(postId)
);
const { mutate: addComment } = useMutation(
(newComment) => postComment(postId, newComment),
{
onSuccess: () => {
queryClient.invalidateQueries(['comments', postId]);
},
}
);
return (
<div className="space-y-4">
{comments?.map((comment) => (
<CommentCard key={comment.id} comment={comment} />
))}
<CommentForm onSubmit={addComment} />
</div>
);
}Recursos adicionales
Explora el código y la demo para ver el blog en acción:
