MTG: Deckbuilder

An API-driven SPA that provides users with the ability to create, import, export and manage Magic: The Gathering decks using the MTG API.
Explore the code »

View Demo · Report Bug · Explore Backend API code

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

MTG: Deckbuilder is a single-page application that interacts with an RESTful API to perform CRUD operations on "Deck" resources. A "Deck" resource represents a Magic: the Gathering deck that is comprised of 60 or more Magic: the Gathering cards. Users can create a deck and add Magic cards to it using the MTG API. There is also an import/export feature that allows users to import from or export to sites like mtggoldfish.com or the online Magic: Arena game.

(back to top)

Built With

• https://reactjs.org/
• https://fontawesome.com/v5/docs/web/use-with/react
• https://react-bulma.dev/en
• https://magicthegathering.io/

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

The client requires the https://github.com/hcduffey/mtg-api to work.

Installation

1. Clone the repo

   git clone https://github.com/hcduffey/mtg-react-client.git

2. Install the dependencies

   npm i

3. Run it

   npm start

(back to top)

Usage

You must first create an account by clicking the sign-up button and providing a username and password. Note: there isn't a requirement to provide an e-mail address or any other personal information to create an account.

You may then use the credentials you provided to login.

Creating Decks

Click the 'Decks' link in the Navbar to begin creating a deck. From there, click the '+' button to create a new deck. Enter a name of the deck, and optionally copy/paste exported cards from an existing deck in mtggoldfish.com or Magic Arena.

Adding/Removing Cards

Click the deck that was created to view its card contents. Use the search bar on the right-hand side of the screen to search for cards by name and add to the deck. Click the 'x' next to a card to decrease the quantity of that card in your deck (or to remove it entirely if the quantity is reduced to zero).

You can also change the name of the deck by clicking the edit button next to the deck name on this screen.

(back to top)

Roadmap

• Create a "share" capability to allow users to share decks they've created with other users
• Add a colloborate function to allow multiple users to add/remove cards in a deck at the same time

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Cliff Duffey - @cliffduffey2

Project Link: https://github.com/hcduffey/mtg-react-client

API Project Link: https://github.com/hcduffey/mtg-api

(back to top)

Acknowledgments

• Best-README-Template

(back to top)