Moderni web-sovellus ohjelmointikielten oppimiseen interaktiivisilla harjoituksilla ja reaaliaikaisella koodieditorilla.

• 🎯 Interaktiivinen oppiminen - Harjoittele koodia suoraan selaimessa
• 📊 Edistymisen seuranta - Näe selkeästi mitä olet oppinut
• 🔧 Live-koodieditori - Monaco Editor integraatio reaaliaikaisella suorituksella
• 📱 Responsiivinen design - Toimii kaikilla laitteilla
• 🌍 Suomenkielinen - Kaikki sisältö suomeksi
• 🚀 Moderni teknologia - React, TailwindCSS, React Router

• JavaScript - Perusteet ja edistyneet ominaisuudet
  • Muuttujat ja tietotyypit
  • Funktiot ja niiden käyttö
  • Interaktiiviset harjoitukset

• HTML - Web-sivujen rakentaminen
• CSS - Tyylittely ja layout
• Python - Ohjelmoinnin perusteet
• C# - Olio-ohjelmointi
• Bootstrap - CSS-framework
• Tailwind - Utility-first CSS
• Figma - UI/UX suunnittelu
• Tekoäly - AI ja koneoppiminen

• Node.js (versio 14 tai uudempi)
• npm tai yarn

1. Kloonaa repositorio:

git clone <repository-url>
cd oppimisalusta

2. Asenna riippuvuudet:

npm install

3. Käynnistä kehityspalvelin:

npm start

4. Avaa selain osoitteessa: http://localhost:3000

npm run build

src/
├── components/          # Uudelleenkäytettävät komponentit
│   ├── Header.js       # Navigointipalkki
│   └── CodeEditor.js   # Interaktiivinen koodieditori
├── pages/              # Sivukomponentit
│   ├── Home.js         # Etusivu
│   ├── CoursePage.js   # Kurssisivu
│   └── LessonPage.js   # Oppituntisivu
├── contexts/           # React Context API
│   └── ProgressContext.js # Edistymisen seuranta
├── data/               # Kurssisisältö
│   └── courses.js      # Kurssien määrittelyt
└── index.css          # TailwindCSS tyylit

• React 18 - Käyttöliittymäkirjasto
• React Router - Reititys
• TailwindCSS - CSS-framework
• Monaco Editor - Koodieditori (VS Code:n editori)
• Lucide React - Ikonit
• LocalStorage - Edistymisen tallennus

Uusia kursseja ja oppitunteja voi lisätä muokkaamalla src/data/courses.js tiedostoa:

export const courses = {
  // Lisää uusi kurssi tähän
  newCourse: {
    id: 'newCourse',
    title: 'Uusi Kurssi',
    description: 'Kurssin kuvaus',
    icon: '🆕',
    color: 'blue',
    difficulty: 'Aloittelija',
    estimatedTime: '4-6 tuntia',
    chapters: [
      {
        id: 'chapter1',
        title: 'Ensimmäinen luku',
        lessons: [
          {
            id: 'lesson1',
            title: 'Ensimmäinen oppitunti',
            content: 'Oppitunnin sisältö markdownina',
            codeExample: 'console.log("Esimerkki");',
            exercises: [
              {
                id: 'exercise1',
                title: 'Harjoitus 1',
                description: 'Harjoituksen kuvaus',
                starterCode: '// Aloituskoodi',
                solution: '// Ratkaisu'
              }
            ]
          }
        ]
      }
    ]
  }
};

• Käyttäjätilit ja kirjautuminen
• Tietokantaan tallennus
• Quizit oppituntien lopussa
• Sertifikaatit suoritetuista kursseista
• Koodiesimerkkien tallennus ja jako

• Yhteisöominaisuudet (kommentit, kysymykset)
• Opettajan dashboard
• Mobiilisovellus
• Offline-tuki
• Tekoälyavustaja

Tervetuloa osallistumaan projektin kehitykseen! Voit:

1. Raportoida bugeja
2. Ehdottaa uusia ominaisuuksia
3. Lisätä kurssisisältöä
4. Parantaa käyttöliittymää
5. Kirjoittaa dokumentaatiota

MIT License - Katso LICENSE tiedosto lisätiedoille.

• Monaco Editor - Microsoft
• TailwindCSS - Tailwind Labs
• Lucide - Lucide Contributors
• React - Meta

Opi ohjelmointia interaktiivisesti! 🚀