Skill Badge Platform Frontend

A cutting-edge, fully-featured web application for skill verification, interactive coding challenges, AI-powered mock interviews, and professional development with advanced gamification features, built with React 19 and TypeScript.

Frontend	🟢 Live	Click here to visit App	Vercel
Backend API	🟢 Live	Visit API Health	Koyeb

📋 Table of Contents

Overview
Features
Tech Stack
Project Structure
Prerequisites
Installation
Configuration
Running the Application
Building for Production
Key Features Walkthrough
Development Guide
Testing
API Integration
Deployment
Contributing
Troubleshooting
License
Support

🎯 Overview

The Skill Badge Platform Frontend is a comprehensive web application that enables users to showcase their skills, complete interactive coding challenges, participate in AI-powered mock interviews, earn badges, and compete on leaderboards. Built with cutting-edge technologies including React 19, TypeScript, Vite, and Socket.io, the platform provides an engaging, gamified learning experience with real-time collaboration features.

What Makes This Special

🤖 AI-Powered Mock Interviews: Practice technical interviews with AI interviewers using speech recognition and text-to-speech
🎮 Gamification: Badge system, leaderboards, achievement tracking, and reward system
💻 Interactive Coding Challenges: Built-in Monaco Code Editor with real-time code execution and validation
🧠 AI Assistant: Smart in-editor AI helper for code hints and explanations (slide-out panel)
👥 Social Features: Discussion forums, user profiles, community engagement, and real-time notifications
🎨 Modern UI/UX: Responsive design with Tailwind CSS, Framer Motion animations, and mobile-optimized interface
🔐 Secure Authentication: OAuth integration (Google, GitHub) and JWT-based authentication
📊 Admin Dashboard: Comprehensive management tools with analytics and content moderation
⚡ Real-time Updates: Socket.io integration for live contest tracking and instant notifications
🎤 Speech Features: Text-to-speech in interviews and speech recognition for voice input
📱 Mobile-Responsive: Optimized tablet and mobile experience with adaptive layouts

✨ Features

🎓 Learning & Development

Skill Badges: Earn and display badges for completed skills and achievements
Interactive Coding Challenges: Multiple difficulty levels with real-time code execution
Progress Tracking: Detailed analytics and learning journey visualization
Skill Categories: Organized learning paths across various technologies
Daily Challenges: Special daily coding challenges with bonus rewards
Hint System: AI-powered hints to guide learners without spoiling solutions

🤖 AI-Powered Features (NEW!)

Mock Interviews: AI interviewers conduct realistic technical interviews
Speech Recognition: Voice input for interview responses and questions
Text-to-Speech: AI speaks interview questions and feedback
AI Assistant Panel: In-editor AI helper for code suggestions and explanations
Smart Code Analysis: Real-time code quality feedback and optimization suggestions
Hint Generation: Context-aware hints based on challenge requirements

🏆 Gamification

Badge System: Unlock badges by completing challenges and milestones
Leaderboards: Global rankings, category-specific achievements, time-based leaderboards
Achievement System: Track accomplishments and showcase expertise
Points & Rewards: Earn points for participation, skill mastery, and challenge completion
Streak Tracking: Maintain daily coding streaks and get bonus rewards

👨‍💼 User Experience

Personalized Dashboard: Customized views based on user role (Admin, Instructor, Student)
User Profiles: Showcase badges, achievements, skills, and activity history
Social Interaction: Discussion forums, topic threads, and community collaboration
Real-time Notifications: Live updates on challenges, badges, and community activity
Activity Feed: See what other users are achieving in real-time

🛠️ Admin Capabilities

User Management: Comprehensive user administration with role-based access
Badge Management: Create, edit, assign, and track badges
Challenge Creation: Build coding challenges with test cases and validation rules
Analytics Dashboard: Monitor platform metrics, user engagement, and skill trends
Content Moderation: Review discussions, manage submissions, and ensure quality
System Settings: Configure platform features and global settings

💻 Technical Features

OAuth Authentication: Google and GitHub seamless integration
Monaco Code Editor: Professional VS Code editor with multiple language support
Real-time Code Execution: Instant test case validation and results
Responsive Design: Desktop, tablet, and mobile optimization
Dark Mode Support: Eye-friendly interface for extended usage
File Upload: Profile pictures and media attachments
Real-time Updates: Live data synchronization via Socket.io
WebSocket Integration: Live contest updates and instant notifications
Mobile-Responsive Tabs: Adaptive mobile interface for challenge solver

🛠️ Tech Stack

Core Technologies

React 19.0.0 - Latest React with modern features and hooks
TypeScript 5.6+ - Type-safe JavaScript with strict typing
Vite 6.0+ - Next-generation frontend tooling with instant HMR
React Router DOM 7.9 - Advanced client-side routing
Socket.io-client 4.8+ - Real-time bi-directional communication

UI & Styling

Tailwind CSS 4.1+ - Utility-first CSS framework
Framer Motion 12.23+ - Advanced animations and interactions
Lucide React 0.554+ - Beautiful, customizable SVG icons
Tailwind Merge - Merge Tailwind CSS classes intelligently

State Management & Data

React Context API - Global state management for auth, UI, and notifications
Axios 1.13+ - Promise-based HTTP client
LocalStorage - Persistent client-side data storage
React Hooks - Advanced state and lifecycle management

Code Editor & AI Features

@monaco-editor/react 4.7+ - VS Code editor integration
React Markdown 10.1+ - Markdown rendering
Remark GFM 4.0+ - GitHub-flavored markdown support

Speech & Audio Features

React Speech Recognition 4.0+ - Web Speech API integration
Web Speech API - Browser native speech recognition and synthesis

Data Visualization

Recharts 3.5+ - Composable charting library
React Confetti 6.4+ - Celebration animations

Toast & Notifications

React Hot Toast 2.6+ - Beautiful toast notifications
Sonner 2.0+ - Elegant notification system
Socket.io Events - Real-time event-driven notifications

Utilities

CLSX 2.1+ - Conditional className builder
Regenerator Runtime 0.14+ - Async/await support

Development Tools

ESLint 9.39+ - Code linting and quality
TypeScript ESLint - TypeScript linting rules
Vite React Plugin - Optimized React support in Vite

📁 Project Structure

skill-badge-platform-frontend/
├── public/                      # Static assets
│   └── vite.svg                # Vite logo
│
├── src/
│   ├── assets/                 # Images, fonts, and static resources
│   │   ├── logo.svg
│   │
│   ├── components/             # Reusable React components
│   │   ├── AdminSidebar.tsx           # Admin panel sidebar navigation
│   │   ├── AiAssistant.tsx            # AI helper slide-out panel (NEW!)
│   │   ├── BadgesSection.tsx          # User badges display
│   │   ├── ChatInput.tsx              # Interview chat input (NEW!)
│   │   ├── CodeEditor.tsx             # Monaco editor wrapper
│   │   ├── ConfirmModal.tsx           # Confirmation dialogs
│   │   ├── ContestLive.tsx            # Live contest display (NEW!)
│   │   ├── DashboardFeatureCards.tsx  # Dashboard feature cards
│   │   ├── EducationSection.tsx       # Learning resources
│   │   ├── Footer.tsx                 # Application footer
│   │   ├── Header.tsx                 # Main header navigation
│   │   ├── HeatmapSection.tsx         # Activity heatmap
│   │   ├── InterviewSetup.tsx         # Interview configuration (NEW!)
│   │   ├── LandingNavbar.tsx          # Landing page navbar
│   │   ├── Logo.tsx                   # Logo component
│   │   ├── MessageBubble.tsx          # Interview message display (NEW!)
│   │   ├── PodiumCard.tsx             # Leaderboard podium
│   │   ├── ProfileSidebar.tsx         # User profile sidebar
│   │   ├── ProgressSection.tsx        # Learning progress tracker
│   │   ├── RecentActivitySection.tsx  # Activity timeline
│   │   ├── Slidebar.tsx               # Sidebar navigation
│   │   ├── SocialButton.tsx           # Social sharing buttons
│   │   ├── SocialLogin.tsx            # OAuth login integration
│   │   ├── SolverHeader.tsx           # Challenge solver header
│   │   ├── StatRow.tsx                # Statistics display
│   │   └── SuccessModal.tsx           # Success celebration modal
│   │
│   ├── context/                # React Context providers
│   │   ├── authContext.tsx           # Authentication state & user management
│   │   ├── SidebarContext.tsx        # Sidebar visibility state
│   │   └── ToastContext.tsx          # Toast notifications state
│   │
│   ├── hooks/                  # Custom React hooks
│   │   └── useTextToSpeech.ts        # Text-to-speech hook (NEW!)
│   │
│   ├── Layouts/                # Page layout components
│   │   ├── AdminLayout.tsx           # Admin panel layout
│   │   ├── AuthLayout.tsx            # Authentication pages layout
│   │   ├── DashboardLayout.tsx       # Dashboard layout
│   │   └── MarketingLayout.tsx       # Landing page layout
│   │
│   ├── pages/                  # Route-level components
│   │   ├── admin/
│   │   │   ├── CreateChallenge.tsx   # Challenge creation form
│   │   │   ├── Dashboard.tsx         # Admin dashboard
│   │   │   ├── ManageChallenges.tsx  # Challenge management
│   │   │   ├── ManageUsers.tsx       # User management
│   │   │   └── settings.tsx          # Admin settings
│   │   ├── AuthSuccess.tsx           # OAuth callback handler
│   │   ├── ChallengeSolver.tsx       # Coding challenge interface (ENHANCED!)
│   │   ├── Discuss.tsx               # Discussion forum
│   │   ├── ForgotPassword.tsx        # Password recovery
│   │   ├── Home.tsx                  # Homepage
│   │   ├── Index.tsx                 # Main page
│   │   ├── Leaderboard.tsx           # Rankings display
│   │   ├── Login.tsx                 # Login page
│   │   ├── MockInterview.tsx         # AI mock interview (NEW!)
│   │   ├── MyLists.tsx               # User's saved lists
│   │   ├── PostDetails.tsx           # Discussion post detail
│   │   ├── Profile.tsx               # User profile
│   │   ├── ProfileSettings.tsx       # Profile configuration
│   │   ├── Register.tsx              # Registration page
│   │   └── ResetPassword.tsx         # Password reset
│   │
│   ├── routes/                 # Routing configuration
│   │   └── index.tsx                 # Route definitions
│   │
│   ├── services/               # API service layer
│   │   ├── admin/
│   │   │   ├── admin.challenge.ts    # Challenge API
│   │   │   ├── admin.settings.ts     # Settings API
│   │   │   ├── admin.ts              # General admin API
│   │   │   └── admin.user.ts         # User management API
│   │   ├── api.ts                    # Axios instance & interceptors
│   │   ├── auth.ts                   # Authentication services
│   │   ├── challenge.ts              # Challenge-related API calls
│   │   ├── discuss.ts                # Discussion API
│   │   ├── interview.ts              # Mock interview API (NEW!)
│   │   └── user.ts                   # User profile API
│   │
│   ├── types/                  # TypeScript type definitions
│   │   └── interview.types.ts        # Interview interface types (NEW!)
│   │
│   ├── utils/                  # Utility functions
│   │   └── cn.ts                     # Class name utility
│   │
│   ├── App.css                 # Global component styles
│   ├── App.tsx                 # Root application component
│   ├── index.css               # Global CSS with Tailwind imports
│   ├── main.tsx                # Application entry point
│   └── socket.ts               # Socket.io client configuration (NEW!)
│
├── .env.example                # Environment variables template
├── .gitignore                  # Git ignore rules
├── eslint.config.js            # ESLint configuration
├── index.html                  # HTML template
├── package.json                # Project dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── tsconfig.app.json           # TypeScript app configuration
├── tsconfig.node.json          # TypeScript node configuration
├── vite.config.ts              # Vite configuration
└── README.md

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18.0.0 or higher) - Download
npm (v9.0.0 or higher) or yarn (v1.22.0+)
Git - Download
Backend API - The Skill Badge Platform Backend must be running

System Requirements

Operating System: Windows 10+, macOS 10.15+, or Linux
RAM: 4GB minimum (8GB recommended)
Disk Space: 500MB for dependencies

🚀 Installation

1. Clone the Repository

git clone https://github.com/Sachintha-Prabashana/skillbadge-frontend.git
cd skillbadge-frontend

2. Install Dependencies

Using npm:

npm install

Using yarn:

yarn install

3. Set Up Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Edit the .env file with your configuration (see Configuration section below).

⚙️ Configuration

Environment Variables

Create a .env file in the root directory with the following variables:

# API Configuration
VITE_API_BASE_URL=http://localhost:5000/api/v1
VITE_API_TIMEOUT=30000

# Application Configuration
VITE_APP_NAME=Skill Badge Platform
VITE_APP_VERSION=1.0.0

# OAuth Configuration (Frontend Redirect URLs)
VITE_GOOGLE_AUTH_URL=http://localhost:5000/api/v1/auth/google
VITE_GITHUB_AUTH_URL=http://localhost:5000/api/v1/auth/github

# Socket.io Configuration (Real-time Features)
VITE_SOCKET_IO_URL=http://localhost:5000
VITE_SOCKET_IO_PATH=/socket.io

# Feature Flags
VITE_ENABLE_DARK_MODE=true
VITE_ENABLE_NOTIFICATIONS=true
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_MOCK_INTERVIEWS=true
VITE_ENABLE_AI_ASSISTANT=true
VITE_ENABLE_SPEECH_RECOGNITION=true

# Interview Configuration
VITE_INTERVIEW_MAX_DURATION=3600000
VITE_INTERVIEW_SPEECH_LANG=en-US

# Upload Configuration
VITE_MAX_FILE_SIZE=5242880
VITE_ALLOWED_FILE_TYPES=image/jpeg,image/png,image/gif

# Code Editor Configuration
VITE_MONACO_THEME=vs-dark
VITE_CODE_EXECUTION_TIMEOUT=5000

# AI Assistant Configuration
VITE_AI_HINT_COST=10
VITE_AI_RESPONSE_TIMEOUT=15000

# Environment
VITE_NODE_ENV=development

Important Notes

All environment variables in Vite must be prefixed with VITE_ to be accessible in the client
The VITE_API_BASE_URL should point to your running backend server
The VITE_SOCKET_IO_URL enables real-time features (contests, notifications)
Enable/disable feature flags based on your deployment requirements
Speech recognition features require HTTPS in production
Never commit the .env file to version control
For production, update URLs, disable debug features, and adjust timeouts

🏃‍♂️ Running the Application

Development Mode

Start the development server with hot module replacement (HMR):

npm run dev

The application will be available at:

http://localhost:5173

Features in Development Mode:

⚡ Instant Hot Module Replacement (HMR)
🔍 Detailed error messages
🐛 React DevTools support
📊 Vite development dashboard

Preview Production Build

To preview the production build locally:

npm run build
npm run preview

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint
npm run lint

📦 Building for Production

Create Production Build

npm run build

This command:

Runs TypeScript type checking
Compiles and optimizes code with Vite
Minifies JavaScript and CSS
Generates optimized assets in the dist/ folder

Build Output

dist/
├── assets/              # Compiled JS, CSS, and images
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── [images]
├── index.html           # Entry HTML file
└── vite.svg

Production Optimization Features

Code Splitting: Automatic route-based code splitting
Tree Shaking: Removes unused code
Minification: Compressed JavaScript and CSS
Asset Hashing: Cache-busting file names
Compression: Gzip/Brotli compression ready

🎮 Key Features Walkthrough

1. Authentication Flow

// Login with email/password
await authService.login({ email, password });

// OAuth login (Google/GitHub)
window.location.href = import.meta.env.VITE_GOOGLE_AUTH_URL;

// Access protected resources
const token = localStorage.getItem("token");

2. AI-Powered Mock Interviews (NEW!)

Practice technical interviews with AI:

import { startMockInterview, sendInterviewReply } from "../services/interview";
import { useTextToSpeech } from "../hooks/useTextToSpeech";

// Start a mock interview
const data = await startMockInterview("React.js", "Intermediate");
const { interviewId, message } = data;

// Send your answer and get AI feedback
const reply = await sendInterviewReply(interviewId, userAnswer);

// AI speaks the questions (text-to-speech)
const { speak } = useTextToSpeech(true);
speak(aiQuestion);

Features:

AI interviewer based on selected tech stack
Multiple difficulty levels
Voice input support with speech recognition
AI voice responses (text-to-speech)
Real-time conversation feedback
Interview completion tracking

3. Code Challenges with AI Assistant

Solve challenges with smart assistance:

import { fetchChallengeById, runChallengeCode } from "../services/challenge";

// Load challenge details
const challenge = await fetchChallengeById(challengeId);

// Run and validate code
const result = await runChallengeCode({
    challengeId,
    language: "python",
    code: userCode
});

Features:

Multiple programming languages support
Real-time code validation
Test case execution
AI Assistant slide-out panel with code hints
Mobile-responsive with code/problem tabs
Syntax highlighting with Monaco Editor

4. AI Assistant In-Editor Helper (NEW!)

Get intelligent code suggestions:

Context-aware code hints
Explanation of problems and solutions
Optimization suggestions
No spoilers - guided learning approach
Toggle panel for distraction-free coding
Code analysis based on current submission

5. Badge System

Users can:

Browse available badges by category
View badge requirements and criteria
Track progress toward earning badges
Display earned badges on their profile
Share achievements on social media
Earn badges automatically upon challenge completion

6. Coding Challenges

Features:

Monaco Editor integration (VS Code engine)
Multiple programming languages support
Real-time code execution
Test case validation
Difficulty levels (Easy, Medium, Hard)
Solution submission and review
Real-time execution results
Daily challenges with bonus rewards

7. Leaderboard System

Track rankings by:

Overall points and achievements
Category-specific leaderboards
Time-based rankings (Weekly/Monthly/All-time)
Friend comparisons and achievements
Podium displays for top performers
Real-time ranking updates via Socket.io

8. Discussion Forums

Engage with the community:

Create and browse discussion threads
Comment and reply with nested discussions
Upvote valuable content and solutions
Follow interesting topics for updates
Real-time notifications on activity
Topic-based organization
User reputation and trust scores

9. Real-time Features (Socket.io Integration)

Live platform experience:

Live contest tracking
Real-time leaderboard updates
Instant notifications for achievements
Live session indicators
Activity feed updates
Challenge completion broadcasts

10. Admin Dashboard

Administrators can:

Manage users with role-based access
Create, edit, and delete badges
Design and manage coding challenges
Monitor platform analytics and metrics
Moderate discussions and content
View system logs and activity
Configure platform-wide settings
Track user engagement metrics

📝 Development Guide

Code Style

TypeScript: Use strict typing, avoid any
Components: Functional components with TypeScript interfaces
Naming: PascalCase for components, camelCase for functions/variables
File Structure: One component per file
Imports: Use absolute imports with @/ alias where configured

Tailwind CSS Best Practices

// ✅ Good: Use Tailwind utilities
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  {/* Content here */}
</div>

// ❌ Avoid: Inline styles
<div style={{ display: 'flex', padding: '16px' }}>
  {/* Content here */}
</div>

// ✅ Good: Responsive design
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Content here */}
</div>

// ✅ Good: Use Tailwind merge for class composition
import { cn } from "@/utils/cn";
const buttonClass = cn(baseClass, condition && activeClass);

Component Structure

import { useEffect, useState } from "react";
import { useAuth } from "@/context/authContext";
import { fetchData } from "@/services/api";

interface ComponentProps {
    title: string;
    onClose?: () => void;
}

export default function MyComponent({ title, onClose }: ComponentProps) {
    const [data, setData] = useState(null);
    const { user } = useAuth();

    useEffect(() => {
        const loadData = async () => {
            const result = await fetchData();
            setData(result);
        };
        loadData();
    }, []);

    return (
        <div className="p-4">
            <h1>{title}</h1>
            {/* Component JSX */}
        </div>
    );
}

🧪 Testing

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

🚢 Deployment

Deployment Options

1. Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

2. Netlify

# Build command
npm run build

# Publish directory
dist

3. GitHub Pages

# Install gh-pages
npm install -D gh-pages

# Add to package.json
"scripts": {
  "deploy": "gh-pages -d dist"
}

# Deploy
npm run deploy

Production Checklist

🤝 Contributing

We welcome contributions! Please follow these guidelines:

How to Contribute

Fork the repository
Create a feature branch
```
git checkout -b feature/AmazingFeature
```
Make your changes

Commit with descriptive messages

git commit -m 'feat: add amazing feature'

Push to your branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Commit Message Convention

Follow Conventional Commits:

feat: New feature
fix: Bug fix
docs: Documentation changes
style: Code style changes (formatting)
refactor: Code refactoring
test: Adding tests
chore: Maintenance tasks

Code Review Process

All PRs require at least one approval
Ensure all tests pass
Follow the existing code style
Update documentation as needed

🐛 Troubleshooting

Common Issues

Port Already in Use

# Error: Port 5173 is already in use
# Solution: Kill the process or use a different port
npm run dev -- --port 3000

Module Not Found

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Build Errors

# Clear Vite cache
rm -rf node_modules/.vite
npm run build

TypeScript Errors

# Run type checking
npm run type-check

# Clear TypeScript cache
rm -rf tsconfig.tsbuildinfo

Socket.io Connection Issues

Problem: Real-time features not updating (leaderboard, contests)

Solutions:

# Ensure backend Socket.io server is running
# Check VITE_SOCKET_IO_URL in .env file
# Verify CORS settings on backend
# Clear browser cache and retry
# Check browser console for connection errors

Speech Recognition Not Working

Problem: Speech input in mock interviews fails

Solutions:

Ensure HTTPS is enabled (required for production)
Check microphone permissions in browser
Verify VITE_ENABLE_SPEECH_RECOGNITION=true in .env
Test in a supported browser (Chrome, Edge, Safari)
Check browser console for security errors

AI Assistant Not Loading

Problem: AI Assistant panel doesn't appear in challenge solver

Solutions:

# Check VITE_ENABLE_AI_ASSISTANT=true in .env
# Verify backend AI service is running
# Check network requests in browser DevTools
# Ensure API base URL is correct

Interview Features Disabled

Problem: Mock interview page shows disabled message

Solutions:

# Enable in .env file:
VITE_ENABLE_MOCK_INTERVIEWS=true

# Restart development server
npm run dev

📚 API Integration

Interview Service

// Start interview
import { startMockInterview } from "@/services/interview";
const response = await startMockInterview("React.js", "Intermediate");

// Send answer
import { sendInterviewReply } from "@/services/interview";
const reply = await sendInterviewReply(interviewId, userAnswer);

Challenge Service

// Run code
import { runChallengeCode } from "@/services/challenge";
const results = await runChallengeCode({
    challengeId,
    language: "python",
    code: userCode
});

// Get hint
import { getChallengeHint } from "@/services/challenge";
const hint = await getChallengeHint(challengeId, code, language);

📄 License

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

💬 Support

Getting Help

📧 Email: sachinthaprabhashana2003@gmail.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🙏 Acknowledgments

React Team for React 19
Vite Team for the amazing build tool
Tailwind CSS for the utility-first CSS framework
Framer Motion for smooth animations
Socket.io for real-time communication
All contributors who helped shape this project

📊 Project Stats

Built with ❤️ by the Skill Badge Platform Team

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 54 Commits
public		public
src		src
utils		utils
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Sachintha-Prabashana/skillbadge-frontend

Folders and files

Latest commit

History

Repository files navigation

Skill Badge Platform Frontend

📋 Table of Contents

🎯 Overview

What Makes This Special

✨ Features

🎓 Learning & Development

🤖 AI-Powered Features (NEW!)

🏆 Gamification

👨‍💼 User Experience

🛠️ Admin Capabilities

💻 Technical Features

🛠️ Tech Stack

Core Technologies

UI & Styling

State Management & Data

Code Editor & AI Features

Speech & Audio Features

Data Visualization

Toast & Notifications

Utilities

Development Tools

📁 Project Structure

📋 Prerequisites

System Requirements

🚀 Installation

1. Clone the Repository

2. Install Dependencies

3. Set Up Environment Variables

⚙️ Configuration

Environment Variables

Important Notes

🏃‍♂️ Running the Application

Development Mode

Preview Production Build

Available Scripts

📦 Building for Production

Create Production Build

Build Output

Production Optimization Features

🎮 Key Features Walkthrough

1. Authentication Flow

2. AI-Powered Mock Interviews (NEW!)

3. Code Challenges with AI Assistant

4. AI Assistant In-Editor Helper (NEW!)

5. Badge System

6. Coding Challenges

7. Leaderboard System

8. Discussion Forums

9. Real-time Features (Socket.io Integration)

10. Admin Dashboard

📝 Development Guide

Code Style

Tailwind CSS Best Practices

Component Structure

🧪 Testing

Running Tests

🚢 Deployment

Deployment Options

1. Vercel (Recommended)

2. Netlify

3. GitHub Pages

Production Checklist

🤝 Contributing

How to Contribute

Commit Message Convention

Code Review Process

🐛 Troubleshooting

Common Issues

Port Already in Use

Module Not Found

Build Errors

TypeScript Errors

Socket.io Connection Issues

Speech Recognition Not Working

AI Assistant Not Loading

Packages