Skip to content

replit.md

Latest commit

 

History

History
195 lines (152 loc) · 6.06 KB

replit.md

File metadata and controls

195 lines (152 loc) · 6.06 KB

Fire Token Presale dApp

Overview

Fire Token is a Solana-based token presale platform (dApp) where users can connect their Solana wallets, purchase FIRE tokens during the presale at $0.06 (before the $0.10 listing price), participate in a referral program to earn points, and track their purchases through a dashboard. The application features a clean, professional design inspired by modern crypto platforms with a fire orange (#FF6A00) primary color scheme.

Key Features:

  • Solana wallet integration (Phantom, Solflare)
  • Token presale functionality with SOL payments
  • Referral system with points tracking
  • User dashboard with transaction history
  • Admin panel for presale management
  • Comprehensive information pages (tokenomics, roadmap, FAQ)

Token Economics:

  • Total Supply: 15,000,000 FIRE
  • Presale Supply: 10,000,000 FIRE (66.67%)
  • Presale Price: $0.06
  • Listing Price: $0.10

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

Technology Stack:

  • React 18 with TypeScript for type safety
  • Vite as the build tool and development server
  • Wouter for lightweight client-side routing
  • TanStack Query (React Query) for server state management
  • shadcn/ui component library built on Radix UI primitives
  • Tailwind CSS for styling with custom design tokens

Design System:

  • Custom theme using CSS variables for light mode
  • Primary color: Fire Orange (#FF6A00 / hsl(24, 100%, 50%))
  • Typography: DM Sans and Inter fonts via Google Fonts
  • Component styling follows "New York" shadcn variant
  • Responsive design with mobile-first approach

State Management:

  • WalletContext for Solana wallet connection state
  • React Query for API data fetching and caching
  • Local component state for UI interactions

Key Frontend Patterns:

  • Context providers wrap the application (WalletProvider, QueryClientProvider, TooltipProvider)
  • Custom hooks for shared logic (useWallet, useToast, useIsMobile)
  • Path aliases (@/, @shared/, @assets/) for clean imports
  • Consistent card-based layouts across pages

Backend Architecture

Framework & Runtime:

  • Express.js server with TypeScript
  • Node.js with ESM modules
  • HTTP server for production deployment
  • Vite middleware integration for development

Database Layer:

  • PostgreSQL database (via Neon serverless)
  • Drizzle ORM for type-safe database queries
  • WebSocket support for Neon serverless connections
  • Schema-driven development with shared types

API Design:

  • RESTful API endpoints under /api prefix
  • Zod validation for all incoming requests
  • Session-based admin authentication
  • JSON responses with error handling

Data Models:

  • users: Wallet addresses with optional referrer tracking
  • purchases: Transaction records with SOL/FIRE amounts
  • points: Referral points per user
  • referrals: Referrer-referee relationships
  • adminSettings: Configurable presale parameters

Storage Layer:

  • DatabaseStorage class implementing IStorage interface
  • Abstraction layer between routes and database
  • Methods for CRUD operations on all entities
  • Computed views for dashboard and statistics

Authentication & Authorization

User Authentication:

  • Wallet-based authentication (no passwords)
  • Public key serves as user identifier
  • Automatic user registration on first wallet connection
  • Referral codes tracked via URL parameters

Admin Authentication:

  • Password-based authentication (environment variable)
  • Session token storage in memory (Map-based)
  • Session expiration handling
  • Protected admin endpoints with middleware

Build & Deployment

Build Process:

  • Separate client (Vite) and server (esbuild) builds
  • Client outputs to dist/public
  • Server bundles to single dist/index.cjs file
  • Selective dependency bundling for optimized cold starts

Development Mode:

  • Vite dev server with HMR
  • Replit-specific plugins (cartographer, dev-banner, error overlay)
  • Hot reload for both client and server code
  • TypeScript type checking without emit

Production Mode:

  • Static file serving from dist/public
  • SPA fallback to index.html for client routing
  • Environment-based configuration
  • Database migrations via drizzle-kit

External Dependencies

Blockchain Integration

Solana Web3.js:

  • Wallet connection and transaction signing
  • Integration with Phantom and Solflare wallets
  • Transaction verification on Solana blockchain
  • Public key management and formatting

Database

Neon Serverless PostgreSQL:

  • Serverless PostgreSQL database
  • WebSocket-based connections
  • Environment variable: DATABASE_URL
  • Managed via Drizzle migrations

Drizzle ORM:

  • Type-safe database queries
  • Schema definition in TypeScript
  • Migration management
  • Zod schema generation for validation

UI Component Libraries

Radix UI:

  • 25+ primitive components (Dialog, Dropdown, Accordion, etc.)
  • Accessible component foundation
  • Unstyled primitives for custom styling
  • Keyboard navigation and ARIA support

shadcn/ui:

  • Pre-styled component implementations
  • Built on top of Radix UI
  • Customizable via Tailwind CSS
  • Copy-paste component architecture

Utility Libraries

Form Handling:

  • react-hook-form for form state management
  • @hookform/resolvers for Zod validation integration
  • Type-safe form validation

Data Validation:

  • Zod for runtime type checking
  • Schema validation for API requests
  • Database schema validation via drizzle-zod

Date & Time:

  • date-fns for date formatting and manipulation

Styling:

  • Tailwind CSS for utility-first styling
  • class-variance-authority (cva) for variant-based component APIs
  • clsx and tailwind-merge for conditional classes

Charting:

  • Recharts for tokenomics visualization
  • Pie charts for allocation display
  • Responsive chart containers

Development Tools

Replit Plugins:

  • @replit/vite-plugin-cartographer for code navigation
  • @replit/vite-plugin-dev-banner for development indicators
  • @replit/vite-plugin-runtime-error-modal for error display

Type Checking:

  • TypeScript strict mode enabled
  • Shared types between client and server
  • Path-based module resolution