Quick Web3 Frontend

Frontend web3 projects made easy

🌐 Official Webpage

• Project Console: https://console.firebase.google.com/project/quickstack-5318d/overview
• Hosting URL: https://quickstack-5318d.web.app

❓ How to get started?

yarn
yarn dev

• ➜ Local: http://localhost:5173/ yarn dev
• ➜ Network: http://192.168.0.64:5173/ yarn dev -- --host
• ➜ press h + enter to show help

🛠️ Tech Stack

• React + TypeScript + Vite

  • with Hot Module Reload and ESLint rules.

• Tailwind CSS

  • Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

• shadcn/ui

  • Beautifully designed components built on top of Radix UI and Tailwind CSS that we can copy and paste into our app. Accessible. Customizable. Open Source.

• Tanstack Router

  • Modern and scalable routing for React applications. A fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs.

• Rainbowkit

  • The best way to connect a wallet

• Viem

  • Build reliable apps & libraries with lightweight, composable, and type-safe modules that interface with Ethereum.

• Wagmi

  • Reactivity for Ethereum apps.

🔥 Configuring Firebase

• Go to https://firebase.google.com/ and start a Firebase project.
• Navigate to the root folder and type yarn add -g firebase-tools into the terminal.
• Type firebase login and follow the instructions to log in using the google account that created the Firebase project.
• Type firebase init into the terminal. Select Use an existing project and choose the Firebase project from the list.
• Use dist as your public directory

🔥 Deploying to Firebase

• yarn build
• firebase deploy