Building the MonsterHunter Landing Page

In this blog post, i am sharing my journey of coding the site, exploring the interesting challenges and major milestones along the way. From initializing the project with Next.js and integrating Tailwind CSS to implementing NFT fetching and creating unique components, I am sharing my insights and experiences in building the basic MonsterHunter landing page to life.

Client Said :- We Want You to create Our Landing Page as soon as possible within 2 weeks. Just The basic neccessities would be fine to us.

Gave Me More info on the product

MonsterHunter provides an unparalleled gaming experience that revolves around the exhilarating hunt for unique and powerful monsters. Engage in strategic battles, plan your moves, and utilize specialized abilities to overcome the challenges that await. With each successful hunt, you'll earn rewards and unlock rare NFTs, creating a sense of accomplishment and progression within the game.

Initializing the Project:

According to what my client wants, its a nft game landing page, and he needs it as soon as possible. I started by looking on some designs and felt, i had to make this without the use of any design software. Therfore i initialized a new Next.js Project with TypeScript. Installed tailwindcss, postcss and autoprefiexer for tailwind utils. And I started Browsing other webapps with similar nft games, and the reference site he sent was a themeforest template. The design was bad and it was not a professional Website. So i started it with by own b/w styling.

Fetching NFTs from OpenSea:

OpenSea offers a marketplace online allowing for non-fungible tokens to be sold directly at a fixed price, or through an auction..

This was a Tricky Part opensea's API policy, does not allow for public get request calls. The Only Api I had access publicly was this apiString. The Api String was needed to request the name, description and image.

const collectionName = 'example_collection';

const apiString = https://api.opensea.io/api/v1/collection/{collectionName};

Custom Hook to fetch apiString using axios

To streamline the process of fetching data from OpenSea servers, we created a custom React hook called useFetch using the Axios library. This hook abstracts away the complexity of API requests and provides a simple and reusable solution for fetching NFT data, enhancing the efficiency of our codebase.

Finishing Up the Site by Creating all landing page components

Unopinionated Hero Section

The Hero Section Could have been more striking but the in the insufficient timespan provided by the client made it look washed up. The client requested a normal section with text on one side and a youtube iframe in another. which was pretty restrictive, but nonetheless it was my duty to do what i could as soon as possible.

Creating Carousel Animation

Using the package embla carousel and embla-carousel-classNames helped me to integrate it with tailwind css. This dynamic component showcases key features, highlights, or exciting NFTs, capturing the attention of visitors and keeping them engaged.

Scroll and Size Observers:

To ensure optimal performance and responsiveness, we implemented scroll and size observers in our _app.tsx file. These observers allow us to track and react to changes in the user's scroll position and viewport size, enabling us to dynamically adjust and optimize the display of content on the landing page.

Implementing Nft Icons Slider:

To provide a native web experience, we utilized requestAnimationFrame to animate the slider component. This slider was specifically requested by the client.

Pre Register Form

Client specifically mentioned - "Pre-registered formspree account to handle registers", so i went to formspree created an post endpoint for email registeration for potential players.

Wrapping Up

From initializing the project and integrating Tailwind CSS to implementing NFT fetching and creating unique components, each step was essential to deliver it on time. With the project completed in just 10 days. It was fun creating their project would like to work with them again on another things.