greenstand / treetracker-wallet-web Goto Github PK

View Code? Open in Web Editor NEW

11.0 7.0 26.0 6.63 MB

The Greenstand Wallet App

Home Page: https://wallet.treetracker.org

License: GNU Affero General Public License v3.0

JavaScript 96.05% HTML 0.61% CSS 3.24% Shell 0.05% Dockerfile 0.06%

gis reactjs material-ui leafletjs mobile-app non-profit climate-change reforestation

treetracker-wallet-web's Introduction

Treetracker Wallet App

Development Environment Quick Start

Important Note: You need to use node version 16+ to run this project. You can download node 16 from the official website.

Make sure all npm modules are installed for client.

npm i

Start the client

npm start

~~Start the mock API~~

npm run mock-server

Start the mock API (new) Because we are now migrate the API to combine with web map client so please run the mock server in that repo:
1. Clone the repo: git clone [email protected]:Greenstand/treetracker-web-map-client.git
2. Install the modules: npm ci
3. Run the mock server: npm run mock-server
Open the web map in the browser with URL: http://localhost:3000

Workflow with Github

Our development workflow on Github, go here.

Guide for development

How to Build Components

We recommend using Cypress's component tool to build components separately:

To run Cypress unit/component tests:

npm run cyu

Video tutorial for building component

To simulate mobile device in the component tool:

As we are focusing on the mobile device, we using the Cypress tool to build our components. We want to test the them with devtools in Chrome, the most important feature being the swipe/touch simulator, which can be enabled by changing to mobile view within devtools. This can be tricky if you are using the Cypress component tool because the view portal can be too small to work with, so we created a customized device to enable better visibility. Here is a tutoroial showing how to set it up:

Video tutorial for Cypress setting up

How to Build Pages/Routes

Glossary:

Page/Route: every unique path of url on the app is a page or route, like a single tree page: http://map.treetracker/trees/123.

We need to build integration test for every page

We need to build Cypress integration test for every page/route, the integration tests would be run in CI when merge code and deploy to protect app from breaking.

Also, integration tests bring some benefits for the development workflow, by mocking API requests, we can separately develop every single page, if you'd like to practice Test Driven Develop, you can mock the API and write the tests first, then implement the real page later.

To run Cypress integration test

npm run cy

How to mock the API

Video tutorial for mock the API

The API

Now we are going to combine the API of wallet API with the web map client API, so we deprecated the API and mock server under doc folder. Instead, you need to run the mock server from treetracker-web-map-client repo. Please download that repo and run the mock server: npm run mock-server.

The details is here: https://github.com/Greenstand/treetracker-web-map-client#the-api

Config

The config to set the API server is an env variable:

REACT_APP_API_WALLET=https://4861b9cd-4ac3-460e-b42f-9b14ac00c403.mock.pstmn.io/

Test

About our test philosophy and rules, please go here.

Desgin resource

Our Figma UI design for the wallet app is here: https://www.figma.com/file/vOCKDnXrejCASuQQyZPYYR/Wallet-Web-App---Master?node-id=7%3A71

Code style guide

We use Prettier, Eslint along with husky to style our code.

Prettier

Prettier reformats the code, but does not do code rule checking. If you are using VSCode as your IDE, please follow this guide to set up Prettier and automatically format your code on file save.

You can find the Prettier rules in the .prettierrc file.

Eslint

To check the coding rules we use Eslint. To validate the rules manually, you must run:

npm run lint

To fix automatic rules run:

npm run lint:fix

In .eslintrc.js, there is a set of rules with status off or warn. Whenever you are developing a new file or an existing file try to correct some warnings, because in the future the rules will be activated.

Once the rules are activated, you can't make a commit until you fix the lint errors!

You can find the Eslint rules in the .eslintrc.js file.

husky

With husky we can use any git hook. Git Hooks are actions that can be executed if a certain Git event occurs. For example when a developer makes a 'git commit' or a 'git push'. To add a command to a pre-commit hook or create a new one, use:

npx husky add .husky/pre-commit "<your command>"

.husky folder contains all our hooks. E.g.:

npx pretty-quick --staged

The pretty-quick npm package runs Prettier on your changed files.

Commit Message and PR Title Format

We use commitlint, to format out commit messages. Commitlint checks if your commit messages meet the conventional commit format.

You need to use a proper commit message format or you will not be able to commit your changes! husky checks your commit messages before every commit.

Your commit messages will need to follow the Conventional Commits format, for example:

feat: add new button

chore: run tests on travis ci

fix(server): send cors headers

Other resource from Greenstand

We have more tech guides and handbook here:

Greenstand engineer handbook

treetracker-wallet-web's People

Contributors

Stargazers

Watchers

treetracker-wallet-web's Issues

Share component

The UI design: #30

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/

Solve the eslint for cypress,

Make sure eslint works for cypress.

We ever have to remove the last line in eslint cfg:

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
        jest: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:cypress/recommended",
    ],

Experimant: lazy loading for the landing page.

The idea is: making the landing page extremely simple and small, so loading this first view/page would be fast, with the spin/loading animation running, then consider load the rest of the whole app.

Share wallet function

To share the wallet, (the share button on the wallet + token list page)
Please check the design details in the channel, and refer to the current share feature in the web map client. https://github.com/Greenstand/treetracker-web-map-client

Install eslint

And the rules to run it, refer to https://github.com/Greenstand/treetracker-admin-client

History transaction component.

Could use mock/fake data to present the component.

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/

The detail page component.

Please note, this task is just about the frame of the page (the back button, and drawer) do not include the content in it.

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/

Force code format with prettier when commit.

Make sure everytime committing the code, the code is formatted appropriately by prettier, so we get a beautiful code and will not be bothered by feature code format confusion.

Install prettier

And the rule to run it, Refer to https://github.com/Greenstand/treetracker-admin-client

Make the map drawer more smooth

https://www.loom.com/share/bbfcba122778469fbfd0feaefb04f0ea

Readme about husky/eslint/prettier

Add guide into readme for husky/eslint/prettier

Let the page router transition support the IOS safari

Currently, it is a little stumbling on the IOS to click and jump to the next router( using React-Router + react-transition-group) My guess is that the CSS (we use css transition for the page effect) is unsupported on the IOS safari. So we need to test and fix it, make it works the same as on Chrome.

Drawer component

Install husky

To control commit workflow. Frefer to https://github.com/Greenstand/treetracker-admin-client

Create Detailed Tree Screen

Display Tree Species/Tree Name (Marula)
Display Tree Badges (i.e. Tree Verified, Token Issued)
Display Planter Profile Image
Display Tree Image as background overlay
Show latest state in transaction history (Claimed on January ...)
Impact Value Progress Bar
How is this value calculated? Popup
Impact Manager
Details Tab

The Wallet info component

Create History Tab with Timeline

Use events returned from API to create historical timeline based on transactions for tree token.

Install Cypress and basic e2e test.

The entry point of the most basic e2e test, like open the landing page.

Map integration

Using the current web map modules.

MatierialUI template/theme

To define the them:

Colors
Fonts
Spacing.
Corner style.
And so on.
To bring the most convenience for the detailed pages when coding, avoid replicated troublesome style definition in the detailed code file.

Deploy to test env

Deploy code to test environment.
Refer to: https://github.com/Greenstand/treetracker-web-map-client/tree/master/.github/workflows

Integration the first page.

The infrastructure: router

Consider how to router, and how to deal with router in a map-based app

Read me

Cypress unit test installation.

Setting up the unit test env using Cypress.
Define the way to build/create/test the component unit.

A spin/loading component

Spin when data is not loaded yet.

Button component.

Create a reusable button as a common component.

API spec for milestone1

Define the spec for APIs that are required by the milestone1

Back navigation button

a common component.

Remove the radius at the bottom.

Set the drawer radius but need to remove it at the bottom of the drawer.

API spec for milestone2

The tab component.

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/

Create Grid Element that will pull images for 9 random trees from continent/country

The UX/UI about the share function.

@rgesulfo Do you think that we need to design a share page/dialog for the share function? We have a simple one on the current web map, but we just build it with the default component in the lib we are using. It's not so pretty in my opnion.

The infrastructure: all kinds of tools

ESLint, Prettier, Cypress, Jest

Can not interact with the map.

https://www.loom.com/share/4d6b9467ab1e4da3adbc46fe140bf8c5

The tree/capture detail page.

Create page + component for the tree/capture detail page, could use mock/fake data.

Based on data received from API, display 3 random planters and 3 random tree species with images, condense the rest into icon (+22, +32 in image)

The landing page

With an animation

Caution component.

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/

Build component of token increasement graph

Using library https://www.chartjs.org/ to build a graph component, please use static data to mock the graph (I mean we just need to draw the component following the UI design)