Skip to content

Carbon-Knight/Front-End

Repository files navigation

Carbon Knight

Contributors Forks Stargazers Issues Build Status

Screen Shot 2021-01-13 at 1 49 32 PM (2)

This is the front end repository for the Carbon Knight application. Within this application a user is able to input their travel data and see what their unique carbon footprint is over time.

· Report Bug · Request Feature

Table of Contents

About The Project

There are three repositories for this project. The Front End, which we will discuss further throughout this document, a Microservice which connects with the Cloverly API in order to return carbon footprint data, and the Back End, which compiles this data and returns the requested data to the Front End.

To view all the repositories associated with Carbon Knight, please visit Carbon Knight

Built With

Features:

Navigation

The navigation bar at the top of the page presents links to reach other pages of the site. The user will see different links within the navigation bar depending on if they have logged in or not.

Welcome

This is the main landing page for a visitor. Here a visitor is able to see a brief description of the application and are then required to log in to see more of the site.

Login and Logout

Google OAuth 2 was used in order for a user to log in to this site. On the welcome page a user is able to 'Log in with Google' where they are then redirected to authenticate through their google account.

User Dashboard

After logging in a user is taked to their dashboard. Here they are able to see a graphical representation of all their carbon footprints. There is also links to take them to input a new footprint or edit old footprints.

Calculating Carbon Footprint

  1. Click on 'Carbon Calculator' in the navigation drop down

  1. Select your saved car from the drop down, enter the total monthly mileage you drove in your car, and select the month and year for the calculation. Click 'Submit'

  1. You will be redirected to your user dashboard with an update visual of your carbon footprint estimate in kilograms of carbon.

Adding a New User Car

  1. Click on 'Carbon Calculator' in the navigation drop down

  1. Click 'Add a Car' button to navigate to the new car form

  1. Complete the required fields for a new car (Make, Model, Year, Fuel efficiency, Fuel type)

  2. Click 'Add Vehicle' once all fields have been completed (an error message will display otherwise)


  1. You will be redirected to the carbon calculator page and the added car will be visible within the car selection drop down

Resources

The resources page offers the user more information about carbon footprints and what can be done to reduce them. These are links to extermal pages that offer information and resources to a curious user. This page is accessible to a regular visitor as well as a logged in user.

Getting Started

To properly use this application you will need to set up and configure three repositories. Follow the Configuration directions in each repository to get Carbon Knight running locally! Alternatively, check out the production application here!!!

To view all the repositories associated with Carbon Knight, please visit Carbon Knight

The Front End

To view the configuration settings for the Front End, see below or click here.

The Back End

To view the configuration settings for the Back End, click here.

The Cloverly Microservice

To view the configuration settings for the Cloverly Microservice, click here.

Configuration

Setting Up the Front-End

  1. Clone this repo git clone https://github.com/Carbon-Knight/Front-End.git

  2. Enter the directory it was cloned into cd Front-End

  3. Run bundle install to install gems and dependencies

  4. Run bundle exec rails db:{create,migrate} to set up the database

  5. Run bundle exec figaro install

  • Add GOOGLE_CLIENT_ID: <ID HERE> to the config/application.yml file created by figaro
  • Add GOOGLE_CLIENT_SECRET: <SECRET HERE> to the above file

Configuration Part II

Once you have all the repositories cloned and set up according to their specific instructions, you can test out the full application by doing the following;

  1. In your terminal within the Front End directory run rails s.

  2. In a new tab in your terminal, within the Back End directory run rails s -p 3001.

  3. In a new tab in your terminal, within the Cloverly Microservice directory run ruby lib/cloverly_microservice.rb.

  4. Visit http://localhost:3000/

  5. Sign in and you are ready to Rock'n'Roll 🎉 !

Testing

RSpec was used for the testing of this project.

Carbon Knight has been fully tested. To view the test coverage;

Once inside your terminal within the desired directory run the following command.

open coverage

This will open up a folder with an index.html file. Clicking on this file will show you a list of all the lines of code within this project, and whether they have been tested or not.

Additionally, running bundle exec rspec will show you the quick summary of the test coverage in this application.

Both open coverage and bundle exec rspec work inside each repository of this application.

Roadmap

See our Open Issues or visit our Project Board for a list of proposed features, known issues, and project extensions.

Contributing

Contributions are what make this community such an amazing and fun place to learn, grow, and create! Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch git checkout -b feature/NewGreatFeature
  3. Commit your Changes git commit -m 'Add some NewGreatFeature'
  4. Push to the Branch git push origin feature/NewGreatFeature
  5. Open a new Pull Request!

Contact

Curtis Bartell        - LinkedIn - GitHub

Jonathan Wilson - LinkedIn - GitHub

Carson Jardine    - LinkedIn - GitHub

Eugene Theriault - LinkedIn - GitHub

Roberto Basulto  - LinkedIn - GitHub

James Belta         - LinkedIn - GitHub

Joshua Carey      - LinkedIn - GitHub

Kiera Allen           - LinkedIn - GitHub

Sean Steel           - LinkedIn - GitHub

Project Link: Carbon Knight