System Architecture
Don Palito Jr is built as a modern, distributed e-commerce platform with a clear separation between backend services and frontend applications. This architecture enables independent scaling, deployment, and development of each component.High-Level Overview
Core Components
Backend API (Express + MongoDB)
The backend is a RESTful API built with Express.js that serves as the central hub for all data operations.Technology Stack
- Express.js v5.2.1: Web framework handling HTTP requests
- MongoDB + Mongoose v8.19.3: Database and object modeling
- Node.js v20+: JavaScript runtime (ES Modules)
Key Features
- RESTful API endpoints for all resources
- Clerk-based authentication middleware
- File upload handling with Multer
- Event-driven workflows with Inngest
- CORS configured for multi-origin access
- Webhook receivers for Clerk and Stripe
Server Configuration
The backend server is configured to handle multiple client origins:backend/src/server.js
API Routes
The backend exposes the following route groups:backend/src/server.js
Admin Dashboard (React + Vite)
A comprehensive admin panel for store management built with React 19 and modern tooling.Technology Stack
- React v19.2.0: UI framework
- Vite v7.2.4: Build tool and dev server
- Tailwind CSS v4.1.18: Utility-first styling
- DaisyUI v5.5.14: Component library
- TanStack Query v5.90.20: Server state management
- Zustand v5.0.11: Client state management
- React Router v7.13.0: Navigation
- Clerk React: Authentication
- Axios v1.13.2: HTTP client
- Sentry v10.36.0: Error tracking
Main Configuration
admin/src/main.jsx
Features
- Product catalog management with image uploads
- Order processing and status updates
- Customer management
- Coupon creation and management
- Sales dashboard and analytics
- Real-time data with TanStack Query
- Optimistic updates for better UX
Web Application (React + Vite)
The customer-facing storefront for browsing and purchasing products.Technology Stack
- React v18.2.0: UI framework
- React Router v6.30.3: Client-side routing
- Tailwind CSS v3.4.19: Styling
- DaisyUI v4.12.24: Components
- Stripe React v5.6.0: Payment UI
- TanStack Query v5.90.21: Data fetching
- React Hook Form v7.71.1: Form handling
- Yup v1.7.1: Form validation
- Axios v1.13.5: HTTP client
Application Structure
web/src/App.jsx
Features
- Product browsing with search and filters
- Shopping cart management
- User authentication and profiles
- Order checkout with Stripe
- Order history and tracking
- Wishlist functionality
- Product reviews and ratings
- Responsive design
Mobile Application (Expo + React Native)
A native mobile shopping experience for iOS and Android.Technology Stack
- Expo v54.0.33: React Native framework
- React Native v0.81.5: Mobile framework
- Expo Router v6.0.23: File-based routing
- NativeWind v4.2.1: Tailwind for React Native
- Clerk Expo v2.19.20: Mobile authentication
- Stripe React Native v0.50.3: Mobile payments
- TanStack Query v5.90.20: Data fetching
- Zustand v5.0.11: State management
- Sentry React Native v7.2.0: Error tracking
Features
- Native mobile shopping experience
- Biometric authentication support
- Push notifications (configurable)
- Offline-first cart management
- Mobile-optimized checkout flow
- Camera integration for barcode scanning (extensible)
- Deep linking support
Data Architecture
Database Schema
Don Palito Jr uses MongoDB with Mongoose for data modeling. The main collections are:User Model
backend/src/models/user.model.js
Product Model
backend/src/models/product.model.js
Order Model
backend/src/models/order.model.js
Additional Models
- Cart: User shopping carts with line items
- Review: Product reviews with ratings
- Coupon: Discount codes with rules
Data Relationships
Authentication Flow
Don Palito Jr uses Clerk for authentication across all platforms.How It Works
app.post("/api/webhooks/clerk", async (req, res) => {
const event = req.body;
// Send to Inngest for processing
await inngest.send({
name: `clerk.${event.type}`,
data: event.data,
});
res.status(200).json({ received: true });
});
Protected Routes
Authentication is enforced at multiple levels: Backend: Middleware checks for valid Clerk sessionbackend/src/middleware/auth.middleware.js
web/src/components/auth/ProtectedRoute.jsx
Payment Processing Flow
Payments are handled through Stripe integration.Checkout Process
User enters payment details using Stripe Elements (web) or Stripe SDK (mobile). Stripe processes the payment securely.
// Verify signature
const signature = req.headers['stripe-signature'];
const event = stripe.webhooks.constructEvent(
req.body,
signature,
process.env.STRIPE_WEBHOOK_SECRET
);
// Handle payment success
if (event.type === 'payment_intent.succeeded') {
await Order.findByIdAndUpdate(orderId, {
status: 'paid',
paidAt: new Date(),
'paymentResult.status': 'succeeded'
});
}
Supported Payment Methods
- Credit/debit cards
- Digital wallets (Apple Pay, Google Pay)
- Bank transfers (via Stripe)
- Local payment methods (configurable per region)
Event-Driven Architecture
Don Palito Jr uses Inngest for event-driven workflows.Key Events
- clerk.user.created: New user registration
- clerk.user.updated: User profile updates
- clerk.user.deleted: User account deletion
- order.created: New order placed
- order.paid: Payment confirmed
- order.shipped: Order dispatched
Example: User Creation Flow
backend/src/config/inngest.js
Image Management
Cloudinary handles all image storage and optimization.Upload Flow
- Admin uploads image via multipart form
- Multer middleware processes the file
- Backend uploads to Cloudinary
- Cloudinary returns optimized image URLs
- URLs stored in MongoDB product record
Benefits
- Automatic image optimization
- CDN delivery for fast loading
- Responsive images with transformations
- Format conversion (WebP, AVIF)
- Lazy loading support
Deployment Architecture
Production Configuration
In production mode, the backend serves the admin dashboard as static files:backend/src/server.js
Recommended Deployment
- Backend + Admin: Deploy together on platforms like Railway, Render, or Heroku
- Web App: Deploy separately on Vercel, Netlify, or Cloudflare Pages
- Mobile App: Publish to App Store and Google Play using Expo EAS
- Database: MongoDB Atlas (managed cluster)
Technology Choices & Rationale
Why Express.js?
- Mature, battle-tested framework
- Excellent middleware ecosystem
- Easy integration with Clerk and Stripe
- Great performance for REST APIs
Why MongoDB?
- Flexible schema for evolving product requirements
- Excellent Node.js integration with Mongoose
- Horizontal scaling capabilities
- Rich query language
Why React?
- Component-based architecture for reusability
- Large ecosystem and community
- Excellent developer experience
- Server-side rendering support (future enhancement)
Why Expo?
- Simplified React Native development
- Over-the-air updates
- Managed build service (EAS)
- Rich set of native modules
Why Clerk?
- Drop-in authentication solution
- Multi-platform SDK support
- User management UI
- Social login integration
- Webhook-based synchronization
Why Stripe?
- Industry-standard payment processing
- Excellent developer experience
- Strong security and compliance
- Rich feature set (subscriptions, invoices, etc.)
- Global payment method support
Why Inngest?
- Reliable event processing
- Built-in retries and error handling
- Easy local development
- Visibility into workflow execution
Performance Considerations
Backend Optimizations
- MongoDB indexes on frequently queried fields
- Connection pooling for database
- CORS configured to allow specific origins only
- Gzip compression for responses
- Rate limiting on sensitive endpoints (configurable)
Frontend Optimizations
- Code splitting with React lazy loading
- TanStack Query caching (5-minute stale time)
- Image lazy loading
- Optimistic updates for better UX
- Service worker for PWA capabilities (web)
Mobile Optimizations
- Expo optimized production builds
- Image caching with expo-image
- React Native performance monitoring
- Minimized bundle size
Security Best Practices
- Environment variables for all secrets
- HTTPS enforced in production
- CORS properly configured
- Webhook signature verification
- SQL injection prevention via Mongoose
- XSS protection with React’s default escaping
- CSRF tokens for state-changing operations
- Regular dependency updates
- Sentry for error monitoring
Next Steps
Now that you understand the architecture:- Explore individual component documentation
- Learn about the API endpoints in detail
- Understand the database models and relationships
- Customize the system to fit your needs
- Deploy to production