Feat/display map

[J-Ariola]

Description

On the main page, there is a Map button that moves the user to the Map route. The map container is the size of the screen. The map is centered in Japan.

Card Link

https://3.basecamp.com/5802516/buckets/37608217/card_tables/cards/7440817782

Type of change

Please delete options that are not relevant.

• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update

How Has This Been Tested?

No official testing on Jest, but the map can be see from the /map route. Will write tests in another branch

Checklist before requesting a review

• [x] I have performed a self-review of my code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

[DepartureLV]

LGTM

[chadgrover]

@J-Ariola Just a heads up for the Team:

The NEXT_PUBLIC_ prefix is required when dealing with environment variables in the client. However, this also requires "exposing" the variable to the browser, making it potentially unsafe. Sometimes this can't be helped, though.

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

If you want to keep that information performant and secure, Vercel recommends fetching data from a server component. Once the data is fetched, you can pass it down as a prop to a client component (if needed.)

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns

For performance reasons: you're also looking at much faster response times when the frontend and backend server are located in the same data center. 👀