Table of Contents
The Creativearts marketplace offers a wide range of functionalities. It lets users have access to many categories of NFTS made by other users and are able to bid to purchase them. With its decentralized nature, it helps users own the application by having the ability to add a new item to the marketplace when they would want to without needing any permission to do so
The site has been built to be accessible by artists, lovers of art and as well as anyone looking to express the business side. Artists can now showcase and monetize their artworks as well as auction and make them limited items. Lovers of art can now go neck to neck to acquire their favourite art in a bidding format which would only be accepted by the creator of the NFT (artists). This makes the value of an item decided by the users and users alone with no central agency involved On the business end, people can now purchase super unique items in their early stages of minting, market and sell them for profit. It's a marketplace for all
I built this project with the aim of creating a marketplace which would very easy to access by people from all careers and backgrounds. Its open nature would make it so everyone can express their artistic and business self in the way they want while being in control of all their returns, sales, and purchases
I also built this to improve my skill in front-end development which I've have been learning for some months now. I believe from the challenges and experiences encountered while doing it, I would be able to transfer them into a new project and build something even bigger and better in the nearest future
And lastly, I just joined Angelhack not too long ago and I saw this as a challenge to see how far I can go and how much I have learnt in my field of technology (React/Next) to put my most effort into it and see how much value I can come up with
home.mp4
It 4 unique sections. Hero, Unique arts, Artists of the Week and Subscribe to the newsletter
explore.mp4
This track contains all nfts available in the market. You could also filter the items depending on your requirements. By price, date, type, and item name
mint.mp4
This contains a form where you could add a new item to the market. It makes use of well-described form validation to improve the user experience and help users with non-technical backgrounds be able to access the site with ease
nft-details.mp4
Clicking on an item would take you to the item's page where you would be able to purchase an item or submit a bid for it as well as items relating to the one you're currently on
mobile.mp4
All pages are fully responsive and interactive ranging from small to large screen sizes
See the application working LIVE!
The project was bootstrap using Nextjs which is a meta framework built on top of React. It provides out-of-the-box features like routing, server-side rendering and creating backend APIs
TailwindCSS has been used to style the site. It offers out-of-the-box utility classes as well as make it easy to create a consistent design system with its colors, its consistent spacing values
These two are component libraries built on Tailwind. They come with beautifully style components. They are built on tailwind so this makes them easy to customize(colors, size, etc) to my preference
This was used to add animations to my elements. Elements animated on the site include buttons, cards and mobile navigation bar
This library offers a wide range of options to customize the components as well as interact with the blockchain. For this challenge, I only made use of the connect wallet button which can be visible on the navigation bar
I used these two libraries together to create top-notch form validation with descriptive errors to give feedback to the user.
- react-toastify: Used to create toast messages
- react-icons: Used to get svg icons from a variety of libraries
- react-countdown: Used to create the countdown timer seen no the cards
- nanoid: Used to generate a random ids
- Clone the repository
git clone https://github.com/Complexlity/creative-art-marketplace- Install Dependencies
npm install- Run Local Server
npm run dev- Connect wallet button
To make the connect wallet work. You need to add two environmental variables
- WALLET_CONNECT_PROJECT_ID - You can get a free project id at Wallet Connect Cloud
- ALCHEMY_ID - You alchemy account API key. If you don't have one, Create a new Alchemy Account to get a key
- Navigate to http://localhost:3000/. NOTE: You might see some 'hydration' errors but you can ignore them. See Hydration Errors
Through building this project, I came across a lot of roadblocks which tended to create some good knowledge and experience for me. Some of which include:
I wrote an application which I have always used to install Tailwind and Nextjs. It turns out it does not support the newer version of the Nextjs CLI. I eventually installed it with the new Nextjs CLI and it now has the option to install with Tailwind
I learnt to understand more in-depth how Nextjs works. It builds on the server and then on the client. While doing that, it compares both versions for strict equality.
I built a lot of random generators (because I felt the site would look less static if your content is generated at random) and this made me encounter hydration errors when I run the development server.
I solved this by adding suppressHydrationWarning on the elements that render these random values. It didn't totally solve it but for the most part.
The ultimate solution is to perform these random and shuffling functions on an api route or on its own separate server (like an express server). This ensures that the result sent to Nextjs is consistent both on the server hydration and the client one or just make use of static data (without any random generation)
On the Explore Page. I needed to be able to sort/filter the NFTs shown on the page. It turned out it was a bit more complicated than I thought. After doing some research, I came up with the following ways to make it work
- Create a debounce hook. In the previous mode, it tends to sort the items on every keystroke. This is flawed as the user could still be typing. The debounce hooks help to prevent searching until a certain time has passed since the last character input (i.e. the user has stopped typing). I have used 500ms as the wait time
- Aggregate Query: I also created three more filter options. Filter by item category, by item price, and by expiry date(time). In order to make these work, I created an
aggregateQueryfunction to run whenever either the search text changes or these filter items change. It passes the items through all the query functions and only returns the items that are true after all these processes
I initially started to build out a form validation. It got complicated fast as I tried to validate on many different occasions (touched, out-of-focus, on submit, etc).
I learned about the formik library which has these many form functions in-built. I learnt how to integrate this package into my workflow. I also needed to validate the user schema somehow.
I had two options zod(which I have used a few times) and yup. I ended up using Yup to gain a new learning experience. You can find the functions in the Schemas file
And to improve the aesthetics of the website, I wanted to add some minimal animations.
I looked up two animation libraries: GSAP and Framer-motion. I tried to use GSAP but it didn't integrate well with my project(perhaps I didn't learn enough to understand how to). I ended up reaching for framer motion which I've used in the past. I ran into an error of triggering exit animations which I was able to solve in this new project using AnimatePresence element
I planned to add an artists page where you could see artists who have their work on the site as well as an individual artist page which would show only their own works and a few more details. I would work on that as well as create a mini-express server to remove the hydration errors. At the moment, I have little experience building the backend with solidity or putting the data on ipfs but these are two ways I think of as ways to go about adding the actual backend to the site.
Special thanks to the AngelHack team for making this a huge learning experience for me. I look forward to the themes of future challenges
Also, shoutout to this figma design for inspiration on how to structure some parts of the site