/age-of-empires

Primary LanguageJavaScript

Age of Empires

This project lists Units in Age of Empires. Allows user to filter the units by age and cost of wood, food or gold.

Constructed into 3 pages :

  • Home
  • Units List
  • Unit Detail

Live Demo

Project Stack

  • ReactJS
  • Redux
  • redux-saga
  • redux-toolkit
  • Bootstrap
  • Tailwind CSS
  • Material UI

Implementation of styles applied with SCSS.

Home

Home page contains an exclusive image from Age of Empires.

Preview :

Age-of-Empires

Units List

Composed with multiple components such as AgeFilter, CostsFilter and Unit. AgeFilter, allows user to filter through all the ages or just choose all ages to list units on the table. CostsFilter helps with learning and filtering between food, wood or gold for each unit cost. Unit component is used for listing all of them in the table element. By clicking one of the units you can see more information about it.

Preview :

Age-of-Empires

Unit Detail

This page lists more details about the unit to see and evaluate its attributes.

Preview :

Age-of-Empires (1)

How to run locale

After downloading the repository, you can run npm intall then npm start in the terminal.

How to test

You can run npm test to run test cases.