CAMPY: The Camp Planner App

by Jonathan Delcid, Cesar Lopez, Wajma Niazi, Christen Weston, & John Whitten

January 25, 2022

Campy is a multi-html, dynamic web-based application wherein the user can organize a packing list, receive a weather forecast and a map for a specific inputted location, and search meal and cocktail recipes in order to plan for an upcoming camping trip.

Technologies Used

• Babel 7.6.4
• Bootstrap 5.1.3
• CSS
• css-loader 3.2.0
• eslint 6.3.0
• eslint-loader 3.0.0
• file-loader 1.1.6
• html-loader 0.5.5
• HTML
• package-json
• Javascript
• Jest 24.9.0
• JQuery 3.6.0
• Node.js
• Node Package Manager 6.14.9
• popper.js 1.16.1
• style-loader 1.0.0
• webpack 4.39.3
• webpack-cli 3.3.8
• webpack-dev-server 3.8.0

Project Title: CAMPY: The Camp Planner App

MVP Objective

An app that helps a user organize a packing list, receive a weather forecast and a map for a specific inputted location, and research meal and cocktail recipes in order to help plan for an upcoming camping trip.

User Interface

Campy consists of 5 HTML pages, each containing unique functions for user engagement.

HTML	UI Function
Index	Introduction landing page.
Gear	Drag and drop options from hard-coded lists based on various camping styles, each with unique packing list recommendations.
Weather & Map	Search LocationIQ and OpenWeather APIs by entering a city & state to see a 7-day forecast and map.
Meals	Search MealDB and CocktailDB APIs to get recipes with images, ingredients, measurements, and instructions.
About	Information about the Dev team with links to individual GitHub and LinkedIn accounts.

Creating API Keys

This website requires 4 separate API keys:

• LocationIQ LocationIQ-API
• OpenWeather OpenWeather-API
• TheMealDB TheMealDB-API
• TheCocktailDB TheCocktailDB-API

The following 2 API keys will need to be created and set up by the user:

• LocationIQ LocationIQ-API
• OpenWeather OpenWeather-API See Instructions below.

The following 2 API keys are open source with unlimited usage, do not need to be created by the user, and are hard-coded in the application:

• TheMealDB TheMealDB-API
• TheCocktailDB TheCocktailDB-API

Creating a Location IQ API Key

LocationIQ LocationIQ-API

You will need to make an account and get an API key. The Free Trial version of LocationIQ permits the user 1 Access Token with 5,000 requests /day and 2 requests /second.

• Visit the LocationIQ-API site. In the top right of the home page, click SIGN UP.

• Click Sign in with Google if you want to sign in with your Google account. OR enter your Work email, Full name, Use Case, and check the I'm not a robot reCAPTCHA box. Then click the SIGN UP button.

• The next page will require you to select an option from the I'm using LocationIQ for:, and you should select A Website. For the I'll use the following APIs checkbox options, check All of them!. Click GET STARTED.

• Click on the API Access Tokens on the left column to generate your personal API key.

• At this point, you'll be able to access a dashboard that includes your API key as well as your remaining API calls for the month.

Creating an OpenWeather API Key

OpenWeather OpenWeather-API

You will need to make an account and get an API key. The Free Trial version of LocationIQ permits the user with 60 calls /minute and 1,000,000 calls/month.

• Visit the OpenWeather-API site. Click SIGN UP.

• In the Create New Account menu, enter your Username, Email, Password, and Repeat Password. Check the boxes next to I am 16 years old and over and I agree with Privacy Policy, Terms and conditions.... Consent to receive communications if you prefer. Check the I'm not a robot reCAPTCHA box. Then click the Create Account button.

• Once you are signed in, click on the API keys tab in your account. You can use the Default key that the API provides or generate a new key with a unique name. Generally, you'd only need multiple keys if you are using the API in multiple locations (such as on different sites) and you want to keep track of the API usage in each location.

• At this point, you'll be able to access a dashboard that includes your API key as well as your remaining API calls for the month.

Project Setup/Installation Instructions

• Open the terminal on your local computer.

• Navigate to the parent directory of your preference.

• Clone this project using $ git clone https://github.com/wowgr8/camp-planner

• Navigate to the top level of the directory with the command $ cd camp-planner

• Make sure you have installed Node js

• Run command $ npm install to install all dependencies.

• Create file for storing environmental variables you want to keep secret (such as an API key) $ touch .env

• Add the following line of code to the .env file API_KEY_WEATHER=insert-your-API-key-here where you substitute the OpenWeather API key you got by following the instructions above for the "insert-your-API-key-here". The following is an example using a fake API key: API_KEY_WEATHER=1234567890

• Add the following line of code to the .env file API_KEY_MAP=insert-your-API-key-here where you substitute the LocationIQ API key you got by following the instructions above for the "insert-your-API-key-here". The following is an example using a fake API key: API_KEY_MAP=1234567890 -->

• Run the command $ npm run build

• Run the command $ npm run start to launch on a browser.

Additional Setup/Installation Note for Windows Users

This environment was created on a Mac. For it to work properly in your local environment make the following change:

• Update package.json, line 8 to: "start": "npm run build & webpack-dev-server --open --mode development"

Known Bugs

• None.

License

MIT License Published 2022 by Jonathan Delcid, Cesar Lopez, Wajma Niazi, Christen Weston, & John Whitten

Contact Information

If you encounter any issues with this site, please contact the dev team:

• Jonathan Delcid at jdelcid23@gmail.com
• Cesar Lopez at Lopez.cesar.aug@gmail.com
• Wajma Niazi at w1niazi@hotmail.com
• Christen Weston at paleeserecycle@gmail.com
• John Whitten at johnwhitten.studio@gmail.com