Mews Assignment

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "root": true,
+  "ignorePatterns": ["!**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "mose",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "mose",
+            "style": "kebab-case"
+          }
+        ],
+        "no-unused-vars": "warn",
+        "no-console": "error"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -0,0 +1,60 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # Connect your workspace on nx.app and uncomment this to enable task distribution.
+      # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "e2e-ci" targets have been requested
+      # - run: npx nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="e2e-ci"
+
+      # Cache node_modules
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - uses: nrwl/nx-set-shas@v4
+
+      - run: git branch --track main origin/main
+        if: ${{ github.event_name == 'pull_request' }}
+
+      - run: npx nx-cloud record -- nx format:check
+
+      - run: npx nx affected -t lint test build e2e-ci
+
+      # TODO: Have the version bump and artifact upload after each PR is merged
+      # - name: Automated Version Bump
+      #   uses: phips28/[email protected]
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+
+      - run: npm run build:prod
+
+      # - name: Upload Artifact
+      #   uses: actions/upload-artifact@v2
+      #   with:
+      #     name: dist
+      #     path: dist/chuck-norris-joke-generator/browser
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: dist/movie-search/browser # The folder the action should deploy.
+          token: ${{ secrets.GH_TOKEN }} # The GitHub token.
+

.gitignore

@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache
+.angular
+
+misc/
+.env

.prettierignore

@@ -0,0 +1,6 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+.angular
+tsconfig.json

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner"
+  ]
+}

README.md

@@ -1,2 +1,126 @@
-# movie-search
+# Movie Search
+
 A simple movie search web application
+
+URL: https://ronancodes.github.io/movie-search/#/search
+
+## Screenshots
+
+![Mobile Search](readme-assets/mobile-search.png)
+![Mobile Detail](readme-assets/mobile-detail.png)
+![Browser Search](readme-assets/browser-search.png)
+![Browser Detail](readme-assets/browser-detail.png)
+
+## Initial Requirements
+
+- 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.
+- Use the Movie DB API: https://developers.themoviedb.org/3/getting-started/introduction
+
+## Initial setup
+
+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
+
+### Setup Properties
+
+npx create-nx-workspace@latest movie-search --preset=angular-standalone
+
+```sh
+✔ 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 · github
+```
+
+## Angular Material
+
+> npx nx add @angular/material
+
+## Testing
+
+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.
+
+# Next pieces of work
+
+- [] 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
+
+# NX Default Readme
+
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+
+✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
+
+## Integrate with editors
+
+Enhance your Nx experience by installing [Nx Console](https://nx.dev/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.
+
+## Start the application
+
+Run `npx nx serve movie-search` to start the development server. Happy coding!
+
+## Build for production
+
+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.
+
+## Running tasks
+
+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](https://nx.dev/features/run-tasks).
+
+## Set up CI!
+
+Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
+
+- [Set up remote caching](https://nx.dev/features/share-your-cache)
+- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
+- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+
+## Explore the project graph
+
+Run `npx nx graph` to show the graph of the workspace.
+It will show tasks that you can run with Nx.
+
+- [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph)
+
+## Connect with us!
+
+- [Join the community](https://nx.dev/community)
+- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+- [Follow us on Twitter](https://twitter.com/nxdevtools)

e2e/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    }
+  ],
+  "plugins": ["@nx"],
+  "extends": ["plugin:cypress/recommended"]
+}

e2e/cypress.config.ts

@@ -0,0 +1,17 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      webServerCommands: {
+        default: 'nx run movie-search:serve:development',
+        production: 'nx run movie-search:serve:production',
+      },
+      ciWebServerCommand: 'nx run movie-search:serve-static',
+    }),
+    baseUrl: 'http://localhost:4200',
+  },
+});

e2e/project.json

@@ -0,0 +1,10 @@
+{
+  "name": "e2e",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "e2e/src",
+  "tags": [],
+  "implicitDependencies": ["movie-search"],
+  "// targets": "to see all targets run: nx show project e2e --web",
+  "targets": {}
+}

e2e/src/e2e/app.cy.ts

@@ -0,0 +1,13 @@
+import { getHeading } from '../support/app.po';
+
+describe('e2e', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    // cy.login('[email protected]', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getHeading().contains(/Movie Search/);
+  });
+});

e2e/src/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getHeading = () => cy.get('mat-toolbar span');