Giter Club home page Giter Club logo

civic's Introduction

Civic Build Status

This is the home of the front-end code for the CIVIC Platform. It's organized in a monorepo using Yarn Workspaces, but it's ok if you don't know what that means yet.

Let's make this better, together!

Civic magic happens when we work together. We welcome your collaborative contributions. We also have a more technical contribution guide.

🐧 I see something that could be better: The first step is open an issue, and tell us what you see that could be better. Tell us about your vision so that we can see what you see and help to improve it.

🐦 I want to work on making something specific better: If there's already a documented issue about what you want to work on, assign yourself to let others what you're working on. If there's not an issue, open one and assign yourself.

🐀 I want to work on making something better, but I'm not sure where to start: Check out our open issues with the good-first-issue label for things to work on and open pull requests with the good-first-review label to review and collaborate with others on existing efforts.

🦜 I've done something towards making this better: Fantastic! Share it with us by opening a pull request with what you've done so far, and let's work together to make it even better and incorporate it into the CIVIC Platform!

🦚 I want to explore more things:

CIVIC Platform πŸ‘ Components and Style Guide (Storybook) πŸ‘ Platform Architecture Guide πŸ‘ Redux Guide πŸ‘ Contributing Guide

Setup

Development environment

Prerequisites

Before you install and build, you'll need the following.

  1. bash

    You will need a Unix shell (bash). For Mac, this can be Terminal.app. For Windows, you'll need to use Windows Subsystem for Linux (see issue #53).

  2. nvm and yarn

    You will need the following tools installed in your Unix shell:

    These tools make sure every contributor has identical dependency versions, include node and node packages.

  3. git

    You will need to have Git installed in your bash environment.

Install and build

🐸GENTLE WARNING🐸: Make sure you have met the prerequisites ☝️

# Clone the repository using either https or ssh
# https
$ git clone https://github.com/hackoregon/civic.git
# OR ssh
$ git clone [email protected]:hackoregon/civic.git

$ cd civic

# Sets your Node.js version to match what the project uses.
$ nvm use

# Note for next two steps, if you get an error, keep trying the same command again.

# Installs all package dependencies and links cross-dependencies.
$ yarn install

# This will build all packages. Since some packages are used internally, they need to be built before the dependent packages are worked on.
$ yarn build

# Take a pizza break! πŸ•! This takes a while, but only needs to run at the project root once.

Setting up your text editor

In order to be the most productive, you’ll want to install some extensions or plug-ins for your text editor. These tools are already installed and configured project wide, so the only installation you’ll need is inside your text editor (don’t npm install or yarn add them). There are plug-ins or extensions available for the most commonly used editors (VS Code, Sublime Text, Vim, WebStorm, Atom, etc…)

🐸GENTLE WARNING🐸: Configuration still in progress. You may encounter linting errors. You may want to turn off Prettier and ESLint in your editor for the time being

  • EditorConfig β€” for consistency in settings like indentation line-endings
  • ESLint β€” to show linting in your editor as you’re coding
  • Prettier β€” for code formatting in your editor as you’re coding

Working on a single package other than the component library

At this point, Yarn has prepared all packages in the monorepo.

Most developers working in this project will be contributing to one package at a time.

This is the command sequence that will allow you to build/run an individual package every time (for example, the housing package) and work on it as if it was a standalone project:

$ cd packages/{package-name} # e.g. cd package/2018-disaster-resilience

# run local project
$ yarn start

# test local project
$ yarn test

# watch tests while working on them
$ yarn test --watch

Working on the component library using Storybook

We are committed to a shared component library. This is achieved using the component-library package and React Storybook. Run Storybook with the following command or view it here:

# run this command from project root (civic)
$ yarn storybook

Working on the component library and a project package simultaneuously

In separate terminals, run the commands in the Working on a single package other than the component library and Working on the component library using Storybook sections above. Project packages rely on the built version of the component library, so if you have updated the component library, and want to see your changes in the project package you are working on, you'll need to rebuild the component library. Once the component library build has finished, your project package will reload with the update components.

$ cd packages/component-library

# rebuild the component library
$ yarn build

Project Layout

There are three types of packages right now:

  1. Project packages: A React/Redux codebase that holds a collection of stories and API interactions for a single project in a Hack Oregon project cycle.
  2. Year package bundles: A React/Redux codebase that bundles together all project packages for a given year. This is a unit that gets deployed to production.
  3. Utilities: Common code that other projects depend on.

Packages

Every package has its own README with further details on what the package is for and how it works. We'll be adding some new packages for the 2019 project season.

Testing across all packages

To run all tests for all packages, use the following command:

yarn test

Tests for individual packages can be run from within the individual package's directory. Running all tests is useful for continuous integration environments as well as verifying changes to common dependencies does not break packages.

For example, run the above command at the root of the project after making changes to a component in the component library to ensure that others packages are compatible with the changes made.

Continuous Integration

Travis CI is configured to have a build pipeline for the component library and one for each project year. Although most commands are run using yarn scripts attached to a package.json file, due to the many steps required to run tests for a specific set of packages, a Makefile is used instead.

Continuous Delivery

Travis CI will deploy docker containers to ECS for each project year whenever the master branch builds successfully.

civic's People

Contributors

accua avatar alexandernull avatar bjhunnicutt avatar bradfordjanice avatar clemf avatar corydm92 avatar cp avatar danieltomasku avatar davidedaniel avatar dingoeatingfuzz avatar dorenproctor avatar drabelpdx avatar dsdemaria avatar ericgold avatar flamingveggies avatar jaronheard avatar jasonleonhard avatar jimtyhurst avatar johntasto avatar kdv24 avatar lowesusannah avatar magweaver avatar meganmckissack avatar mendozaline avatar mikethecanuck avatar nicrocs avatar nmuldavin avatar paigewilliams avatar palmerev avatar sanjuroj avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.