TMDB-App

.gitignore

@@ -1,23 +1,44 @@
-!.gitkeep
-!.gitignore
-!*.dll
-[Oo]bj
-[Bb]in
-*.user
-*.suo
-*.[Cc]ache
-*.bak
-*.ncb
-*.DS_Store
-*.userprefs
-*.iml
-*.ncrunch*
-.*crunch*.local.xml
-.idea
-[Tt]humbs.db
-*.tgz
-*.sublime-*
-
-node_modules
-bower_components
-npm-debug.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+*storybook.log
+storybook-static

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-viewport'],
+  framework: {
+    name: '@storybook/nextjs-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/nextjs-vite';
+import '../src/app/globals.css';
+import { viewports } from './viewports';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      test: 'todo',
+    },
+
+    viewport: {
+      options: viewports,
+      defaultViewport: 'responsive',
+    },
+  },
+};
+
+export default preview;

.storybook/viewports.ts

@@ -0,0 +1,50 @@
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+
+export const viewports = {
+  ...MINIMAL_VIEWPORTS,
+  xs: {
+    name: 'xs (360px)',
+    styles: { width: '360px', height: '100%' },
+    type: 'mobile',
+  },
+  xsLargest: {
+    name: 'xs (639px)',
+    styles: { width: '639px', height: '100%' },
+    type: 'mobile',
+  },
+  sm: {
+    name: 'sm (640px)',
+    styles: { width: '640px', height: '100%' },
+    type: 'mobile',
+  },
+  smLargest: {
+    name: 'sm (767px)',
+    styles: { width: '767px', height: '100%' },
+    type: 'mobile',
+  },
+  md: {
+    name: 'md (768px)',
+    styles: { width: '768px', height: '100%' },
+    type: 'tablet',
+  },
+  mdLargest: {
+    name: 'md (1023px)',
+    styles: { width: '1023px', height: '100%' },
+    type: 'tablet',
+  },
+  lg: {
+    name: 'lg (1024px)',
+    styles: { width: '1024px', height: '100%' },
+    type: 'desktop',
+  },
+  xl: {
+    name: 'xl (1280px)',
+    styles: { width: '1280px', height: '100%' },
+    type: 'desktop',
+  },
+  '2xl': {
+    name: '2xl (1536px)',
+    styles: { width: '1536px', height: '100%' },
+    type: 'desktop',
+  },
+};

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

README.md

@@ -0,0 +1,142 @@
+# Movie App Next.js
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+### Setup your env file
+
+You will need to obtain an access token from TMDB - https://www.themoviedb.org/settings/api. 
+
+You can sign up and create an account if you don't already have one.
+
+You will need your API Read Access Token. Then create a file in the root folder of this project called `.env.local`. 
+
+It should look like the following. Add your token
+
+```bash
+# api code
+MOVIE_DB_ACCESS_TOKEN=YOUR-TOKEN-HERE
+MOVIES_SEARCH_REVALIDATE=300
+MOVIES_DETAIL_REVALIDATE=3600
+MOVIES_CONFIGURATION_REVALIDATE=7200
+
+# server side page component code
+SEARCH_REVALIDATE_TIME=300
+MOVIE_REVALIDATE_TIME=3600
+
+# client side code
+NEXT_PUBLIC_CLIENT_SIDE_SEARCH_REVALIDATE_TIME=300
+NEXT_PUBLIC_CLIENT_SIDE_MOVIE_REVALIDATE_TIME=3600
+
+# current domain
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+```
+
+The project uses npm. Run the follow to get set up.
+
+```
+npm i
+```
+
+### Production build of the app
+
+To see the app running optimally you can do a production build of the app and see that working locally.
+
+```bash
+npm run build
+npm run start
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+I would advise testing with the production build and using an incognito browser window.
+
+### Local development run
+
+To benefit from hot reloading while working on the app you can run..
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+There is also a Storybook set up
+
+```bash
+npm run storybook
+```
+
+It will run on http://localhost:6006/
+
+This will allow you to look at and work on specific components in isolation
+
+### Dev scripts
+
+See the scripts section of the package.json for scripts
+
+```bash
+npm run lint
+npm run test
+npm run typecheck
+```
+### Code formating
+The project uses eslint and prettier to manage code format
+
+## Technical Decisions
+
+### General approach
+
+The basic idea here was to first build a working skeleton for the whole app and then be able to drill in to
+parts of the code later to make improvements and enhance and improve the experience. I have been very constrained
+in terms of time available to work on this so I aimed to get something that I could demo. There are lots of improvements
+that I would make and certainly in terms of process I would probably work a bit differently if I was doing this for my day job.
+
+
+### Why use Next.js
+
+I prefer to keep API keys and Access Tokens server side where possible. 
+
+This is more secure and prevents malicious usage and also where services might be rate limited helps to protect our usage of external systems like TMDB.
+
+Next.js has the ability to set up backend api endpoints easily and also gives you the benefit of Next.js caching to optimise performance.
+
+So it made sense to establish BFF for the frontend app.
+
+### Site structure and caching strategy
+
+You can find information about this on the [Site Structure Overview document](../docs/site-structure-and-caching.md)
+
+
+### SSR Hydration Pattern with Tanstack Query
+
+For the search page we are using the SSR Hydration Pattern with Tanstack Query - you can read more about this in the
+[SSR Hydration Pattern with Tanstack Query document](../docs/hydration-pattern-with-tanstack-query.md)
+
+### Styling
+
+I have used frameworks like styled components and emotion on projects before but know from experience that these
+frameworks don't always work so nicely with Next.js and the App router. I decided to use Tailwind Css as I have worked a little
+with that before and it works well with App router in Next. Also Tailwind Css comes with a pre-made theme that gives some nice options for color palettes
+and spacing tokens that are very useful.
+
+### General Tests
+
+Most of the components and pages currently have unit tests, some tests would still be good for some of the utils in our lib folder
+
+### Future improvements
+
+- Additional error handling on the home page
+- Add husky to get checks running on push
+- Set up a pipeline using github actions and establish a live environment
+- Functional tests
+
+### What I would have done differently 
+
+I haven't actually worked much with Tanstack Query hydration in the past. I would probably 
+want to do a spike of that before committing to doing it with production code. Because I'm doing this in my free time
+I thought that try this new approach would make the challenge a bit more interesting for myself.
+
+I've focused on creating a small subset of components to show that I can work with basic HTML and think about semantic markup, but I would
+normally consider adopting a component library such as shadcn/ui for some of the basic components.