ClamShell

Clam Shell is mobile messaging app for use with Blip.

Tech stack:

• React
• Bootstrap

Table of contents:

• Install
• Quick start
• Development
  • Code organization
  • React components
  • Vendor packages
• Testing

Install

Requirements:

• Node.js

Clone this repo then install dependencies:

$ npm install .

Quick start

Once you have completed the install then build the app

$ npm start

Open the index.html in your web browser and start using ClamShell

Development

The following snippets of documentation should help you find your way around and contribute to the app's code.

Code organization

• App (src/main.js): Expose a global window.app object where everything else is attached; create the main React component app.component
• Navigation (src/layout/MobileLayout.js):
• Components (src/components): Reusable React components, the building-blocks of the application
• Pages (src/pages): Higher-level React components that combine reusable components together; switch from page to page on route change
• Services (app/data/<service>.js):

React components

When writing React components, try to follow the following guidelines:

• Keep components small. If a component gets too big, it might be worth splitting it out into smaller pieces.
• Keep state to a minimum. A component without anything in state and only props would be best. When state is needed, make sure nothing is reduntant and can be derived from other state values. Move state upstream (to parent components) as much as it makes sense.
• Use the propTypes attribute to document what props the component expects

See "Writing good React components".

Vendor packages

Third-party dependencies are managed npm and are installed when you do the install.

Testing

Requirements:

• Mocha
• Chai
• Browserify
• Testem as the test runner.

To run the tests, first install Testem:

$ npm install -g testem

Then run:

$ testem

This will open and run the tests in Chrome by default. You can also open other browsers and point them to the specified URL.