At Funkhaus, we build our websites one component at a time. At the beginning of a project, the Project Lead defines every needed component as a GitHub Issue on the project’s repo. We call these issues“Component Requests”.
Any developer can request to build any component on any Project by requesting so via a comment on an unassigned Component Request issue in GitHub. Once your request is approved, you can build your component in the project’s included Storybook, then make a PR to the project's master/main branch. Each component has a time estimate that goes with it. As a partner, you get paid once you finish the component, and only for completed components.
Below is the instructions on how to find a component to build, and how to build it to the Funkhaus standard.
1. Request a component to build
All our projects are in GitHub as private repos. You can request access to our Funkhaus organization by contacting drew@funkhaus.us. We can also add you to our partners slack channel.
Once you’ve been given access to a project’s repo, you can browse to the GitHub issues page and you’ll see a list of“Component Requests”. Any that are unassigned, you can can request to build. Just write a comment asking for permission to build this, and the Project Lead will assign it to you.
Please only pick components that you will be building that day. Don’t grab more than you can do in a single session. The idea is we don’t want a group of components to be roadblocked by a dev that is busy doing something else. Most components only take a few hours to build, so if you haven’t made progress in a day or two, we will most likely open those components up for others to build.
Some components make sense to build together, like a Work Grid and the Work Block. So be sure to grab those at the same time, or at least comment on one that you’re building the other and plan to do it next.
If you’re new to this process, start by picking an easy component. Each component includes a time estimate in the title, start with a quick one. These time estimates come from the Project Lead, and just serve as a guide for how hard a component is to build, so we can estimate the time to completion of the entire project.
Request access to Funkhaus GitHub organization
Comment on a Component Request issue requesting assignment
TODO Build a simple web page that lists all open component requests in a single place?
2. Clone the project repo into your GitHub account
The goal is to develop your component interdependently as a Stroybook story, and then open a PR to to the project repo. Your component will then go through a PR review process, before being merged into the main.
Open your new forked repo in your code editor. Using the terminal, you’ll want to run this command while in the project repo directory:
npm install
Install npm packages
4. Setup developer environment
Node
All our components are Vue components, that live in a Nuxt project based on our fuxt boilerplate. We develop each component using an included Nuxt-Storybook module. So first thing you need to do is install Node on your machine and configure your code editor of choice with a working Node terminal. We use Atom at Funkhaus and the Terminus package.
ENV vars
The project repo will include a .env.example file in the root. You should duplicate this file, and rename the duplicate to .env. Please ensure you keep a copy of .env.example in the repo.
This .env file contains the URL to the projects backend. Although it’s not necessarily needed for component development, it’s nice to have it working for certain components that can pull data on their own(like wp-menu components).
1. Request a component to build
2. Clone the project repo into your GitHub account
3. Install packages
npm install4. Setup developer environment