A modern, full-stack personal portfolio website built with the T3 Stack and enhanced with comprehensive gallery management. This site serves as both a showcase of my work and a playground for experimenting with cutting-edge web technologies.
- Modern Design System - Custom UI components with dark/light theme support
- Gallery Management - Full-featured image gallery with upload, preview, and admin controls
- Authentication System - Secure auth with role-based access control
- File Storage - Appwrite integration for scalable image storage
- Database Management - Type-safe database operations with Drizzle ORM
- Admin Dashboard - Protected admin routes for content management
- Responsive Layout - Mobile-first design with desktop optimizations
- Smooth Animations - Framer Motion powered interactions and transitions
- Optimized Performance - Next.js 15 with App Router and Turbo for lightning-fast loading
- Type Safety - End-to-end TypeScript for robust development
- Accessible - Built with accessibility best practices in mind
- Framework: Next.js 15 with App Router & Turbo
- Styling: Tailwind CSS v4 + Custom Design System
- UI Components: shadcn/ui + Radix UI primitives
- Animations: Motion (Framer Motion successor)
- State Management: TanStack Query + Jotai
- Forms: TanStack Form
- Tables: TanStack Table for data grids
- Typography: Geist Sans & Mono
- Icons: Lucide React + Developer Icons
- API: tRPC for type-safe APIs
- Database: PostgreSQL with Drizzle ORM
- Authentication: Better Auth with GitHub OAuth
- File Storage: Appwrite for image management
- Validation: Zod for runtime type validation
- Package Manager: Bun
- Linting: Biome for fast linting and formatting
- Type Checking: TypeScript
- Database Tools: Drizzle Kit for migrations
- Deployment: Vercel with Speed Insights
src/
├── app/ # App Router pages and API routes
│ ├── (admin)/ # Protected admin routes
│ ├── (auth)/ # Authentication pages
│ ├── (root)/ # Public pages
│ └── api/ # API endpoints
├── components/
│ ├── features/ # Feature-specific components
│ │ ├── auth/ # Authentication components
│ │ ├── gallery/ # Gallery management
│ │ └── navigation/ # Navigation components
│ ├── forms/ # Form components and utilities
│ ├── layout/ # Layout components
│ ├── pages/ # Page-specific components
│ ├── shared/ # Shared/common components
│ └── ui/ # Reusable UI primitives
├── data/ # Static data and content
├── hooks/ # Custom React hooks
├── lib/ # Utilities and configurations
├── server/ # Server-side code
│ ├── api/ # tRPC routers
│ ├── auth/ # Authentication config
│ └── db/ # Database schemas and utilities
├── styles/ # Global styles and CSS
├── trpc/ # tRPC client configuration
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
This website is intentionally over-engineered to serve as:
- A testing ground for new technologies and patterns
- A showcase of modern web development practices
- A demonstration of attention to detail and craft
- A full-stack application with real-world features
- Node.js 18+ or Bun (recommended)
- PostgreSQL database
- Appwrite account for file storage
- GitHub OAuth app for authentication
-
Clone the repository
git clone https://github.com/imljs/web.git cd web -
Install dependencies
bun install
-
Set up environment variables
cp .env.example .env.local
-
Set up the database
bun run db:push
-
Start the development server
bun dev
-
Open your browser Navigate to http://localhost:3000
bun dev- Start development server with Turbobun build- Build for productionbun start- Start production serverbun run preview- Build and preview production locallybun run check- Run Biome linter and formatterbun run check:write- Fix linting issues automaticallybun run check:unsafe- Fix with unsafe transformationsbun run typecheck- Run TypeScript compilerbun run db:generate- Generate database migrationsbun run db:migrate- Run database migrationsbun run db:push- Push database schema changesbun run db:studio- Open Drizzle Studio
- File Upload - Multi-file upload with drag-and-drop support via React Dropzone
- Image Processing - Automatic dimension detection and optimization
- Admin Controls - Protected routes for gallery management
- Data Tables - Advanced sortable and filterable tables with TanStack Table
- File Downloads - Direct download functionality with Appwrite integration
- Lazy Loading - Optimized image loading with intersection observer
- Role-based Access - Admin and user role separation
- Protected Routes - Server-side route protection
- Session Management - Persistent login sessions
- Type-safe Queries - End-to-end type safety with tRPC and Drizzle ORM
- Schema Management - Version-controlled database schemas with Drizzle Kit
- Data Validation - Runtime validation with Zod schemas
- Database Studio - Visual database management with Drizzle Studio
The design system is built with CSS custom properties and Tailwind CSS:
- Colors: Update the theme in
src/styles/theme.css - Typography: Modify font configurations in layout components
- Components: Extend the shadcn/ui component library
- Animations: Adjust Framer Motion configurations
- Database: Modify schemas in
src/server/db/schema/
- Chrome/Chromium (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is optimized for deployment on Vercel:
-
Prepare for deployment
bun run build
-
Deploy to Vercel
- Push your code to GitHub
- Connect your repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy automatically on every push to main
-
Environment Variables on Vercel Add all the environment variables from your
.env.localto your Vercel project settings.
For other platforms, follow the Next.js deployment documentation.
- T3 Stack for the excellent full-stack template
- shadcn/ui for the beautiful component library
- Vercel for seamless deployment
- The open-source community for incredible tools and libraries
Built with ❤️, too much caffeine, and probably over-engineered for fun.