Questionnaire Editor - Frontend

➡ Link to the Backend repository: Questionnaire Editor - Backend

Summary

A Full-stack React application with functionality for editing questionnaires (with images), measuring statistics, persisting and fetching structure utilizing a database by communicating with the backend.

Features Showcase

Tech Stack

• React structured based on Atomic Design
• TypeScript
• Vite
• Axios
• Sass
• Bulma
• Docker

Running the Frontend

# start the application
pnpm dev

# build for production
pnpm build

Dockerizing

# building the frontend image
docker build -t questionnaire-editor-frontend .

Design Decisions and Better Alternatives

• Images are currently being uploaded as Base64 encoded strings, which adds a size overhead of roughly 37%. In a real world application, images would be uploaded as files in a multipart/form-data request using a library such as multer, or uploaded to an external storage such as Amazon Web Services (AWS) and referenced with relative paths in the database.

• The current design supports only one Questionnaire to simplify saving and representing data in the frontend; this means that any data saved will override any existing data in the database. However, the backend was made quite flexible to support scaling for supporting more than one questionnaire.

• Rows and Columns, referenced Questions and Answers throughout the application, were kept in separate schemas in order to support scalability and adding unique features if required. However in the event they'd remain identical, it could be better to combine them under one schema.

• Since there is only one page, routing as well as pages/templates (from Atomic Design) were not included, but could easily be added right away without any extra changes.