FishFry Tours Board

Demo: fishfryapp

API code: github.com/altherlex/fishfry_tours_api

---

This is a simple Web application that tracks and manages boats.

Fishfry Tours is a small salmon guiding outfit based out of Cascadia, British Columbia - along the coast. They run a seasonal guided sport fishing tour of some of the more hidden inlets of Coastal British Columbia. In total they have 8 sport fishing boats with 12 guides. At any given time there are at least 4 or 5 boats out in the waters. Sometimes the boats will meet each other to exchange gear and fuel for longer days at sea.

The control office maintains a kanban-like control chart on a white board which describes the state of each boat. Some of the swimlanes are ‘Docked, Outbound to Sea, Inbound to Harbor, Maintenance’

The Boat Guides have expressed interest in having the control chart accessible online through their mobile phones (whenever there is service). Sometimes radio contact to other boats is not possible and using satellite services are too expensive to maintain constant communication.

One of the boat guides is a web developer during the off season and offered to build the app. He insists on building it using an Agile Approach.

The boat guides have varying computer skills. They mainly want to see the status of all the guide boats in the area at a glance and be able to move their cards into different swimlanes as needed.

Assessment Scoring

Back-end component assessment

• ✅ Loads without errors
• ✅ has multiple modules/components/classes
• ✅ implement error handling
• ✅ RESTful
• ✅ Good formatting and comments
• ✅ Can list, view, create, update, delete items

Front-end component assessment

• ✅ Loads without errors
• ✅ has multiple modules/components/class
• ✅ implements data binding
• ✅ Mobile friendly
• ✅ Good formatting and comments
• ✅ Can list, view, create, update, delete items

QA test assessment

• ✅ Executable test plans & scripts that will ensure applications meet business requirements, system goals, and fulfill end-user requirement.
• ✅ Sufficient amount (>5 valuable unit tests) of test coverage (TDD) using a modern testing framework.
• ✅ Written paragraph on what approach you would take for writing functional tests for this application:
  • ✅ Functional tests are written and executed with Cypress (End to end tests)

DevOps Pipeline Assessment

• ✅ The pipeline checks out code from a public repository
• ✅ The pipeline checks builds code (if applicable)
• ✅ The pipeline sets configuration settings
• ✅ The pipeline deploys the app to a cloud-hosted environment

Technical Info

Open Source Tools

• Node.js v12 or greater
• Typescript
• React with functional components and hooks
• Redux Toolkit
• Components & styling with Material-UI and Emotion
• Drag & Drop using react-beautiful-dnd
• Bootstrapped with KnBoard & cra-template-typekit
• Unit tests with React Testing Library
• Integration tests with Cypress
• typescript
• redux
• react
• axios
• eslint
• prettier
• craco

Next Steps

• Build Circle CI - frontend/banckend
• Integrate CircleCi tests + linter on Heroku pipeline
• Make static Dango files public in Heroku
• Use Git Worflow
• Add linter to the pipeline
• Remove column dragdrop
• Fix updating
• Fix Linter
• Fix avatar feature
• Fix updating task label

Commands

npm start
npm build

npm test
npm test:coverage

# Check formatting & quality with eslint
npm lint
npm lint:fix

# Integration tests
npm cypress run
npm cypress open

# Check formatting with Black
black --exclude .venv .

Test:Covare

Test Suites: 7 passed, 7 total
Tests:       44 passed, 44 total
Snapshots:   3 passed, 3 total
Time:        8.09s