arkuar / movielist-app

MovieList App

App for reviewing movies. Review movies you have seen and see what other people thought about them.

Link to the app

Documentation

Work hour log

How to use

Installing

• Clone the repo to your own machine with git clone [email protected]:arkuar/movielist-app.git
• Navigate to the project folder and run npm install

To ensure you have full access to all the features, you need to add .env file to your project.

It should include atleast the following variables:

• MONGODB_URI specifying the MongoDB connection string to be used
• SECRET used in authentication to verify and sign the tokens
• OMDB_API_KEY API key that is used to fetch movies from OMDB API. You can get one from here.

In addition to these, there are some optional variables that you can specify:

• MONGODB_TEST if you want to run the tests. It should be a connection string to the test database.
• PORT specifying the port where the application should be started. If not specified, the application defaults to port 8000

You can check an example on how to specify these values from the .env.example file.

Run in development

To start the app in development mode just run the command npm run dev

Run in production

• Run npm run build which will build both the backend and frontend
• Run npm start

Running tests

You can run the tests with the command npm test.

Linting

Running command npm run lint will check the linting

Populating database

If you need to populate database with some initial data you can run command npm run seed.

movielist-app's Issues

Full Stack projektin katselmointi

Full Stack projektin katselmointi

Terve @arkuar! Tässä lyhyt katselmointi Full Stack kurssin projektistasi. Katselmoinnissa esitetyt kommentit ovat parannusehdotuksia, joita voit halutessasi ottaa huomioon tässä tai tulevissa projekteissasi. Mitään muutoksia tähän projektiin ei siis ole pakko tehdä suoritusmerkintää varten.

Käytettävyys

Mitä tein?

• Rekisteröin uuden käyttäjän
• Selasin elokuvia
• Lisäsin ja poistin arvosteluja
• Katsoin arvostelujani
• Kirjauduin ulos

Kokemus

• Elokuva-sovelluksella on helppokäyttöinen ja huoliteltu käyttöliittymä, mainiota työtä! 💎
• Arvosana-kentässä voisi olla jokin selite, joka kuvaa arvosanaskaalaa. Tällä hetkellä tulee ilmi vain virheviesteistä. Perinteinen tähtivalitsin voisi olla kätevä tähän tarkoitukseen
• Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen nopeuttaa sovelluksen käyttöönottoa, hyvä!
• Sovelluksen titlen voisi muuttaa kuvaavammaksi
• Lomakkeissa on kattavat validoinnit ja virhetilanteissa selkeät virheilmoitukset, hienoa!
• Notifikaatiot kertovat käyttäjälle selvästi, mitä sovelluksessa tapahtuu

Koodi

• Frontend-puolen koodi on kohtalaisen selkeästi organisoitua, hyvä! Client-hakemiston alla olevat komponentti-hakemistot voisi tosin ehkä laittaa esimerkiksi pages-nimiseen hakemistoon

• API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi

• API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query -kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi, uudelleenkäytettäväksii hookeiksi, kuten useMovies()

• Hyvä idea hyödyntää lomakkeiden tilanhallinnassa Formikia ja validoinnissa Yupia

• classnames on kätevä kirjasto luokkien nimien muodostamisessa

• Kirjautumisen vaativia reittejä varten voisi toteuttaa esim. AuthenticatedRoute-komponentin:

  const AuthenticatedRoute = ({ redirectTo = '/', ...routeProps }) => {
    const [{ username }] = useAuth();
  
    return username ? (
      <Route {...routeProps} />
    ) : (
      <Redirect to={redirectTo} />
    );
  };

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa!

• Reittien käsittelijöiden ainaisista try { ... } catch (e) { next(e) }-lohkoista pääsee helposti eroon express-async-errors-kirjaston avulla

• OMDB API:n kutsut on abstrahoitu hyvin OMDBApi.ts-tiedostoon. Samoin autentikaatioon liittyvät operaatiot on abstrahoitu hyvin AuthService.ts-tiedostoon

• Hyvän näköistä API:n integraatiotestausta

• CI-putki varmistaa sovelluksen toimivuuden testien ja linttauksen avulla sekä hoitaa tuotantoonviennin, hienoa!

Kokonaisuus

Elokuva sovelluksesta löytyy tarvittava toiminallisuus elokuvien selailuun ja arvosteluun. OMDB-integraatio on loistava lisä sovellukseen. Sovelluksen käyttö on helppoa, eikä ainakaan katselmoinnin aikana ilmennyt bugeja, tai erityisiä käytettävyysongelmia. Projektin koodi on kaikilta osin järkevästi organisoitu ja koodin laatu on korkea. Teknologioita, kuten TypeScript ja Tailwind on käytetty järkevästi. Hyvää työtä!