fanvue-challenge

Setup

npm install

npm run dev

Open: http://localhost:3000

Tech stack

• Next.js (App Router)
• Tailwind CSS + shadcn/ui

Security

CORS setup

In our current project (Next.js):

• For all routes, we can use this https://nextjs.org/docs/app/api-reference/config/next-config-js/headers
• If we want a middleware (dynamic CORS rules): https://nextjs.org/docs/app/api-reference/file-conventions/middleware#cors

Other backends (Express, Fastify, NestJS, etc) all have their own CORS setup guide and best practices.

XSS protection

• Avoid using dangerouslySetInnerHTML in React, to benefit from sanitized output.
• Define Content-Security-Policy (CSP) as per Next.js CSP Guide

CSRF protection

• For cookie-based sessions, keep it httpOnly and secure
• Define server actions & CORS (do not use '*' for allowed origins)
• Avoid GET mutations

Additional security notes

If budgets allow, use a pen testing 3rd party company to independently assess systems security!

Improvements (if time allowed)

• Endpoint inputs validation
• Sort imports in all files (and specify the type only imports)
• Lint all files (and commits)
• Re-review the code from start to finish
• Setup a real database (SQLite) and an ORM to get real data (more fun!)
• Add unit tests, integration tests and end-to-end tests
• I've left out of scope the actual actions (approve, reject, flag)
• I'd make the pagination more reusable (both on the frontend and the backend)
• I would not store the filter or status in localStorage; however if we had light/dark mode, we could consider storing the user's preference
• I would ask AI to review my code and try to find bugs!
• Implement the actual approve/reject/flag actions (currently marked as @todo)

AI / LLM usage

I ran out of time to list all the user prompts, however I used prompts:

• to review my tech choices and confirm scope
• to scaffold the shadcn/ui sidebar & table UI
• creating mock data
• to help debug a fonts issue I had when using Google Fonts and turbopack in dev mode (so I disabled it)
• squeezed in the details panel (90% AI-generated and the prompt was to ask for follow my existing coding conventions + parts of the README.md)

All output code can be viewed as mine as I had to rework all prompts outputs. Most importantly, all AI outputs are too verbose in general and the challenge would be an auto-fail (in my books). 😅

Performance considerations

• This solution assumes a small number of submitted apps; it's hard to demonstrate database queries... without a database (though we'd need to look at further optimising queries instead of dealing with a JSON payload full of mock data)
• Pagination helps alleviate UI performance issues; though users could have a slow connection (we have a basic loading indicator but UX can be improved to show nicer loading states)
• No memory concerns for the current implementation (it should be able to run forever, unless Next.js has an underlying memory leak)

Infrastructures

In no particular order, all are important and it depends on business priorities.

• Database: a good RDBMS will do (my go to would be PostgreSQL as it's battle-tested, performant and can scale for this use case, Neon as provider is great but any decent managed PostgreSQL can be considered)
• Environments: at the very least, staging and production (and separate database instances)
• Secrets management (and environment variables)
• Logging, exception capture (Datadog, Sentry, etc)
• Alerting (when things go down at 2AM, PagerDuty or similar)
• Assuming we use Vercel to have edge deployments and native Next.js support
• Without Vercel (e.g. standalone API), several other considerations need to be taken into account (AWS or GCP, serverless or not, etc)

Bonus points:

• The whole stack can run on a developer laptop
• Easy to setup and onboard other devs