Skip to content

Commit 348d5ab

Browse files
DNR500DNR500
committed
docs: update README
1 parent cd0e94e commit 348d5ab

File tree

1 file changed

+170
-17
lines changed

1 file changed

+170
-17
lines changed

‎README.md‎

Lines changed: 170 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,188 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
44

55
## Getting Started
66

7-
First, run the development server:
7+
### Setup your env file
8+
9+
You will need to obtain an access token from TMDB - https://www.themoviedb.org/settings/api.
10+
11+
You can sign up and create an account if you don't already have one.
12+
13+
You will need your API Read Access Token. Then create a file in the root folder of this project called `.env.local`.
14+
15+
It should look like the following. Add your token
16+
17+
```bash
18+
# api code
19+
MOVIE_DB_ACCESS_TOKEN=YOUR-TOKEN-HERE
20+
MOVIES_SEARCH_REVALIDATE=300
21+
MOVIES_DETAIL_REVALIDATE=3600
22+
MOVIES_CONFIGURATION_REVALIDATE=7200
23+
24+
# server side page component code
25+
SEARCH_REVALIDATE_TIME=300
26+
MOVIE_REVALIDATE_TIME=3600
27+
28+
# client side code
29+
NEXT_PUBLIC_CLIENT_SIDE_SEARCH_REVALIDATE_TIME=300
30+
NEXT_PUBLIC_CLIENT_SIDE_MOVIE_REVALIDATE_TIME=3600
31+
32+
# current domain
33+
NEXT_PUBLIC_SITE_URL=http://localhost:3000
34+
```
35+
36+
### Production build of the app
37+
38+
To see the app running optimally you can do a production build of the app and see that working locally.
39+
40+
```bash
41+
npm run build
42+
npm run start
43+
```
44+
45+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
46+
47+
### Local development run
48+
49+
To benefit from hot reloading while working on the app you can run..
850

951
```bash
1052
npm run dev
11-
# or
12-
yarn dev
13-
# or
14-
pnpm dev
15-
# or
16-
bun dev
1753
```
1854

1955
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
2056

21-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
57+
### Dev scripts
58+
59+
See the scripts section of the package.json for scripts
60+
61+
```bash
62+
npm run lint
63+
npm run test
64+
npm run typecheck
65+
```
66+
### Code formating
67+
The project uses eslint and prettier to manage code format
68+
69+
## Technical Decisions
70+
71+
### General approach
72+
73+
The basic idea here was to first build a working skeleton for the whole app and then be able to drill in to
74+
parts of the code later to make improvements and enhance and improve the experience. I have been very constrained
75+
in terms of time available to work on this so I aimed to get something that I could demo. There are lots of improvements
76+
that I would make and certainly in terms of process I would probably work a bit differently ifI was doing this for me day job.
77+
78+
79+
### Why use Next.js
80+
81+
I prefer to keep API keys and Access Tokens server side where possible.
82+
83+
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.
84+
85+
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.
86+
87+
So it made sense to establish BFF for the frontend app.
88+
89+
### data API
90+
91+
We have two data api endpoints
92+
93+
- The search `/api/movies?search=cars&page=3`
94+
- The code for which is in `src/app/api/movies/route.ts`
95+
- The movie details - `/api/movies/21192`
96+
- The code for which is in `src/app/api/movies/[movieId]/route.ts`
97+
98+
The search uses
99+
- TMDB's search endpoint `https://api.themoviedb.org/3/search/movie?query=car&page=1`
100+
- and also the TMDB's configuration endpoint `https://api.themoviedb.org/3/configuration`
101+
102+
The movie details uses
103+
- TMDB's movie endpoint `https://api.themoviedb.org/3/movie/11`
104+
- and also the TMDB's configuration endpoint `https://api.themoviedb.org/3/configuration`
105+
106+
We assume that the data here will not change very often and take full advantage of the in memory caching
107+
feature that has been added to fetch for Next.js. We establish cache times like the following
108+
- 5 mins for search results - many movies so might change more frequently that the other data
109+
- 1 hour for movie details - unlikely to change often
110+
- 2 hours for configuration - might rarely change
111+
112+
Env variables are also established to allow these times to be controlled and adjusted
113+
114+
Configuration is currently used to build the full image urls on both our endpoints.
115+
The configuration response from TMDB is cached in memory - while cached it can be accessed relatively quickly with
116+
benefits to all users of the endpoint.
117+
118+
Our endpoints build and aggregate data for the frontend to consume data from multiple sources but using a single request.
119+
120+
### Client code
121+
122+
I am using the App router here rather than the Page router in Next.
123+
124+
We have two frontend pages
125+
126+
- The search page `/` - http://localhost:3000/?search=Cars&page=9
127+
- The code for which starts in `src/app/page.tsx`
128+
- The movie details page `/movies/:movieId` - `http://localhost:3000/movies/1726-iron-man`
129+
- The code for which starts in `src/app/movies/[movieId]/page.tsx`
130+
131+
They use a share layout that is defined in `src/app/layout.tsx`
132+
133+
Both the pages mentioned are serverside rendered they did a fetch to get teh data for the pages initial load
134+
and pass that data to the frontend for hydration - which again can take advantage of Next.js in memory caching.
135+
Cache times can be configured in the env file.
136+
137+
### Tanstack Query hydration
138+
139+
I have also decided to use Tanstack Query hydration as a pattern.
140+
This allows the serverside render not only hydrate React and quickly present the HTML but also means the
141+
Tanstack Query cache can be hydrated. Once loaded and configured on the frontend Tanstack Query can take
142+
over the data loading and give the users benefits of frontend cache data while they go backwards
143+
and forwards in the search page.
144+
145+
I have also used this on the movie details page. You could argue here that the frontend cache is not as useful
146+
as caching on the search page But should the users again go back and forth between search and movie details pages
147+
maybe view the same page movie details multiple times then this will feel a little more performant to the user.
148+
I also decide to be consistent across the two pages how their data is initialised and hydrated.
149+
150+
### Styling
151+
152+
I have used frameworks like styled components and emotion on projects before but know from experience that these
153+
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
154+
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
155+
and spacing tokens that are very useful.
156+
157+
### General Tests
158+
159+
I have written some tests around the endpoints
160+
161+
- `src/app/api/movies/route.test.ts`
162+
- `src/app/api/movies/[movieId]/route.test.ts`
22163

23-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
164+
And some tests around the search page that are integration tests in style
24165

25-
## Learn More
166+
- `src/features/home/HomeSearchSection.test.tsx`
26167

27-
To learn more about Next.js, take a look at the following resources:
168+
I would normally write more tests. There are other tests that I could write for the HomeSearchSection,
169+
I would write more tests for the MovieDetailsSection, test the hydration handling on the serverside page.tsx as
170+
well as test some of the components in isolation. I just didn't have the time here to do what I would have liked to do.
28171

29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
172+
### Future improvements
31173

32-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
174+
I had limited time so here are a few other things I would look at..
33175

34-
## Deploy on Vercel
176+
- More tests
177+
- Manual testing around accessibility
178+
- Storybook for individual components - this would actually make working on the components a breeze.
179+
- Better display for small screens - I would love to put more time into this, I think the search page could be optimised quite nicely for smaller screens
180+
- You could even add additional image sizes to the api endpoint and use different image sizes for different media queries
181+
- Optimise our endpoints but reducing the payload size - that is currently data we send to the frontend that isn't used
182+
- It's not the prettiest web app (I'm not really a designer) again with a bit more time it would be good to put a bit more polish on it terms of looks
183+
- Add husky to get checks running on push
184+
- Start to move the components into their own folders and using barrel files. The folders would contain tests, storybook files and other sub-components
185+
- There is still some opportunity for code reuse in the endpoints and some of the components (such as MovieListItem and MovieDetailsView)
35186

36-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
187+
### What I would have done differently
37188

38-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
189+
I haven't actually worked much with Tanstack Query hydration in the past and in my real day to day job I would probably
190+
want to do a spike of that before committing to doing it with production code. Because I'm doing this in my free time
191+
I thought that try this new approach would make the challenge a bit more interesting for myself.

0 commit comments

Comments
 (0)