Dittly

Table of contents
Getting Started
What we care about
Development
Deployment
3rd Party Services

Getting Started

Install all project dependencies (we use yarn, make sure you have it installed):
```
yarn
```
Start the development server
```
yarn dev
```
Visit http://localhost:3000

What we care about

At Dittly, we care about

Our customers. They expect a platform that

solves real problems
is simple to use
works as expected
is available 24/7

Our team. To exceed what our customers expect, we

take feedback very seriously
make data-driven decisions
write perfectly tested code, no exceptions
monitor everything

Development

Naming Conventions

The following naming conventions apply:

Pattern	Variables	Type
`*-sc.js`	`mainHeaderSC`	Styled-Component.
`*-stories.js`	N/A	Storybook stories.
`*-gq.js`	N/A	GrahQL definition file.
`pages/*`	N/A	Top-level, lightweight page components. Use `with-auth` or `with-data` HOCs if required. Define URL structure.
`src/*`	N/A	Components used in `pages/*`. Deal with GraphQL queries, loading state, etc. here.
`components/*`	N/A	Pure React components, ideally functional components.

Tech Stack

Mainly Javascript (ES6+). For 3rd party services, see below.

Next.js: A minimalistic framework for server-rendered React applications.
styled-components: CSS in JS library we use for styling.
GraphQL: Our API query language, in lieu of a REST API.

Tools

The following development tools help with code quality, formatting, and general automation:

Jest: Main test framework.
- Run with yarn test
ESLint: Helps with code quality, avoids common bugs and enforces best practices.
- Run with yarn lint
lint-staged: Run commands against staged files.
- Runs automatically as a git precommit hook.
Prettier: Automatically format source files.
- Runs automatically as part of lint-staged and ESLint, see above.
Storybook: An interactive style guide.
- Run with yarn storybook

Workflow

We follow the GitHub Flow. In short:

master is the single source of truth.
New features and bug fixes get merged into master with a pull request.
Each pull request is reviewed by a team member. The reviewer is responsible to merge the PR and delete the branch.

Event tracking

One of our core principles is monitor everything. Every new sign up, every project created, every failed project update, everything gets tracked.

To track an event, the client can send a POST request to /_track/:collection with an application/json payload that represents the event data.

Note: Make sure the :collection name is whitelisted in utils/tracking.js.

Deployment

Dittly is deployed on the Now platform (https://zeit.co/now).

Test URLs

Before you deploy, make sure you use the Dittly team: now teams ls. Contact Mike if you're not part of that team.

To deploy a test build, run:

now

The deployment URL is automatically copied to your clipboard. Paste it into a browser to get real-time updates of the deployment process.

Production

Once you have a test URL your happy with, deploy it with:

now alias <test-url>

Alias configuration

Please refer to the now.json configuration file at the project root for further deployment configuration options.

3rd Party Services

We rely on 3rd party services to automate as many tasks as possible.

CircleCI: Continuous integration service to run tests.
Coveralls: Test coverage reports.
Greenkeeper: Automatically monitors and updates NPM dependencies.
Now: Deployment infrastructure.
Graphcool: GraphQL backend.

Dittly / website

readme