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:

1. run this app locally on your own machine (instructions for launching the app below)
2. 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 (this does not require any modifications to the back-end code or database).
3. share a public link to your local instance of the app below (see ngrok instructions below for generating a public link)

When you have completed the exercise, leave your local copy of the app running, enter the public link to it here, and push your code changes to GitHub:

https://a134-73-29-246-242.ngrok-free.app  

How to launch the app

Get the code

1. Fork this repository (accepting this as a GitHub Classroom assignment does this for you)
2. Clone your fork of this repository to your local machine
3. 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 mongo -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

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

Build and launch the front end

1. Navigate into the front-end directory
2. Run npm install to install all dependencies listed in the package.json file.
3. 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:3000

Let others view your app

When running locally on your machine, others can't access the app. To give temporary access to others to run the app on your machine:

• install ngrok
• run the command, ngrok http 4000

ngrok will then spit out a temporary URL that you can share with others to give them access to the app running on your machine

How the project was intiially 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 useful routing functionality
• npm install axios - to install a useful module for making requests to servers
• added .env file with 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
• 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 mongo -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