[Report] Phoenix Zero - Vehicle History and Service Tracker (Jan 6→ 31, 2022)

Project title: Vehicle History and Service Tracker

One-liner: Development of app that allows a user to add vehicles and vehicle services to the blockChain

Project Summary: Project consists of two repos, a smart contract that uses near-sdk-core, where a user can add vehicles and vehicles services to the blockchain. The second repo is a front-end repo the uses Vue.js and near-api-js to render the state of the contract on a browser.

Developer in Residence:
discord: phoenixpulsar | A Macedo#8225

Period:
Jan 6→ 31, 2022

Summary of work done (40hrs)

• Created two new repos on a new Github account
  • Smart Contract
    • GitHub - phoenixpulsar/vehicle-history-smart-contract: Smart Contract uses near-sdk-core to create a WASM file that deploys to Testnet
    • As a user I should be able to add a new vehicle and store it in the blockchain
    • As a user I should be able to add a vehicle service and store it in the blockchain
  • Front End
    • GitHub - phoenixpulsar/vehicle-history-front-end: VUE front-end that uses near-api-js to displays the state of an account deployed in Testnet
    • url: https://festive-kalam-8a63cd.netlify.app/#/
    • As a user I should be able to see though a web app the state of my contract
    • Deployed a Vue front-end that uses near-api-js to read state of contract to Netlify
    • Use Vuex to store and fetch data of a specific contract

---

Next Steps (from proposal)

• Allow a user to log-in in the FE (nearWallet)
• Allow a logged in user to create a contract to hold his/hers Vehicles and Vehicles Services
• Allow a user to sell a vehicle to another user using NEAR coin
• Add more css/style/flare
• Investigate limits of RPC how to index or store if state grows above 50kb of state size
• Document steps & create blog post english/spanish
• Start next project smart forms

---

Detailed outline of main achievements/‘aha’ moments/ divided in 10hr blocks

Block 1 (10hrs)

• Updated reviewed and created a new repo from NCD1 for smart contract
• Use near-account utils to verify methods of smart contract
• Debug error: Can not sign transactions for account dev-XXXX on network
  • Error caused by not having env variable OWNER to sign transaction
• Created a couple a Vue apps to explore near-api-js
• Debug developer tools for Vue
  • Vue developer tools need Beta for Vue 3 to work (different tools than Vue 2)
• Spike: Very informative video on RPC endpoints
  • https://www.youtube.com/watch?v=T8rH8dxGRKg

---

Block 2 (10hrs)

• Debug how to decode values from state near-api-js
  • To decoded it in Vue/JS I am using: atob(val)
  • Tools/linting warn this is deprecated, tried alternative suggested in error Buffer.from(val, "base64"); but did not work as atob() returned array Uint8Array instead of the value
• Minor debugging using SCSS with Vue CLI 4
  • https://cli.vuejs.org/guide/css.html#pre-processors
• Created a new Vue repo but picked dart-sass which did not seem to require loader from above

---

Block 3 (10hrs)

• Added CSS to create UI, added double scroll(scroll through vehicles, flip card and scroll through services)
• Wrangle data from RPC APIs, separated into data structures needed for UI to consume
• Added code to use Vuex as state management to share state data across whole app

---

Block 4 (10hrs)

• Created new clean repo for Front-End with clean git history
• Created a new clean repo for Smart-Contract
• Debug error: Server error: account dev-xxxxx does not exist while viewing
  • Deploying the front-end was creating a production build that was calling a contract on mainnet instead of testnet
• Created a Netlily account to deploy FE
• Hooked Netlify account with Github