/mytheresa

Primary LanguageJavaScriptMIT LicenseMIT

Mytheresa

Test task: TMDB

3 categories of movies from TMDB are presented in the form of carousels and you can click the movie poster to go to the movie details page, each category has a unique theme presented on the movie page that belongs to that category

How to:

  1. git clone https://github.com/EmeraldWeb/mytheresa.git - clone this repo
  2. add .env file (which I sent to you separately) in the root directory of your local repo
  3. npm i --no-save - install dependencies, you will need a Node.js
  4. npm run prod - build bundle and serve webpackDevServer, which open a page localhost:9000 in your default browser

Other commands you may find useful

(Full list in package.json "scripts")
  • npm run build only production build
  • npm run lint code linting
  • npm run test code testing
  • npm run test:coverage test coverage

Tech stack:

  • Webpack for bundling
  • React for building UI
  • React Router for SPA navigation
  • Zustand as lightweight store/state manager
  • SASS/SCSS for styling
  • Jest & Enzyme for testing
  • Eslint & Stylelint for linting scripts and styles
  • Babel & PostCSS for cross browser features

About tech stack

Wish list in Local Storage

Task contains "There should be a wish list section" I save wish list in local storage, but I don't understand "where is list section" in your proto layout, so I just show "wished" state of movies in carousels.

Testing with Jest-Enzyme

In this task Jest-Enzyme tech stack was implemented for testing, because I know what in Mytheresa you're prefer Enzyme.
But in Enzyme there are still no support for React 18 (for this and other reasons I prefer Testing Library). Moreover, maintainer of an adapter for React 17, considers what Enzyme is dead.
So I used unofficial adapter for it @cfaester/enzyme-adapter-react-18

Prop types and TypeScript

There was a restriction "no usage of TypeScript", I believe that for type checking should be used proper instruments, like TypeScript but Prop types are obsolete and almost useless, so there is no type checking. (and frankly speaking I didn't have enough time to recall and implement them).

SSR

There was a restriction "Do not use any boilerplate/starter kit", My SSR skills based on frameworks (Next.js and react-starter-kit by Kriasoft), so without them I didn't find time to implement SSR (And I've got a cold T_T).

Zustand

Zustand is awesome. I recommend to replace Redux-RTK in your project (if you use them) with Zustand.