Mini-Project 1: Match the Members
Table of contents
Project Description
Welcome to MDB! As a new member, you’ll be building a simple, multiple-choice trivia game to see how fast you can learn everyone’s names.
Game Requirements
- Member Picture - Randomly display a picture of a member on the screen.
- Name Options - Display four options below the picture as buttons, each with different names that may correspond to the picture (one of the names should actually be correct, but the others can be random – be sure you don’t randomly also select the correct answer).
- Score - Display a score count for the user (# correct / # total).
- Timer - Add a timer that limits the user to 5 seconds to answer the question. If they take up the full 5 seconds, the question is counted as incorrect.
Make sure to install the VSCode Prettier extension to format and auto-style your code. The keyboard shortcut CMD/CTRL/OPTION-SHIFT-F
does this for you!
Starter Code
If you’re a member of MDB, please use the invite link provided by your instructor to create your own copy of the starter code. For all others, the starter code is available as a template here.
git clone [YOUR_REPOSITORY_LINK_HERE]
cd reactnative-mp1
yarn install
expo install
expo start
The starter code contains a framework for getting started, including a Home Screen and a Game Screen. You’ll be making all of your changes to GameScreen.jsx
.
Here are other files that you should read over:
App.js
- serves as the entry point of the application. Defines the app navigation stack.HomeScreen.jsx
- contains the HomeScreen, which is the landing page of the app.GameScreen.jsx
- contains the GameScreen, which is where the game is played.Styles.js
- contains the CSS stylesheet for the app.Constants.js
- contains the list of all MDB members.
For this project, the starter code provides you with a fair amount of structure. Make sure to closely read the contents of GameScreen.jsx
before getting started!
Debugging
This debugging guide by Expo briefly walks through debugging React Native apps using the Expo Client interface. The React Native docs talk about debugging more complex apps. For these projects, if you’re stuck on something in particular, here’s what you could try –
-
Try looking at your code to see if you can catch any obvious typos. Since JavaScript isn’t a compiled language, lots of typo-related bugs make it through to runtime.
-
Try pasting the error into Google and clicking on the top StackOverflow link. (If you’re using StackOverflow, make sure to actually read the suggested answer!)
- Try adding
console.log(...)
statements to the appropriate places. - [For Members] Feel free to send a message to the React Native help chat or come to OH!
Demo
Submission
To submit your project, first commit and push your changes to your personal project repository. We encourage you to commit frequently, so it’s easy to revert to a prior commit if needed.
git add .
git commit -m "all features working"
git push origin master
Then upload a video of your submission to the link given to you.