SkillQuest Enhanced - Deployment Guide
Enhanced SkillQuest Platform - Complete Setup Guide
Overview
This is the enhanced version of SkillQuest - a premium gamified learning platform with
advanced UI/UX, dark mode, and robust backend functionality.
What's Included
Frontend Enhancements
• Premium Dark/Light Mode Toggle - Seamless theme switching
• Unique Color Palette - Electric Blue (#0066FF), Neon Purple (#8B5CF6), Bright
Green (#00FF88)
• Advanced UI Components - Glassmorphism effects, smooth animations
• Fixed Navigation - Working profile dropdown, single profile access
• Responsive Design - Perfect on all devices
• Modern Animations - Micro-interactions and smooth transitions
Backend Improvements
• Enhanced Authentication - Proper signup/login flow with email verification
• Advanced User Model - XP points, levels, streaks, gamification features
• JWT Token System - Secure authentication with refresh tokens
• Admin System - Separate admin login and user management
• API Endpoints - Complete REST API for all features
Fixed Issues
• Profile Icon Click - Now properly navigates to profile page
• Signup Flow - No auto-login, requires email verification
• Button Logic - All buttons and interactions work correctly
• Duplicate Profile - Removed duplicate profile sections
Live Demo
Frontend URL: https://coijgdwl.manus.space
Test Credentials:
- Use "Demo Login" button for instant access
- Or create a new account (requires email verification)
Local Development Setup
Prerequisites
• Node.js 18+ and npm
• Python 3.11+
• Git
Backend Setup (Django)
1. Extract and navigate to backend:
bash
cd gamified-platform-backend
2. Create virtual environment:
bash
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
3. Install dependencies:
bash
pip install -r requirements.txt
4. Run migrations:
bash
python manage.py makemigrations
python manage.py migrate
5. Create superuser:
bash
python manage.py createsuperuser
6. Start development server:
bash
python manage.py runserver 0.0.0.0:8000
Frontend Setup (React)
1. Navigate to frontend:
bash
cd gamified-platform-frontend
2. Install dependencies:
bash
npm install
3. Start development server:
bash
npm run dev
4. Access the application:
5. Frontend: http://localhost:5173
6. Backend API: http://localhost:8000/api/
Production Deployment
Frontend Deployment (Vercel)
1. Build the project:
bash
cd gamified-platform-frontend
npm run build
2. Deploy to Vercel:
bash
npm install -g vercel
vercel --prod
Backend Deployment (Railway/Render)
1. Update settings for production: ```python # In settings.py DEBUG = False
ALLOWED_HOSTS = ['your-domain.com', 'localhost']
# Add your production database settings
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'your_db_name',
'USER': 'your_db_user',
'PASSWORD': 'your_db_password',
'HOST': 'your_db_host',
'PORT': '5432',
}
}
```
1. Deploy to Railway:
bash
railway login
railway init
railway up
2. Or deploy to Render:
3. Connect your GitHub repository
4. Set build command: pip install -r requirements.txt
5. Set start command: python manage.py runserver 0.0.0.0:$PORT
Theme Customization
Color Palette
The platform uses a unique vibrant color scheme:
:root {
--color-primary: #0066FF; /* Electric Blue */
--color-secondary: #8B5CF6; /* Neon Purple */
--color-accent: #00FF88; /* Bright Green */
--color-warning: #FF6B35; /* Orange */
--color-success: #10B981; /* Green */
}
Dark Mode
• Automatic theme detection based on system preference
• Manual toggle available in the top navigation
• Persistent theme selection stored in localStorage
API Endpoints
Authentication
• POST /api/users/register/ - User registration
• POST /api/users/login/ - User login
• POST /api/users/demo-login/ - Demo login
• POST /api/token/refresh/ - Refresh JWT token
Skills
• GET /api/skills/list/ - Get all skills
• GET /api/skills/detail/<id>/ - Get skill details
Gamification
• GET /api/gamification/leaderboard/ - Get leaderboard
• GET /api/gamification/badges/ - Get user badges
Quizzes
• GET /api/quizzes/list/ - Get available quizzes
• POST /api/quizzes/submit/ - Submit quiz answers
Features Overview
Dashboard
• Real-time XP tracking and level progression
• Learning streak monitoring
• Skills progress overview
• Weekly activity charts
• Achievement showcase
Skills Library
• Comprehensive skill catalog
• Category and level filtering
• Progress tracking
• Interactive learning paths
Gamification
• XP points and level system
• Achievement badges
• Learning streaks
• Competitive leaderboards
Profile Management
• User statistics and progress
• Achievement gallery
• Profile customization
• Data export functionality
Security Features
• JWT-based authentication
• Email verification for new accounts
• CORS protection
• Input validation and sanitization
• Secure password hashing
Performance Optimizations
• Lazy loading for components
• Image optimization
• CSS minification
• API response caching
• Database query optimization
Troubleshooting
Common Issues
1. CORS Errors:
2. Ensure backend CORS settings include your frontend URL
3. Check that django-cors-headers is properly configured
4. Authentication Issues:
5. Verify JWT tokens are being stored correctly
6. Check token expiration and refresh logic
7. Build Errors:
8. Clear node_modules and reinstall: rm -rf node_modules && npm install
9. Check for TypeScript/ESLint errors
Support
For technical support or questions, please refer to the documentation or create an issue
in the project repository.
Next Steps
1. Customize Branding - Update colors, logos, and content to match your brand
2. Add Content - Populate with your own skills, quizzes, and learning materials
3. Configure Analytics - Add tracking for user engagement and learning progress
4. Scale Infrastructure - Set up production databases and CDN for optimal
performance
Congratulations! Your enhanced SkillQuest platform is ready to revolutionize online
learning!
