spbovarnick / amt-front-end

ALBINA COMMUNITY ARCHIVE - Public-Facing Front End

This is a Next.js project bootstrapped with create-next-app.

This interactive and complete archive is accessible to the public and utilizes the API at https://github.com/spbovarnick/amt-admin-1.0.

Local Development

Locally this app runs on port 3333; amt-admin-1.0, which runs on port 3000, also needs to be running to hydrate amt-front-end with data.

Your .env file should include the following variables:

• NEXT_PUBLIC_DEV_API_URL
• NEXT_PUBLIC_DEV_API_URL
• NEXT_PUBLIC_DEV_API_URL
• NEXT_PUBLIC_S3_BUCKET
• NEXT_PUBLIC_PROD_CLOUDFRONT_DISTRO
• NEXT_PUBLIC_DOMAIN
• NEXT_PUBLIC_TARGET_DB

This project's NEXT_PUBLIC_TARGET_DB need to match the value of amt-admin-1.0's to operate correctly in development.

Start the server with npm run dev

NOTE:

In the event that the CloudFront or AWS URLs change, those values need to be updated in both .env and remotePatterns next.config.js. Because this project utilizes Next's Image component, external images need to be validated in this config value.

Deployment

Pushes to main automatically builds new deployments in Vercel. Pushes to other branches will build preview deployments. As such, it's important to be mindful of code pushed to main.

Production loads can be tested by replacing NEXT_PUBLIC_TARGET_DB=localhost with NEXT_PUBLIC_TARGET_DB=production in this project's .env and updating amt-admin-1.0's ENV['TARGET_DB'] environment variable to production in that project's local_env_vars.rb.

Full functionality and production environment behavior of non-main branches can be tested by adding the preview URL to the allowed origins in amt-admin-1.0's config/initializers/cors.rb file.

Third Party Tools

react-responsive-masonry (https://github.com/cedricdelpoux/react-responsive-masonry)[https://github.com/cedricdelpoux/react-responsive-masonry]

classnames (https://github.com/JedWatson/classnames)[https://github.com/JedWatson/classnames]

react-select https://github.com/JedWatson/react-select/tree/master

Axios
Used for API queries.
https://github.com/axios/axios

google-map-react
Used to render custom Google Maps and markers.
https://github.com/google-map-react/google-map-react

use-supercluster
Used with peer dependency supercluster to render marker clusters within the google-map-react component.
https://github.com/leighhalliday/use-supercluster

react-window
Used to create a custom built timeline. react-window virtualizes the large array of rendered timeline items without crashing the browser during interaction.
https://github.com/bvaughn/react-window

react-intersection-observer
React implementation of the Intersection Observer API. Used within the Timeline.jsx component to detect when a timeline card is centered in its scrolling parent and render the card's year information.
https://github.com/thebuilder/react-intersection-observer#readme

zoom-pan-pinch
Used to give users greater access to image file types in the archive modal.
https://github.com/BetterTyped/react-zoom-pan-pinch/tree/master