Every week, I write a blog post about my progress on side projects. I explained my thought process in this article last week. I also detailed the first project that I wanted to work on for this month.
Week One
The stack choice
For the front-end, I went with React and create-react-app. It greatly reduces the headache of getting everything set up. For the back-end, I chose express. For this project, this is more than enough to do what I want. I'll also use MongoDB for the database and I decided to use semantic-ui for the UI framework. I used material-ui before, so I went with a different one.
Setting things up
There are two different parts in this project. The root of the project takes care of the server side ( express + mongodb ). Inside this root folder, a /client folder holds the front-end that was set up thanks to create-react-app.
The first difficulty that I had was to connect both parts. How do I inform the front-end and back-end to listen to each other with the create-react-app setup?
Thankfully, the documentation links to a tutorial that explains how to make create-react-app works with an API. Right here if you're curious. The front-end and back-end are run concurrently thanks to the npm package named concurrently ( convenient ).
And after that, I could start writing my code.
Hearthstone API
To get all the informations about the game's cards, I found an API at this url. Well documented, easy to use, and I have all the informations I needed.
React Router
This one made me sweat a bit more. I wasn't aware a new version of React Router was released. It took me some time to understand how the new one worked. ( BrowserRouter and Switch ).
Starting to see some results
I started with the cards's catalog. I had to figure out the call to make to get the cards I needed ( hint: collectible=1 ). After that, I filter the cards by classes and sets in the front-end. Hearthstone has a "standard" mode where only the most recent cards sets are used.
The catalog functionality will ressemble the one in the actual game. The user should be able to sort them by name, mana cost, cards set and classes...
Code and next week's goals
Here is the code on Github
For next week, I will try to finish the catalog functionality with all the sorting and filters. If that is done, I'll start adding some deck actions ( deck creation, adding cards to deck from catalog ... )
See you next week!
Oldest comments (3)
I am new to react development .And I will follow your steps .Someone excellent I can follow is really encouraging . :)
Far from being excellent, but glad this is inspiring to you :)
I am doing almost the same thing in 2020. The game is still going strong. The only difference is the framework. I am using Rails with hearthstone api.