ProductsAuroraMC
Project Structure
Understand the AuroraMC codebase layout and component architecture.
Project Structure
AuroraMC follows a standard React + Vite project layout. Here's a breakdown of the directory structure and what each part does.
Directory Tree
AuroraMC/
├── config/ # App-wide configuration
│ ├── site.config.ts # Server name, branding, features, SEO
│ └── products.config.ts # Tebex Package ID mapping
│
├── public/ # Static assets (served as-is)
│ ├── server-logo.png # Main logo
│ ├── server-icon.png # Favicon / small icon
│ ├── server-background.png # Hero section background
│ ├── robots.txt # Search engine crawl rules
│ └── *.png # Product images
│
├── src/
│ ├── main.tsx # App entry point
│ ├── App.tsx # Root component with routing
│ ├── index.css # Global CSS and Tailwind base styles
│ ├── App.css # App-level styles
│ │
│ ├── components/ # All UI components
│ │ ├── Header.tsx # Top navigation bar with logo and links
│ │ ├── Hero.tsx # Hero banner with server status and CTA
│ │ ├── StoreContent.tsx # Main store layout (sidebar + products)
│ │ ├── StoreHeader.tsx # Store section header with search/filters
│ │ ├── Sidebar.tsx # Category navigation sidebar
│ │ ├── Categories.tsx # Category overview section
│ │ ├── CategoryCard.tsx # Individual category card
│ │ ├── CategoryTabs.tsx # Tab-style category switcher
│ │ ├── ProductsGrid.tsx # Product grid layout
│ │ ├── ProductCard.tsx # Standard product card
│ │ ├── ProductCardCompact.tsx # Compact product card variant
│ │ ├── ProductModal.tsx # Product detail popup
│ │ ├── Cart.tsx # Shopping cart drawer
│ │ ├── UsernameModal.tsx # Minecraft username input for checkout
│ │ ├── Features.tsx # Feature highlights section
│ │ ├── TopDonators.tsx # Top donators leaderboard
│ │ ├── RecentPurchases.tsx # Recent purchase feed
│ │ ├── Footer.tsx # Site footer with links
│ │ ├── NavLink.tsx # Reusable navigation link
│ │ ├── ErrorBoundary.tsx # Catches rendering errors gracefully
│ │ └── ui/ # Radix UI primitives (button, dialog, toast, etc.)
│ │
│ ├── pages/ # Route-level page components
│ │ ├── Index.tsx # Homepage (Hero + Store)
│ │ ├── Terms.tsx # Terms of Service
│ │ ├── Privacy.tsx # Privacy Policy
│ │ ├── Refund.tsx # Refund Policy
│ │ ├── Rules.tsx # Server Rules
│ │ ├── Success.tsx # Post-purchase success page
│ │ ├── Cancel.tsx # Checkout cancellation page
│ │ └── NotFound.tsx # 404 page
│ │
│ ├── lib/ # Business logic and utilities
│ │ ├── tebex.ts # Tebex Headless API client
│ │ ├── store-data.ts # Product, category, and social proof data
│ │ ├── discount-codes.ts # Coupon validation and usage tracking
│ │ ├── utils.ts # Helper functions (cn, formatPrice, etc.)
│ │ └── *.test.ts # Unit tests
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useServerStatus.ts # Fetches live Minecraft server status
│ │ ├── use-mobile.tsx # Responsive breakpoint detection
│ │ └── use-toast.ts # Toast notification hook
│ │
│ └── context/ # React Context providers
│ └── CartContext.tsx # Shopping cart state management
│
├── .env # Environment variables (Tebex token)
├── index.html # HTML entry point
├── package.json # Dependencies and scripts
├── tailwind.config.ts # Tailwind CSS theme configuration
├── vite.config.ts # Vite build configuration
├── tsconfig.json # TypeScript configuration
└── vitest.config.ts # Test runner configurationKey Architectural Concepts
Routing
AuroraMC uses React Router v7 with client-side routing. All routes are defined in src/App.tsx:
| Route | Page | Loading |
|---|---|---|
/ | Homepage (store) | Eager |
/terms | Terms of Service | Lazy |
/privacy | Privacy Policy | Lazy |
/refund | Refund Policy | Lazy |
/rules | Server Rules | Lazy |
/success | Purchase success | Lazy |
/cancel | Checkout cancelled | Lazy |
* | 404 Not Found | Eager |
Legal pages and checkout result pages use React.lazy() for code-splitting — they only load when the user navigates to them.
State Management
Cart state is managed through React Context (CartContext.tsx). The CartProvider wraps the entire app and provides:
items— Current cart items with quantitiesaddItem / removeItem / updateQuantity— Cart modification functionsclearCart— Empty the entire carttotalItems / totalPrice— Computed totalsisCartOpen / setIsCartOpen— Cart drawer visibility
Any component can access cart state using the useCart() hook.
Component Hierarchy
The homepage (Index.tsx) assembles the storefront from smaller, focused components:
Index
├── Header (nav bar, logo, cart button)
├── Hero (banner, server status, CTA)
├── StoreContent (main store area)
│ ├── StoreHeader (search, filters)
│ ├── Sidebar (category navigation)
│ ├── ProductsGrid (product listings)
│ │ ├── ProductCard / ProductCardCompact
│ │ └── ProductModal (detail popup)
│ ├── TopDonators
│ └── RecentPurchases
├── Features (feature highlights)
├── Cart (slide-out drawer)
│ └── UsernameModal (checkout username input)
└── Footer (links, copyright)UI Primitives
The src/components/ui/ directory contains pre-configured Radix UI components following the shadcn/ui pattern. These include buttons, dialogs, toasts, tooltips, tabs, accordions, and more. They are used as building blocks throughout the app.