Dittly

Table of contents

• Table of contents
• Getting Started
• What we care about
• Development
  • Naming Conventions
  • Tech Stack
  • Tools
  • Workflow
• Deployment
  • Test URLs
  • Production
  • Alias configuration
• 3rd Party Services

Getting Started

1. Install all project dependencies (we use yarn, make sure you have it installed):

   yarn
   

2. Start the development server

   yarn dev
   

3. 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.