A proof of concept for utilizing the Open Weather API, the ANU Quantum Random Numbers Server, and Mapbox to create a Full Stack MERN application in REACT. The application first loads to a blank map and a dropdown down menu. From there the user can select their desired amount of coordinates randomly returned from Quantum. After returning the API call MapBox-GL plots the resulting coordinates. THe user can then click a map pin and a modal will display the pins latitude, longitude and several weather data points. User can then save the item to the backend MongoDB database or simply click another. From that point the user can click the Saved Points link which will then load the the saved items from the database. User can decide to delete data as choosing
After forking or doing a git pull, you will need to run a npm i package.json. This will install the major dependencies for both package.jsons.
npm i
Make sure you have the newest node.js installed.
Ensure you have obtained a Mapbox API key. This will need to go inside your .env file at the local level. Inside your .env file
REACT_APP_MAPBOX_TOKEN=" ";
- Deploy your full-stack application to Heroku. Make sure to perform the following:
- Initialize the project folder as a git repo by running a
git init
. Make sure you run this command at the same level as your 'server.js' file. (If you get an error message telling you a repository already exists, runrm -rf .git
followed bygit init
.) - Add a .gitignore at the same level as your server.js and add the line
node_modules
as the content of this file. You may wish to base your .gitignore on an example like this. - Create a Heroku app for your application, either via the command line
heroku create
or through the Heroku website. - Provision a MongoLab (MLab) Addon through Heroku.
- If you would like to store your changes in a Git repo and you don't already have your folder linked up to GitHub, follow these steps. Make sure NOT to initialize this GitHub repository with either a README, license, or .gitignore.
- Add and commit your changes before pushing up to Heroku (
git push heroku master
). - Once your site is deployed, you can seed your remote database by running the following commands:
heroku run bash
thennode scripts/seedDB.js
. Once this is complete, runexit
to exit Heroku bash. Your database should now be seeded!
- REACT JS - REACT client facing Framework
- MongoDB - Database storage frame
- Mongoose - MongoDB object modeling for node.js
- Material UI - CSS Framework within REACT
- ANU Quantum Random Numbers Server - Random number API
- Mapbox-GL JS - MapBox API
- MomentJS - Moment Js timestamp converter
- McCabe Northup - Full Stack Web Developer - mnorthup2207