- Did you run into any “gotchas” along the way? If so, what were they and how did you address them?
- HTTPS vs HTTP - API fetching - error reading
- Next rewrite - dove into docs
- Session Next Auth typing modification - dove into docs
- How did you handle forms? In a largely form-driven project, would you do anything differently? If so, what?
- Formik - validation
- Less CLS - better UI
- Form driven project- I would use State MGMT like context, redux, etc.
- Likely not fetch one item at a time- did it to show off pagination for an array with a length of 4
- How did you handle authorization? In your ideal FE/BE scenario, what auth strategy would you use?
- Used- Next auth - secure cookies & JWT tokens
- Ideal - Combination of JWT & Sessions- love to talk more about this.
- Passwordless / 2FA
- Is there anything you’d like to share about your project prior to my evaluating it?
- I enjoyed it!
- With more time I would match the styling to Curbee
- How long did you spend on this exercise? If you had unlimited more time to spend on this, how would you spend it and how would you prioritize each item?
- About 8 hours?
- Performance- Lighthouse scores
- Enormous network payloads #1 issue
- Minification: Minification involves removing whitespace and comments from your code, reducing its size. You can use a tool like UglifyJS or Terser to minify your code.
- Compression: Enabling compression for your assets can greatly reduce the network payload. Next.js supports gzip compression out of the box, which can be enabled by setting the "compression" configuration option.
- Caching: Caching can help reduce the number of requests made by the client, as assets that have already been downloaded are stored in the client's cache. You can use the "Cache-Control" header to set caching policies for your assets.
- Remove Unused Code and Assets: Make sure to remove any code and assets that are no longer being used in your application. This will reduce the size of your codebase and the network payload.
- Enormous network payloads #1 issue
- User Experience / Interface - Styling
- Testing
- Reponsiveness
- Commenting / documentation