DevLoom

A modern publishing platform designed for developers to write, share, and discover technical knowledge with a rich, distraction-free writing experience.

TypePublishing Platform

RoleFull Stack Developer

Timeline2024

StatusCompleted

Next.js 15React 19TiptapTanStack QueryZodPrisma ORMPostgreSQLNextAuth

View Live Demo View Code

Project Overview

DevLoom is a comprehensive publishing platform specifically designed for developers. Built with Next.js 15 and React 19, it features a distraction-free Tiptap rich text editor, robust data validation, and an interactive admin dashboard. The platform handles complex nested relations with Prisma and implements robust SEO optimizations including dynamic sitemaps and JSON-LD structured data.

Target Audience

Developers, technical writers, and software engineering teams looking for a dedicated space to share knowledge, tutorials, and insights.

Business Goal

To master the modern Next.js ecosystem by building an end-to-end application, solving real-world challenges like server component optimization, complex database relations, and responsive UI design.

Key Features

✍️

Rich Text Editor

Distraction-free writing experience powered by Tiptap with support for code blocks, formatting, and media integration.

🛡️

Secure Authentication

Role-based access control (Admin/User) implemented via NextAuth for secure account management.

📊

Admin Dashboard

Interactive analytics dashboard using Recharts to track post engagement, views, and overall platform metrics.

🖼️

Media Management

Seamless image upload and optimization pipeline using Cloudinary integration.

🔍

SEO Optimization

Advanced Next.js SEO capabilities including dynamic sitemaps, JSON-LD Article schema, and web manifest.

💾

Robust Database Architecture

Efficient data management using Prisma ORM with PostgreSQL, handling complex nested relations seamlessly.

⚡

Optimized Performance

Efficient data fetching and state management utilizing TanStack Query and Zod for type-safe validation.

Technology Stack

Frontend

Next.js 15 (App Router)React 19Tiptap (Rich Text Editor)Recharts (Data Visualization)

Backend

Next.js API RoutesNextAuth (Authentication)Prisma ORM

Database

PostgreSQL

Apis

Cloudinary API

Tools

TanStack QueryZod (Validation)Dynamic SitemapsJSON-LD Schema