Feedback System (FeedSys) Using React, Nodejs & MongoDB, Flutter, Material-UI

The project is made using React and Flutter as the Frontend library/framework, 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 another way we can handle routing in React, The Routing is done By the react-router-dom which has the BrowserRouter, with this we can perform Routing in react.

the difference between the anchor tag and the BrowserRouter is that an anchor tag when the link is clicked the request is made to the server and the server, in turn, responds to the request, but in the BrowserRouter the React bypasses the request that the browser makes to the server and it handles that himself, and hence we won't see the refresh when you click on the link.

Introduction

Front-end part of the project is implemented using ReactJS and Flutter. ReactJS for Web app and Flutter for Web as well as Android platform. Material-UI which is an UI component-based library for ReactJS. Flutter provides multi-platform support with single codebase. NodeJS as the backend for server-side handling and MongoDB as the database. With this project we are able to create feedback for faculty as well as courses, faculty members will be able to see their own analytics of the feedback created, and faculty member can see the course analytics respective to their institute and department.

Admin is responsible for creating faculty and course feedback. Question templates can also be created for time saving and reusability. Admin can also delete question templates as well as feedbacks.

Students will be able to see the feedback respective to their Semester, institute and department, also once the feedback is successfully submitted, that feedback will no longer be accessible. So a student can give particular feedback response only once.

Literatur Survey

A. In any educational institution/organization, it is difficult to maintain the quality of education, and on top of that students have fear of giving proper feedback to the faculty/course, that would not be good for any institution. [1]

B. React is remarkably flexible. Once you have learned it, you can use it on a vast variety of platforms to build quality user interfaces. React is a library, NOT a framework. Its library approach has allowed React to evolve into such a remarkable tool. [2]

C. 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.[4]

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.

React is one of the most popular frontend libraries. It is used to create a user interface or client side library for javascript. Node.js is an open source server environment. Also known as the server side language. And the Mongodb as the database as it is one of the most famous databases used with react and nodejs.

In the project a lot of npm packages are used: axios, chartjs, nodemon, bcryptjs, jsonwebtoken, mongoose, react-router-dom. And few more all these packages were used for the different functionalities of the application.

Frequently used Keyword

Component: a component is the basic element of any react application
useState Hook: useState lets you use local state within a function component. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value. It is used to make the application dynamic
useEffect Hook: useEffect let us do something when the component is mounted or the component is rendered on the browser.
JSX(Java script XML): React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, the bellow are some of the feature of JSX.

It is faster because it performs optimization while compiling code to JavaScript.
It is also type-safe and most of the errors can be caught during compilation.
It makes it easier and faster to write templates, if you are familiar with HTML.

5. Material-UI: material-ui is a component based UI library for ReactJS. Material-UI provides varieties of pre-built components which we can use to create UI.

6. Widget: Almost everything in flutter is widget. And in most application MaterialApp widget will be the root widget of the application

7. 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 React Js, Node Js, MongoDB, Material-UI, Flutter for the development of the project.

React is the frontend library for the java script. We have used it to create a User interface. Material-UI is used for creating UI.

Node Js is a server side language and it is used to create server side code for the application and to serve the frontend.

MongoDB is the database we have used to store the data of the event into it. here we have used the cloud service of the mongodb the Mongodb Atlas

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.

Features of Project

Account verification through OTP.
Respective Sem, Institute and department wise categorised data.
Feedback for both Faculty and Course
Anonymous feedback statistics.
Faculty can analyse the feedbacks respective to their dept. and institute.
Multiplatform support.
Custom Question templates

Project Details

A. Project Content

The project includes a responsive web application as well as Flutter based Android App, which is also optimised for web UI, in which the admin will be able to create feedback for faculties/courses Admin can also add custom questions for the feedback by creating question template.

Faculty members will be able to see their own analytics of the feedback created, and faculty member can see the course analytics respective to their institute and department.

B. Project Structure

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.

In our application the root component is App.js and every component is react starts from capital letter. In the App.js the Navbar.js component is rendered and it will always render no matter what we do.

Now if we want to go to another page, as we use in HTML with anchor tag to perform routing, now the thing happens in that case is that every time we click on any link our Browser makes a fresh new request and in turn the server send the necessary files to the browser and that file is rendered in our browser.

In case of React we can surely use the anchor tag but it is not considered the best practice as it makes our applications slow. So the react have a alternate method called Browser Router of the react-router-dom package.

In this the Routing is handled by the react so when the Browser Router is used and our page loads only once as the browser send the package that include every file that we used to create the web application. now when we click on the link the request is still made to the server but the react intercept that request and it render the necessary Component on the browser. The difference we observer in both of the way is that the browser router is more quick.

In this Project I have used JSX also knows as Java script XML to design the User Interface. The JSX is quit similar to HTML with a few changes in the syntax like, in HTML the class we use to give styling is replaced with className in react as the class is an reserved word in Java script. Same with for as the for is also a reserved word in JS so in place of for we use htmlFor. And so on but the actual syntax is almost similar to HTML. For the styling we have used the CSS to give styles to the UI.

For UI we have also used Material-UI which is a component based UI library for react, this library has prebuilt Components which we can import and use them, we can also control how they look and fees, material-ui have helped a lot with its aesthetic and beautiful UI components.

For the charts we have used the npm package called chartjs which allows us to generate very beautiful and interactice yet simple and responsive charts so it cab provide the best user experience.

The second main package we used is mongoose, Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node. js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.[4]

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 isRemember 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.

C. Screen Shots

React JS:

Admin User

Student User

Faculty User

Flutter:

Conclusion

With the help of this project we think we were able to uplift the quality of education by providing better analytics of the feedbacks to the faculty. Also as the analytics is anonymous student can give their honest feedback without hesitation. Also as the application is multi-platform we can target more users.

React Live Demo

Flutter Live Demo

Reference

[1] Gackenheimer, Cory. "What is react?." Introduction to React. Apress, Berkeley, CA, 2015. 1-20.

[2] https://www.freecodecamp.org/news/why-use-react-for-web-development/

[3] https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/

[4] https://flutter.dev/

Search This Blog

My Projects