Carowa27 / mondex

An application where you can search for Pokémon cards from the TCG series. Search for the sets, cards, artists and more. Be able to create collections to see which ones you own and have left in sets or even create a collection with your favorite Pokémon.
1 stars 0 forks source link

MonDex

Author and developer

EXAM Assignment

My idea for this assignment: Create an application where you can search for pokemon cards from the TCG series. Search for the sets, cards, artists and more. Create collections to see which ones you own and have left in sets or even create a collection with your favorite pokemon.

Purpose

As a collector of Pokémon cards it is hard to keep up with all the cards that are in the collection. If you buy an ETB(Elite Trainer Box) you get a folder that contains all the cards in that set, but it still doesn't really give you a good overview on the collection as a whole. And if you want to collect the full set it makes it harder when you can't be sure of which cards you have or not. This app would make the collecting easier and more time effective.

Technical breakdown

The app will have functionality to search for cards but also to save the cards to a user account. As a logged in user you will be able to create collections and save cards to your collections. On the site you will also be able to search for artists, ex search on sowsow and get all the cards where they are the artist. This will make it easier to check if an artist you like has designed more cards or even to start a collection with all the cards that this artist has designed.

Commit message convention

(type): message

examples

(docs): add readme (ref): update all js to ts

Types

Type Short Description
feature feat new feature
bug fix bug bug fix
documentation docs changes or adds to documentation
refactor ref code changes that neither fix a bug nor adds a feature
build build changes that affect the build or dependencies
reverts revert revert to previos commit
clean clean clean code of, for example, comments or unnecessary code

Badges

Frontend

Lang TS Lib React

npm axios

Backend

Lang JS

env node app express

Database

DB SQLite

Demo

To get it up and running follow these steps:

Frontend

  1. install all dependencies by writing "npm i" in the terminal (don't forget to be in the Frontend folder)
  2. to compile ts to js write "npm run build" and get a dist file
  3. to get the site up at localhost to see it write "npm run dev".

Backend

  1. install all dependencies by writing "npm i" in the terminal (don't forget to be in the Backend folder)
  2. you will need to have a database to get the database functions to run.
  3. to get the server up at localhost "npm run dev".

Screenshots

Home page

Home page

Opened info card

Opened info card

Search page using artist to search

Search page using artist to search

Own collection that is connected to set

Own collection that is connected to set

Accessibility screenshots

Lighthouse

Lighthouse navigation test