Giter Club home page Giter Club logo

weathermapsdata's Introduction

Simply Weather, Data, and Mapping

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

Demo

Getting Started

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

Prerequisites

Make sure you have the newest node.js installed.

Installing

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=" ";

Instructions for deployment

  • 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, run rm -rf .git followed by git 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 then node scripts/seedDB.js. Once this is complete, run exit to exit Heroku bash. Your database should now be seeded!

Built With

Author

weathermapsdata's People

Contributors

mnorthup2207 avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.