A simple movie search web application
URL: https://ronancodes.github.io/movie-search/#/search
- 2 views: search (default view) and movie detail
- Search: input and a paginated list of movies, with the ability to load another batch.
- Search should happen once you stop typing.
- Movie Detail: Click on movie from search page list and this view loads. It displays detailed information about the movie.
- Search: input and a paginated list of movies, with the ability to load another batch.
- Use the Movie DB API: https://developers.themoviedb.org/3/getting-started/introduction
I chose NX instead of the default Angular application as NX provides more modern tooling along with other benefits such as caching executors, and the usage of NX Cloud with GitHub Actions.
NX provides these defaults:
- Jest (instead of Jasmine & Karma)
- Cypress for e2e
- Prettier setup
npx create-nx-workspace@latest movie-search --preset=angular-standalone
✔ Which bundler would you like to use? · esbuild
✔ Default stylesheet format · scss
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? · No
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Set up CI with caching, distribution and test deflaking · githubnpx nx add @angular/material
I tested the Search Component, I skipped the Mat Input (I would have imported the NG Mat Test Harness to help here).
I did not create any real Cypress tests.
- [] Use data-cy attributes for cypress tests
- [] Have infinite scroll (auto pagination using intersection observer)
- [] Put the search query in the url rather than the data store
- [] Look into a store solution (NgXs?)
- [] Use has CSS selector to check if dark mode toggle was checked rather than adding a class to the root body element
- [] Add more detail to the search page, perhaps use cards instead of just names
- [] Add tests for all files
- [] Add happy flow e2e tests
- [] Add more media breakpoints for responsive design (mobile vs desktop)
- [] Add more to the detail page (more css grid, star ratings, etc)
- [] Use local storage to store last search term
- [] Add all colors to the shared stylesheet
- [] Allow light mode toggle
✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨
Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Run npx nx serve movie-search to start the development server. Happy coding!
Run npx nx build movie-search to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.
To execute tasks with Nx use the following syntax:
npx nx <target> <project> <...options>
You can also run multiple targets:
npx nx run-many -t <target1> <target2>
..or add -p to filter specific projects
npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json or projects.json. Learn more in the docs.
Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.
Run npx nx graph to show the graph of the workspace.
It will show tasks that you can run with Nx.