Vite: very easy way to set up a React project. The main obstacle was setting up Jest/MSW which did not cooperate very well with Vite.
apollo/client: solely used for the purpose of making graphQL queries. I relied purely on the documentation to set this up.
Jest: used for performing unit and integration tests in the application. I relied on a mixture of documentation and a youtube series by the user “Codevolution”.
Nivo: purely react charting library. No need for two separate dependencies.
React-bootstrap: allows the easy integration of bootstrap with react. Its documentation covered everything we needed to use
React-router-dom: Is used for client side routing. I used a mixture of documentation and another youtube series by “Codevolution”
React-testing-library and Mock Service Worker: used in conjunction with Jest for testing. These topics were covered in the youtube series.
- Youtube series about using Jest
- Youtube series about using react router dom
- Apollo client documentation
- Mock Service Worker documentation
- Jest documentation
- React bootstrap documentation
- MTGJSON documentation
- Scryfall API
- React Quickly (book used to learn about React)
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
We used the Nivo charting library for all of the graphs in this project. Specifically, for the line, pie, and bar graphs detailed below.
- @nivo/line for the line graphs
- @nivo/pie for the pie graphs
- @nivo/bar for the bar graphs
To access the MTGJSON API we needed to use Apollo GraphQL. Most noteably, the 'useQuery' hook.
- @apollo/client This is the relevant documentation for the react implementation of Apollo useQuery