This page is built to outline the technical aspects of this project
I will cover the tools and techniques I used to build this app
The frontend of this app was built using Nextjs, a framework for React web apps. I chose Nextjs because of the nature of this app NFTea. Since it revolves around NFTs, it made sense to optimize my images using NextJS`s next/image component.
I also benefited from the performance optimizations Nextjs provides. Some of my pages are statically generated at build time (including static pages that require external data such as the landing page). I am also taking advantage of Nextjs`s Incremental static regeneration to achieve higher cache hit rates so my pages are stored on a CDN. Caching my pages makes the app lightning fast and would save costs in a production app. Nextjs also provides code-splitting out of the box which was another major advantage.
The /dashboard page is also server-side rendered. This means better SEO for web crawlers. I also tried out client-side rendering where parts of the page are statically pre-rendered and the parts that rely on the data are rendered on the client. I used SWR for client-side rendering.
Other techniques I used in this app are custom hooks so I could re-use code as much as I can.
Finally, I used TailwindCSS to style the app. Initially, I wanted to go with SASS modules but the utility classes Tailwind offers makes the development time a lot shorter. It would have taken a very long time to write hundreds of lines of SASS code.
Although I haven`t used Nextjs`s built-in API, I used SWR to fetch data, cache it, and revalidate it.
The backend was the most exciting part. I created multiple versions of this app. The first version was a fullstack app that had a server, API, and database on the backend. I found myself spending too much time refactoring code, provisioning servers, and trying out different data encryption libs for my database models/schemas on the backend. So, I decided to rip it all out and use Firebase 9. I came across Moralis while looking for other options and decided to try out it`s Web3 SDK. That`s how this app came about.
My backend runs on the Ethereum blockchain and also supports the Polygon, Binance, and Avalanche platforms. The data is stored both on-chain and off-chain. Theoretically, I could mint NFTs, send/recieve crypto, and have access to blockchain data such as the block, transactions, and history. I will probably extend the features of the app to support this in the future but getting the MVP done was my main goal.
I want to challenge myself and add new complex features into the app. Building this was already very complex, but there is a lot more to Web3 dApps that I want to include. Some of the features I got in mind are:
These are just ideas at the moment...