Giters

brycesimonds / DreamBook_FE

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dreambook: Front-End

Overview

This repo represents the front-end portion of a two-part project for Turing School of Software and Design's Back-End Engineering program.

Have you wanted a space to jot down your dreams the second you wake up? Like the time you had a dream where WWE's Goldberg brought you flowers? How cool would it be if not only could you keep a track record of your dreams, but you were given movie and book recommendations based off of your dream?! In comes our application: Dreambook! Upon signing via a Google account, a user is brought to their dashboard where they can 'Record a Dream' and reference their previous dreams and movie and book recommendations. When recording a dream, users can enter a title for the dream, a description of their dream, and one keyword describing their dream. Users then can select from a dropdown bar a status for their dream, 'Shared' or 'Hidden'. If shared, all Dreambook users will be about to see that dream when visiting the 'Dreams' link from their dashboard and be able to comment on it. If hidden, the dream will only be accessible to the user. Our goal is to have a space where users can keep track of their dreams, get movie and book recommendations based off their dreams, and see what dreams others are having out in the world!

The two repositories that make up this project can be found here: Front-End repo & Back-End repo

Deployed Application - Under Construction

Table of Contents

Design

  • By splitting our project into two repositories, we have successfully implemented Service Oriented Architecture for future scalability. This Front-End repository is responsible for the user-facing views along with all services and controllers necessary to query our backend's API.
  • Our team decided to use Google OAuth to log in a user. With Google OAuth, the user never has to provide sensitive credentials to our application.
  • One database is utilized on our front-end. This is for saving user information from Google OAuth to log in a user.

Setup

Prerequisites

These setup instructions are for Mac OS.

This project requires the use of Ruby 2.7.4 and Rails 5.2.8. We also use PostgreSQL as our database.

Install Necessary Programs

  1. Verify your machine has the correct version of Ruby installed (2.7.4). You can check this by entering ruby -v from the command line.

    • To install, enter rbenv install 2.7.4 from the command line.

  2. Verify your machine has the correct version of Rails installed (5.2.8). You can check this by entering rails -v from the command line.

    • To install, enter gem install rails -v 5.2.8 from the command line.
Local Repo Setup
  1. Fork & Clone Repo
  2. Run bundle install.
  3. Setup database: rails db:create.
Google API Registration
  1. Register a new app with Google Api Console and give consent.
  2. Add a Credential, setting to 'External use' and 'Web Application', and give it a title (eg. 'Oauth Login'). Add the following URI to the redirect/callback field http://localhost:3000/auth/google_oauth2/callback.
  3. Record the given Client_ID and Client_Secret.
Authorizing Application
  1. Run bundle exec figaro install to set up the application.yml file to hide your sensitive credentials.
  2. Add your credentials to application.yml as environment variables:
GOOGLE_CLIENT_ID: <add your client id>
GOOGLE_CLIENT_SECRET: <add your client secret>
RELOCATE_BE_DOMAIN: <add your backend server>

Running the Tests

To run our RSpec testing suite, run 'bundle exec rspec' from the command line.

Deployment

To run this project locally, enter rails server from the command line and visit http://localhost:3000 to navigate to the homepage. It is encouraged to visit this URL in an Incognito window of your browser to prevent needing to periodically delete cookies.

Start up the Back-End as instructed.

Screenshots

Homepage

Record a Dream

User Dashboard

Authors

About

Languages

Language:HTML 73.0%Language:Ruby 26.2%Language:JavaScript 0.5%Language:SCSS 0.3%Language:CSS 0.0%