homefeed-app

How to run (Node >= 18.x)

1. Clone the repository
2. Go to moralis.io and sign up with a new account or login into an existing one
3. Create .env from .env.example and replace VITE_MORALIS_API_KEY with API key from your account's API Keys section
4. Run yarn install to install dependencies
5. Run yarn dev to start a dev server

Summary

It was a fun assignment! It took me approximately 6 hours to finish the coding part. I've decided to stick to client-only approach as all the necessary data seems to be available through the public API of moralis.io. Of course, this means the API KEY is gonna be bundled and exposed to the client with the production build (in case of such need) so this should definitely go through backend service when such security concerns are present.

For this assignment, it was confirmed that this would not be an issue as long as an understanding of such concerns is taken into account.

If the full-stack solution would've been required, I would've set up React/Vite client and Express server with tRPC as a backend API service layer and probably use drizzle for the database management in case any kind of data persistence is required. If there would be a need for even more full-stack functionality - I would just go with Next.js setup through t3 stack.

Implementation details

Libraries

• Tanstack Query for data fetching
• Tailwind CSS for styling
• date-fns for date formatting
• Moralis JS SDK for API types

Structure

• api - usually I would start from a single api.ts file that would export a single const api = { ... } with all the fetch calls but in this case even though it was only a sinlge request function - it appeared to have a lot of data processing involved so I've moved it to separate file.
• components
  • icons - SVG icons in JSX. Another approch would be to use an icon library like react-icons but should always consider the tree-shaking aspect
  • transactions - UI code related to transactions list
  • ui - custom abstractions over native components, same way it is done by shadcn/ui
  • Layout.tsx - main layout of the app

P.S. The progress of file structure can be seen through the commits. The original convention of React development "start from a single file" works best for me when I need to implement some kind of MVP fast or when I just want to quickly implement some idea so in this case I did exactly that - started from a single file and refactored along the way when it felt too bloated.

Although, whenever I join a new team - I like to apply team's style of development as it doesn't really matter to me whether we have a huge file with 500 lines or 50 files with 10 lines - as long as we all understand the code and each other.

Areas for improvement and known issues

• Unfortunately, I don't have a lot of experience with tests so none were written for this assignment.
• To format the numbers the Intl API of JS was used. This is not ideal if the target audience for the product includes people who potentially use old computers with old browsers. For such cases a polyfill or custom implementation is required.
• Initially, I've implemented transactions fetch with a single request that would get a static N amount of transactions as it was a lot easier to implement the UI part with a static set of data. Then at the end I quickly reworked it to the simple lazy load pagination (Moralis API provides the cursor for the next page of dataset) so it can fully load some huge transactions history, although the performance will definitely incrementally drop as for bigger datasets solution like virtualized list would be beneficial.
• Potentially, there might be particular scenarios where some uncaught bugs related to scroll behaviour or clearing/disabling the text field or anything else like that might appear though I did my best to cover that without spending too much time.
• I wasn't able to fully achieve the desired result in 4 hour window as I tend to sometimes give a bit of too much attention to things like visual details (e.g. make sure all the margins/paddings/sizes are precise) or ensuring type-safety for other developers that gonna use my code. This sometimes can drag me out of focus from the main priority tasks but never to the scale of becoming a major timing issue.

Possible future features

A few things that I would definitely would advocate on implementing as the next steps would be:

• Master details section can be added for each transaction on click/tap in order to view more specifics: gas price, unformatted values, token icons, from/to addresses etc. My suggestion would be to make it a section that slides down when you click on the transaction. If more details are required (e.g. button to format a receipt or share button) - definitely makes sense to open a new screen with the full transaction report.
• Date filter where you can select start/end dates to view the transaction history between certain dates
• Currently, you can see all native/etc20 transactions. It might be helpful to have a switch toggle that would let you only view native or erc20 separately. Also, if NFTs are added to the list as well and - it makes sense to add some kind of tabs to view different types of transactions (all/native/erc20/nft)
• There's definitely a place for helping tips/hints/tooltips/popovers on some UI elements to make the app more accessible and easy to use. Maybe even some tour functionality can be useful.
• Section with "recently watched addresses" can be added in case the history is somewhat beneficial