🎨 Neverland Studio Portfolio

Enterprise-Grade Full-Stack Portfolio Platform

Built with React 19, TypeScript, Express, OAuth, 2FA, Real-Time Monitoring & AI Chatbot

🚀 Live Demo • 📖 Documentation • 🐞 Report Bug • 💡 Request Feature

---

📑 Table of Contents

• Overview
• Screenshots
• Key Features
• Tech Stack
• Quick Start
• Development
• Docker Deployment
• Environment Variables
• Contributing
• License
• Contact

---

🎯 Overview

Neverland Studio is a production-ready, full-stack portfolio platform built with cutting-edge technologies. It features a modern React 19 frontend with TypeScript, a robust Express backend with MySQL, complete authentication system with OAuth and 2FA, user dashboard, real-time monitoring, and an AI-powered chatbot assistant.

✨ Why Neverland Studio?

• ✅ Production Ready - Enterprise-grade architecture with best practices
• ✅ Type Safe - Full TypeScript implementation for both frontend and backend
• ✅ Secure - JWT authentication, OAuth 2.0, 2FA, reCAPTCHA, rate limiting
• Real-Time Monitoring - Netdata integration for live server metrics
• ✅ Modern Stack - React 19, Vite, Express, Sequelize ORM
• ✅ Docker Ready - Multi-stage builds and docker-compose configuration
• ✅ Premium UI/UX - Responsive design with smooth animations

---

📸 Screenshots

🌐 Live Preview

Full-featured portfolio platform with modern design, responsive layout, and comprehensive features

Platform Features Showcased:

• 🎨 Modern landing page with smooth animations
• 🔐 Advanced authentication with OAuth & 2FA
• 📊 Real-time monitoring dashboard with Netdata integration
• 👤 Comprehensive user profile management
• ⚡ High-performance responsive design
• 🌙 Dark mode optimized interface

---

✨ Key Features

📊 Admin Dashboard Suite

Powerful Command Center: A fully integrated dashboard for complete platform management.

• 📈 Advanced Analytics - Real-time performance metrics and data visualization
• 📥 Unified Inbox System
  • Reviews: Manage client testimonials and feedback
  • Applicants: Streamlined recruitment pipeline
  • Collaborations: Partnership request management
• 💼 Project Management - Full CRUD capabilities for Portfolios
• 📅 Smart Calendar - Integrated scheduling and event tracking
• ✅ Task Manager - Built-in todo and progress tracking
• 👥 Client CRM - Manage client relationships and details
• 🖼️ Media Library - Centralized digital asset management

🔐 Authentication & Security

• Multiple Login Methods

  • Email/Password with JWT authentication
  • Google OAuth 2.0 integration
  • GitHub OAuth integration

• Two-Factor Authentication (2FA)

  • Time-based OTP (TOTP) with authenticator apps
  • QR code generation for easy setup
  • Backup codes for account recovery
  • Persistent 2FA status across sessions

• Advanced Security Features

  • Google reCAPTCHA v3 protection
  • bcrypt password hashing (10 rounds)
  • Rate limiting on authentication endpoints
  • Real-time session management with device tracking
  • Active sessions monitoring and remote termination
  • Session tracking with browser, device, and location info
  • XSS protection with xss-clean middleware
  • CSRF protection
  • Helmet.js security headers

👤 User Dashboard

• Profile Management

  • Update name, email, avatar
  • Username changes with monthly limit (3 changes/month)
  • Monthly username change reset system
  • Custom bio and social links
  • Profile picture upload

• Account Settings

  • Security settings (2FA toggle, password change)
  • API key generation and management
  • Appearance customization (theme preferences)
  • Notification preferences and email settings

• Session Management

  • View all active sessions with device details
  • Browser and operating system information
  • IP address and location tracking
  • Last activity timestamp
  • Remote session termination capability

• Activity & Analytics

  • Comprehensive account activity log
  • Real-time statistics dashboard
  • Usage insights and metrics
  • Login history tracking

📊 Real-Time Server Monitoring

Powered by Netdata Integration

• Live Metrics Dashboard

  • Real-time CPU usage with history graphs
  • Memory utilization tracking
  • Disk I/O statistics
  • Network traffic monitoring (in/out)
  • System load average

• Performance Monitoring

  • Response time tracking
  • Request throughput
  • Error rate monitoring
  • Database query performance

• Features:

  • ✅ Backend proxy for CORS-free API calls
  • ✅ Secure token management on server-side
  • ✅ Authentication required for metrics access
  • ✅ Graceful error handling with fallback data
  • ✅ Production-ready with environment configuration

🤖 WhatsApp Bot Integration

• AI-Powered WhatsApp Bot - Automated assistance via WhatsApp
• Bot Commands
  • /menu - Display available commands
  • Downloader features (video/audio from various platforms)
  • Owner commands for bot management
  • Group chat and DM support
• Modern Bot UI - Clean, elegant interface with Unicode symbols

🌐 Additional Features

• Contact Forms - reCAPTCHA v3 protected contact and consultation forms
• Toast Notifications - Real-time feedback system with color-coded alerts
• Responsive Design - Mobile-first approach, optimized for all screen sizes
• Modal System - Beautiful modals for auth, video player, dashboard, confirmations
• Socket.IO Integration - Real-time features and live updates
• Form Validation - Client-side and server-side validation with Zod
• Error Handling - Comprehensive error boundaries and user-friendly messages

---

🛠️ Tech Stack

Frontend

Technology	Version	Purpose
React	19.1.1	UI library
TypeScript	5.9	Type-safe JavaScript
Vite	7.1.14	Fast build tool with HMR
Tailwind CSS	3.3	Utility-first CSS framework
Framer Motion	12.23	Animation library
React Router DOM	7.9	Client-side routing
Axios	1.13	HTTP client
Recharts	3.4	Charts and data visualization
Lucide React	0.552	Modern icon library

Backend

Technology	Version	Purpose
Node.js	≥18.0.0	JavaScript runtime
Express	4.21	Web framework
Sequelize	6.37	ORM for SQL databases
MySQL2 / MariaDB	3.15	Database drivers
Passport.js	0.7	Authentication middleware
JWT	9.0	Token-based authentication
bcryptjs	2.4	Password hashing
Helmet	8.0	Security middleware
Express Rate Limit	7.4	Rate limiting
Winston	3.17	Logging
express-validator	7.0	Request validation
Axios	1.7	HTTP client (Netdata proxy)

DevOps

• Docker - Containerization with multi-stage builds
• Nginx - Production web server and reverse proxy
• Docker Compose - Multi-container orchestration
• Netdata - Real-time system monitoring

---

🚀 Quick Start

Prerequisites

Ensure you have the following installed:

Node.js >= 18.x    # Check: node --version
npm >= 9.x         # Check: npm --version
MySQL/MariaDB      # For backend database
Docker (optional)  # For containerized deployment

Installation

# 1. Clone the repository
git clone https://github.com/MuhammadIsakiPrananda/neverland-studio-portfolio.git
cd neverland-studio-portfolio

# 2. Install frontend dependencies
npm install

# 3. Install backend dependencies
cd neverland-backend
npm install
cd ..

# 4. Configure environment variables (see below)
cp .env.example .env
cp neverland-backend/.env.example neverland-backend/.env
# Edit both .env files with your configuration

# 5. Setup database (from neverland-backend directory)
cd neverland-backend
npm run db:migrate
npm run db:seed  # Optional: seed with sample data
cd ..

# 6. Start development servers
# Terminal 1 - Frontend
npm run dev

# Terminal 2 - Backend
cd neverland-backend
npm run dev

Your application will be running at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

---

💻 Development

Available Scripts

Frontend

Command	Description
npm run dev	Start dev server with HMR
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run test	Run tests with Vitest

Backend

Command	Description
npm run dev	Start dev server with nodemon
npm run start	Start production server
npm run db:migrate	Run database migrations
npm run db:migrate:undo	Rollback last migration
npm run db:seed	Seed database
npm run db:reset	Reset database completely
npm run lint	Run ESLint

Development Workflow

1. Frontend Development - Changes are reflected instantly with Hot Module Replacement (HMR)
2. Backend Development - Server auto-restarts on file changes with nodemon
3. Database Changes - Create migrations for schema changes
4. Type Safety - TypeScript will catch errors during development

---

🐳 Docker Deployment

Quick Deploy with Docker Compose

# Build and start all services
docker-compose up -d --build

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Docker Services

The docker-compose.yml includes:

• Frontend - React app served by Nginx (port 80)
• Backend - Express API server (port 5000)
• Database - MySQL/MariaDB database (port 3306)

Manual Docker Build

# Build frontend
docker build -t neverland-frontend .

# Build backend
docker build -t neverland-backend ./neverland-backend

# Run frontend
docker run -d -p 80:80 neverland-frontend

# Run backend
docker run -d -p 5000:5000 neverland-backend

Production Deployment

For production deployment:

1. Set environment variables - Update .env files with production values
2. Configure CORS - Update allowed origins in backend
3. Setup SSL - Configure HTTPS with certificates
4. Update OAuth callbacks - Set production callback URLs
5. Database - Configure production database connection
6. Build & Deploy - Run docker-compose up -d --build

---

⚙️ Environment Variables

Frontend (.env)

# API Configuration
VITE_API_BASE_URL=https://api.neverlandstudio.my.id/api
VITE_BACKEND_URL=https://api.neverlandstudio.my.id

# Google reCAPTCHA v3
VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key

# OAuth Configuration
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GITHUB_CLIENT_ID=your_github_client_id

# App Configuration
VITE_APP_NAME=Neverland Studio
VITE_APP_URL=https://neverlandstudio.my.id
VITE_ENABLE_CHATBOT=true

Backend (neverland-backend/.env)

# Server
NODE_ENV=production
PORT=5000
HOST=0.0.0.0

# URLs
BACKEND_URL=https://api.neverlandstudio.my.id
FRONTEND_URL=https://neverlandstudio.my.id

# Database
DB_HOST=mariadb_neverland
DB_PORT=3306
DB_NAME=neverlandstudio
DB_USER=root
DB_PASSWORD=your_secure_password

# JWT
JWT_SECRET=your_jwt_secret_here
JWT_EXPIRES_IN=7d
REFRESH_TOKEN_SECRET=your_refresh_token_secret
REFRESH_TOKEN_EXPIRES_IN=30d

# OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=https://api.neverlandstudio.my.id/api/auth/google/callback

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_CALLBACK_URL=https://api.neverlandstudio.my.id/api/auth/github/callback

# reCAPTCHA
RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key

# Netdata Monitoring
NETDATA_URL=https://netdata.neverlandstudio.my.id
NETDATA_API_TOKEN=your_netdata_api_token

# CORS
ALLOWED_ORIGINS=https://neverlandstudio.my.id,https://www.neverlandstudio.my.id

# Frontend URL
FRONTEND_URL=https://neverlandstudio.my.id

# Session
SESSION_SECRET=your_session_secret

Getting API Keys

1. Google reCAPTCHA: console.cloud.google.com/recaptcha
2. Google OAuth: console.cloud.google.com/apis/credentials
3. GitHub OAuth: github.com/settings/developers

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

How to Contribute

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/neverland-studio-portfolio.git

# 3. Create a feature branch
git checkout -b feature/amazing-feature

# 4. Make your changes and commit
git commit -m "feat: add amazing feature"

# 5. Push to your fork
git push origin feature/amazing-feature

# 6. Open a Pull Request

Commit Convention

Follow Conventional Commits:

feat:     New feature
fix:      Bug fix
docs:     Documentation changes
style:    Code style changes (formatting)
refactor: Code refactoring
test:     Add or update tests
chore:    Build process or dependency updates

Reporting Bugs

Open an issue with:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)
• Environment details (OS, browser, Node version)

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License
Copyright (c) 2024 Muhammad Isaki Prananda

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

---

✉️ Contact

Muhammad Isaki Prananda

Project Repository
github.com/MuhammadIsakiPrananda/neverland-studio-portfolio

---

⭐ Star this repository if you find it helpful!

Made with ❤️ by Muhammad Isaki Prananda

⬆ Back to Top