This project is a survey application built using the MERN stack (MongoDB, Express, React, and Node.js). The application allows users to create surveys, answer surveys, and view survey results.

Admin users can also perform CRUD (create, read, update, delete) operations on surveys and keep track of survey results.

Contents

• Application Screens
• What's included in ISI-Survey
  • Directory structure
  • Package contents
• ISI Survey API
• Installing the project
  • Requirement
  • Frontend
  • Backend
• Licenses and attribution
• Contributing

Application Screens

Login page Register page Admin dashboard page User Dashboard page Survey page Thank you page Create survey page (for Admin only) Data grid page (Visible for Admin only) Delete Survey Modal Edit Survey Survey responses page

What's included in ISI-Survey

The ISI Survey includes two main folders, client and server. The directories that live in the the client is those responsible for what the user see and interact with. Conversely the diectories that live in the server are api and logic that interact with database.

• package.json : Since this project is uses node package manager (npm) we will see package.json file in client and server directory that contains metadata such as name, version, dependencies, scripts (used to build and run the project).

• Fonts In this project we used Google font. There are two fonts we are using those are open sans for English text and nokora for Khmer font.

• Images and icons are located in: client/src/assets.

• Icons for icons we are using bootstrap-icons icons for the components. For favicons is located in client/public/favicon.ico.

Technologies

Frontend

• React
• ReactGlobalContext
• JavaScript
• React-Bootstrap
• MUI datagrid

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

Directory structure

Here's what you can expect to find inside the ISI survey.

[isi-survey]
├── client/
│   ├── public/
│   │   └── media
│   ├── src/
│   │   ├── assets/
│   │   │   ├── isi_logo.svg
│   │   │   └── ThankYou.png
│   │   ├── components/
│   │   │   ├── boilerplate/
│   │   │   │   ├── Header.jsx
│   │   │   │   └── Spinner.jsx
│   │   │   └── Survey/
│   │   │       ├── createQuestionComponents.jsx
│   │   │       ├── CreateSurvey.jsx
│   │   │       ├── displayQuestionComponents.jsx
│   │   │       ├── DisplayResult.jsx
│   │   │       ├── displayResultComponents.jsx
│   │   │       ├── DisplaySurvey.jsx
│   │   │       ├── DisplaySurveyList.jsx
│   │   │       └── SurveySubmit.jsx
│   │   ├── context/
│   │   │   └── AuthContext.js
│   │   ├── hooks/
│   │   │   ├── useAuthContext.js
│   │   │   ├── useLogin.js
│   │   │   ├── useLogout.js
│   │   │   └── useSignup.js
│   │   ├── pages/
│   │   │   ├── Login.jsx
│   │   │   ├── NotFound.jsx
│   │   │   ├── Signup.jsx
│   │   │   └── Welcome.jsx
│   │   ├── utils/
│   │   │   ├── findInputError.js
│   │   │   └── isFormInvalid.js
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── logo.svg
│   │   ├── reportWebVitals.js
│   │   └── setupTests.js
│   ├── .gitignore
│   ├── package-lock.json
│   ├── package.json
│   └── README.md
├── server/
│   ├── controllers/
│   │   ├── questionController.js
│   │   ├── surveyController.js
│   │   └── userController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   ├── models/
│   │   ├── questionModel.js
│   │   ├── surveyModel.js
│   │   └── userModel.js
│   ├── routes/
│   │   ├── questions.js
│   │   ├── surveys.js
│   │   └── users.js
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   ├── package.json
│   └── server.js
└── README.md

Package contents

Here's what you can expect to find in each of the directories and files in the ISI Survey project:

---

• /client: contain the required directories and files for the user.
• /client/public: You can find the favicon and SPA index.html
• /client/src: contain the app page, components, hooks, boilerplate, context, utils directories, as well as other necessary files for front-end.
• /client/README.md: Front-End documents

---

• /server : contain the required directories and file for API and database interactions.
• /server/controller handling the incoming requests from the client.

ISI Survey API

• API for survey results
  • This api need token authorization localhost:5000/api/surveys

Installing the project

Requirement

Project can be install using git commands, Node and npm

• git and github:
  • You will need to register SSH key with your github account.
  • One more method is to simply signin to your github account during the project cloning.
• node js:
  • During the current development my node version is v18.12.1
• npm
  • You'll need npm, It will be come out of the box

Setup for Local development

1. Clone this project using git
2. Use npm install for the three main directories

• cd client && npm install
• cd server && npm install
• cd .. && npm install

3. Create Mongo Atlas account.

• Create a new Database
• Get the database URI

4. Create a new .env file

• DB_URI=
• PORT=
• JWT_SECRET=

5. Go to root directory

• Run npm run dev

Licenses and attribution

Contributing

ISI-Survey App User Documentation

Introduction

This application allows users to create surveys, answer surveys, and view survey results. Admin users have additional features like managing surveys and tracking survey results.

This user documentation will guide you through the process of, logging in, creating surveys, answering surveys, and viewing survey results.

Contents

• User Roles
• Register and Logging In
• Creating Surveys
• Answering Surveys
• Viewing Survey Results

User Roles

There are two roles in this project User Admin and Normal User

• User Admin Be able to create, delete, update, Taking surveys and see user responses.

• Normal User Be able to taking survey that created by admin.

Register and Logging In

1. Open your web browser and enter the URL of the ISI-Survey App.

2. On the login page, enter your username and password.

3. Click on the "Login" button to log in.

   

Creating Surveys

If you are an admin user, you can create surveys using the ISI-Survey App. Follow these steps to create a survey:

1. Log in to the ISI-Survey App using your credentials
2. Once logged in, you will be redirected to the admin dashboard.
3. On the admin dashboard, click on the "Create Survey" button.
4. Enter a title for the survey in the provided field.
5. Add questions to the survey by clicking on the "add question" button.
6. Choose the type of each question (e.g short response, paragraph, true/false) also in that options there a new section for creating a new section for the survey.
7. Repeat step 5 and 6 to add more questions to the survey.
8. Click on the Save and Finish Survey to save the survey.

Answering Surveys

To answer a survey using the ISI-Survey App, follow these steps:

1. Log in to the ISI-Survey App using your credentials.
2. Once logged in, you will be redirected to the user dashboard.
3. On the user dashboard, you will see a list of available surveys.
4. Click on the survey you want to answer.
5. Read the instructions and qustions carefully.
6. Select the appropriate answers or provide text inputs as required.
7. Click on the "Submit" button to submit your survey responses.

Viewing Survey Results

Admin users can view the results of the surveys using the ISI-Survey App. To view survey results, follow these steps:

1. Log in to the ISI-Survey App using your admin credentials.
2. Once logged in, you will be redirected to the admin dashboard.
3. On the admin dashboard, you will Survey data button to show responses as data-grid and See all respones to show data as table and pie chart for True/False question.
4. The survey results will be displayed, showing the responses for each question.

Conclusion

Congratulations!🎈🥳 You have successfully set up the ISI-Survey App, logged in, created surveys, answered surveys, and viewed survey results. If you have any further questions or issues, please contact the me for assistance. Enjoy using the ISI-Survey App!