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
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
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.
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.
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.
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.
- Click on 'Carbon Calculator' in the navigation drop down
- 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'
- You will be redirected to your user dashboard with an update visual of your carbon footprint estimate in kilograms of carbon.
- Click on 'Carbon Calculator' in the navigation drop down
- Click 'Add a Car' button to navigate to the new car form
-
Complete the required fields for a new car (Make, Model, Year, Fuel efficiency, Fuel type)
-
Click 'Add Vehicle' once all fields have been completed (an error message will display otherwise)
- You will be redirected to the carbon calculator page and the added car will be visible within the car selection drop down
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.
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
To view the configuration settings for the Front End, see below or click here.
To view the configuration settings for the Back End, click here.
To view the configuration settings for the Cloverly Microservice, click here.
Setting Up the Front-End
-
Clone this repo
git clone https://github.com/Carbon-Knight/Front-End.git
-
Enter the directory it was cloned into
cd Front-End
-
Run
bundle install
to install gems and dependencies -
Run
bundle exec rails db:{create,migrate}
to set up the database -
Run
bundle exec figaro install
- Add
GOOGLE_CLIENT_ID: <ID HERE>
to theconfig/application.yml
file created by figaro - Add
GOOGLE_CLIENT_SECRET: <SECRET HERE>
to the above file
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;
-
In your terminal within the Front End directory run
rails s
. -
In a new tab in your terminal, within the Back End directory run
rails s -p 3001
. -
In a new tab in your terminal, within the Cloverly Microservice directory run
ruby lib/cloverly_microservice.rb
. -
Visit
http://localhost:3000/
-
Sign in and you are ready to Rock'n'Roll 🎉 !
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.
See our Open Issues or visit our Project Board for a list of proposed features, known issues, and project extensions.
Contributions are what make this community such an amazing and fun place to learn, grow, and create! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch
git checkout -b feature/NewGreatFeature
- Commit your Changes
git commit -m 'Add some NewGreatFeature'
- Push to the Branch
git push origin feature/NewGreatFeature
- Open a new Pull Request!
Curtis Bartell - - GitHub
Jonathan Wilson - - GitHub
Carson Jardine - - GitHub
Eugene Theriault - - GitHub
Roberto Basulto - - GitHub
James Belta - - GitHub
Joshua Carey - - GitHub
Kiera Allen - - GitHub
Sean Steel - - GitHub
Project Link: Carbon Knight