Code Monkey home page Code Monkey logo

dextracker-local's Introduction

SuperEffective Pokédex Tracker

A simple, lightweight, and client-based Pokédex Tracker.

Brought to you by the SuperEffective team.

Demo

Features

  • Add a search guide modal, and (?) icon to the search bar
  • Last game's Pokédex as the default
  • Mark all games that you own
  • Track all regional Pokédexes, for all main series games
  • Track all forms, genders and shiny variants
  • Editabe Pokémon data: caught, form gender (m/f/-), shiny
  • Search for Pokémon by name, type, color, dex number, etc.
  • View Pokémon basic details such as location, stats, types, and abilities
  • Direct links to well-known Pokémon resource websites
  • The main page lists the current progress of all your stored dexes
  • Trainer Cards (Trainer Profiles): a simple page with your name, avatar, short bio, and a list of your favorite Pokemon and their Pokeball, and the games you own. Downloadable as image and shareable via link & QR.
  • JSON imports/exports for your data, to keep it safe wherever you want
  • Random Shiny Hunting challenge: from all games that you own, this widget will challengee you to hunt a shiny Pokémon that you don't own yet.
  • Trade Box: A simple box with 30 slots to store Pokémon (incl. form. gender and shinyness). It is shareable via a link, so you can share your box with friends or on social media. The box title and color are editable. Unfortunatelly, since this is a client-only webapp, these links can become very large, so we can't guarantee that all social media platforms will accept them.

Compared to the original SuperEffective.gg project, this webapp doesn't require a server to run: it stores all your data locally in your browser's storage. This means you don't need a login, you can use it locally, and you don't have to worry about your data being stored in an external server.

This webapp is just a Pokédex tracker, not a Living Dex Box Organizer. If you're looking for a Living Dex Box Organizer check out our main, cloud based project: supereffective.gg.

TODO (dev)

  • Add homepage dashboard
  • Track Forms/Shinies/Cosmetic Forms should be editable per dex, and also in general (as a default for new dexes)
  • Add placeholders to avoid Cumulative Layout Shifts (CLS)
  • Add React router to navigate between dexes (hash router)
  • Put filters back together with the main state, or export both stores in the JSON
  • Add a "Mark all as caught" toggle button
  • Add a "Mark all as shiny" toggle button
  • Better icon for Smartphone PWA homescreen
  • Better HTTP 404 page
  • Home dex selector should prefill the selections with your latest edited dex
  • Add a "go back home" button to all left drawers that are not in the home page

Tech Stack

  • Node as JS runtime
  • PNPM as package manager
  • Vite as dev server and bundler
  • vite-node`` as JS/TS script runner (similar to tsx, but compatible with Vite's APIs like import.meta.env`)
  • React.js + SWC as frontend framework
  • SCSS Modules + OpenProps for styling
  • TanStack Query + Zustand for state management
  • localStorage to persist state
  • SuperEffective's CDN for data and images (bundled from https://github.com/supeffective)
  • URL as the state for sharing functionality
  • Tauri as the desktop app wrapper and build tool
  • Github Actions as CI/CD
  • Github Pages for deployments

SVG Icons are from lucide.dev and simpleicons.org

Development

To develop this project, first, you will need Node 20+ and PNPM 8+ or higher installed on your machine. Then, you can run the following commands after cloning this repository, to get started:

pnpm install
pnpm make:data
pnpm dev
open http://localhost:1510/

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • SciresM, Kurt, Matt and Lewtwo's Asset Archive, for collecting all imagery
  • PokeAPI, for providing all the missing pokedexes data
  • The Showdown project, for being our main data source
  • Serebii, Bulbapedia, for being such valuable resources to the community and this project (we use them to manually double check and verify data)

dextracker-local's People

Contributors

itsjavi avatar

Stargazers

Darren Wallace avatar grey avatar  avatar

Watchers

 avatar

dextracker-local's Issues

feat: pokemon stats and links to sites

Open pokemon card when clicking on the image. Show stats (types, ability, base stats, evolutions, forms, games, etc.)
Show also links to serebii, bulbapedia and smogon

GO dex: shadow pokemon

I don't know if this makes much sense since pokemon GO pokedex is probably easier to check than the site
and users wouldn't like to maintain this one in parallel.

Depends on the voting on this issue, it will be implemented or not.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.