Project description

A React app that reads multiple surveys from a JSON file and makes them available for the users to use. The admin can create multiple surveys from the Admin page and can also edit different components of the previously created surveys. The newly added survey becomes available on the homepage. The user will get an email after taking a survey and the admin will also be notified through an email. The email-sending service has been implemented using an email service provider, EmailJS.

Screenshots of the homepage, admin page, and a survey page can be seen below

Homepage

Admin page

Survey page

To view a live example, click here

Programming Environment: Frontend Language: `React`, `CSS` and `JSX`. Backend Language: `Express.js`.

Email Service Setup

We are going to use EmailJS to set up the email-sending service. After the user takes a survey, the user can enter the email address and will receive the response from the survey. The admin will also receive an email, which will contain the user details and the selected answers to their corresponding questions from one survey. The admin will also receive the response the user received.

• To receive the survey from EmailJS we are going to first open an email service and connect the email from which the user and admin will receive the email. Take note of the Service ID that we will use later.

• Then open two email templates, one for the user and the other one for the admin. Keep track of the two template IDs.

- From the Account tab you will find a public key. We will also need that later. - To get a better idea of EmailJS you can take a look at this article

To Run the Code

• The website is completely built on React and Express libraries of JavaScript. So, first install nodejs and npm.
• After the successful installation of nodejs and npm, clone the repository into your local system using the below command:

  git clone https://github.com/ShawkhIbneRashid/react-survey-app.git

• To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute the following command:

 npm install

• Then you have to start the `Express' server. To do that run the following command

 npm run devStart

• I have also added a Flask server. You can use either. To run the Flask app, you need Python and its libraries such as Flask and CORS installed.
• Replace the variables in the .env file. Replace them with the template IDs, Service ID, and public key.
• You can check the website using npm start, it will open the website locally on your browser.