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.