jraleman / fordhackathon

MetroCube App Store :: FordHackathon

*Click here for the slideshow presentation

Setup

Clone the repository

git clone https://github.com/jraleman/FordHackathon.git ford-app-store
cd ford-app-store/

Install all the dependencies

npm install

And start the server in the background

npm start &

Project Structure

The idea of having a good project structure is to have a cross platform project, to maximize code reuse, keep the configurations out of the code, and minimize the component state.

This is the main idea:

./
├── Gruntfile.js
├── README.md
├── package-lock.json
├── package.json
├── public/
│   ├── css/
│   │   └── styles.css
│   ├── favicon.ico
│   ├── index.html
│   ├── js/
│   │   ├── cubeportfolio.js
│   │   └── scripts.js
│   ├── login.html
│   ├── manifest.json
│   └── plugins/
│       ├── animate/
│       │   └── animate.css
│       ├── bootstrap/
|      ...
│       └── smooth-scroll/
│           └── smooth-scroll.js
├── resources/
│   ├── build-up/
│   │   ├── photos/
│   │   │   ├── mounting-phone-holder.jpg
│   │   │   ├── mounting-secure-top.jpg
│   │   │   └── mounting-top.jpg
│   │   ├── stuff-to-buy.pdf
│   │   └── videos/
│   │       ├── cutting-pc-case.mp4
│   │       └── mounting-overview.mp4
│   ├── ford-motors-logo.png
│   └── sketches/
│       ├── app-info-page.pdf
│       ├── ford-platform.pdf
│       ├── metrocube-logo.pdf
│       └── platform-ui.pdf
├── src/
│   ├── App.js
│   ├── components/
│   │   ├── FilterItem/
│   │   │   ├── FilterItem.js
│   │   │   └── index.js
│   │   ├── GridFilters/
│   │   │   ├── GridFilters.js
│   │   │   └── index.js
│   │   ├── GridItem/
│   │   │   ├── GridItem.js
│   │   │   └── index.js
│   │   └── GridTitle/
│   │       ├── GridTitle.js
│   │       └── index.js
│   ├── containers/
│   │   ├── FilterContainer/
│   │   │   ├── FilterContainer.js
│   │   │   └── index.js
│   │   ├── GridContainer/
│   │   │   ├── GridContainer.js
│   │   │   └── index.js
│   │   └── RootContainer/
│   │       ├── RootContainer.js
│   │       └── index.js
│   ├── fixtures/
│   │   ├── apps/
│   │   │   ├── index.js
│   │   │   ├── json/
│   │   │   │   ├── appItemEight.json
│   │   │   │   ├── appItemEleven.json
│   │   │   │   ├── appItemFifthteen.json
│   │   │   │   ├── appItemFive.json
│   │   │   │   ├── appItemFour.json
│   │   │   │   ├── appItemFourteen.json
│   │   │   │   ├── appItemNine.json
│   │   │   │   ├── appItemOne.json
│   │   │   │   ├── appItemSeven.json
│   │   │   │   ├── appItemSix.json
│   │   │   │   ├── appItemSixteen.json
│   │   │   │   ├── appItemTen.json
│   │   │   │   ├── appItemThirteen.json
│   │   │   │   ├── appItemThree.json
│   │   │   │   ├── appItemTwelve.json
│   │   │   │   └── appItemTwo.json
│   │   │   └── png/
│   │   │       ├── app-item-eight.png
│   │   │       ├── app-item-eleven.png
│   │   │       ├── app-item-fifthteen.png
│   │   │       ├── app-item-five.png
│   │   │       ├── app-item-four.png
│   │   │       ├── app-item-fourteen.png
│   │   │       ├── app-item-nine.png
│   │   │       ├── app-item-one.png
│   │   │       ├── app-item-seven.png
│   │   │       ├── app-item-six.png
│   │   │       ├── app-item-sixteen.png
│   │   │       ├── app-item-ten.png
│   │   │       ├── app-item-thirteen.png
│   │   │       ├── app-item-three.png
│   │   │       ├── app-item-twelve.png
│   │   │       └── app-item-two.png
│   │   └── index.js
│   ├── index.js
│   └── libs/
│       ├── getResponse.js
│       └── registerServiceWorker.js
└── yarn.lock

Walkthrough

Basic walkthrough of the project structure, describing the directories in more detail.

public/

Divides what is static vs dynamic logic... Pretty much anything that is not used by the app when it compiles.

resources/

Project resources, such as videos, photos, sketches, etc...

src/

React app source code.

• src/components/

All the stateless components will go here. These components should only take props.

• src/containers/

The Container components go here. These are the stateful ones, and the ones that make the API calls. These are the ones that are connected to the Redux store.

• src/fixtures/

Contains JSON files that mimic API responses, used for quicker development.

Style Guide

This is a set of standards, principles and rules every developer or designer should follow in order to improve this product.

Code

This project follows the semistandard, which is just the standard style guide, but including semicolons ; at the end of a statement.

Lint

After running npm install, you can run the following scripts (depending on your platform), to check if the code follows the semistandard coding style guide.

Mac OS X	Linux	Description
npm run lint	npm run lint	Checks src/ code style
npm run lint-log	npm run lint-log-linux	Saves and open the log file

If you have any problem running the lint from the project, try installing the following packages globally, like this:

npm install --save snazzy
npm install --save semistandard

And then just run the lint from your end.

Design

Good design is not just what looks good. It also needs to perform, convert, astonish, and fulfill its purpose. It can be innovative or it might just get the job done.

Color Palette

Primary Colors

Alternative Colors

Dark / Light

Success / Error / Warning / Info

Typeface

Montserrat

TODO

• Integrate settings option, save offline data
• gh-pages
• Setup domain for GoogleCloud app
• Modal, include terms of services and privacy policy
• Implement FilterItem and FilterContainer
• Setup RSPI, install Raspbian and dependencies
• Swagger API for documentation
• EagleCAD electronic schematics

Sources

• Forbes - Brand Style Guides
• Ford Motors - Basic Elements
• Ford Motors - Brand Book
• Ford Motors - Guidelines
• MetroCube - HTML5 Theme

Dependencies

This project uses the following technologies:

• Animate
• Axios
• Bootstrap
• Cubeportfolio
• FontAwesome
• JQuery
• SmoothScroll

License

This project is under the Apache License, a permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

See LICENSE for more info.