- Fork la acest repo
git clone
la forkul nou creat (nu acest repo)npm install
pentru a descărca toate dependențele necesare- Creează un branch nou
project
dinmain
și lucrează pe el - Oferă-mi access la fork, de pe GitHub
settings/access
, invită un colaborator, cautăvictor@locoman.ro
- Adaugă 2-3 colegi la colaboratori ca să vă ajutați reciproc prin feedback la cod/soluție
- Copiază fișierul
.env.example
în.env.local
și completează-l
- rulează instrucțiunea
npm run dev
- va porni serverul local - intră pe http://localhost:3000/, ar trebui să vezi mesajul "Moviebase is up and running"
Este serverul nostru și are grijă ca partea de React să se încarce cum trebuie.
Se ocupă de UI. Noi scriem componente care depind de state
. React are grijă să afișeze în DOM
componentele noastre în dependență de state
. Matematic vorbind:
UI = React(state)
Folosim 🪝hooks pentru cod frumos.
Ne permite să scriem CSS fără să scriem CSS 🤩. Și mai are și multe componente gata făcute. Nu e nevoie să-l folosiți pentru a scrie cod, CSS-ul poate fi folosit în continuare. Dar, există opțiunea să o faceți mai simplu, diferit.
Are grijă de operațiile async din React.
O bază de date populară.
The Movie Database oferă un API puternic, bogat în funcționalități. De la ei vom lua filmele și tot ce ne interesează despre filme.
A: Nu e necesar, sunt doar alegerea mea. Te invit să înlocuiești oricare din ele după bun plac. E un exercițiu bun să faci același proiect cu tehnologii diferite.
Utilizatorul dorește să privească un film și are nevoie de ajutor să aleagă filmul potrivit.
Ii oferim o aplicație prin care să poată salva filmele favorite și filmele privite. Pe baza acestor informații vom oferi recomandări.
Vom face o aplicație web unde utilizatorul va putea căuta filmele preferate, și apoi le poate salva în favorite/istoric. Informația despre filme va fi luată de pe TMDB prin API-ul lor. Stocarea informațiilor se va face în baza noastră de date, care o vom putea accesa printr-un server. Recomandările le vom face pe baza informațiilor din BD.
components
- componente de React, orice nu este paginăpages
- paginile aplicației, pentru fiecare fișier, va exista o rutăapi
- rutele de backend, asemănător cu cele din express
public
- fișierele statice pentru Reactutils
- Câteva funcții refolosite prin codenv.example
- fișierul de configurare ce trebuie copiat în.env.local
Acum să trecem la muncă.
- Completează aplicația cu mai multe detalii (exemple: adaugă mai multe detalii pe search, schimbă lista cu rezultate, adaugă mai multe detalii pe pagina unui film, schimbă design-ul aplicației, etc...)
- Implementează watchlist-ul. Utilizatorul trebuie să poată adăuga ușor un film în watchlist, apoi ar trebui să poată vedea aceste filme într-o listă undeva
- Implementează istoricul. Asemănător cu watchlist-ul, dar poți adăuga funcționalități noi. De exemplu, atunci când adaugi un film în istoric, îl ștergi din watchlist dacă era acolo. Sau să poți modifica data când ai privit un anumit film (în caz că ți-ai adus aminte că de fapt ai privit un film acum un an și vrei să-l ai frumos în aplicație)
- Implementează recomandările. Pagina cu recomandări ar trebui să includă câteva filme sugerate utilizatorului. Aici poți să te bazezi pe watchlist, istoric și TMDB (care are câteva api-uri utile pentru asta). Poți face mai multe tipuri de recomandări
- Combină toate funcționalitățile pentru a crea homepage-ul. Aș pune câte o parte din fiecare funcționalitate, de exemplu 3 filme din istoric, 3 filme din watchlist, 3 recomandări, un search rapid, etc...
- Bonus. Te provoc să adaugi ceva nou, orice consideri interesant