SkillQuest - Gamified Learning Platform
A professional full-stack gamified learning platform built with Django REST Framework
and React.
Features
• Gamified Learning Experience: XP points, levels, badges, and achievements
• Interactive Quizzes: Timed quizzes with instant feedback and explanations
• Skill Progression: Track progress across multiple skill categories
• Leaderboards: Compete with other learners and track rankings
• User Profiles: Comprehensive profile pages with statistics and achievements
• Responsive Design: Works seamlessly on desktop and mobile devices
• Modern UI: Built with Tailwind CSS and shadcn/ui components
Technology Stack
Backend
• Django 5.1.4 - Web framework
• Django REST Framework - API development
• Django CORS Headers - Cross-origin resource sharing
• Django Simple JWT - JWT authentication
• SQLite - Database (easily configurable for PostgreSQL)
Frontend
• React 18 - Frontend framework
• React Router - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Modern UI components
• Lucide React - Icon library
• Vite - Build tool and development server
Project Structure
├── gamified-platform-backend/ # Django REST API
│ ├── config/ # Django settings
│ ├── users/ # User management
│ ├── skills/ # Skills and courses
│ ├── quizzes/ # Quiz system
│ ├── gamification/ # XP, badges, leaderboards
│ ├── credentials/ # Micro-credentials
│ └── requirements.txt # Python dependencies
│
├── gamified-platform-frontend/ # React application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── services/ # API service layer
│ │ └── assets/ # Static assets
│ ├── dist/ # Production build
│ └── package.json # Node.js dependencies
│
└── design_concept.md # UI/UX design documentation
Quick Start
Backend Setup
1. Navigate to backend directory:
bash
cd gamified-platform-backend
2. Install dependencies:
bash
pip install -r requirements.txt
3. Run migrations:
bash
python manage.py migrate
4. Create superuser (optional):
bash
python manage.py createsuperuser
5. Start development server:
bash
python manage.py runserver 0.0.0.0:8000
Frontend Setup
1. Navigate to frontend directory:
bash
cd gamified-platform-frontend
2. Install dependencies:
bash
npm install
3. Start development server:
bash
npm run dev
4. Build for production:
bash
npm run build
Deployment
Backend Deployment (Railway/Render)
1. Prepare for deployment:
2. Update ALLOWED_HOSTS in settings.py
3. Configure environment variables for production
4. Set up PostgreSQL database (if needed)
5. Deploy to Railway:
bash
# Connect your GitHub repository to Railway
# Railway will automatically detect Django and deploy
Frontend Deployment (Vercel)
1. Deploy to Vercel:
bash
# Connect your GitHub repository to Vercel
# Vercel will automatically detect React and deploy
2. Build settings:
3. Build Command: npm run build
4. Output Directory: dist
5. Install Command: npm install
Configuration
Environment Variables
Backend (.env):
DEBUG=False
SECRET_KEY=your-secret-key
ALLOWED_HOSTS=your-domain.com
DATABASE_URL=your-database-url
Frontend:
Update API base URL in src/services/api.js :
const API_BASE_URL = 'https://your-backend-domain.com/api'
API Endpoints
Skills
• GET /api/skills/list/ - List all skills
• GET /api/skills/detail/{id}/ - Get skill details
Quizzes
• GET /api/quizzes/list/ - List all quizzes
• GET /api/quizzes/detail/{id}/ - Get quiz details
• POST /api/quizzes/submit/{id}/ - Submit quiz answers
Gamification
• GET /api/gamification/leaderboard/ - Get leaderboard
• GET /api/gamification/badges/ - Get user badges
Users
• POST /api/users/register/ - User registration
• POST /api/users/login/ - User login
• GET /api/users/profile/ - Get user profile
Credentials
• POST /api/credentials/issue/ - Issue credential
• GET /api/credentials/verify/{uuid}/ - Verify credential
Design System
The platform uses a modern design system with:
- Primary Color: Blue (#6366f1)
- Secondary Color: Green (#10b981)
- Accent Color: Orange (#f59e0b)
- Typography: System fonts with proper hierarchy
- Spacing: Consistent 8px grid system
- Components: Reusable UI components with proper states
Testing
Frontend Testing
cd gamified-platform-frontend
npm run test
Backend Testing
cd gamified-platform-backend
python manage.py test
Mobile Responsiveness
The platform is fully responsive and optimized for:
- Desktop (1024px+)
- Tablet (768px - 1023px)
- Mobile (320px - 767px)
Security Features
• JWT-based authentication
• CORS protection
• Input validation and sanitization
• Secure password handling
• Rate limiting (configurable)
Performance Optimizations
• Code splitting and lazy loading
• Optimized bundle sizes
• Efficient API caching
• Image optimization
• Minified CSS and JavaScript
Future Enhancements
• Real-time notifications
• Video content support
• Advanced analytics dashboard
• Social learning features
• Mobile app development
• AI-powered recommendations
Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request
License
This project is licensed under the MIT License.
🆘 Support
For support and questions:
- Create an issue in the GitHub repository
- Check the documentation
- Review the API endpoints
Built with using Django and React
