TERRA MERN Template

In this project, you are task with working on an existing application. A significant part of the challenge will be to familiarise yourself with the codebase you've inherited, as you work to improve and extend it.

Structure

This repo contains two applications:

• A frontend React App
• A backend api server

These two applications will communicate through HTTP requests, and need to be run separately.

Documentation

More documentation of the codebase and its architecture can be found here. It's recommended you all read the suggested docs after making sure the whole setup below worked for everyone. Then work together on a diagram describing how the application works.

Quickstart

Install Node.js

If you haven't already, make sure you have node and NVM installed.

1. Install Node Version Manager (NVM)

   brew install nvm
   

   Then follow the instructions to update your ~/.bash_profile.
2. Open a new terminal
3. Install the latest version of Node.js, (20.5.0 at time of writing).

   nvm install 20
   

Set up your project

1. Install dependencies for both the frontend and api applications:

   cd frontend
   npm install
   npm install apexcharts --save
   cd ../api
   npm install
   

2. Install MongoDB

   brew tap mongodb/brew
   brew install mongodb-community@6.0
   

   Note: If you see a message that says If you need to have mongodb-community@6.0 first in your PATH, run:, follow the instruction. Restart your terminal after this.

3. Start MongoDB

   brew services start mongodb-community@6.0
   

4. Install React Map

   npm install @react-map/world
   npm install d3
   

5. Install React Tooltip

   npm install react-tooltip
   

Setting up environment variables.

We need to create two .env files, one in the frontend and one in the api.

Frontend

Create a file frontend/.env with the following contents:

VITE_BACKEND_URL="http://localhost:3000"

Backend

Create a file api/.env with the following contents:

MONGODB_URL="mongodb://0.0.0.0/Terra"
NODE_ENV="development"
JWT_SECRET="secret"

For an explanation of these environment variables, see the documentation.

How to run the server and use the app

1. Save your API

; create an apiKey.js file - ensure it's at the top level

2. Seed the data:

; delete the cities table Table Plus
; cd models
; node apiToMongo.js

3. Start the server application (in the api directory) in dev mode:

; cd .. (up to the `api` directory)
; npm run dev

4. Start the front end application (in the frontend directory)

In a new terminal session...

; cd frontend
; npm run dev

You should now be able to open your browser and go to http://localhost:5174/ to view the site.