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

1. Install Node.js & yarn

2. Install the project dependencies using yarn:

   yarn

3. ⚠️ Create a config file using the sample file src/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

✔️ You're all set! You can now view Marvel JARVIG on http://localhost:3000.

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

• https://yassinedoghri.com
• https://twitter.com/yassinedoghri
• https://github.com/yassinedoghri

Copyright and licence

Code and documentation copyright 2018, Yassine Doghri. Code released under the MIT License.