Venture Hacks: Red Technical Demo

A live preview lives here.

What's in here?

./
    public/  -- The Folder holding your website
        index.html  -- The HTML page that is loaded first. The 'homepage'
        css/        -- Holds all our stylesheets
            pizza.css   -- Our homepage's main styles
        js/         -- Holds all our javascript scripts
            pizza.js    -- Our homepage's main script
        img/        -- Holds all image assets
        vendor/     -- Everything that's not ours. Aka other libraries (Bootstrap, jQuery..)

    database.rules.json -- Firbase configuration files
    firebase.json       --  will be autogenerated

    gulpfile.js     -- Uses a node package to help us build. Feel free to ignore.
    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. Run the code in the browser, either using node and gulp or just opening the index.html
   --> if you have node installed:
   --> run npm install from a command line in the base of this directory.
   --> then run npm install -g gulp
   --> then run gulp dev
3. Link CSS file
4. Change the Theme Colors using CSS from:
   --> #fec503 to #F44336
   --> #f6bf01 to #E53935
5. Add another Value Proposition
6. Change the Value Proposition icons using Font Awesome classes
7. Link the Javascript and add Basics + Event Listeners
8. Add Firebase to your project with the console
9. Add Firebase Login and Google as a Sign-In Method
10. Add Firebase Login code to pizza.js
11. Change the user icon in the nav bar on successful login.
12. ? Add Firebase Hosting ? More advanced
    --> 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

Extensions

• Firebase UI Web : More cohesive when working with many auth types

Based on a Bootstrap template!

Start Bootstrap - Agency

Developing Using Source Files

To use the source files, you will need to have node and npm installed globally along with Gulp.js. To start:

• Run npm install in the root directory
• Run gulp dev and edit the files as needed

Copyright and License

Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license.