Bravo Frontend

You can find the deployed project at https://saybravo.io

Team

Samar Vir	Aaron Thompson	James Eneh	Borja Soler	Johnson Ogwuru
Maxime Salomon	Noble Obioma	Petar Vlaisavljevic

Project Overview

Trello Board
Product Canvas
UX Design files

Healthy office cultures often acknowledge good work from their coworkers and peers. Award your peers with acknowledgments that act like coins/points in Slack when they do awesome things - and never let the acknowledgment of their good work get lost in the shuffle again.

Key Features

• users can see their and their teammates' profiles in the web app
• users can view single shoutout with comments and reactions in the web app
• users can see feed of all shoutouts in the web app
• users can see who is in their team (Slack workspace) in the web app
• users can see their Slack workspace leaderboard in the web app

Tech Stack

Front end built using:

• React
• Slack API Auth
• Styled-Components

Front end deployed to Netlify

APIs

We use Slack API for both authentication and our Slack bot.

Environment Variables

For the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

REACT_APP_API_HOST = link to your API host
REACT_APP_CLIENT_ID = your Slack app's client ID, can be found in you app's settings --> basic information
REACT_APP_CLIENT_SECRET = your Slack app's client secret, can be found in you app's settings --> basic information

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

For development, you will only need Node.js installed on your environment.

$ node --version
v10.16.0

$ npm --version
6.10.3

Installing

$ https://github.com/bravolabs/bravo-fe.git
$ cd bravo-fe
$ npm install

Starting Development Server

$ npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

Running the tests

$ npm test

Launches the test runner in the interactive watch mode.

Deployment / Build For Production

$ npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Linting fix

$ npm lint:fix

Fixes linting automatically.

Coverage reporting

$ npm coverage

Reports coverage with disabled test-watching.

Eject hidden modules

$ npm eject

Ejects hidden modules into package.json.

Structure and Naming

  src
  |
  ├── actions
  |   ├── user.js
  |   └── home.js
  |
  ├── components
  |   ├── Home
  |   |   ├── index.js
  |   |   ├── home.styles.js
  |   |   └── home.test.js
  |   |
  |   └── User
  |       ├── index.js
  |       ├── user.styles.js
  |       └── user.test.js
  |
  ├── reducers
  |   ├── index.js
  |   └── userReducer.js

Setup formatting on Editor

On VsCode:

• Go to Settings > Text Editor > Formatting
• Check Format on Save

Example:

Workflow

• Create a new feature-branch from develop branch that describes your work.

    git checkout -b project-setup

Example:

• Adding a New Feature

  • Create Component named index.js related folder.

    // src/Home/index.js
    const Home = () => <h1>Welcome to BravoFE</h1>;
    
    export default Home;

  • Define Route

    // src/routes/AppRouter.js
    import Home from '../components/Home';
    
    ...
    <Route exact path="/" component={Home} />;

  • Create Action

    // src/actions/home.js
    export const GET_HOME = 'GET_HOME';
    
    export const getHome = user => {
      return { type: GET_HOME, payload: user };
    };

  • Create Reducer

    // src/reducers/homeReducer.js
    import { GET_HOME } from '../actions/home.js';
    
    const homeReducer = (state = initialState, action) => {
      switch (action.type) {
        case GET_HOME:
          return { ...state, home: action.payload };
        default:
          return state;
      }
    };
    
    export default homeReducer;

  • Add Reducer to root reducer

    // src/reducers/index.js
    import homeReducer from '../homeReducer.js';
    
    const rootReducer = combineReducers({
      home: homeReducer,
    });
    
    export default rootReducer;

  • Create Test Suite for Component

    // src/Components/Home/__tests__/home.test.js
    import React from 'react';
    import * as rtl from '@testing-library/react';
    
    import '@testing-library/jest-dom/extend-expect';
    
    import Home from '../index';
    
    afterEach(rtl.cleanup);
    describe('Home Component', () => {
      it('Should render home component', () => {
        const { container } = rtl.render(<Home />);
        expect(container).toBeTruthy();
      });
    });

  • Create Test Suite for Reducer

    // src/reducers/__tests__/home.test.js
    import { cleanup } from '@testing-library/react';
    import userReducer from '../userReducer';
    import { FETCH_START } from '../../actions/user';
    
    const initialState = {
      loading: false,
      user: null,
      error: '',
    };
    
    afterEach(cleanup);
    describe('User Reducer', () => {
      it('Should return initial State', () => {
        expect(userReducer(undefined, {})).toEqual(initialState);
      });
    
      it('Should Toggle Loading state', () => {
        expect(userReducer(initialState, { type: FETCH_START })).toEqual({
          ...initialState,
          loading: true,
        });
      });
    });

  • Create Test Suite for Action

    // actions/__tests__/user.test.js
    import configureMockStore from 'redux-mock-store';
    import thunk from 'redux-thunk';
    import nock from 'nock';
    import { setUser } from '../user';
    
    const mockStore = configureMockStore([thunk]);
    
    describe('Home Action Creator', () => {
      let store;
      beforeEach(() => {
        store = mockStore({});
      });
      afterEach(() => {
        nock.cleanAll();
      });
    
      it('Should return FETCH_SUCCESS Action with payload', () => {
        nock('https://home.com/api')
          .post('/user')
          .reply(200, {
            user: 'Sample User',
          });
        const expectedActions = [
          {
            type: 'SET_USER_START',
          },
          {
            type: 'SET_USER_ERROR',
            payload: 'Sample User',
          },
        ];
        store = mockStore({});
        return store.dispatch(setUser()).then(() => {
          expect(store.getActions()).toEqual(expectedActions);
        });
      });
    });

• Creating SVG Components

  • Get raw SVG

    <svg width="21" height="5" viewBox="0 0 21 5" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="2.5" cy="2.5" r="2.5" fill="#7D8597"/>
      <circle cx="10.5" cy="2.5" r="2.5" fill="#7D8597"/>
      <circle cx="18.5" cy="2.5" r="2.5" fill="#7D8597"/>
    </svg>

  • Remove any unnecessary attributes
    Here I've removed all fill, width and height attributes. We'll be setting those later with CSS

    <svg viewBox="0 0 21 5" xmlns="http://www.w3.org/2000/svg">
      <circle cx="2.5" cy="2.5" r="2.5" />
      <circle cx="10.5" cy="2.5" r="2.5" />
      <circle cx="18.5" cy="2.5" r="2.5" />
    </svg>

  • Create component
    Wrap all paths in a 'g' tag and spread props in so that styles import properly. Use the SVG component in styling/atoms/SVG.jsx

    import React from 'react';
    import SVG from '../SVG';
    function Ellipses(props) {
      return (
        <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 5" {...props}>
          <g>
            <circle cx="2.5" cy="2.5" r="2.5" />
            <circle cx="10.5" cy="2.5" r="2.5" />
            <circle cx="18.5" cy="2.5" r="2.5" />
          </g>
        </SVG>
      );
    }

  • Component Usage
    Colors, mitter limits and stroke can be set in props.

    Props:
    fillColor="<fill color here>"
strokeColor="<stroke color here>"
strokeWidth="<stroke width here>"
mitter="<mitter limit here>"

    Here's an example with the Logo SVG:

      <Logo fillColor="#4265ED" />

• Create Pull Request

  • The PR title should concisely explain the change or addition. Example:

  • The PR description should clearly state what the PR is about in detail.

• Request a Review from at least one team member. Example:

• Resolve Requested Changes Example:

• All CI status checks should be green

• Review approval should have been submitted before merging

Documentation

See Backend Documentation for details on the backend of our project.

License

This project is licensed under the MIT License - see the LICENSE file for details

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.