Image grid

The project comprises a backend (in expressjs) and a frontend (in nextjs).

## Backend To run the backend, you have to go to the folder:

$ cd backend

Get the packages:

$ npm install

And then just execute the server: $ npm run server

Currently, the port is 8080, so you can test the endpoint by going to http://localhost:8080/api/v1/photos?pageNumber=2. The pageNumber parameter is optional and defaults to 1.

## Frontend That is a normal nextjs app, so you have to go to the folder: $ cd frontend

Get the packages: $ npm install

And then just execute the server: $ npm run dev

It will run on http://localhost:3000.

what to expect

You should see something like that (for dark mode):

If you move the mouse, you will see a hover effect; if you click, the image will be bigger.

chrome-capture-2024-6-18.webm

Pagination and Image cache

Also, if you use the buttons below, you will move among the pages returned from the server, as it is using the NextJS's Image component, it caches the photos for a quicker loading.

record.pagination.webm

Responsiveness

Yes, it is responsive:

responsive.webm

And no, it is not in position absolute.

asolte.webm