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 aclient
folder and sets up React inside itcd client
thennpm 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 insideclient
and added two empty files,index.js
andApp.js
: this gets rid of the default files thatcreate-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 thereact-survey
directory,cd
ed into it and rannpm 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 myserver
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 theimport
syntax rather thanrequire()
- the
dev
script allows me to runnpm 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!