Solana Transfer History

Transfer, display all Solana transactions and details

Demo

Checkout the demo here

Highlights

Responsiveness

Summary

• SPA app using React (no server side);
• Pulls data from devnet Solana, using Solana Wallet Adapter;
• Doesn't use any 3rd party UI components;
• Deployed to https://solana-transfer-web.web.app
• Packages used:
  • React 18.2 with TypeScript;
  • Bulma CSS for styling;
  • Redux Toolkit for global state management;
  • Prettier + ESLint + Stylelint for automatic enforcement of basic code hygiene;
  • npm for package management.

Local development workflows

Task	Command
Run dev server	npm i && npm run start

Known deficiences

• Using localStore as a database to store the user transactions;
• Simple search transaction mechanism;
• No unit tests, E2E tests and stories coverage;
• Hard-coded UI theme, missing light mode support.

Improvements

• Use Algolia to store the transactions;
• Use Algolia for search feature;
• Implement Storybook for component-centered development;
• Add unit testing using Jest or Playwright;
• Add component testing using Cypress or Playwright;
• Add E2E tests suites that support Solana Wallet;
• Add Vite for bundling/HMR;
• Add conventional commiting rule using hasky;
• Add GitHub actions to follow Git flow branching strategy;
• Add to the GitHub actions reles to run the build, unit testing and Sonar checking.