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
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-surveyto house the project and linked it to this GitHub repository
- added .gitignore and a readme
npx create-react-app client: this creates a
clientfolder and sets up React inside it
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-domis for React Router, which allows you to build apps that have more than one URL/page.
- emptied the
clientand added two empty files,
App.js: this gets rid of the default files that
create-react-appcreates 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
serverfolder in the
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
serverfolder 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
importsyntax rather than
devscript allows me to run
npm run devto 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 firstname.lastname@example.org or leave a comment. I would love to know what I can do better!