Fintech Workshop 2018

https://github.com/venture-hacks/fintech-workshop

See it live here: https://vh-fintech-workshop.firebaseapp.com

If you do not have a text editor for coding, please download something like: VS Code

We'll be building (ok, modifying) a stripped-down Bootstrap template. Since this is a hackathon, we are building demos that should show the essence of our idea in the simplest way possible. The tech doesn't have to be professional quality but it should help illustrate a larger idea.

This tech demo will focus on showing you how to build simple widgets, which are like embeddable chunks of function. Many people provide widgets for free!

This demo will teach you how to use them, not use them! Use widgets sparingly, and with purpose. Nobody wants to see a demo of meaningless widgets shoved onto a website. You'll also have to be careful about how widgets are styled. It's easy to jumble together too many widgets, each with their own unique style.

What's in here?

public/  -- The Folder holding your website
    index.html                -- The HTML page that is loaded first. The 'homepage'
    example-bitcoin-data.json -- Some example data
    css/                      -- Holds all our stylesheets
        main.css               -- Our homepage's main styles
        base.css               -- Styles that we've overriden from Bootstrap for the sake of this workshop and our theming.
    js/                       -- Holds all our javascript scripts
        main.js                -- Our homepage's main script
    img/                      -- Holds all image assets
    widgets/                  -- All the widgets we will build
    vendor/                   -- Everything that's not ours. Aka other libraries (Bootstrap, jQuery..)

package.json                  -- Autogenerated by node to describe our project. Also feel free to ignore.
README.md                     -- This handy instruction file!
.gitignore                    -- If you're using git, this tells it what we don't want in the repo.

Steps

1. Download Step 1 Code from Drive
2. Just open the index.html
3. Link CSS file
4. Change the Theme Colors using CSS:
   --> Pick a new color theme from here: https://material.io/color
   --> Change --theme-primary to your new primary color.
   --> Change --theme-secondary to your new secondary color.
5. Add another Value Proposition
6. Change the Value Proposition icons using Font Awesome classes
7. Link the Javascript and add a Click listener if you want.
8. Find a widget on Trading View and integrate it.
9. ? Add Firebase Hosting ? Requires Node. (see below)
   --> Create a project on console.firebase.google.com
   --> Use node and npm
   --> run npm install -g firebase-tools
   --> then run firebase init from a command line in the base of this directory
   --> then run firebase deploy

Advanced

You'll need Node and NPM installed on your computer and some basic command line knowledge.

We're going to build our own widgets using Web Components, specifically with the Polymer Library.

Run in the project directory:

npm install --global polyserve
polyserve public # or npm run start

Then navigate to 127.0.0.1:8081/ in your browser of choice. All changes should be visible here when you save your code and refresh the browser.

Advanced Steps

1. Download the Advanced Code from the Drive.
2. Copy everything from the widgets folder into your project's widgets folder.
3. Modify your index.html to import our custom widget.
4. Fix the date display by processing each loaded datapoint.
5. Make it display nicer.
6. Find better data, think of a useful widget for your team.

Resources

• Great Free API's for data! https://github.com/toddmotto/public-apis
• Use widgets within your widgets! https://www.webcomponents.org/
• Polymer CLI is the standard way to build Polymer widgets.
• Start Bootstrap is great for templates in Bootstrap 4.
• IconMonstr has great, free icons.

Notes

We're using Bootstrap 3. While Bootstrap 4 is out, we haven't had time to update this workshop for it. 🤷‍♀️🤷‍♂️