G2i's code challenge

G2i Mobile code challenge.md

Trivia Game Coding Challenge

Overview

Your challenge is to create a 10 question, true or false, trivia app in the technology you are applying to work in. You should not just implement the most basic solution. This is a chance to show off your abilities and impress.

The application code will be reviewed and scored on these key areas with many subset areas for each:

• Functionality
• Code Format
• Project Structure
• Scalability
• Maintainability
• Use of industry best practices

Some specific things that we are looking for:

• Typescript if you know it
• Use of Expo for React Native projects
• Correct implementation of a state manager
• Correct implementation of a navigation solution
• Componentization
• Communiation in the repo and/or code
• Best practices with API calls and data
• Separation of concerns between business and UI logic

Goals

Implement the screens based off the wireframes and api below using advanced techniques and industry best practices for your platform. Note that the wireframes may not be complete, so use your best judgment for UI/UX implementation. Do not use a boilerplate like React Boilerplate or Ignite for this challenge. We want to see how you structure your project and what tooling you use from scratch. Create react app is fine to use. React Native projects should use the Expo CLI workflow: https://facebook.github.io/react-native/docs/getting-started

Specifications

Data:

The api url is: https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean

Sample returned json:

{
  "response_code": 0,
  "results": [
    {
      "category": "Entertainment: Video Games",
      "type": "boolean",
      "difficulty": "hard",
      "question": "Unturned originally started as a Roblox game.",
      "correct_answer": "True",
      "incorrect_answers": [
        "False"
      ]
    },…]}

Intro / Home Screen:

• Static Text
• BEGIN button navigates to the Quiz screen and starts the Quiz

Quiz Screen:

• The headline is from question category
• The card element contains the current question
• The next question should appear after the current question is answered True or False
• After all questions have been answered, navigate to the Results Screen

Results screen:

• The Score shows correct and total
• Displays a list of the questions and whether the answer was correct or not
• PLAY AGAIN starts over and navigates to the Home Screen

---

© 2018 G2i Inc. All rights reserved. Certain information contained herein is derived from information which is protected by copyrights held by G2i Inc. This code challenge, including any parts of it, cannot be duplicated, distributed, copied, modified, used to make a derivative work or used in any way without the prior written consent of G2i Inc.

@severnsc I propose we make the following revision to the Goals section to enforce the use of Expo to make it easier for graders.

Goals

Implement the screens based off the wireframes and api below using advanced techniques and industry best practices for your platform. Note that the wireframes may not be complete, so use your best judgment for UI/UX implementation. Do not use a boilerplate like React Boilerplate or Ignite for this challenge. We want to see how you structure your project. Also, please use the Expo CLI over create react app to make it easier for our graders.

@watadarkstar Lee approved, will make the changes today.

@watadarkstar would a library like react-native-paper be acceptable?

@bill-pairaktaridis Yes.

Hey @watadarkstar So we are not allowed to use create-react-app then? Even if we plan to make a website app? Is the aim of this revision to make use of expo-web? I was under the impression we could choose to do either web or mobile

@molebox We only ask that you use Expo for mobile, for web you can use create react app. Its just easier for graders to mark Expo mobile projects.

@molebox We only ask that you use Expo for mobile, for web you can use create react app. Its just easier for graders to mark Expo mobile projects.

OK, thanks for the confirmation.

Maybe amend the sentence then as it currently reads as, use expo instead of create react app.

➡️ Also, please use the Expo CLI over create react app

Good morning!

Does expo with nextjs integration is allowed ? Thanks!

Hey @watadarkstar, is any state management solution ok, or is there an inclination for a specific library?
My current go-to for state management is xstate with typescript, but I could work with the basic state hooks (useState / useReducer) or libraries like redux.

@alantulais Are you doing the React or React Native challenge or both?

@barucAlmaguer I recommend you use redux + hooks for this assessment. Good question!

Good to know, thanks!

Is there a GraphQL version of the API? Is either preferred?

@SomeUserNameReally I don't think there is a GraphQL version of the API

Hey @watadarkstar, should we include scripts to run unit tests? What kind of coverage is expected? Thanks!

Hi @watadarkstar ✋ Is it okay to use Next.js ? I am doing the React (not Native) challenge.

@barucAlmaguer I recommend you use redux + hooks for this assessment. Good question!

@barucAlmaguer Is Redux preferred over Mobx State Tree due to a similar reason?

Can I use redux toolkit?

@johntimothybailey
You can use MobX

@gilons
Yes you can use redux toolkit

@johntimotybailey part of the challenge is how you pick and structure the state management solution.

@lubos-turek you can use NextJS if you like.

Just my 2 cents, but I made this project with nothing but context and it worked perfectly. In my opinion you don't need to use Redux or any state management library.

Just my 2 cents, but I made this project with nothing but context and it worked perfectly. In my opinion you don't need to use Redux or any state management library.

The instruction says to use a state management library. So try and use it. Perhaps it's a test to confirm that you can make use of them because what if the project you'll be working on in the future requires it.

Just my 2 cents, but I made this project with nothing but context and it worked perfectly. In my opinion you don't need to use Redux or any state management library.

The instruction says to use a state management library. So try and use it. Perhaps it's a test to confirm that you can make use of them because what if the project you'll be working on in the future requires it.

It says to use a state manager, not specifically a library. Use whatever you want of course. It's just my opinion that for this task a full blown Redux implementation isn't needed

What does it mean "Communiation in the repo and/or code" in the specifics? Does it refer to have the code properly commented if necessary?

@betoarpi It's badly worded. It should beRepo documentation and code readability.

@watadarkstar Just to confirm, We can choose to implement this challenge as either a React Web project Or a React Native project right?

@ejmudi I think it depends on which position you applied for

CC: @AndreiCalazans who knows more!

Yea. If you are applying for RN use RN, if web use web .