Lab68Dev Studio: Developer Portfolio and Resource Hub

Lab68Dev Studio is a full-stack web application designed as a comprehensive portfolio and knowledge management system for software developers. Built with the latest web technologies, it serves as a central hub for sharing project showcases, technical resources, and developer documentation.

The platform is engineered for performance, scalability, and ease of maintenance, utilizing server-side rendering and a modern database architecture to deliver a seamless user experience.

Technology Stack

This project leverages a cutting-edge stack focused on speed, type safety, and modern development practices:

• Framework: Next.js 16.5.1 (App Router)
• Library: React 19
• Styling: Tailwind CSS v4
• Database: PostgreSQL (via Neon Database)
• ORM: Prisma 6
• Authentication: Custom Secure Session (Jose/JWT)
• Deployment: Vercel

Key Features

1. Dynamic Resource Hub

A centralized repository for coding resources, tutorials, and documentation.

• Categorized content management (JavaScript, Python, DevOps, etc.).
• Advanced tagging system with automatic relationship management.
• Manual tag entry for rapid content creation.

2. Admin Dashboard

A secure, restricted area for content administration.

• Protected by robust middleware-based authentication.
• Password-only access control for streamlined single-user management.
• Full Create, Read, Update, Delete (CRUD) capabilities for resources.

3. AI-Assisted Workflows

Integrated workflow for AI discussions.

• Context-aware prompt generation for external AI tools.
• "Discuss" feature that formats resource content for deep-dive analysis.

4. Modern Architecture

• Server Actions: Direct database mutations without API routes.
• Server Components: Optimized data fetching and rendering.
• Responsive Design: Mobile-first architecture ensuring compatibility across all devices from mobile phones to large desktop screens.

Installation and Setup

Follow these steps to deploy the application locally.

Prerequisites

• Node.js 18.18 or higher
• npm or pnpm package manager

1. Clone the Repository

git clone https://github.com/DongDuong2001/syntax-resource-hub.git
cd syntax-resource-hub

2. Install Dependencies

npm install
# or
pnpm install

3. Configure Environment Variables

Create a .env file in the root directory with the following keys:

DATABASE_URL="postgres://user:password@host/neondb"
ADMIN_PASSWORD="your-secure-password"
ADMIN_SECRET_KEY="your-random-secret-key"

4. Database Setup

Initialize the database schema and seed initial data.

npx prisma db push
npx tsx prisma/seed.ts

5. Run Development Server

npm run dev

The application will be available at http://localhost:3000.

Deployment

This project is optimized for deployment on Vercel.

1. Connect your GitHub repository to Vercel.
2. Add the environment variables in the Vercel Project Settings.
3. Deploy.

Note: The project includes an .npmrc file configuration to handle peer dependencies for React 19 automatically.

Contact

maintained by DongDuong2001.