lcnogueira/ft-ch

Closest boutiques

Closest Boutiques

What's in This Document

• The Challenge
• Get Up and Running
  • Additional commands
• Running the Tests
• Additional Comments
• Additional Features
• Future Improvements
• NextJs Boilerplate

💻 The Challenge

You can see the challenge description here.

Get Up and Running

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

1. Clone the project and install the dependencies.

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

2. Copy the .env-sample file to .env.local and update the values.

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)

3. Run the project in develop mode.

   yarn dev

4. Visit the website!

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

Additional commands

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.

Running the Tests

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

• test: runs the tests for all components and pages.
• test:watch: runs tests in watch mode.

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

Additional Comments

• 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).

Additional Features

• 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.

Future Improvements

• 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).

NextJs Boilerplate

This project was bootstrapped by using my own nextjs-boilerplate