Coder Social home page Coder Social logo

gear-up-fe's Introduction

languages rspec simplecov All Contributors

heroku miro postgreSQL


logo


Background and Description

Gear-UP

Logistics for group adventures outdoors can be complicated, especially when it comes to getting all of your gear in order. Gear Up simplifies this by giving users a platform to easily organize trips, decide who is bringing what gear, then determine what the group still needs and who might have that gear already!

Using Gear Up, users are able to:

  • Register or sign-in using Google OAuth
  • Add items to their "shed", a list of all gear that user has available
  • Search for and select a location for your trip
    • In doing the step above, determine the weather, allowing the user to think on what gear is needed
  • Invite other users to the trip
  • The host as well as all invited users can then select what gear from their "shed" they'd like to commit to the trip
  • From there, users can determine what gear is already covered and what gear is still missing based on what the users have already committed! -Gear UP FE web application that uses Gear Up BE is the "Back End" application that acts as a microservice.
  • Consultancy Competition
  • MiroBoard

Table of Contents

Schema

schema

Learning Goals

Our “Back End” application will be an API built in Rails. It will act as the interface layer to our database, and it will handle our API consumption.

* Rails “front end”
  * If in Rails, this is a typical rails new project
  * It will have simple feature testing, and will mostly focus onView templates, HTML and CSS. We highly recommend Bootstrap
  * This application is responsible for authentication via OAuth
    * Try to find a way to utilize your user’s OAuth token within the application in some way
      * eg, if you OAuth with Google, what can we use their OAuth token to do on their behalf at Google?
  * This application is only allowed to store user data in a local database (although you can choose to store user data on the backend instead)
    * This app’s database can only have a “users” table
    * All other database storage must go through a “DatabaseService” that you implement to do any CRUD behavior on your Backend
      * This will follow the typical Facade and Service design patterns
      * You will need HEAVY use of webmock to test expected results until the backend endpoints are finished. 
        Planning the structure of your JSON ahead of time will go a long way in allowing both applications to proceed in a decoupled manner asynchronously
      * Once the backend endpoints are finished, consider changing to VCR
  * Extension: using caching to cache responses retrieved from the backend application

Requirements and Setup (for Mac):

Ruby and Rails Versions


  • Ruby Version 2.7.4
  • Rails Version 5.2.8

Gems Utilized


APIs Consumed

Setup

  1. Create a Base Directory
  • On your local machine open a terminal session and enter the following commands to create a base directory for the app.
$ mkdir gear_up
$ cd gear_up
  1. Clone these repositories:
  • On your local machine open a terminal session and enter the following commands for SSH or HTTPS to clone the front end repositiory.
  • using ssh key
$ git clone [email protected]:ShermanA-13/gear-up-fe.git
  • using https
$ git clone https://github.com/ShermanA-13/gear-up-fe.git
  • Once cloned, enter the following commands for SSH or HTTPS to clone the back end repositiory.
  • using ssh key
$ git clone [email protected]:ShermanA-13/gear-up-be.git
  • using https
$ git clone https://github.com/ShermanA-13/gear-up-be.git
  • Once cloned, you'll have a new local copies of the directories you ran the clone command in. You can check what is in the directory by running the following command
$ ls
#ex.
  gear-up-be gear-up-fe
  1. Change to the project directory:
    In terminal, use $ cd to navigate to the front end application project directory.
$ cd gear-up-fe
  1. Install required Gems utilizing Bundler:
    In terminal, use Bundler to install any missing Gems. If Bundler is not installed, first run the following command.
$ gem install bundler
  • If Bundler is already installed or after it has been installed, run the following command.
$ bundle install
  • There should be be verbose text diplayed of the installation process that looks similar to below. (this is not an actual copy of what will be output).
Click to see example!

$ bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.1.10
...
...
...
Using simplecov_json_formatter 0.1.4
Using simplecov 0.21.2
Using spring 2.1.1
Using spring-watcher-listen 2.0.1
Using standard 1.12.1
Bundle complete! 23 Gemfile dependencies, 94 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.


  • If there are any errors, verify that bundler, Rails, and your ruby environment are correctly setup.
  1. Figaro installation
  • Follow the figaro installation with the docs and get your googlemaps.org and google client keys. Add the google maps and google client keys to your newly created config/application.yml file and add it to your .gitignore file. Be sure to read the google API docs for a deeper undestanding of the app.
$ bundle exec figaro install
  1. Startup and Access

In `/config/puma.rb`, you'll notice that the port has 3000. This should be on or around line 12.

port  ENV.fetch("PORT") { 3000 }

We do this because [Gear Up BE](https://github.com/ShermanA-13/gear-up-be) is not in production or hosted somewhere other than localhost. If Gear Up BE is running on `port 5000`, our front end will need to have a different port so they can run at the same time. Now, when we do `rails s`, our back end application will automatically use port 3000. You can also do this manually every time you start your server by passing the port number with a `-p` flag like so:

`rails s -p 3000`.
  • You should see that your server is "listening on tcp://localhost:3000" now if it was different.

In order for your frontend to properly get data from your backend Gear Up API, you must keep your backend server running locally at the same time.

  • Finally, in order to use the web app you will have to start the both Gear Up BE and Gear Up FE servers
  • Start the back end server
$ rails s
Click to see example!

=> Booting Puma
=> Rails 5.2.8 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.6 (ruby 2.7.2-p137), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop


  • Switch to a new tab CMD + T in your terminal then navigate to the front end directory with the command:
$ cd ../gear-up-be
  • Your file patch in your new tab in terminal should be ./gear_up/gear-up-be. Start the front end server
$ rails s
Click to see example!

=> Booting Puma
=> Rails 5.2.8 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.6 (ruby 2.7.2-p137), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:5000
Use Ctrl-C to stop


  • Open web browser and visit link to access the front end application http://localhost:3000

  • At this point you should be taken an index page with clickable links to different data sets with the ability to create, read, update, and delete data.

Heroku Setup

  1. Deploy Application to Heroku is where you want to be after an account is created because your app already exists. You want to repeat the process for the front end application as well. You can check if your app is added on heroku with this command:
$ git remote -v
Click to see example!

heroku	https://git.heroku.com/<your app name>.git (fetch)
heroku	https://git.heroku.com/<your app name>.git (push)
origin	[email protected]:<your github username>/gear-up-be.git (fetch)
origin	[email protected]:<your github username>/gear-up-be.git (push)


  • If your terminal doesn't reflect the example above input this command
$ heroku git:remote -a <yourapp>
  1. Deploy your code:
$ git push heroku main
  1. Ensure your API keys are set up on your web app
From your Heroku dashboard, click on the project you just created, then Settings. In the Config Vars section, click Reveal Config Vars. Here, you can add any API keys with the constant name you gave them in the application.yml file created from the figaro gem.

Endpoints Provided

Click to see example!

                    Prefix Verb   URI Pattern                                          Controller#Action
                       root GET    /                                                    landing#index
auth_google_oauth2_callback GET    /auth/google_oauth2/callback(.:format)               users#create
                  dashboard GET    /dashboard(.:format)                                 dashboard#show
                      login GET    /login(.:format)                                     sessions#create
                     logout GET    /logout(.:format)                                    sessions#destroy
                 user_trips GET    /users/:user_id/trips(.:format)                      trips#index
                            POST   /users/:user_id/trips(.:format)                      trips#create
                 user_items GET    /users/:user_id/items(.:format)                      items#index
                            POST   /users/:user_id/items(.:format)                      items#create
              new_user_item GET    /users/:user_id/items/new(.:format)                  items#new
             edit_user_item GET    /users/:user_id/items/:id/edit(.:format)             items#edit
                  user_item GET    /users/:user_id/items/:id(.:format)                  items#show
                            PATCH  /users/:user_id/items/:id(.:format)                  items#update
                            PUT    /users/:user_id/items/:id(.:format)                  items#update
                            DELETE /users/:user_id/items/:id(.:format)                  items#destroy
                      users GET    /users(.:format)                                     users#index
                       user GET    /users/:id(.:format)                                 users#show
                      areas GET    /areas(.:format)                                     areas#index
                            GET    /areas/:id(.:format)                                 areas#show
                            GET    /areas/:area_id/trips/new(.:format)                  trips#new
                            GET    /trips/:trip_id/items(.:format)                      trip_items#new
                            POST   /trips/:trip_id/items(.:format)                      trip_items#create
                            PATCH  /trips/:trip_id/items(.:format)                      trip_items#update
                  edit_trip GET    /trips/:id/edit(.:format)                            trips#edit
                       trip GET    /trips/:id(.:format)                                 trips#show
                            PATCH  /trips/:id(.:format)                                 trips#update
                            PUT    /trips/:id(.:format)                                 trips#update
                            DELETE /trips/:id(.:format)                                 trips#destroy
                            GET    /areas/:area_id/trips/:trip_id/users/new(.:format)   trip_users#new
                            GET    /areas/:area_id/trips/new(.:format)                  trips#new
                            POST   /users/:user_id/trips/new(.:format)                  trips#create
                            GET    /trips/:trip_id/users(.:format)                      trip_users#edit
                            POST   /trips/:trip_id/users(.:format)                      trip_users#create
                            PATCH  /trips/:trip_id/users(.:format)                      trip_users#update
                            GET    /trips/:trip_id/items(.:format)                      trip_item#new


Contributors ✨

Thanks go to these wonderful people (emoji key):


Sherman A. (he/him)


💻 ⚠️ 👀

Susan B. (she/her)


💻 ⚠️ 👀

Phillp K. (he/him)


💻 ⚠️ 👀

Sandiz T. (he/him)


💻 ⚠️ 👀

Johnny B. (he/him)


💻 ⚠️ 👀

Alicia W. (she/her)


💻 ⚠️ 👀

This project follows the all-contributors specification.

gear-up-fe's People

Contributors

johnny-bowman avatar sandisz-d734m37 avatar aliciawatt avatar shermana-13 avatar phillipkamps avatar sueboyd922 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.