Shiny Tracker

This website is designed to help Pokemon players catch shiny Pokemon.

Shiny Pokemon are a special variant from the regular Pokemon, featuring a different color scheme and battle animation. The odds of encountering one are extremely low (1 in 8192 in some games). Player can keep track of their hunts, their chances of finding a shiny, and mark when they are found.

Developed in 3 weeks in collaboration with Cjt101 and sezavala, during our time as a Software Intern w/ CodeDay & Computing Talent Intiative. Our mentor was Principal Software Engineer Milton Wong.

🎥 Demo Videos:

Landing Page and Hunt Creator:

homepage.mp4

Infopage:

infopage.mp4

📷 Screenshots:

Creating a Hunt

Running This Website:

Make sure to install dependencies before downloading the repo. Note that, upon running the website locally, the file size will approximately be 350mb. This project was generated with Angular CLI version 18.1.2, Node.js v20.16.0. Below are instructions for Windows 10 / 11.

A. Install Dependencies:

1. Download and install Nodejs.
2. Download and install a Integrated Development Environment. e.g. Visual Studio Code.

B. Download the Repo:

1. Click on "<> Code" in the top right corner of the repository.
2. Click on the "Local" tab.
3. Click on "Download ZIP" and extract.

C. Load the server:

1. Open your integrated development environment
2. In your IDE, open the folder and, using the terminal, navigate to the root folder.
3. In your terminal, run $ npm install.
4. Followed by $ ng serve to load dev server.
5. Navigate to http://localhost:4200/.

D. How to Use:

1. Start a hunt by clicking on "Start".
2. Select your generation, pokemon, and the method to catch the pokemon.
3. Repeat for more hunts.

Project Design:

Deliverables:

• Flow of Control for User actions
• Wireframe / Mockup that demonstrates the UI/UX
• Video demo of functional website on local machine
• Readme that helps people how to install the program

Resources:

• 3 Computer Science Students w/ meeting virtually
• 20 hours per week per student for 3 weeks
• 1 Software Engineering Mentor
• Github Copilot
• Angular Library

Scope:

In-Scope:

1. Allow the user to create an instance of a hunt, which comes with drop down menus and buttons to select the game they’re playing, methods used, whether they have the Shiny Charm, and pokemon they’re hunting
2. Create a Main Page that stores all hunts. Users should be able to delete hunts and add more hunts.
3. Each initiated hunt should have a counter and the rate of obtaining a shiny Pokemon with the given method displayed. It should also have an image of the Pokemon to hunt for.
4. Shiny Hunting Methods should only include Generations 2 - 7
5. Includes a 2nd page that provides an overview regarding the topic of “shiny hunting” and a short description of each shiny hunting method. Consider using Angular Material for this, as well as for other UI components.

Out-of-Scope:

1. Shiny-hunting-methods for Generations 8 and after
2. Tracking the amount of time that the user has spent on hunting for that pokemon
3. Specific checks on whether a Pokemon can be obtained by the method chosen. Example: shiny legendary Pokemon cannot be obtained by Masuda Method since they cannot be hatched from eggs

Constraints:

1. Must be Complete by August 16, 2024.
2. Limited Understanding of Angular & Typescript after working with these technologies on an Oppia, an open-source project

Requirements:

1. Utilizing API Calls to retrieve Pokemons and Pokemon Images available
2. Storing Information from API response to be used again during single instance of hunt
3. Data persistence between hunts

Roadmap & Milestones:

Timeline	To-do
Week 0: 7/22 - 7/26	Choose a project idea Learn basics of Angular, CSS, HTML
Week 1: 7/29 - 8/2	Deliverable: Create Flow of Control for User Actions Deliverable: Create Wireframe for UI/UX Create a homepage Get a successful API Response. Create a hunt instance Get Pokemon Sprites from API Create a Shiny Hunt Info Page
Week 2: 8/5 - 8/9	Create Multiple Hunt Instances Store Hunt in stances into cookies Define Methods and their rates Retrieve Rates depending on generation Data persistance between sessions w/ encounters
Week 3: 8/12 - 8/16	Found button Delete Hunt Instance button Cleanup code and Fix UI issues Resolve bugs Deliverable: Video Demo Deliverable: Readme file

UI Design:

Flow of Control:

Home Page Mockup:

Hunt Mockup:

Credits:

Pokemon and Pokemon character names are trademarks of the Pokemon Company.

Special thanks to PokeAPI, which was used for the retrieval of games and Pokemon.