DEV Community

Cover image for Building a NFT marketplace frontend (Typescript + Next JS + Tailwind CSS)
Shadman Shakib
Shadman Shakib

Posted on

Building a NFT marketplace frontend (Typescript + Next JS + Tailwind CSS)

Warning: I don’t want to waste you time here is nothing very important. It’s just few of my thoughts what I’m using to build a NFT market place theme.

For a long time really wanted to build something with Next JS. But didn’t really get the time or patience to build it. First thought I would build a e-commerce website and Shopify API with it. As WEB 3.0 and NFT’s is taking over the internet I thought why not build a NFT marketplace. Design mainly taken from opensea. I’m using Typescript instead of using JavaScript. And for styling I’m using Tailwind CSS.

Typescript

TypeScript is a superset of the JavaScript language that has a single open-source compiler and is developed mainly by a single vendor: Microsoft. The goal of TypeScript is to help catch mistakes early through a type system and to make JavaScript development more efficient.

Actually, speaking truth I have never used JavaScript that much. After reading some article and watching YouTube video it was clear to me Typescript is a better option.

React JS

React is best for building complex UI. Where every single day there is development of JavaScript framework or library, React is by far the most used JavaScript library/framework to build UI. React component principle is great to write clean code and maintaining your code base.

Next JS 12

Next JS is a JavaScript framework build on the top of React which is really great to build complete website. React is mostly used to build Single page application(SPA) which not that great for SEO. In next js you have option for server side rendering(SSR) or Static Generation (SSG) which is great for SEO. Also it’s much easier to build website like this with Next Js as it has many of things like routing, image processing build in.

Tailwind CSS 3

Tailwind CSS basically is a CSS framework. It is base on utility principle. You need to add some class names in your html tags for styling. Tailwind really makes life really easy. It’s really easy to make responsive design with it. Tailwind prioritize mobile first designing. Where you first write code for mobile screen.

Top comments (0)