We need the following items in the top navigation bar

• Home Link
• Logout Button

Use Flowbite react navbar for the UI

Todos

• Setup routes using react-router-dom
• Setup Config and add Config File
• Setup Firebase Web SDK
• Add Firebase UI for SSO Sign in (https://github.com/firebase/firebaseui-web-react)
• Add Sign out feature for Home Page
• Setup Route Guard for Home Page
• Error handling

Planned Routes

• Root Screen
  • Entry point of website, redirect user to home page or login page base on auth state
• Sign In Screen
  • For unauthenticated user
  • Firebase UI
  • Google SSO
• Home Screen
  • For authenticated user
  • Sign out button
• Loading Screen
• Error Screen

User Story

User should be able to create, list, update and delete stock transactions on website via API. We save the transactions in firestore.

Checklist

• Create API
• List API
• Update API
• Delete API

Data Structure

type StockTransaction struct {
  id string // UUID string
  code string
  action string // BUY or SELL
  date time.Time
  amount int64
  price float64
  commision flaot64
  remark string
  updatedAt time.Time // Server UTC time
}

API Endpoint (Draft)

Noted that we also need to pass firebase access token to do the operations by HTTP authentication header
https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication

POST /portfolio/stock-transaction

Sample Request

{
  "code": "QQQ", // string
  "action": "BUY", // string
  "date": "2023-10-20", // YYYY-MM-DD ISO8601 string
  "amount": 30, // int
  "price": 20.5, // float
  "commision": 0.5, // float optional
  "remark": "abc", // string optional
}

Sample Response 201 Created

{
  "id": "550e8400-e29b-41d4-a716-446655440000" // UUID string 
}

POST /portfolio/stock-transactions

Sample Request

{
  "orderBy": "", // string
  "sortDirection": "ASC", // string (ASC or DESC)
  "limit": 20, // int
  "cursor":  "550e8400-e29b-41d4-a716-446655440000" // UUID string Optional
}

Sample Response 200 OK

{
  "data": [...], // list of stock transaction with id and updated_at, see POST /stock-transaction
  "nextCursor": "550e8400-e29b-41d4-a716-446655440000", // UUID string Optional
  "totalCount": 20 // int
}

PUT /portfolio/stock-transaction

Sample Request

{
  "id": "550e8400-e29b-41d4-a716-446655440000", // UUID string
  "code": "QQQ", // string
  "action": "BUY", // string
  "date": "2023-10-20", // YYYY-MM-DD ISO8601 string
  "amount": 30, // int
  "price": 20.5, // float
  "commision": 0.5, // float
  "remark": "abc", // string
}

Sample Response 200 OK

{
  "id": "550e8400-e29b-41d4-a716-446655440000" // UUID string
}

DELETE /portfolio/stock-transaction/{id}

Sample Request

No request body

Sample Response 200 OK

{
  "id: "550e8400-e29b-41d4-a716-446655440000" // UUID string
}

Use helm and kubernetes for deployment.
For CD, use GitHub Action.

• Write helm chart for web and backend
• Setup CD for deployment

• Web
• Backend

We implemented the functionality of Google Sign In.
Eventually we should follow the style guide of standard google sign in button.

Reference:
https://developers.google.com/identity/branding-guidelines?hl=en

It is setup for monitoring app errors and performance

• Website
• Backend

• Setup React Project

  • Use vite as build tool: https://vitejs.dev
  • Setup TypeScript
  • Setup Tailwind CSS

• Setup API Server

  • Gin with Golang

• Setup Firebase Project

  • project name: investment-tools-dev

• Write README on setup project for development

Folder structure

- web
- api
Makefile
.gitignore
README.md

It is not a must now.
We can setup docker for both website and backend for smoother developement.
At the future, we may adopt k8s deployment and we need to build the docker image for two apps first.

• Create Dockerfile for backend
• Create Dockerfile for website
• Create docker-compose file

User Story

As a user, I want to see a list of stock transactions that inputted before, at the same time I would be able to create, update and delete the transactions.

Tasks

• Scaffold Portfolio screen (Protected Screen)
• Integrate backend API, refer to #12 for the specification
• Add stock transaction create form using react-hook-form
• Add stock transaction table using AG Grid or React Table
• Add Delete button on each row of stock transaction table, with confirmation Dialog
• Add edit modal for stock tranction