N64 Voter App 🎮

Introduction

This app's aim is allow users to vote for their favorite Nintendo 64 app.

This project is initialized using the https://github.com/tarikpnr/react-native-typescript-starter repo. 🚀

Objective

We have a Nintendo 64. As a team, we need to decide which game to buy next. Create a small single-page application that allows us to vote on our favorite Nintendo 64 game.

Requirements

Please make an app to vote.
- You can hardcode game data.
- No need to persist data.
- Show the box arts or game illustrations in a grid, all at once on the page (so no pagination).
- It should allow voting on the 5-10 most popular N64 games.
- The definition of 'popular' is up to you. Can be rating, sales or your personal opinion.
- Clicking/tapping on a game casts a vote. The vote count should be visible somehow.

Demo

Running e2e tests

Code

// For more info on how to write Detox tests, see the official docs:
// https://github.com/wix/Detox/blob/master/docs/README.md

const { reloadApp } = require("./reload");

describe("Example", () => {
  beforeEach(async () => {
    await reloadApp();
  });

  it("First game card has the like text and button are available on the screen", async () => {
    // tests if the elements are on the screen
    await expect(element(by.id("game-card-like-text-1"))).toExist();
    await expect(element(by.id("game-card-like-button-1"))).toExist();

    // test game card has the like text available on the screen
    const likeTextAttrs = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    await expect(element(by.text(likeTextAttrs.text))).toExist();
  });

  it("pressing the like button of the first game card should increase the like count by one", async () => {
    // get like text(like count) before the like button is "tapped"
    const beforeLikeTextAttrs = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    // Tap to the like button to increase like count
    await element(by.id("game-card-like-button-1")).tap();

    // calculate final like text(count)
    const increasedLike = Number(beforeLikeTextAttrs.text) + 1;

    // get updated like text
    const afterLikeText = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    // test whether the like text(count) has been increased
    await expect(element(by.text(afterLikeText.text.toString()))).toHaveText(
      increasedLike.toString(),
    );
  });
});

Covered concepts

Detox e2e testing
React Native Storybook
React Native Animations
React Compound Components
React Context
Json server
Optimistic updates with react query

Running locally

Install dependencies

  yarn install

Run json-server

  yarn start-server

Start the emulator for ios.

 cd ios && pod install && yarn run ios

For pod install, if you don't have cocoapods installed here's a reliable way to install cocoapods in Nov 2022 that worked on MacOS Monterey/M2
This assumes you have a simulator available for "iPhone 13". If you don't, simply include the name of one of the simulators installed e.g. yarn run ios --simulator="iPhone 14"

or for android

  yarn run android

tarikfp/react-native-n64-voter-app