Fashion Wars
Is a Guild Wars 2 player-helper application meant to help users find and keep track of what skins they have yet to unlock in the game. The Guild Wars 2 API allows for individualized feedback based on what a user has specificly unlocked. This application provided the user with a user-friendly place to see this data, get more informaton aout the skins they are missing, and add a speicific skin to a todo-list for better tracking.
Fashion Wars
is a personal project built as a final project for Mod 3 at the Turing School of Software and Design, it is meant to be be a showcase of a students expertise in React
React Router
and asynchronous JavaScript
through the utilization of an API of their choosing.
- React
- Guild Wars 2 API
- React Router
- SCSS
- Git
- GitHub
- Holding on to state through different views
- Dealing with large data requests and long load times
- Dealing with keeping a user on track while letting them feel in control
- Scraping the Guild Wars 2 wiki for picutres of armorsets
- Utilizing conditional rendering to avoid re-requesting large amounts of data
- Using router props to navigate between pages seemelessly and lightweight
- Scraping the Guild Wars 2 wiki to gather armor set previews for a user to see
- Scrape images for weapons and backpieces (currently only armor)
- Utilizing a databse to have more consistent data
- Storing user inputs to have todo-list persist
- Add more configuration options to better sort skins
- Further style the application
- When a user gets to the homepage of "Fasion Wars" they are presented with three categories of skins they can choose to filter through.
- When the categories are selected and ultimately the
Find skins!
button is clicked, their choices are passed through router to update the url - This passing of the selected categories through router is how the filtering process begins
-
Based on the categories the user selected, a filtering process will begin on component mounting that has a few steps
-
The first step is to query the Guild Wars 2 API for
allSkins
anduserSkins
determined by a provided API key (these will each return an array of thousands of IDS) -
The second step is to run an algorithm to cross reference these Ids to find only the ones the user does not need
-
The third step is to again query the Guild Wars 2 API, this time in 200 id increments (the API limit), to get objects that have the detailed skins information
-
The fourth step is to make each of these objects into a
PreviewSkin
component for the user to interact with (represented as the skins icon)
-
As User has the option to click on a
PreviewSkin
component to be brought to a screen with more details about that skin -
There is brief information about the skin type and other unique values, a link to the WIKI for more info, and a button to add to the users todo list
-
If a user chooses to add the skin to their todo list, it will do so, and persist through route changes.
-
If a user chooses to go to the Wiki page they will be redirected as such
- The users selected to-do items will exist on this page, which can be found through a button on the
Results
page - Currently the todo list does not persist refresh, though it does persist through many other route changes
- On the top right corner of this page, click the Fork button.
- Clone the repository to your computer
git clone <URL>
- When you run git clone - git clone [remote-address] [what you want to name the repo]
replace the [...] with the terminal command arguments):
git clone [remote-address] [what you want to name the repo]
- When you run git clone - git clone [remote-address] [what you want to name the repo]
replace the [...] with the terminal command arguments):
cd
into the repository with the following commandcd <repo-name>
- Run
npm install
- Set up .env file with API key REACT_APP_API_KEY=your gw2 api key here
- Run
npm start
- Open browser to LocalHost:3000
- Create a new branch with
git checkout -b <new branch name>
- Open your text editor and add or remove functionalities to the site.
git add
andgit commit -m "<your commit meessage>"
to save the changes to your local repositorygit push
your changes- Create a new pull request!