Quiz & DesignoLearn: Full-stack React Native Learning App! (New)

Description

Quiz & DesignoLearn: Full-stack React Native Learning App! (New)

 

Designo Learn Mobile Application

Publish your own quizzes and lessons with a complete front-end, back-end and admin panel, a full-stack solution to a gamified way of learning. Users can participate in fun quizzes and questionnaires, as well as be rewarded for correct answers, track their progress, advance through the levels and more! Also works very well for businesses to help train employees meanwhile being enjoyable!

What You Get

– React Native front-end (deployable to all web, iOS, android) – Node.js back-end with PostgreSQL database – React admin dashboard (Single-page application)

All of the code has been streamlined and is built with Javascript only! One language for the entire full-stack application! That is very impressive in today’s day and age.

Why React Native?

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.

MARKETPLACE: —Buy certain game items using red gems! —Refill your lives with 500 red gems! —Change sound flavour with 1000 red gems (techno soundpack)! —Buy unlimited lives for 24 hours for 1500 red gems! —Hide ads for 4.99$ using In-App-Purchases

STATISTICS: —See how many people you have referred via your referral code! —See how long you’ve spent playing on the app in total! —See how many wins you’ve completed so far, with red gems too! —See how many days you’ve been online consecutively!

LEADERBOARD: —View top 15 players in the leaderboard ranked by total wins —Highlights your current player if you are ranked, denoted by a green colour! —Compare with other users and compete for the ranks!

Back-end

ROLES —Create custom roles, on top of the existing ones: (Superadmin, Admin, Basic). —Block certain routes to insufficient roles, such as updating users, reading users, etc. —Assign actions for different routes, so readOwn, readAny, updateOwn, updateAny, deleteOwn, deleteAny, createOwn, createAny, and more! —Superadmins are hardcoded in the backend and must be configured manually in the code, but it’s very easy and only requires changing the email (and setting it to whatever you wish the superadmin’s email to be), and then create a new account in the front-end.

AUTHENTICATION —Token-based authentication, with tokens being stored in the cookies (for dashboard login) and Secure Storage/Async Storage depending on your system. Mobile devices will use SecureStorage. —JWT tokens are used, which are technically public but have a private key, incredible security. —Token verification so if any tokens are tampered with they will not let you pass! —Forgot password has a django-based system which is incredibly secure. Provides links that expire in a certain timeframe, as well as expire if any data changes in the database, meanwhile being as performant as possible and doing the cheapest if-else checks first, to avoid expensive calls. —Google OAuth 2.0 support for logging in and/or registering, offload the hardwork to a technological giant, Google! —Passport JS support for logging in and verifying access tokens

MODELS —Extensive set of models for the database, allowing powerful customisation and design, with many-to-many relationships as well as heavily related models which lets you combine and tie (for example) Questions to Categories, Levels, and Users, as well as provide sophisticated and detailed reports of the aforementioned models in the database, with their records singled out and chosen specifically. —QuestionSet comprises a Question, Level, Category – Each question belongs to a Level, and each Level belongs to a Category. —Track user level attempts, as well as how long it took to complete questions, how long it took to complete the whole level, etc. —Track user completion or user quits, useful for providing data-driven analytics such as the following question: Which Question has been /Quitted/ the most? Among others! —Settings, Global Settings, AvailableSettings, UserSettings. – Global settings are useful for things that cover the whole application, such as the privacy policy, the application version, and many more! – UserSettings comprise options related to users, so if a user has enabled dark-mode theme then it will be handled by the UserSetting model. – AvailableSettings are settings that can be configured and viewed by users, encompassing options that are not set yet, but can be toggled or modified.

MISC —Image support for Level grid, Category grid, Question screen —Supports AWS/S3 bucket for uploading images and accessing them alike. —Built-in system for updated/created at for every data in the system.

Admin panel

—Encompasses all the models in the database, so view lists of: – Users, Categories, Levels, Questions, Question Choices, Settings, Global Settings, User Progress, User Attempts & more! —Privacy policy, terms & conditions, app version —Show correct answers —Configure adverts, enable/disable different types of ads, such as banner ads, interstitial ads. Only supports Google Admob for now. Will be supporting Facebook ads in the very immediate future. —Clean, organised tables and subtables showing lists of data. —Modal-based data creating —Filter table based on columns, so show/hide user: name, email, date registered etc. —Statistics/dashboard main panel shows summarised data such as how many users there are, compare with other months in the year. Shows leaderboards for whomever has the highest accolades and gems/score. Shows users with the highest questions answered & more! —Single-page-application so no page redirecting, everything is handled in a single page. —Right-to-left support (only for admin panel), for languages such as Arabic!

REQUIREMENTS:

– Node js hosting (preferably amazon or google) —Free alternatives include: Heroku, Glitch – An image repository, such as Amazon S3 buckets (optional) – If developing for android, you need a google developer account. – If developing for ios, you need an apple developer account. – If you want adverts, you need to be a part of the AdMob programme.

TOOLS: – VisualStudio Code – Node – React/Expo