This is a Next.js project bootstrapped with
create-next-app
.
Its a reusable table component in React that gets invoice data and builds the table according to the data. It uses Tailwind CSS and a simple JS fetch hook to get the API data. This is for a tech test and has taken me around 4 hours to complete.
- clone the main branch locally
In the project root directory,
-
install dependences by running
yarn
-
run the following in terminal to get around CORS issues - this will open a new chrome window ready for http://localhost:3000 (This gets around CORS issue locally otherwise the api data will not be returned)
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security
to solve the CORS issue correctly, we would need to update the server side to configure the backend to allow for Cross origin request
Another way would be to make proxy server - simmilar to this link https://github.com/Rob--W/cors-anywhere
4.First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with the browser from point 3. to see the result.
This project uses
next/font
to
automatically optimize and load Inter, a custom Google Font.