https://github.com/wendykr/words-game

Projekt ReactGirls Mentoringového programu.
https://github.com/wendykr/words-game

html react reactgirls scss supabase vite

Last synced: 4 days ago
JSON representation

Projekt ReactGirls Mentoringového programu.

• Host: GitHub
• URL: https://github.com/wendykr/words-game
• Owner: wendykr
• Created: 2023-10-06T12:31:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-07T04:46:36.000Z (12 months ago)
• Last Synced: 2024-12-06T16:19:49.259Z (2 months ago)
• Topics: html, react, reactgirls, scss, supabase, vite
• Language: JavaScript
• Homepage: https://words-game.netlify.app
• Size: 374 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# WORDS GAME

Projekt programu [ReactGirls Mentoring PODZIM 2023](https://reactgirls.com/mentoring)

- [Počáteční vize a cíle](#Pocatecni-vize-a-cile)

- [Abstrakt](#Abstrakt)

- [Rozsah a realizace](#Rozsah-a-realizace)

## Počáteční vize a cíle  

Vytvořit projekt, na kterém se chci naučit základy Reactu a současně mi bude aplikace pomocníkem při studování angličtiny.

## Abstrakt  

Hlavním tématem a cílem projektu bylo vytvořit aplikaci na procvičování anglické slovní zásoby s módy:  

- **Flashcard** - na kartičce zobrazit slovo, po kliknutí na kartičku ji otočit a zobrazit překlad slova.

- **Quiz** - do vstupního pole (*input*) psát překlad zobrazeného slova. S možností nápovědy prvního písmena (*Hint*), nebo zobrazení správného překladu slova (*Don't know*).

- **Match** - vybrat správný překlad zobrazeného slova kliknutím na jedno ze 3 náhodně vygenerovaných slov.

Napříč módy měnit výchozí nastavení aplikace v **Setting** - jazyk, počet slov, kategorizaci slov, oblíbená slova a zvuk.

## Rozsah a realizace

Stručný výčet znalostí, které jsem v projektu využila. *Uvádím znalosti týkající se Reactu - responsivitu a technické znalosti HTML/CSS považuji v tomto projektu jako samozřejmost.*

- rozdělení aplikace na menší celky do **komponent**

- práce s **`useState` a událostmi**

- formulářové prvky a **obousměrný data binding**

- **`useEffect` se závislostmi**

- **komunikace mezi komponentami**

- pokročilá komunikace **React Context** (`useContext`)

- přístup k DOM elementům skrze **Hook `useRef`**

- využití cloudové databáze **supabase** pro operaci s daty

- použití hotové **React knihovny** ([React Router](https://reactrouter.com/en/main), [Speech Synthesis](https://github.com/MikeyParton/react-speech-kit), [React Icons](https://react-icons.github.io/react-icons/))

- uložení projektu v repozitáři na **GitHubu** a jeho publikování na hostingovou službu **Netlify**