In this group project, you will have a day and a half to create a theme park themed Full Stack Application. This will include a React frontend, a MongoDB database, and a Mongoose/Express backend. How you distribute the work within your group will be up to you. By the end of the hackathon, you will be expected to have a working, reasonably styled, and deployed app. Have fun!
-
Choose a team git boss/czar/fairy to handle pull requests from team members
-
Build your own API with:
- A MongoDB database connected to mongoose
- Mongoose schemas and models
- Server Middleware
- Routes and Controllers
-
Build a React Frontend within a
client
directory inside the main project directory:npx create-react-app client
-
Set up a
.gitignore
file that prevents your application from pushing upnode_modules
touch .gitignore echo "node_modules" >> .gitignore
-
Style your React App professionally
-
Connect them with
axios
in the React App. Your server's base URL should look something like this in development http://localhost:3001/api/const BASE_URL = 'http://localhost:3001/api' // When using the BASE_URL axios.get(`${BASE_URL}/someroute`)
-
Deploy the MongoDB Database with Atlas
-
Deploy the Express Server with Heroku
-
Deploy the React App with Heroku
- Get (Read)
- Post (Create)
- Connected Mongoose/Express backend
- Working React frontend
- Reasonably styled
- Deployed to Heroku
We'll be deploying our app on Heroku, you can sign up for an account Here. Heroku is a web service provider that will host our server and React app on the cloud. We'll be using MongoDB Atlas to host our database on the cloud, sign up for an account Here.
We'll be utilizing Express to display our react app once we deploy. We'll cover these steps on the final day with a guided deployment walkthrough.
In preparation for deployment, you should have a client
folder containing your React app and a seperate server
folder containing your Express app.
The folder structure should look like this:
.
├── client
| |-- README.md
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── index.css
│ │ └── index.js
│ └── yarn.lock
|--server
| ├── controllers
| │ ├── Controller1.js
| │ └── Controller2.js
| ├── db
| │ └── index.js
| ├── models
| │ ├── Model1.js
| │ ├── Model2.js
| │ └── index.js
| ├── package.json
| └── server.js