CodePark Platform

An interactive learning platform for programming education, specifically designed for Polish students preparing for computer science exams and building practical programming skills.

Overview

CodePark is a comprehensive educational platform that provides interactive courses, practical exercises, and exam preparation materials. The platform features an integrated code editor with Python execution capabilities, progress tracking, and a structured learning path.

Features

Core Functionality

• Interactive Learning Environment - Browser-based Python code editor with real-time execution using Pyodide
• Structured Courses - Step-by-step programming courses with lessons, exercises, and projects
• Exam Preparation - Polish Matura exam papers and practice materials (2016-2024)
• Progress Tracking - Dashboard with statistics and learning progress visualization
• User Authentication - Secure authentication system with email verification via Supabase
• Profile Management - User profiles with customizable settings and preferences

Technical Features

• Multiple Code Editors - Support for CodeMirror, Monaco Editor, and Ace Editor
• Markdown Rendering - Rich content display with syntax highlighting, KaTeX math support, and Mermaid diagrams
• Terminal Emulation - XTerm.js integration for interactive terminal experience
• Responsive Design - Mobile-friendly interface built with Tailwind CSS
• Form Validation - VeeValidate and Yup schema validation

Tech Stack

Frontend

• Vue 3 - Progressive JavaScript framework with Composition API
• TypeScript - Type-safe development
• Vue Router - Client-side routing with authentication guards
• Pinia - State management

Styling

• Tailwind CSS 4 - Utility-first CSS framework
• Custom Design System - Dark theme with primary accent colors

Code Editors

• CodeMirror 6 - Lightweight code editor with Python support
• Monaco Editor - VS Code-powered editor
• Ace Editor - High-performance code editor

Content & Rendering

• Marked - Markdown parser
• Highlight.js - Syntax highlighting
• KaTeX - Mathematical notation rendering
• Mermaid - Diagram and flowchart generation
• DOMPurify - XSS protection for user-generated content

Python Execution

• Pyodide - Python runtime in WebAssembly for browser-based code execution

Backend & Services

• Supabase - Authentication, database, and backend services
• Resend - Email service integration

Build Tools

• Vite - Fast build tool and dev server
• TypeScript - Type checking and compilation
• vite-svg-loader - SVG component imports

Project Structure

codepark-platform/
├── src/
│   ├── features/           # Feature-based modules
│   │   ├── auth/          # Authentication (login, register, password reset)
│   │   ├── landing/       # Landing page
│   │   ├── legal/         # Privacy policy, terms of use
│   │   ├── platform/      # Main platform features
│   │   │   ├── components/    # Reusable components
│   │   │   ├── features/      # Code editor, exercises, presentations
│   │   │   └── pages/         # Dashboard, projects, help, settings
│   │   └── errors/        # Error pages
│   ├── components/        # Shared UI components
│   ├── composables/       # Vue composables (hooks)
│   ├── contents/          # Course content and materials
│   │   ├── courses/       # Course lessons (Python, theory)
│   │   ├── exams/         # Exam preparation materials
│   │   └── legal/         # Legal documents
│   ├── stores/            # Pinia state stores
│   ├── router/            # Vue Router configuration
│   ├── services/          # External service integrations
│   ├── lib/               # Utility libraries
│   └── types/             # TypeScript type definitions
├── public/
│   ├── python/            # Python course materials and examples
│   ├── algorithmics/      # Algorithm implementations
│   └── exams-papers/      # Historical exam papers (2005-2024)
├── docs/                  # Documentation
└── scripts/               # Build and utility scripts

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository:

git clone <repository-url>
cd codepark-platform

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env file with your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server:

npm run dev

5. Build for production:

npm run build

6. Preview production build:

npm run preview

Development

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run preview - Preview production build locally

Code Style

The project follows Vue 3 best practices:

• Composition API with <script setup>
• TypeScript for type safety
• Feature-based architecture
• Composables for reusable logic
• No comments in code (self-documenting code principle)

Course Content

Python Programming

• Variables and data types
• Control flow (conditionals, loops)
• Functions
• Data structures (lists, dictionaries, tuples, sets)
• File operations
• Algorithms and problem-solving

Exam Preparation

• Matura exam papers (2005-2024)
• Algorithm analysis
• SQL databases
• Excel exercises
• Practice problems with solutions

Deployment

The platform is configured for deployment on:

• Netlify - Configuration in netlify.toml
• Docker - Dockerfile with nginx configuration included

License

Private project - All rights reserved

Roadmap

• Progress bar implementation
• Lesson navigation (next/previous)
• Lesson locking system (complete previous lessons to unlock next)
• Enhanced progress tracking
• Additional programming language support

Contributing

This is a private educational platform. For questions or suggestions, please contact the maintainer.