A modern, full-featured personal portfolio and blog platform built with Next.js 16. Features a complete content management system, real-time chat, GitHub Discussions integration, and comprehensive analytics.
- Create, edit, and publish blog posts with markdown support
- Tag-based filtering and categorization
- Full-text search functionality
- Like system for blog posts
- Auto-generated table of contents
- Infinite scroll for seamless content loading
- Comment notifications via email
- Portfolio project showcase with images and descriptions
- Tag-based filtering and search
- Like system for projects
- Cloudinary integration for image optimization
- Home - Hero section, featured blogs, projects, and testimonials
- About - Personal bio, tech stack, coding hours, location, and work experience
- Uses - Tools and technologies used
- Side Quests - Personal projects and hobbies
- Bucket List - Goals and aspirations
- Guestbook - GitHub Discussions-powered guestbook with reactions
- Attribution - Credits and acknowledgments
- Legal - Privacy Policy and Terms of Service
- Real-time direct messaging
- Typing indicators
- Online/offline presence status
- Admin chat interface
- Multi-provider OAuth (GitHub & Google) via NextAuth.js v5
- Session management across devices
- User profiles with bio and avatar customization
- Admin role system with protected routes
- User banning capabilities
- Visitor tracking (page views & unique visitors)
- Device analytics (Android, iOS, Windows, macOS, Linux)
- Referral source tracking
- Popular pages analytics
- 30-day visitor trends with charts
- Privacy controls for public/private visibility
- Content Management - Add, edit, delete blogs and projects
- User Management - View, ban/unban users
- Subscriber Management - Newsletter subscribers list
- Chat Management - Admin chat interface
- Statistics Settings - Toggle visibility of analytics sections
- Site Settings - Contact info, about page, work experience configuration
- Built with shadcn/ui component library
- Light/Dark mode with system preference detection
- Theme color picker for customizable accent colors
- Responsive mobile-first design
- Smooth animations powered by Framer Motion
- Click-to-zoom images with blur effect
- Command palette for quick navigation
This application implements role-based access control with secure API responses:
- Admin APIs - Protected endpoints accessible only to authenticated admin users
- User APIs - Authenticated user endpoints with session validation
- Public APIs - Open endpoints with rate limiting and validation
- Role-based middleware - Automatic request filtering based on user roles
- Session verification - All protected routes verify session tokens via NextAuth.js
- Banned user handling - Blocked users are automatically denied API access
| Category | Technologies |
|---|---|
| Framework | Next.js 16, React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS 4, tw-animate-css |
| Database | MongoDB, Mongoose |
| Authentication | NextAuth.js v5 (GitHub, Google OAuth) |
| State Management | React Query (TanStack Query) |
| Forms | React Hook Form, Zod validation |
| UI Components | shadcn/ui, Radix UI, Lucide Icons |
| Charts | Recharts |
| Animations | Framer Motion |
| Image Upload | Cloudinary |
| Nodemailer (SMTP) | |
| Drag & Drop | dnd-kit |
- Node.js 18 or higher
- MongoDB database
- GitHub OAuth App (for authentication)
- Google OAuth credentials (optional)
- Cloudinary account (for image uploads)
- SMTP credentials (for newsletter)
- Firebase account (for admin–user live chat)
-
Clone the repository:
git clone https://github.com/musbabaff/musbabaff.com cd musbabaff.com -
Install dependencies:
npm install
-
Configure environment variables:
cp .env.example .env
-
Update
.envwith your credentials -
Update
src/config/seo.config.tswith your own data before publishing the site. -
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
src/
├── app/ # Next.js App Router
│ ├── (main)/ # Public routes
│ │ ├── about/ # About page
│ │ ├── admin/ # Admin panel
│ │ ├── blogs/ # Blog listing and details
│ │ ├── guestbook/ # Guestbook page
│ │ ├── profile/ # User profile pages
│ │ ├── projects/ # Project showcase
│ │ ├── statistics/ # Analytics dashboard
│ │ └── ...
│ └── api/ # API routes
├── components/ # React components
│ ├── admin/ # Admin-specific components
│ ├── auth/ # Authentication components
│ ├── chat/ # Chat system components
│ ├── content/ # Content display components
│ ├── home/ # Homepage sections
│ ├── layouts/ # Layout components
│ ├── pages/ # Page-level components
│ └── ui/ # Reusable UI components
├── database/ # MongoDB models and services
├── lib/ # Utilities and helpers
└── providers/ # React context providers
Contributions are welcome! Please feel free to open an issue or submit a pull request. All contributions should adhere to the project's code of conduct.
Musbabaff – GitHub Profile
If you find this project valuable, consider becoming a sponsor.
This project is licensed under the MIT License.
If you find this project useful, please consider giving it a star and fork to stay updated with the latest features and improvements!
Built with TypeScript, React, Tailwind CSS, and Next.js 💚 Crafted in Azerbaijan