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/
- 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
- 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)
- 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
-
Frontend:
- reactJS, CSS, HTML5
- Google OAuth 2.0
- Google reCAPTCHA v2
- Redux
-
Backend:
- nodeJS
- express
- python (NLTK)
-
Database:
- Firebase Realtime Database
- Firebase Storage
-
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)
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 |
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 |
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 |
Here the user can see the details of the topic and can delete the topic with its feedbacks.
Desktop | Mobile |
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 |
With the help of a python script a wordcloud is generated about the feedback texts, which is displayed in this page.
Wordcloud |
Here is displayed a figure about how frequent are the feedbacks uploaded.
Desktop | Mobile |
The users are notificated with the help of 3 types of toasts: success, info, error.
Success | Info | Error |
The application has two themes to display: light/dark.
Light themed homepage | Light themed user's topics page |