NFT Marketplace - React + TypeScript + Vite

A practice project to cut and build an NFT Marketplace from Figma using React, TypeScript, and Tailwind CSS.

Figma Template: 👉 NFT Marketplace Page Figma

Demo: 👉 NFT Marketplace Page Demo

---

Features

• Modular structure: Each section (header, hero, highlight, etc.) is built as a separate component and organized into the modules folder.
• Reusable components: Created common components (button, input, heroCard, etc.) for reusability and consistency.
• Responsive design: Used react-responsive to implement fully responsive layouts for mobile, tablet, and desktop following the Figma template.
• Form validation: Used react-hook-form for fast, scalable, and robust form validation.
• Countdown clock: Used react-flip-clock-countdown for the animated countdown timer in the Highlight section.
• ReactBits UI: Used reactbits-profile-card for high-quality, customizable React components
• Beautiful notifications: Integrated SweetAlert2 for user-friendly, modern alert popups (e.g., register success).
• SVG as component: Learned to convert SVG files to React components for easier usage.
• Data fetching: Used Axios for easier, more maintainable API requests.
• Mock API with Mockoon: Simulated backend using Mockoon for rapid UI dev/testing with fake data.
• Switch to static JSON for deployment: When deploying to Vercel, all API data is served as static JSON files under /public/data/, allowing your app to fetch data globally without a running API server.
• State management: Used Zustand for simple, fast state management (like open/close mobile modal).
• Project structure: Learned and practiced organizing files and folders in a scalable React project.
• Dynamic data: Fetched and displayed data for NFT items, artists, collections, etc. with fake/mock API.
• Deployment: Hosted on Vercel for easy and quick deployment.

Tech Stack

• ⚛️ React – For fast, component-based UI development
• 🟦 TypeScript – For type safety and better development experience
• 💨 Tailwind CSS – Utility-first CSS framework for building responsive layouts
• 🧠 Zustand – Minimal, fast state-management solution
• 🏃‍♂️ React Flip Clock Countdown – For smooth countdown clock animation
• 🆔 UUID – For unique keys in lists
• 📏 React Responsive – For responsive rendering based on breakpoints
• 📱 Responsive Design – Optimized for both mobile, tablet and desktop screens
• 🧩 Component-based Architecture – All UI is split into reusable, isolated components
• ✨ ReactBits UI – Modern, customizable, production-ready React component library
• 🔔 SweetAlert2 – Beautiful alert popups
• 📋 React Hook Form – Simple, robust form handling
• 🔗 Axios – Promise-based HTTP client
• 🧪 Mockoon – Local API mocking
• ▲ Deployed with Vercel – Quick and seamless deployment platform for modern frontend apps

Path Aliases

To keep import paths clean and maintainable, this project uses Vite alias configuration.

Alias configuration in vite.config.ts:

/vite.config.ts
alias: {
  "@styles": path.resolve(__dirname, "./src/styles"),
  "@modules": path.resolve(__dirname, "./src/modules"),
  "@assets": path.resolve(__dirname, "./src/assets"),
  "@components": path.resolve(__dirname, "./src/components"),
  "@pages": path.resolve(__dirname, "./src/pages"),
  "@myTypes": path.resolve(__dirname, "./src/types"),
  "@stores": path.resolve(__dirname, "./src/stores"),
  "@hooks": path.resolve(__dirname, "./src/hooks"),
}
// Instead of:
import Button from "../../../components/Buttons" // ❌

// Use:
import Button from "@components/Buttons"         // ✅

Extra: How to use Mockoon with this project?

1. Download & install Mockoon.

2. Import the Mockoon environment file provided in this repo (or create endpoints manually).

3. Start the Mockoon server (default http://localhost:3001).

4. Change your axios/fetch endpoints to point to Mockoon for local dev.

5. When ready to deploy: Export your Mockoon API data as JSON and put it under /public/data/.

6. Update your fetch paths to use /data/your-endpoint.json when deploying.

Roadmap

• Homepage (Landing page)
• Marketplace Page
• Create Account Page
• Ranking Page
• Connect Wallet page
• NFT Detail Page
• Artist Page
• Polish UI, animations & loading state (optional)
• Add real data & connect to backend (optional)

License

This project is for personal learning and practice only. Do not use for commercial purposes.