This is a project showcase for an App build with Next.js with the Material UI component library.
https://eduardosacco-labs-test.vercel.app/
Install it and run:
npm install
npm run devNavigate to http://localhost:3000/
API that accepts an integer and returns a string of words that represent said integer.
Due to the way that Next.js works the it is located in the pages/api/ path.
Since the file name is actually representing the API route the file was named number-to-words to be more descriptive of what the endpoint is doing (vs convert.js).
The API is written in TS since I like strongly typed a lot more than JS for back end.
How to use:
Req: /api/number-to-words?number=342 => Res: {"data":"three hundred forty-two"}
The App has 3 pages.
It has some content about me and some of the (public) projects I've done. It has some responsive card components (CardLongResponsive) and the projects are displayed using the Album component.
Due to the way Next.js works its located in the test/[[..number]].js path, this is to enable an optional catch all dynamic route for the variable number in the test url path.
The page has some basic input with validations and when the convert button is clicked the page is pre rendered on server and due to the use of Next.js getServerSideProps.
This page leverages the use-metamask library to connect to Metamask. It will automatically trigger a connection request to Metamask if not connected. Once connected it will show the currently connected account. The also allows the user to switch blockchains, If a selected blockchain does not exist on Metamask the page will request it to be added.
This page required some design decisions to be taken around some limitations of the use-metamask library. Read more about this in the design decisions section.
To add some fizz to the Crypto page I added a component to show the animated Metamask logo. Also the page will show the Blockies icon for the account.
To experiment with the theming capabilities of Material UI a theme switcher was added to the NavBar. This enables switching from dark to light themes. Dark themes are objectively way cooler so thats the default.
It's currently not possible to trigger a proper disconnection from metamask. To do this correctly the user has to disconnect from the extension itself.
The approach taken here was to show the user a modal with instructions on how he can disconnect using metamask when the disconnect button is pressed.
The use-metamask library is not compatible with server side rendering apps by default since it uses global window. There is currently an open pr with a fix for this issue.
To bypass this the component that uses the use-metamask library was wrapped in a component that disables rendering nested components in server side.
The library will not connect after being disconnected from metamask. To bypass this issue the connect button will trigger a page reload which in turn will trigger the use effect that starts the use-metamask connection.
- Metamask animated logo dual viewer bug occurs when running locally. Need to investigate more to understand why this occurs. Hypothesis: Its related to SSR, first test of wrapping the component with disable SSR did not solve it though.
- Add SEO component to pages, title and description!!!
- Make home layout responsive
- Add css to make images responsive
- Add image loader spinner or placeholder
- Typing: Extend TS usage to JS files.
- Use useMemo for component parts of crypto page
- Add some basic front end tests
- Create a page to interact with the lottery contract
- Tweaked theme colors and made it more boxy. Changed typography to Space Mono since it looks cooler.
- Added the emoji component and ised it in the cards and nav bar
- Fixed bug where correct item was not being selected in nav bar menu items
- Improved accessibility by adding alt text for images
- Added priority tag to LCP image
- Further optimized images
- Added Plaiceholders placeholders for images
- Removed getting unused fonts from CDN
- Made it easier to close disconect metamask modal