Overview

This project presents a Developer Portfolio built on a fully dynamic, admin-controlled platform. At its core, it's a Next.js application designed to serve both a high-performance public portfolio and a custom content management system (CMS) dubbed 'Admin OS'. This system empowers developers to manage their projects, skills, experience, and general portfolio content in real-time through an intuitive dashboard, eliminating the need for manual code updates.

The public portfolio leverages Next.js's advanced rendering capabilities (SSR, SSG, ISR) to deliver an incredibly fast, SEO-friendly experience. The Admin OS provides a secure interface where content can be created, updated, and deleted, with all changes instantly reflected on the live portfolio. The backend is powered by tRPC for end-to-end type-safe API communication, Prisma ORM for seamless MongoDB integration, and NextAuth.js for robust authentication.

Technical Architecture

The system adopts a modern full-stack JavaScript architecture, primarily built on the Next.js framework.

All client-server communication for data is highly type-safe thanks to tRPC, providing an unparalleled developer experience and significantly reducing runtime errors.

Folder Structure

The project follows a well-organized folder structure typical for Next.js applications, with specific additions for tRPC, Prisma, and components:

.env
.gitignore
README.md
package.json
tsconfig.json
next.config.js

├── public/                # Static assets (images, favicon)
├── src/
│   ├── app/               # Next.js App Router root
│   │   ├── (admin)/         # Admin OS routes (e.g., /admin/dashboard)
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── (portfolio)/     # Public portfolio routes (e.g., /projects/[slug])
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── api/             # Next.js API routes (e.g., /api/trpc/[trpc])
│   │   │   └── trpc/
│   │   │       └── [[...trpc]].ts
│   │   ├── layout.tsx     # Root layout
│   │   └── page.tsx       # Homepage
│   │
│   ├── components/        # Reusable React components
│   │   ├── ui/            # UI primitives (buttons, inputs, etc.)
│   │   ├── admin/         # Admin-specific components (e.g., ProjectForm)
│   │   └── portfolio/     # Portfolio-specific components (e.g., ProjectCard)
│   │
│   ├── lib/               # Utility functions, constants, client-side tRPC setup
│   │   ├── auth.ts        # NextAuth.js configuration
│   │   ├── db.ts          # Prisma client initialization
│   │   ├── trpc.ts        # tRPC client setup
│   │   └── utils.ts       # General utilities
│   │
│   ├── server/            # Backend-specific code, tRPC routers
│   │   ├── trpc/          # tRPC server setup and routers
│   │   │   ├── context.ts
│   │   │   ├── index.ts     # Root tRPC router
│   │   │   └── routers/     # Individual API routers (e.g., project.ts, skill.ts)
│   │   └── auth.ts        # Backend authentication logic
│   │
│   ├── styles/            # Global styles and Tailwind CSS config
│   │   └── globals.css
│   │
│   └── types/             # Shared TypeScript types and interfaces
│
└── prisma/                # Prisma schema and migrations
    └── schema.prisma

Setup & Installation

To get this project up and running locally, follow these steps:

1. Clone the repository:

    git clone https://github.com/jsmith-dev/portfolio-admin-os.git
    cd portfolio-admin-os

2. Install dependencies:

    npm install
    # or yarn install
    # or pnpm install

3. Configure Environment Variables:

Create a .env file in the root directory and add the following variables:

    DATABASE_URL="mongodb+srv://<username>:<password>@<cluster-url>/<database-name>?retryWrites=true&w=majority"
    NEXTAUTH_SECRET="YOUR_RANDOM_SECRET_STRING"
    NEXTAUTH_URL="http://localhost:3000"
    # Optional: For admin login via credentials
    ADMIN_EMAIL="admin@example.com"
    ADMIN_PASSWORD="your_secure_password"

4. Generate Prisma Client & Push Schema:

This connects to your database and generates the Prisma client based on your prisma/schema.prisma.

    npx prisma db push
    npx prisma generate

5. Run the development server:

    npm run dev
    # or yarn dev
    # or pnpm dev

Open your browser to http://localhost:3000 for the public portfolio. Navigate to http://localhost:3000/admin to access the Admin OS login page.

Key Modules