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
• 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
• "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!