Skip to content
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!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
public
src
.commitlintrc.json
.env
.eslintrc.js
.gitignore
.lintstagedrc.json
.stylelintrc
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
README.md
package.json
yarn.lock

README.md

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!

Master build Development build


For that, the player answers a set of questions regarding the Marvel Universe to determine if he trully 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

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.

Table of contents

Setting up the development environment

  1. Install Node.js

  2. Install yarn

  3. Install project's dependencies using yarn:

yarn
  1. ⚠️ 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

Copyright and licence

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

You can’t perform that action at this time.