Closest Boutiques

What's in This Document

You can see the challenge description here.

You can run this project on your local environment by following the simple steps below:

Clone the project and install the dependencies.

git clone git@github.com:lcnogueira/ft-ch.git
cd ft-ch/
yarn install

P.S.: if you don't have a NEXT_PUBLIC_MAPBOX_API_KEY, a leaflet default map will be rendered (rather than a Mapbox one)

The site is now running on http://localhost:3000.

You can find additionals commands inside the package.json file:

build: creates the production build version.
start: starts a simple server by running the build version (make sure you have created the build version before running this script).
lint: runs the linter against components and pages.
storybook: runs storybook on develop mode.
build-storybook: creates the build version of storybook.

You can use one of the following scripts to run the tests:

We use the .env.development file for loading a fake env var so that we can run our tests on the github CI.

I've filtered and sorted the data on my own API route since the provided challenge route API from Trouva doesn't seem to provide an option for that.
I decided to use the leaflet map (open source) instead of the google maps one to avoid having to create an api key (and adding a credit card).

Added a simple boutique details page that is displayed when the user clicks on a boutique marker. Those pages are statically rendered with an incremental approach, which is a great resource to have when we have a lot of pages and don't want to generate all of them at build time, but also don't want to generate the page every time the user requests it (SSR).
Added some simple unit tests.

Creating additional tests.
Tracking the location of the user and fetching the boutiques list every time his location changes above a threshold value (e.g. 1 km).
Creating a fallback option in case the user does not provide latitude and longitude values. Right now, the app only displays the boutiques if the user provides those values.
Displaying the user position marker.
Creating the components stories (we have storybook set up already).

This project was bootstrapped by using my own nextjs-boilerplate