AC Miles

Achievement visualizer for the game Animal Crossing: New Horizons.

Includes all achievements in the latest game update (version1.2.0a).

A process outlining the steps I took to take this project from an idea phase to its final form can be read here.

Fun facts about the site

• All the stamp dates are dynamic and are generated to reflect how they would be achieved in the game to a certain degree of realism (northern hemisphere).
• The Nook Miles counter in the top right corner shows the total miles received once all achievements have been obtained.
• The 'New!' tab appears on achievements that have been introduced in the latest game update.

Assets

The assets are all based on the original assets found in Animal Crossing: New Horizons. I did not design these assets. However, I did spend many days recreating these assets from scratch. You can use these assets on your own website, but I ask that you please provide a link back to AC Miles to acknowledge my efforts.

Data

The initial data for the achievements came from this wonderful Google Sheets data spreadsheet that is maintained by the amazing Animal Crossing: New Horizons community.

When converting the data from the spreadsheet to JSON be careful of the following:

• Sometimes 0 values will be converted to string. Look through the converted data to ensure "0" values are not present.

Running the project locally

This project was created using React Create App with two additional plugins.

1. Flickity - for the carousel functionality
2. Simplebar - for styling the custom scrollbar

It uses ESLint to keep the code uniform across all contributors following the AirBnB Javascript style guide with a few minor rule changes.

To start the project locally:

• Clone the project
• npm install
• npm run start

To build the project:

• npm run build