About this project

🚧 UNDER CONSTRUCTION 🚧

Getting Started

This describes how to contribute to SFN-CLIENT: the tools we use to track and coordinate the work that is happening and that needs to happen. This also describes the workflow -- the processes and sequences for getting contributions merged into the project in an organized and coherent way.

We use Zenhub to manage our work on features, chores and bugfixes.

We keep our code on GitHub and use git for version control.

Forking the repository

Each developer will usually work with a fork of the main repository on Agile Ventures. Before starting work on a new feature or bugfix, please ensure you have synced your fork to upstream/develop:

Node version management 🛠

Please ensure you have nvm installed in your local machine. If you are using OSX you can run the command below

brew install nvm

Run the following command to install and switch to the current node version for the project:

nvm install v10.13.0

To ensure that the correct node version for the project is automatically selected when you cd into the sfn-client project's directory please install avn in your local machine and run the commands below in your terminal:

npm install -g avn avn-nvm avn-n

OR

yarn global add avn avn-nvm avn-n

Then run:

avn setup

Unfortunately, if you are using vs code's integrated terminal, you have to cd .. and cd back in cd sfn-client

In Mac's Terminal it works automatically.

If you are using fish shell please use this to install nvm and install avn for fish

Install yarn.

npm install -g yarn

Run yarn to install dependencies

yarn

Starting the development server

yarn start

Running tests (jest)

• This codebase uses Enzyme Javascript Testing Utility. To learn more about the Enzyme you can checkout their documentation.

• start the test by running

  yarn test
  

• then press a to run all test

Running eslint/standard autofix command

• You can't commit or run the tests if you have lint errors, so run:

  yarn lint:fix
  

SetUp Project with Docker

Prerequisite

• Ensure you have docker installed. Install docker

Instructions

• Change to the project root directory. (.//sfn-client)

• Create an image with the following command

docker build -f docker/Dockerfile -t sfn_client:production .

• Run the created image with

docker run -p 80:80 sfn_client:production

• Access the application on localhost port 80

http://127.0.0.1:80

Using the debugger

• If tests are failing, or you found a bug running the development server, you can debug using the inline debug tool.

Creating an Issue

• You can create an issue by clicking on this link or by clicking on the new issue button on for github issues for the sfn-client project
• Click on the Get Started button to open the issue creation template.
• Fill in all the relevant sections provided in the template as you create your issue.
• Submit your issue by clicking on "Submit issue" button.

Choosing Stories/tickets.

When deciding on an issue to work on, look for the Help Wanted or Good First Issue tags.

Request to be added as a collaborator in our AgileVentures.org Slack chat channel.

After you’re a collaborator, you can move the ticket to the In Progress column here, to indicate you’ve started work on it.

How to create a feature branch

git checkout develop

git pull upstream develop

After you pulled the latest develop branch, make sure you have also the dependencies installed each time, by running in the console:

yarn

Ensure you have setup AgileVentures/sfn-client's upstream develop. Otherwise you will not have the latest develop changes.

To confirm this, run git remote -v.

You should see a simillar output.

origin  https://github.com/yourgithubusername/sfn-client.git (fetch)
origin  https://github.com/yourgithubusername/sfn-client.git (push)
upstream    https://github.com/AgileVentures/sfn-client.git (fetch)
upstream    https://github.com/AgileVentures/sfn-client.git (push)

If not, you need to set the remote develop in order to get the latest copy once changes are merged.

In order to achieve that, run:

git remote add upstream https://github.com/AgileVentures/sfn-client

git pull upstream develop

This depends on the name of your origin (Counter check before running the above command).

You will now have the latest copy of develop in your local.

Once this is done, you can proceed with naming your branch following the below convention.

Branch Naming Conventions

git checkout -b 17-add-sfn-logo

Where 17 is the ticket number and add-sfn-logo is a short description of the purpose of your branch.

Commit Messages

Ensure your commit message clearly communicate the work you have done.

For example,

git commit -m "Implement user login"

Pull Requests

After feature branch work is complete, push up to the upstream repo, for example:

git push --set-upstream upstream 17-add-sfn-logo

For your Pull Requests, ensure you have a proper title describing your task. Make sure to add a link to the ticket you've worked on and add any screenshots if necessary.

In your pull request description please include a sensible description of your code and a tag fixes #<issue-id> e.g. :

This PR adds a CONTRIBUTING.md file and a docs directory

fixes #799

which will associate the pull request with the issue in the Zenhub board.

Your pull request needs to be reviewed by at least two people in the team for it to be merged in develop branch.

Instructions on how to review a pull request can be found here.

Design

Designing components

We try to make designing components easier with setting up some base grounds of colors, typography and layouts. Before start designing a component for the page, please consult these materials. You can find them in the src/components/styles directory.

The layout of the pages is following Bootstrap's 12 column grid system, but with using CSS Grid and Flexbox together. We recommend to have a look at the documentation, or just give a shot to grid garden game.

The structure of the components and spacing is suggested to follow an 8px grid system, what does that mean? It means every spacing, padding and size (width, height) of a component is following a multiple of 8. To give you a head start related to this rule, we set up the margins and paddings already to use in the styles/utilities.scss file as SASS variables.

Design reference 🎨

As moving towards with the project the individual screens and assets will be documented here

Design inspiration

Artists Page mockup

Editing Artist Page mockup & flow

Artists Index Page mockup

Causes Page mockup

Causes Index Page mockup