Skip to content

README.md

Latest commit

 

History

History
190 lines (149 loc) · 6.22 KB

README.md

File metadata and controls

190 lines (149 loc) · 6.22 KB

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
  1. Install dependencies:
npm install
  1. 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
  1. Start the development server:
npm run dev
  1. Build for production:
npm run build
  1. 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.