Marvel JARVIG
Marvel JARVIG (Just A Rather Very Interesting Game) is a game that lets you find and discover Marvel Comics characters based on their name, image and description!
For that, the player answers a set of questions regarding the Marvel Universe to determine if he truly knows every character.
Moreover, the game is fully customizable: the player can choose the level of complexity by tweaking some parameters (Newbie, Intermediate, Master, or Custom).
React + Redux + Styled-Components
Marvel JARVIG was built using React, it calls the Marvel Comics API to fetch Marvel Characters data. The app then generates questions using that data and displays them to the player.
The architecture of the project follows Redux to manage the state of the app.
The User Interface is built using styled-components.
This project was bootstrapped with Create React App.
Setting up the development environment
-
Install the project dependencies using yarn:
yarn
-
β οΈ Create a config file using the sample filesrc/config/index.js.dist
.
Remove the .dist extension and replace the Marvel API public and private keys with your own. You can get the those keys on the Marvel developer portal
Run the game
yarn start
Code structure
.
βββ public/ # static public files
β βββ index.html
βββ src/ # source files
β βββ actions/ # redux action creators files
β β βββ __tests__/ # test directory (should be in every folder)
β β ...
β βββ components/ # UI styled-components
β βββ config/ # config files
β βββ constants/ # constants (eg. actionType names, routes)
β βββ containers/ # game containers
β β βββ HomeScreen/
β β βββ PlayScreen/
β β βββ ResultScreen/
β β βββ App.js # higher-order component
β β ...
β βββ reducers/ # redux reducers
β βββ utils/ # utility files (eg. helpers.js, style utils, etc.)
β βββ index.js # main entry point for react app
β βββ theme.js # theme file (colors, font size, ...)
βββ .env
βββ .eslintrc.js # eslint config file
βββ .gitignore # control file for git
βββ gitlab.ci # config file for gitlab ci
βββ package.json # meta data and list of project dependencies
Testing
This project uses Jest to test units of code and react components.
Test files have a .test.js
suffix or .js
suffix in __tests__
folder.
Run tests in interactive mode:
yarn test
You will be able to visualise tests and update snapshots. Read more about tests
Build for production
Build the app for production to the build
folder:
yarn build
Contributing
Love Marvel JARVIG and would like to help? Check out the contribution guidelines for this project, everything should be there!
Versioning
Marvel JARVIG is maintained under the Semantic Versioning guidelines.
Creator
This project was created for learning purposes, using best practices and experimenting on latest web technologies.
Yassine Doghri
Copyright and licence
Code and documentation copyright 2018, Yassine Doghri. Code released under the MIT License.