Animal Crossing: New Horizons - Villagers app - Chris Walker

A web application providing information about the villagers (characters) from the Nintendo Switch game 'Animal Crossing: New Horizons'.

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Contact

General info

The web app is built as a single-page application (SPA) using React. It fetches data from a third-party, public API and presents the data back in a responsive layout.

Screenshots

No screenshots.

Technologies

• HTML5
• CSS3
• JavaScript
• React
• JSX
• React Router
• Git
• GitHub

Setup

• Install the latest versions of Git, Node and NPM.
• Clone the repository to your local machine.
• 'npm install' to install the project's dependencies.
• To run the app locally - 'npm start' and the app will open on localhost.
• To create an optimised, production build of the app, 'npm run build' and deploy the 'build' folder to your chosen server.

Features

• App built with React to provide a modern, single-page application (SPA).
• Asynchronous JavaScript calls to a third-party API to fetch the data for a specific villager on-demand.
• Uses React Hooks to manage state and side-effects in the 'Villager Detail' component.
• Uses React Router to conditionally render the relevant components depending on the route being used in the URL (i.e. unique ID per villager in the URL).
• Google Fonts for typography across the application.
• Ionicons for scalable SVG icons.
• CSS grid layout used for the list view, facilitating a responsive layout.
• Media queries used for enhanced responsive layout.

Status

Project is: Complete

Contact

Created by Chris Walker - https://chrismwalker.co.uk