A modern, full-stack portfolio website built with Next.js 15, featuring a blog system, admin panel, and dual backend architecture with load balancing.
- Hero Section - Animated introduction with modern design
- Education - Academic background and achievements
- Skills - Interactive skill showcase with pagination
- Projects - Portfolio projects with detailed descriptions
- Experience - Professional work history
- Certifications - Professional certifications and achievements
- Contact - Contact information and social links
- Rich Text Editor - TipTap-based markdown editor
- Categories & Tags - Organized content management
- Comments System - User interaction and engagement
- Like & Bookmark - Social features for content
- View Tracking - Analytics and engagement metrics
- Search & Filtering - Advanced content discovery
- Revision History - Content version control
- Reporting System - Content moderation tools
- Authentication - Secure admin login system
- Dashboard - Overview of site statistics
- Content Management - CRUD operations for all content
- User Management - User profiles and permissions
- Analytics - Detailed performance metrics
- Moderation - Report handling and content review
- Dual Backend Architecture - Next.js API + Go backend with load balancing
- Real-time Updates - Live content synchronization
- Responsive Design - Mobile-first approach
- Dark/Light Theme - Theme switching with system preference
- SEO Optimized - Meta tags, structured data, and performance
- Performance Optimized - Image optimization, lazy loading, caching
src/
├── app/ # Next.js App Router
│ ├── admin/ # Admin panel routes
│ ├── api/ # Next.js API routes
│ ├── blog/ # Blog system routes
│ ├── projects/ # Project pages
│ ├── experiences/ # Experience pages
│ └── certifications/ # Certification pages
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (shadcn/ui)
│ ├── admin/ # Admin-specific components
│ ├── blog/ # Blog-specific components
│ └── main/ # Portfolio section components
├── db/ # Database schemas
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── services/ # API service layer
└── util/ # Utility functions
- Next.js API Routes - Blog system, user management, authentication
- Go Backend - Portfolio data (projects, experiences, skills, certifications)
- Load Balancer - Round-robin distribution between backends
- PostgreSQL - Primary database with Drizzle ORM
-- Core Tables
users, sessions, accounts, verifications
blog, comments, likes, bookmarks, views
categories, blog_categories
followers, notifications, reports
user_profiles, blog_revisions- Node.js 18+
- PostgreSQL 13+
- Go 1.21+ (for backend)
- pnpm (recommended) or npm
Create a .env.local file:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/portfolio"
# Backend URLs (Load Balancer)
BACKEND_1="http://localhost:8080"
BACKEND_2="http://localhost:8081"
BACKEND_3="http://localhost:8082"
# Next.js
NEXT_PUBLIC_BASE_URL="http://localhost:3000"
# Authentication
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
# Optional: Analytics
NEXT_PUBLIC_GA_ID="your-ga-id"- Clone the repository
git clone https://github.com/ShardenduMishra22/portfolio-frontend.git
cd portfolio-frontend- Install dependencies
pnpm install- Set up the database
# Run database migrations
pnpm drizzle-kit push
# Generate types (optional)
pnpm drizzle-kit generate- Start the development server
pnpm dev- Access the application
- Frontend: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
- API Documentation: http://localhost:3000/api
The Go backend is available at: https://github.com/ShardenduMishra22/portfolio-backend
Follow the setup instructions in the backend repository to complete the full-stack setup.
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm format # Format code with Prettier
pnpm type-check # Run TypeScript type checking/api/blogs/*- Blog system endpoints/api/users/*- User management/api/proxy/*- Load balancer proxy to Go backend/api/auth/*- Authentication endpoints
- UI Components - Reusable shadcn/ui components
- Admin Components - Admin panel specific components
- Blog Components - Blog system components
- Main Components - Portfolio section components
- API Services - Centralized API calls
- Auth Services - Authentication and authorization
- Backend Services - Go backend integration
# Generate migration
pnpm drizzle-kit generate
# Push schema changes
pnpm drizzle-kit push
# Studio (database GUI)
pnpm drizzle-kit studio- Tailwind CSS 4 - Utility-first CSS framework
- Custom CSS Variables - Theme-aware design tokens
- shadcn/ui - High-quality React components
- Custom Animations - Smooth transitions and micro-interactions
- Light Theme - Clean, professional appearance
- Dark Theme - Modern, eye-friendly design
- System Preference - Automatic theme switching
- Custom Colors - Brand-specific color palette
- Next.js 15 - Latest performance improvements
- Turbopack - Fast development builds
- Image Optimization - Automatic image compression
- Code Splitting - Lazy loading of components
- Caching - Strategic caching strategies
- CDN Ready - Optimized for content delivery
- Vercel Analytics - Performance monitoring
- Speed Insights - Core Web Vitals tracking
- Custom Metrics - Blog engagement analytics
- Better Auth - Modern authentication library
- JWT Tokens - Secure token-based authentication
- Session Management - Secure session handling
- Role-based Access - Admin and user permissions
- Input Validation - Zod schema validation
- SQL Injection Prevention - Parameterized queries
- XSS Protection - Content sanitization
- CSRF Protection - Cross-site request forgery prevention
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod- Set up PostgreSQL database
- Configure environment variables
- Deploy Go backend
- Configure load balancer
- Deploy Next.js frontend
- Environment variables configured
- Database migrations applied
- SSL certificates installed
- CDN configured
- Monitoring set up
- Backup strategy implemented
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use conventional commits
- Write meaningful commit messages
- Add tests for new features
- Update documentation
This project is licensed under the MIT License - see the LICENSE file for details.
Shardendu Mishra
- Email: mishrashardendu22@gmail.com
- GitHub: @ShardenduMishra22
- LinkedIn: Shardendu Mishra
- Portfolio: mishrashardendu22.is-a.dev
- Next.js - React framework
- shadcn/ui - UI components
- Tailwind CSS - CSS framework
- Drizzle ORM - TypeScript ORM
- TipTap - Rich text editor
- Vercel - Deployment platform
If you have any questions or need help:
- Create an issue on GitHub
- Contact via email: mishrashardendu22@gmail.com
- Connect on LinkedIn: Shardendu Mishra
⭐ Star this repository if you found it helpful!