RIZER (Flutter - Firebase)

-

  

Rizer (Flutter & Firebase)




The project is made using Flutter as the Frontend library/framework, Firebase as the backend, and Firestore for the database.

Introduction

The front-end part of the project is implemented using Flutter for Web as well as Android platform. Flutter provides multi-platform support with a single codebase. Firebase as our backend, it provides all the major features such as Authentication, database (Firestore), Realtime database, storage, hosting Functions, and much more. With this project, Faculty would be able to create quizzes for students, and faculty can add quiz questions dynamically. students will be able to give the quiz and later on, they can analyze in which area they are falling behind.

Faculty is responsible to create quizzes, faculty can add categories to the quiz, and depending on which students will be able to analyze their report once they have been given the quiz.

Literatur Survey

    A. Tests are an important part of an education institute, because of them teachers are able to know which student stands where and depending upon that he/she can work accordingly to help students in the area in which they are weak, but what if students want to know that where that stand especially in online tests students can not know how they are performing.

    B. Firebase is a Backend-as-a-Service (Baas). It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit. It is built on Google’s infrastructure. [1]

    C. Firestore is a NoSQL database that doesn't store data in tables with rows and columns. Instead, it stores data in collections where each collection can have various documents under it where the data is stored. [2]

    D. Flutter is created by google itself and it’s also open source. In addition to that I also support wide variety of platforms like Android, Web, iOS, MacOS, Linux and Windows. Thus it is cross platform. The flutter’s hot reload and hot restart gives a push to faster development.[3]

Many packages are used in flutter’s frontend UI. Like shared preference for persistent login. Syncfusion for beautiful analytic charts. http for API calls. And many other.


Frequently used Keyword

  1. Collection: A collection is a grouping of documents. Documents within a collection can have different fields. A collection is the equivalent of a table in a relational database system.
  2. Document: A document is a basic unit or basic building block of data. Here, a documents refers to a group of data in a row/record similar to a row/record in a relational database. “Document” and “JSON document” terminology are interchangeable here.
  3. Widget: Almost everything in flutter is widget. And in most application MaterialApp widget will be the root widget of the application
  4. Stateful/Stateless widget: There are 2 types of widgets in flutter. Stateless as the name suggest it wont be able to update the state on the interaction. Whereas with stateful widget we can update/change the state on user interaction.

Technologies Used

We have used Flutter for the development of the project. Flutter is a google made open source UI framework. It is cross platform thus with single codebase we can make application for multiple platforms. It makes development faster.

Firebase is a Backend-as-a-Service (Baas). for our backend and it provides features like:
  • Authentication
  • Firestore
  • Realtime database
  • Hosting
  • Functions
  • Notifications

Cloud Firestore is useful because it serves as a backend database which is secure and very much scalable. When you use it, you don't have to worry about writing code to create and manage your own database.

Features of Project

  • Account verification through Email.
  • Respective Sem, Institute and department wise categorised data.
  • Analytics for the given quiz.
  • Faculty can create quizez respective to their dept. and institute.
  • Multiplatform support.
  • Custom Question templates

Project Details

A. Project Content

The project includes Flutter based Android App, which is also optimised for web UI, in which the faculty will be able to create quizez for students faculties can also add custom categories for the questions so that each question can be categorized based on the topic of question.

Students will be able to see the quizez respective to their Semester, institute and department, also once the quizez is successfully submitted, they can analyse the result based on the category in which they are falling behind and work on accordingly.

B. Project Structure

Flutter is used to make Android as well as web UI in this project. The structure of flutter application is show.

Here I have used shared preference package to persist the login of the user. When the user logs into the app and if he/she has selected is Remember then he/she will not need to login until the token expires.

For state management, stateful widgets are used with setState function. setState is called in flutter whenever we need to update/change the state of UI when user interacts.

http package is used to call the API and fetch the user’s data respective to their department and institute. 

Callback function is used to change the state of previous screen while interacting with the current screen. 



For the backend we have used Firebase, which comes with features like Authentication, Firestore (NoSQL DB), Real time DB and much more. For our project we have used Authentication and Firestore to store user data.


C. Screen Shots




Conclusion

With the help of this project we think we were able to uplift the quality of education by providing better analytics of the quiz to the student. Students can easily find where they are lacking based on the category of the question. Also as the application is multi-platform we can target more users.

Reference


[1] https://www.educative.io/edpresso/what-is-firebase

[2] https://www.freecodecamp.org/news/firebase-firestore-crash-course/

[3] https://flutter.dev/

Comments

Post a Comment

Popular posts from this blog

Sign Language Detection Using open-cv and Haar cascade

-
Image
  Sign Language Detection Using open-cv python Haar Cascade classifiers are an effective way for object detection. This method was proposed by Paul Viola and Michael Jones in their paper Rapid Object Detection using a Boosted Cascade of Simple Features . The algorithm implemented in OpenCV can also be used to detect other things, as long as you have the right classifiers. My OpenCV distribution came with classifiers for eyes, upper body, hands, frontal face and profile face. Haar Cascade is a machine learning-based approach where a lot of positive and negative images are used to train the classifier. Frequently used keywords haar Positive Images:  These images contain the images which we want our classifier to identify. Negative Images:  Images of everything else, which do not contain the object we want to detect. Features  Initially, the algorithm needs a lot of positive images (images of hand) and negative images (images without hand) to train the classifier. Then we need to extract
Read more

University Event management Using React - Node JS - Mongo DB

-
Image
 University Event Management Using React, Nodejs & MongoDB The project is made using React as the Frontend library, Nodejs as a server-side language, and MongoDB as the database. The react application is Divided into components In the Hierarchy where the root or the main component is the App.js and the branches start under it. The Hierarchy of the React application is given in the Bellow Figure. In react, the Web Page or the Application is divided into components and these components are nested inside one another to form a single page. In react we write the code in the .js file but it renders HTML content onto the Browser, this is done with the JSX also known as "JavaScript XML", the JSX is similar to HTML with a slight difference in the syntax such as the class in HTML is className in JSX as the class is a reserved word in the JS. unlike HTML where we use the anchor tag to jump on the other page, we still can use the anchor tag to jump on other pages but there is anothe
Read more

Internship - II (IT446)

-
Internship - II (IT446) Full Stack Intern This internship started from 14th April to 15th July. it was a three months internship at Dev Squirrel private limited. My Role Position Title:  Full Stack Developer Intern Start  Date: April 14, 2022 End Date:  July 14, 2022 Stipend:  Performance based (Range of Rs. 1k 4k / month worked o n project) M y Responsibilities Maintaining & updating websites based on React /  NextJS Developing & maintaining APIs Writing clear, maintainable and testable code Tools and Technologies ReactJS / NextJS NodeJS AWS DynamoDB Lambda Supabase Redis Work done during Internship 1st month Initially for the 1st week some basic training was provided which include understanding the project and updating some minor modification to the code. Understanding the Frontend part which was in NextJS and Optimizing the site by removing the unused components and css. 2nd month Updating certificate page in NextJS Adding Domain Whitelabelling feature Added SMTP settings A
Read more