🛠️ Project Overview

🚀 Project Setup

Tech Chosen:

• Vite (for project scaffolding)
• React + TypeScript
• Tailwind CSS v4
• Radix UI
• Zustand (for state management)
• Wagmi Core + Viem (EVM integration)

Why Vite?

I picked Vite because it’s super fast and lightweight. Hot reloads are instant, and it doesn’t get in the way when working with TypeScript + React. It made the whole setup process smooth and quick.

🧩 Project Code Structure and Rationale

The directory structure of the project is organized to keep components modular and maintainable while ensuring scalability. Here’s an overview of the directory layout and the reasoning behind each part:

src
├── components
│   ├── base
│   └── app
├── services
├── hooks
├── store
├── lib
└── workers

1. src/components/base

Contains the core, reusable UI components that are the building blocks of the application. These components are taken from my current company’s codebase and have been refactored with Tailwind CSS styles.

• Reusability: Components are designed to be generic and reusable.
• Consistency: Ensures consistent design by applying Tailwind CSS.