Laura Abro
Abro Cadabro!

Follow

Abro Cadabro!

Follow
Building a MERN Survey App, Day 1: Planning and Setup

Photo by Emily Morter on Unsplash

Building a MERN Survey App, Day 1: Planning and Setup

Laura Abro's photo
Laura Abro
·Aug 20, 2022·

4 min read

Planning

Today I am beginning to build my very first MERN app. I was working on a project that used an MVC model with Node and Express, plus Liquid templates for the views, but I discovered that some features would be easier to build with React. Unfortunately, after getting up to speed on React, I learned that it isn't usually used as a drop-in replacement for Liquid. Rather than try to convert a WIP as my first MERN project, I decided it would better to just build something from scratch instead.

For this project, I'll be making a survey app.

The final result should:

  • have an authentication system
  • allow users to create custom surveys
  • allow users to respond to surveys, then view, edit, or delete their responses
  • lock responses after a certain deadline or upon submission (decided by the survey creator) at which point respondents can only view their responses
  • allow survey creators to view all responses in tabular format, view specific responses, and aggregate/visualize responses

In order to simplify the initial development, to start I'm going to ignore the authentication and build an app that:

  • displays a single form that can be filled out
  • allows users to fill out the form
  • upon submission, they will be given a unique ID that will allow them to access their response and edit or delete it
  • have a page that displays all responses in tabular format, allows viewing individual responses, and provides some visualization of the data

Initial Setup

The app has 3 components that need to be managed: the backend (Node/Express), the frontend (React), and the database (MongoDB - Atlas in my case but a local installation would also work). I already have an Atlas account, so I'm just focusing on Express and React here.

Initial setup steps:

  • created a folder called react-survey to house the project and linked it to this GitHub repository
  • added .gitignore and a readme .gitignore contents: .DS_Store node_modules/ .env
  • npx create-react-app client: this creates a client folder and sets up React inside it
  • cd client then npm install bootstrap reactstrap react-router-dom: I am using Bootstrap for this project to simplify the design and have chosen to add it using reactstrap. According to the reactstrap documentation, bootstrap also needs to be installed independently. react-router-dom is for React Router, which allows you to build apps that have more than one URL/page.
  • emptied the src folder inside client and added two empty files, index.js and App.js: this gets rid of the default files that create-react-app creates and gives me a clean slate to work with. I also deleted the .gitignore file provided by React as I already have a file in my top-level directory
  • Made a server folder in the react-survey directory, cded into it and ran npm init -y: this creates a package.json for the backend server
  • npm install express mongoose dotenv cors: installs Express, Mongoose (MongoDB), dotenv (for using a .env config file) and cors (to avoid cross-origin problems with the API I will create)
  • npm install nodemon -D: installs nodemon as a development dependency; it automatically reloads the backend server when changes are made
  • created an empty file called server.js inside my server folder and edited the package.json package.json for the backend
  • "type": "module" makes Node use ES6 modules. I honestly don't know all the implications of that, but I use it because it allows you to use the import syntax rather than require()
  • the dev script allows me to run npm run dev to start the Node server with nodemon

This is the end of what I will be doing for today. At this point, I have the basic setup complete; building the app will begin tomorrow.

NOTE: This is not a tutorial. I am learning how to build a MERN app and decided to record my progress. Although I'm doing my very best to make sure my code is correct, I may not always be following best practices. If you see any mistakes, feel free to contact me at l@abrocadabro.com or leave a comment. I would love to know what I can do better!

 
Share this