Card Search: Search for Magic the Gathering cards using the search bar or various filters such as name, mana cost, power, toughness, and color.
Card Info: View information like price, mana cost, type, power/toughness, and set name when a card is clicked on from your search.
Add: If you like a card enough to add to your collection, the add button will send that card to your collection with all the other cards you have added.
Collection: Using the "My Collection" button you are directed to the collection page where you are able to view all the cards you have added to your collection using the "Add" button. A total price of all the cards in your collection will be displayed along with "Delete" and "Delete All" buttons so you are able to add and delete as you please.
Wireframe for the basic original intention of the application:
-
Clone the repository: git clone https://github.com/yourusername/Project2_Team1.git
-
Navigate to the project directory: cd Project2_Team1
-
Install dependencies: npm install npm install react-router-dom npm i @uidotdev/usehooks npm install -g vitest npm install --save-dev vitest jsdom @testing-library/react @testing-library/jest-dom
-
Start the development server: npm start
-
Open your browser and navigate to whatever localhost port it opened on to view the application.
npm test
React: Used as a baseline and structure for our project.
React Router: Used to handle the routing in our application
Scryfall API: This is the API we fetched all our data from. Where the images and all the details used came from.
readme.so: Used to structure ReadMe.md
Ethan Diem, Lorena Longoria, Damon Hayes, Oscar Avina