AutoScout

Table of Contents

• About the Project
• Installation
• Functionality
• User Feedback
• Learning Goals
• Future Iterations
• Technologies Used
• Contributors
• Contact

About the Project

AutoScout is an app designed to help people view playable civilizations in Age of Empires II easier than the standard in-game UI. It is currently running off the Age of Empires II API (view documentation) to receive civilization data; this data is not currently up to date with most recent game updates. Users of the app are able to view all civilization names and crests on one page. Clicking a civilization crest will then show the basic bonuses and focus of play style. Users can then inspect the selected civ, showing potential civilization matchups that either create a well rounded team (Complimentary) or stack bonuses for a more focused style of play (Stacking). Users can choose to inspect these civilizations as well as favorite the inspected civ from this screen. Favorites are shown on all screens for easy returning to selected civs. This project was a 7 day sprint with the goal of creating an app for a niche audience, implementing user personas and fashioning functionality around those personas. The project specs and rubic are from the Turing School of Software and Design and can be seen here.

This site is currently not deployed due to API issues. I will need to create a proxy server before deployment which was outside the original scope/timeframe of this project.

Installation

1. Fork this repository (if you want to edit/expand, otherwise you can skip this step).
2. Clone it down to your local machine via the green Code button to get your link and then git clone <your SSH Key> in your terminal.
3. If SSH is not set up you can instead clone using git clone <your HTTP code>.
4. Navigate into this directory with cd autoscout.
5. Run npm install to compile the React application.
6. Run npm start to see the app running locally (to simply use this app you can end here).
7. Run <your text editor> . to see the code in your text editor.
8. Run npm run cypress to open Cypress and see all the tests.

Functionality

• Main Page View
• Civilization Info
• Responsive Design
• Accessibility

Main Page View

• When a user visits the site they should be able to see all civilizations on the main screen.

Civilization Info

• When a user clicks on a civilization crest they will see details of the civilization displayed onscreen, along with the option to inspect that civilization.

Civilization Matchups

• When a user clicks to inspect a civilization they will see potential matches for that civilization.

Responsive Design

• Responsiveness was a consideration while designing this application. The application viewed from a mobile device:

Accessibility

• Accessibility was a focus on this app. Passes Lighthouse and wave testing with high marks.

Learning Goals

• Design and Implement an app based on personal ideas for targeting a niche audience.
• Create an accessible app that has a clean UI and simple UX.
• Create a multi-page UX using React Router.
• Testing User Flows via Cypress.
• Design app around user personas.

Future Iterations

• Add more civilizations that are currently missing from API
• Improve civilization matchups based on user feedback and game data.

Technologies Used

• 
• 
• 
• 
• 
• 
• 

Contributors

• Connor Anderson-Larson - Application Creator

Contact