Egzamin Programista to darmowa, open-source'owa platforma internetowa stworzona z myślą o uczniach techników informatycznych przygotowujących się do egzaminów zawodowych INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi) oraz INF.04 (Projektowanie i programowanie aplikacji).
Jako uczeń, który sam przeszedł przez stresujący proces przygotowań do egzaminów zawodowych, zdecydowałem się stworzyć narzędzie, które pomoże innym w skutecznej nauce. Platforma zawiera:
- ✅ Ponad 2000 pytań z oficjalnej bazy CKE
- ✅ Symulacje prawdziwych egzaminów z timerem 60 minut
- ✅ Szczegółowe wyniki z analizą błędów
- ✅ Arkusze praktyczne z poprzednich lat
- ✅ 100% za darmo - bez reklam, bez ukrytych kosztów
Rozwiązuj testy składające się z 40 losowych pytań z wybranej kwalifikacji. Każdy test symuluje prawdziwe warunki egzaminacyjne z limitem czasu 60 minut.
Cechy testów:
- 📊 40 losowych pytań z bazy ponad 2000 pytań
- ⏱️ Timer odliczający czas (60 minut)
- 🖼️ Pytania z obrazami (jak na prawdziwym egzaminie)
- 📝 Możliwość nawigacji między pytaniami
- 💾 Automatyczny zapis postępu
Wiele pytań zawiera ilustracje, wykresy lub fragmenty kodu - dokładnie tak jak na oficjalnym egzaminie CKE.
Przejrzysty interfejs pokazuje postęp, pozostały czas oraz umożliwia szybką nawigację między pytaniami.
Funkcje podczas testu:
- 🎯 Wskaźnik postępu (np. "Pytanie 5 z 40")
- 🕐 Widoczny timer z ostrzeżeniem gdy zostaje mało czasu
- 🗺️ Mapa pytań (widok wszystkich 40 pytań)
- ✅ Oznaczenie odpowiedzianych pytań kolorem
⚠️ Możliwość zgłoszenia błędu w pytaniu
Po zakończeniu testu otrzymujesz pełną analizę swoich odpowiedzi wraz z poprawnymi odpowiedziami.
Co pokazują wyniki:
- 🎯 Procent poprawnych odpowiedzi
- ✅ Liczba poprawnych odpowiedzi
- ❌ Liczba błędnych odpowiedzi
- ⏱️ Czas realizacji testu
- 📝 Przegląd wszystkich pytań z zaznaczeniem:
- Twojej odpowiedzi
- Poprawnej odpowiedzi
- Wyjaśnienia (aktualnie niedostępne)
Platforma wspiera tryb ciemny, który jest łagodniejszy dla oczu podczas długich sesji nauki.
Projekt został zbudowany z wykorzystaniem nowoczesnych technologii webowych:
| Frontend | Backend & Database | Narzędzia |
|---|---|---|
| ⚛️ React 18 | 🗄️ Supabase | 📦 Vite |
| 📘 TypeScript | 🔐 PostgreSQL | 🎨 Tailwind CSS |
| 🧭 React Router | ☁️ Vercel | 🧩 Shadcn/ui |
| 🎣 React Hooks | 📊 Vercel Analytics | 🔔 Sonner |
Dlaczego te technologie?
- React + TypeScript: Zapewnia type-safety i łatwiejsze utrzymanie kodu
- Supabase: Darmowa baza danych w chmurze z prostym API
- Tailwind CSS: Szybkie stylowanie bez pisania CSS
- Vercel: Darmowy hosting z automatycznym deploymentem
Odwiedź: egzamin-programista.vercel.app
Na stronie głównej kliknij "Test Teoretyczny", a następnie wybierz:
- INF.03 - jeśli przygotowujesz się do egzaminu z tworzenia stron internetowych
- INF.04 - jeśli przygotowujesz się do egzaminu z programowania aplikacji
- Test składa się z 40 losowych pytań
- Masz 60 minut na rozwiązanie
- Możesz nawigować między pytaniami w dowolnej kolejności
- Na boku ekranu widzisz timer i mapę pytań
- Po odpowiedzeniu na wszystkie pytania (lub gdy skończy się czas) kliknij "Zakończ"
- Zobaczysz szczegółowe wyniki ze wszystkimi pytaniami
- Sprawdź swoje błędy i ucz się na nich!
- 📅 Rób testy regularnie - powtarzanie jest kluczem do sukcesu
- 🎯 Analizuj błędy - zawsze sprawdzaj dlaczego się pomyliłeś
- ⏱️ Ćwicz pod presją czasu - na prawdziwym egzaminie też będzie limit
- 📱 Używaj na telefonie - strona jest w pełni responsywna
- 🌙 Wybierz tryb ciemny - jeśli uczysz się wieczorem
egzamin-programista/
├── public/
│ ├── inf03-images/ # Obrazy do pytań INF.03
│ └── inf04-images/ # Obrazy do pytań INF.04
├── src/
│ ├── components/ # Komponenty React
│ │ ├── Home/ # Strona główna
│ │ ├── Theory/ # Sekcja testów teoretycznych
│ │ ├── Practice/ # Sekcja praktyczna (w przygotowaniu)
│ │ └── ui/ # Komponenty UI (przyciski, karty, itp.)
│ ├── hooks/ # Custom React hooks
│ ├── types/ # Typy TypeScript
│ └── utils/ # Narzędzia pomocnicze
Projekt jest open-source i każdy może wnieść swój wkład! Oto jak możesz pomóc:
- Zgłoś go w zakładce Issues
- Opisz problem dokładnie (co się dzieje, co powinno się dziać)
- Dodaj screenshoty jeśli to możliwe
- Otwórz Issue z tagiem "enhancement"
- Opisz dokładnie jaką funkcję chciałbyś dodać i dlaczego
- System testów teoretycznych (INF.03 i INF.04)
- Ponad 2000 pytań w bazie danych
- Timer i śledzenie postępu
- Szczegółowe wyniki
- System zgłaszania błędów w pytaniach
- Tryb ciemny
- Responsywny design (mobile/tablet/desktop)
- Optimalizacja SEO
- Sekcja arkuszy praktycznych z poprzednich lat
- Pobieranie plików ZIP z arkuszami
- Przykładowe rozwiązania do arkuszy
- Historia wyników użytkownika
- Link do udestępnienia swojego wyniku
- Tryb praktyki (bez timera)
- Statystyki dla każdego pytania
- System tagów/kategorii pytań
- Użytkownik odpowiada na 1 pytanie na raz i odrazu otrzymuje odpowiedź
- Konto użytkownika (opcjonalne)
Czy strona jest naprawdę darmowa?
Tak! Projekt jest całkowicie darmowy i nie zawiera reklam. Jest to projekt non-profit stworzony aby pomóc uczniom.
Skąd pochodzą pytania?
Wszystkie pytania pochodzą z oficjalnej bazy CKE (Centralna Komisja Egzaminacyjna) i są tymi samymi pytaniami które mogą pojawić się na prawdziwym egzaminie.
Czy mogę używać strony na telefonie?
Tak! Strona jest w pełni responsywna i działa świetnie na telefonach, tabletach i komputerach.
Czy moje wyniki są gdzieś zapisywane?
Wyniki są zapisywane lokalnie w Twojej przeglądarce (localStorage). Nie wysyłamy ich na żaden serwer, więc są całkowicie prywatne.
Co jeśli znajdę błąd w pytaniu?
Podczas rozwiązywania testu możesz kliknąć ikonę flagi obok pytania i zgłosić problem. Sprawdzimy zgłoszenie i naprawimy błąd.
Czy mogę pobrać stronę i używać offline?
Obecnie nie, ale jest to w planach. Na razie potrzebujesz połączenia internetowego aby korzystać ze strony.
Jeśli projekt Ci się podoba i pomógł w przygotowaniach do egzaminu:
- ⭐ Zostaw gwiazdkę na GitHub
- 📢 Podziel się z kolegami z klasy
- 🐛 Zgłaszaj błędy i pomysły na ulepszenia
- 💻 Dołącz do rozwoju - każdy Pull Request jest mile widziany!
Ten projekt był dla mnie bardzo fajną przygodą, traktowałem go jako okazją do nauki reacta, baz danych, componentów, logicznego myślenia oraz pewnych działań. Oczywiście że natrafiłem na wiele problemów np. kompunkacją między komponentami, zwłaszcza przy TypeScript'cie, który nie wybacza błędów! Starałem się używać jak najmniej AI to możliwe, ponieważ miała to głównie być formą nauki.
| Metryka | Wartość |
|---|---|
| ⏱️ Czas pracy | ~80-150 godzin |
| 💾 Baza danych | 2000+ pytań |
| 📝 Linii kodu | ~11000+ linii |
| 🎨 Komponentów React | 40+ komponentów |
| 🖼️ Obrazów | 650+ obrazów do pytań |
| 🐛 Poprawek | 100+ commitów |
Projekt był doskonałą okazją do nauki i praktyki w prawdziwym środowisku:
- ⚛️ React 18 - Hooks, Context, Lazy Loading, Memoization
- 📘 TypeScript - Typy, Interfejsy, Generics
- 🎨 Tailwind CSS - Utility-first styling, Responsive design
- 🧩 Radix UI - Accessible komponenty, Compound components
- 🔄 React Router - Routing, Navigation, Lazy routes
- 🗄️ Supabase - PostgreSQL, Real-time subscriptions
- 📊 SQL - Queries, Joins, Indexing, Optymalizacja
- 🔐 Authentication (planowane) - User management
- 📁 File Storage - Obrazy pytań, CDN
- ☁️ Vercel - Continuous deployment, Edge functions
- 🔧 Vite - Build optimization, Hot Module Replacement
- 📊 Analytics - Performance monitoring
- 🌐 SEO - Meta tags, Sitemap, Structured data
- 🎯 Problem Solving - Debugging, Optymalizacja performance
- 📝 Dokumentacja - README, Code comments
- 🐛 Testing - Error boundaries, Edge cases
- 🎨 UI/UX Design - User flow, Accessibility
- Rozpoczęcie projektu od samego zera oraz dobranie odpowiedniego "Tech Stack"
- Komunikacja między bazą danych, a aplikacją
- TypeScript fragmentami jest wstanie narobić problemów
- Problemów było znacznie więcej, ale o to chodzi w programowaniu, aby rozwiązywać problemy 🙂
ABSOLUTNIE TAK! 🎉
Ten projekt nauczył mnie więcej niż setki tutoriali. Uczenie się przez praktykę to najlepsza metoda! Jeśli jesteś początkującym programistą - zrób własny projekt. Nie musi być idealny, ważne żeby był:
- ✅ Rozwiązywał prawdziwy problem
- ✅ Wymagał nauki nowych rzeczy
- ✅ Mógł być pokazany w portfolio
- ✅ Pomagał innym ludziom
Jeśli chcesz stworzyć podobny projekt, polecam:
- 📖 React Docs (beta) - Najlepsza dokumentacja React
- 🎨 Tailwind CSS - Docs + przykłady
- 🗄️ Supabase Docs - Backend w 5 minut
- 🧩 Shadcn/ui - Accessible komponenty
- 📘 TypeScript Handbook - Od podstaw do zaawansowanych
(tutoriale na youtube też są również bardzo dobrą opcją na początek - (JavaScript Mastery, Bro Code))
Ten projekt jest dostępny na licencji MIT. Zobacz plik LICENSE dla więcej informacji.
