Tech test with AG Grid and countries API.

The project is deployed here — https://db-research.vercel.app/

Repo is here https://github.com/v3nt/db-research (public)

Notes about the work

Built with react (Nextjs)
Typed
I used Tailwind for styling
TODOs where improvements could be made with more time
I manually created a filter for currencies instead of just using all of AG Grid's features
Added AG Grid pagination & sorting
https://restcountries.com API does not have pagination built in so all are loaded and paginated in the FE
Design is basic and i see it as more of a working Wireframe
Login setup for NextAuth with Google & Github. (Protection disabled for interview but protected paths can be added to middleware.ts)
No testing added. Would use Vitest for unit testing the components

Protecting a page

Add paths to matcher array in middleware.ts -

// '/*' protects all routes
export const config = { matcher: ['/dashboard:path*', '/dashboard(.*)', '/*'] };

Getting Started if you want to run locally

You will need a .env.local file with —

NEXT_PUBLIC_COUNTRIES_BASE_URL=https://restcountries.com/v3.1
# for sign on functionality
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
NEXTAUTH_URL=
NEXTAUTH_SECRET=

(You will need app IDs & secrets)

Remote configs for logins

Running locally

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.