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
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.
- https://reactjs.org/
- https://fontawesome.com/v5/docs/web/use-with/react
- https://react-bulma.dev/en
- https://magicthegathering.io/
To get a local copy up and running follow these simple steps.
The client requires the https://github.com/hcduffey/mtg-api to work.
- Clone the repo
git clone https://github.com/hcduffey/mtg-react-client.git
- Install the dependencies
npm i
- Run it
npm start
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.
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.
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.
- 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
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Cliff Duffey - @cliffduffey2
Project Link: https://github.com/hcduffey/mtg-react-client
API Project Link: https://github.com/hcduffey/mtg-api