Full MERN-Stack Web App Exercise

This is a so-called "monorepo" - a single repository containing all the components necessary to build and run an app:

a front-end built with React.js
a back-end built with Express.js
a MongoDB database connected to the back-end with mongoose

Exercise Requirements

To complete this exercise:

run this app locally on your own machine (instructions for launching the app below)
add a new page to the app called "About Us", where you have written a few paragraphs about yourself and included a photo of yourself. The page content, including all text and the URL to the image must be retrieved as JSON data from a new route you create on the back-end.

How to launch the app

Get the code

Fork this repository (accepting this as a GitHub Classroom assignment does this for you)
Clone your fork of this repository to your local machine
Navigate into the project directory

Build and launch the database

install and run docker desktop
create a dockerhub account
run command, docker run --name mongodb_dockerhub -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=secret -d mongo:latest

The back-end code will integrate with this database. However, it may be occasionally useful interact with the database directly from the command line:

connect to the database server from the command line: docker exec -ti mongodb_dockerhub mongosh -u admin -p secret
show the available databases: show dbs
select the database used by this app: use example-mern-stack-app
show the documents stored in the messages collection: db.messages.find() - this will be empty at first, but will later be populated by the app.

If you have trouble running Docker on your computer, use a database hosted on MongoDB Atlas instead. Atlas is a "cloud"" MongoDB database service with a free option. Create a database there, and make note of the connection string. In the .env file within the back-end directory, replace the given DB_CONNECTION_STRING value with this one.

Build and launch the back end

Navigate into the back-end directory
Run npm install to install all dependencies listed in the package.json file.
Run npm start to launch the back-end server

Build and launch the front end

Navigate into the front-end directory
Run npm install to install all dependencies listed in the package.json file.
Run npm start to launch the React.js server

Visit the web app in your web browser

install React Developer Tools
navigate your web browser to http://localhost:7002

How the project was intially set up from scratch...

While you don't need to do this in order to simply run this app, here's how the project was intially set up

mkdir my_project to create project folder
cd my_project to go into the folder

Initial set up of React.js front end

go into the main project folder and...
npx create-react-app front-end - to create a boilerplate React project for the front-end
cd front-end - to go into the folder that has been created
npm install react-router-dom - to install a 3rd-party module with useful routing functionality
npm install axios - to install a useful module for making requests to servers
added .env file with environment variables and the port setting at which to run React locally when developing
ran npm start to start up the local React development server
start building out the rest of the code in the src directory

Initial set up of Express.js back end

go into the main project folder and...
mkdir back-end to create a folder that will hold the back-end code
cd back-end - to go into the folder
npm init -y - to initialize this folder as an npm-powered project
npm install -g nodemon - to globally install a useful module for hot restarting of the server code
npm install express - install the main server framework we will rely on to handle basic server tasks
npm install mongoose - to install a useful module for dealing with MongoDB databases
npm install dotenv - to install a useful module for reading environment variables from .env files
npm install cors - to install a useful module for allowing cross-origin requests
create .env file to hold MongoDB database credentials, express server port, and other sensitive data
create initial server.js and app.js files to set up a basic express server
edit the package.json file and set the main property to have the value, server.js
ran nodemon index to start the server and auto-restart with any change saved to any file.
try out some example server routes using Postman
start building out the rest of the code in the src directory

Initial set up of MongoDB database:

install and run docker desktop
create a dockerhub account
run command, docker run --name mongodb_dockerhub -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=secret -d mongo:latest
run command, docker ps to verify docker is running and note the port number
access the mongo shell with docker exec -it mongodb_dockerhub mongosh -u admin -p secret
run command, show dbs within the mongo shell to see a list of databases
type exit to quit the shell after you confirm it is working

agiledev-students-spring2024/3-simple-mern-stack-app-ShiwenFang