Description

We chose React Native because first of all it’s developed and supported by Facebook, and is moreover used by them in their biggest products. Furthermore react native is built on top of JSX/Javascript which means we don’t have to use extra languages and avoid more headaches with switching things up. And lastly we want one codebase for every deployment type – so we have one source code and 3 different (major) channels including; Web, Android, iOS. The only thing we have done is distinguish some designs for each of those, so because Android has a different status bar to iOS, we’ve opted to have conditional styling so both operating systems look and function well with the app.

 

Why Node js, express, postgres (PERN stack)?

 

We’ve chosen node and express as the back-end due to it’s powerful middleware design, allowing us to dissect and organise routes as well as add middleware (conditional too!) to have powerful functionality, as well as being minimal by design. Postgres is also a good choice for this application because of its performance and capabilities. Express is good because it allows us to combine our middleware, controllers, routers and reduce coding/development time significantly.

 

Front-end

 

The front-end (client) is the main app, which can be exported to web, ios and/or android. Using Expo we can easily deploy either as a full-apk, or a bundled (and more efficient) apk to release on the store.

 

The whole client is a single-page (SPA) too, which means better performance, more user-friendliness and fluid pages. Users will be playing on the client, with their progress, attempts, levels saved

while they are actively engaged in the app. The client will load data from the backend and respond accordingly. We feature adverts for Google Admob, which can be configured in the admin dashboard, among other things. Easily enable/disable adverts, change advert providers, ID, etc.

 

Front-end features:

– Authentication screens: Login, Register, Forgot Password, Google (OAuth2)

– Action screens: Select Category to Play (+Images!), Select Level (+Images!), Settings

 

AUTHENTICATION SCREENS:

—Login both with default email or with google OAuth 2.0 support

—Register either via the default email method or oauth 2.0 as mentioned above.

—Forgot Password: email/username is typed into the field to send a reset link to their email with detailed instructions.

 

ACTION SCREENS:

—Select Category: choose a quiz category and explore its levels, with images shown per category (optional). A default (no-image) jpeg is shown by default.

—Select Level: choose a level within a category, lets you play the level and explore its questions in game-form!

—Settings: choose specific options such as App Dark Mode, and/or allow some buttons/links to redirect users to forums and whatnot. Also features a log-out button.

—Interstitial Advert: a plain screen which houses the advert, features a click back button.

 

QUESTION SCREEN:

—Score Bar: keep track of your progress on the level, or go back to main menu.

—Question Image: a visual representation of the question is possible, showing the user a large image.

—Question choices: the available choices for the user to select and try their luck on getting the correct answer.

—Show Answer screen: optional screen which can be configured to either hide or show after getting a question correct or wrong.

…and more!

—Sounds available for completing questions

—Victory theme & Defeat/loss theme!

—Positive bleeps and negative errors depending on how questions are answered!

—Techno flavour for sounds, regular and techno being the two options.

 

MISC:

—Themes: allow light/dark themes for the client, for the night owls!

—Sleek, clean design with flexboxes

—Scoring system: currently there are three types of gems that are used as currencies, with the blue gems left blank for you to customise. Red and yellow gems are currently in use, with red gems being rewarded for singular questions gotten correctly, and yellow gems for completing entire levels successfully.

—Navigation system: allows you to go back, with permission-based screens so logged out users cannot access certain screens, conversely logged in users can play and participate all they like.