/survey-questionnaire

A small questionnaire Web Application similar to what Typeform.com offers https://www.typeform.com/#home-examples

Primary LanguageTypeScript

SURVEY QUESTIONNAIRE

This project was bootstrapped with Create React App. It is a simple app that allows a user answer questions provided by a questionnaire. The app uses the questionnaire.json file to derive its definition of a questionnaire

Table of Contents

Features

  • A user upon visiting the app, sees a list of questionnaires.
  • A user on clicking a questionnaire card is redirected to the quiz-like page
  • A user can go back and forth between survey pages without losing their previous selections/answers

Concepts employed

  • The app is similar to what Typeform.com offers here.
  • This app demonstrates the use of basic concepts of React
    • Components
    • Routing
    • State management (React Hooks/Context APIs)
    • Custom hooks
    • CSS Modules

Built with

  • HTML5
  • CSS3
  • Typescript
  • React

System Design/ UI Architecture

UI Implementation is done using the Atomic Design Pattern

Designs

See original survey page screenshots below;

  • Questionnaire Home Page. Client Side

  • Questionnaire Intro Page. Client Side

  • Questionnaire/Quiz page. Client Side

Required Installations

  • yarn

Installation of This Repository

Once you have installed the required packages shown on the Required Installations, proceed with the following steps

Clone the Repository

your@pc:~$ git clone https://github.com/fegoworks/survey-questionnaire.git

Move to the downloaded folder

your@pc:~$ cd survey-questionnaire

Install all packages

your@pc:~$ yarn install

Open the app

your@pc:~$ yarn start

License

Distributed under the MIT License. See LICENSE for more information.

Contact