jobannon / upvote_ui

Front End Repository For ⏫ Upvote - a real-time voting platform

UpVote

Click to open the UpVote app hosted on Heroku Click here to open the related Back-End API supporting this Front-End

Table of Contents

• About the Project
• Purpose
  • Built With
• Installation
  • Requirements
  • Versions
• Database
  • Programatic Flow
• Testing
  • Testing Technologies
• Roadmap
• Running Tests
• Contact
• Acknowledgements

About the project

UpVote is an interactive Rails web application built from conception to completion that authenticates with a third-party service (GitHub), consumes the Upsplash API, and provides a solution to an identified problem.

Purpose

Object Oriented Programing principles, Restful Routing, Test Driven Development, Behavior Driven Development, Authenticated API calls, OAuth process

Welcome Page Demo

Installation

1. Clone down this and the micro-service repo into a directory of your choice

  $ git clone https://github.com/jobannon/upvote_ui
  $ git clone https://github.com/jobannon/upvote_api

2. Change into the following directory

  $ cd upvote_ui

3. Install the gem packages

  $ bundle install

4. Change into the other directory

  $ cd upvote_api

5. Install the gem packages

  $ bundle install

6. Set up the database

  $ rake db:{create,migrate,seed}

7. Launch your local server

  $ rails s

8. In a separate terminal tab, run the upvote_ui

  $ cd upvote_ui
  $ puma

9. Finally, visit http://localhost:9292 in your web browser

Requirements

Environment variables and required API keys/tokens:

• GitHub client_id defined as ENV['GITHUB_KEY']
• GitHub client_secret defined as ENV['GITHUB_SECRET']

Versions

• Ruby 2.6.3
• Rails 6.0.2

Related Repositories

• upvote_api

Database

Architecture

Testing

Testing Technologies

• rspec
• factory_bot_rails
• faker
• pry
• capybara
• shoulda-matchers
• simplecov
• webmock

Running Tests

Run the full test suite:

$ bundle exec rspec

Run a single test file:

$ bundle exec rspec <path-to-file>

Roadmap

• projectboard

Contact

• jobannon
• freeheeling
• hale4029

Acknowledgements

• Brian Zanti

upvote_ui's Issues

User can log in

User Can Authenticate

As a visitor
When I visit the home page for Upvote
Then I see a link to log in with GitHub
When I click the link
Then I am taken to 'the dashboard' where I see all current projects/ideas
and I am an authenticated user

Splash Page

Setup CI Server

CI Server

Create 3 Separate Idea Templates

Architecture Diagram

Architecture Diagram

"feature-ish" Session Management

As an authenticated User,

when I am logged in I have a current user in the session.

Upload Wireframes

Splash Page

Dashboard

Idea CRUD Page

Idea Show Page

DB Diagram

User-Specific Ideas Index Page

User Can Log Out

As an authenticated user,
on any page,
in the navbar
I see a link to logout
when I click on this link,
I am logged out of the Upvote application
and a flash message indicates that I have successfully logged out
and I am redirected to the splash login screen.

nav_bar to log out

Redirected Splash Page

User Comments on Ideas

Voting statistics

As a registered user,
When I visit the cohort dashboard,
I see a section showing:

• top three ideas (absolute and percentage)
• percent of users voted (absolute and percentage)

Dashboard

Update Readme as a we go

How to Write a Great README

ReadMe Screenshots

Summarize Vote Results in Visual Format

Deploy application to Heroku

As a visitor or user of the site
I will perform all user stories
By visiting the application on Heroku

Feature Dump

Single vote per idea

As an authenticated user,
Once I vote for an idea,
I no longer have the functionality to vote for the same idea.
Number of total votes for all ideas is limited to 3

cohort dropdown selection

• user can select cohort upon initial authentication

User Idea Card Update

As an authenticated user
When I visit the dashboard
And click one of my idea cards
I am then redirected to the idea's show page
Where I see all of the previously provided details for the idea,
Any field of which I have the option of editing
After making any changes
I click 'Update/Submit'
Then I should be redirected to the dashboard
And I should see a message that says "Your Idea Has Been Updated"

• Sad path accounted for
• API call to retrieve background image (if project title updated)

Idea CRUD Page

Tag/Add Attachments to an Idea

User Idea Card Creation

As an authenticated user
When I visit the dashboard
And click a link/button to add an idea card
I am then redirected to './ideas/new'
Where I see a form
And when I fill in project title (required)
And I fill in pitch (required)
And I fill in problem (required)
And I fill in solution (required)
And I fill in the audience (required)
And I fill in features (required)
And I fill in integration (required)
And I click submit
Then I should be redirected to the dashboard
And I should see a message that says "Your Idea Has Been Submitted"
And I should see my idea depicted as a card on the dashboard,
Containing the project title and a background image

• Sad path accounted for (if the form is not filled in completely)
• API call to retrieve background image
• User–Ideas one-to-many relationship

Tasks

• Create Idea table with columns: title, pitch, problem, solution, audience, features, integration, user_id (foreign key)
• Create view
• Create Idea model
• Create Idea controller

Idea CRUD Page

Vote

As an authenticated user,
When I visit an Idea show page (app/cohort/:id/idea/:id),
I can upvote an app idea by clicking on a 'Vote' button

Idea Show Page

Cohort Index page

all the ideas
generated
live updates
vote counter displayed

User Idea Card Deletion

As an authenticated user
When I visit the dashboard
And click one of my idea cards
I am then redirected to the idea's show page
Where I see a button to delete my idea,
And I click 'Delete'
Then I should be redirected to the dashboard
And I should see a message that says "Your Idea Has Been Deleted"
And I should no longer see my idea depicted as a card on the dashboard

Idea CRUD Page