DesignoQuiz – Full Application iOS Android Web

Description

Delta News Professional Download Preview Live App You can try the app for free using live data via Android APK or iOS test flight Simply download the file s and run it on your desired device or emulator Admin Panel Preview You can visit the admin panel here login with the credentials given auto-filled for your convenience and see if you like the system Details Username demo Password demo If you would like to test Google OAuth 2 0 sign in please use the original link https main d2cwmah5n09ie6 amplifyapp com root ChooseCategory CodeCanyon uses a Frame which google isn t compatible with in case anybody is wondering Considering purchasing our amazing product Visit our documentation site for frequently asked questions installation guide 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