University project for final exam

This is a web application for giving anonymous feedbacks and collecting, analizing them. The application's frontend is written in ReactJS, the backend is written in NodeJS, which can execute python srcipts for analizing feedbacks. The application's data is stored in Firebase realtime database and storage.

Demo: https://sapifeedback.herokuapp.com/

It is useful for the users who:

• want to get feedback in order to improve, learn
• want to collect feedbacks CONTINUOUSLY
• want to collect feedbacks about more than one topic
• want to collect unstructured feedbacks (free text + image)
• want to anayzie feedbacks in order to extract useful information

About the project

Types of user:

• Logged in user: can create topics for collecting feedbacks, manage topics (create, archive, delete) and feedbacks (export, delete, analyze).
• Guest user: can give feedback to a given topic (prequisite: having the topic's id or the feedback url)

Details:

• the application uses websockets for refreshing the UI in real time
• feedback texts are analized with the help of python scripts
• reCAPTCHA v2 is used for preventing bot attacks
• the application is responsive, it is easy to use on mobile device as well

Technologies used:

• Frontend:

  • reactJS, CSS, HTML5
  • Google OAuth 2.0
  • Google reCAPTCHA v2
  • Redux

• Backend:

  • nodeJS
  • express
  • python (NLTK)

• Database:

  • Firebase Realtime Database
  • Firebase Storage

Some important node packages:

• Frontend:

  • reaviz (for generating figures)
  • socket.io-client (websocket for realtime changes)
  • react-router-dom (for creating routes)
  • react-toastify (for notifications)
  • react-google-login (for login)
  • react-google-recaptcha (for preventing bot attacks)
  • i18next (for internationalization)
  • client-compress (for compressing feedback images)

• Backend:

  • express (for handling http requests)
  • firebase-admin (for communicating with cloud database)
  • http-proxy-middleware (for creating proxy)
  • python-shell (for executing python scripts)
  • socket.io (websocket for realtime changes)

Pages of the website

Homepage

Here the user can log in with Google Account or can enter a topic's ID to give feedbacks to a given topic at the Feedbacks page.

Desktop	Mobile

User's topics page

At this page the user can create topics and see, sort and filter the created topics. At the top of the page there is a navigation bar, where the user can see the profile information and can log out, and there is also a search bar for searching between the topics.

Desktop	Mobile

Navbar

User's topics

If the user clicks on the Add topic card, a modal pops up where he/she can create a topic.

Desktop	Mobile

At the topic card's options, the user can archive/activate the topic, and also can copy the topic's id and feedback page url to clipboard.

Topic cards	Topic card options

At the navbar there is a settings option, where the user can change the theme (dark/light) and the language of the application (english, hungarian).

Settings

Feedbacks page

Here the user can give feedback to a given topic. The feedback must contain a text and optionally an image. The images which are bigger than 1 MB, are compressed. In order to upload the feedback, the user has to solve a reCAPTCHA.

Desktop	Mobile

On the next pages, there is a menu bar where the user can see all the information about a topic (details, feedbacks, analysis) and go back to User's topics page.

Desktop	Mobile

Topic's details page

Here the user can see the details of the topic and can delete the topic with its feedbacks.

Desktop	Mobile

Topic's feedbacks page

Here the user can see all the feedbacks paginated, can delete them, see the uploaded pictures and export the feedbacks. If there is no image attached, a placeholder image is dsplayed.

Desktop	Mobile

With the help of popup modals, the user can delete a feedback and also see the feedback's image.

Delete feedback modal	Feedback image modal

Feedbacks's wordcloud page

With the help of a python script a wordcloud is generated about the feedback texts, which is displayed in this page.

Wordcloud

Feedbacks's frequency page

Here is displayed a figure about how frequent are the feedbacks uploaded.

Desktop	Mobile

Notification toasts

The users are notificated with the help of 3 types of toasts: success, info, error.

Success	Info	Error

Application themes

The application has two themes to display: light/dark.

Light themed homepage	Light themed user's topics page