YeboHub

Appearance

Technology Stack ​

YeboCars is built with modern, scalable technologies optimized for performance and developer experience.

Frontend ​

Core Framework ​

  • React 18.2+ - UI library with latest features (Concurrent Mode, Suspense)
  • Vite 5.0+ - Lightning-fast build tool and dev server
  • TypeScript 5.0+ - Type-safe JavaScript for better DX

Styling ​

  • TailwindCSS 3.4+ - Utility-first CSS framework
  • PostCSS - CSS preprocessing
  • Autoprefixer - Automatic vendor prefixing

State Management ​

  • Zustand - Lightweight state management
  • React Query (TanStack Query) - Server state management
  • React Hook Form - Form state and validation

Routing & Navigation ​

  • React Router v6 - Client-side routing
  • React Router DOM - DOM bindings

Real-Time ​

  • Socket.io Client - WebSocket client for real-time features

UI Components ​

  • Headless UI - Unstyled accessible components
  • Heroicons - SVG icon library
  • React Icons - Icon library
  • Framer Motion - Animation library

Image Handling ​

  • React Image Gallery - Image carousel
  • React Lazy Load Image - Lazy loading images

Utilities ​

  • Axios - HTTP client
  • Date-fns - Date manipulation
  • Lodash - Utility functions
  • React Hot Toast - Toast notifications

Development Tools ​

  • ESLint - JavaScript linting
  • Prettier - Code formatting
  • Husky - Git hooks
  • Lint-staged - Run linters on staged files

Backend ​

Runtime & Framework ​

  • Node.js 20 LTS - JavaScript runtime
  • Express.js 4.18+ - Web framework
  • TypeScript 5.0+ - Type-safe development

Authentication ​

  • JSON Web Tokens (JWT) - Token-based auth
  • Bcrypt - Password hashing
  • Passport.js - Authentication middleware

Validation ​

  • Joi - Schema validation
  • Express Validator - Request validation middleware

Real-Time ​

  • Socket.io 4.6+ - WebSocket server
  • Redis Adapter - Socket.io scaling

File Upload ​

  • Multer - Multipart form data handling

API Documentation ​

  • Swagger/OpenAPI - API documentation
  • Swagger UI Express - Interactive API docs

Security ​

  • Helmet - Security headers
  • CORS - Cross-origin resource sharing
  • Rate Limit - Rate limiting middleware
  • Express Mongo Sanitize - NoSQL injection prevention
  • XSS Clean - XSS attack prevention

Logging & Monitoring ​

  • Winston - Logging library
  • Morgan - HTTP request logger

Development Tools ​

  • Nodemon - Auto-restart on file changes
  • TS-Node - TypeScript execution
  • ESLint - Linting
  • Prettier - Code formatting

Database ​

Primary Database ​

  • MongoDB 7.0+ - Document database
  • Mongoose 8.0+ - MongoDB ODM
  • MongoDB Atlas - Managed hosting

Caching & Sessions ​

  • Redis 7.2+ - In-memory data store
  • Redis Cloud - Managed Redis hosting

Database Features ​

  • Atlas Search - Full-text search
  • Vector Search - AI-powered semantic search
  • Change Streams - Real-time data changes
  • Aggregation Pipeline - Complex queries

AI & Machine Learning ​

Generative AI ​

  • Google Gemini API - Large language model
  • Gemini 1.5 Pro - Advanced reasoning model

Use Cases ​

  • Listing description generation
  • Natural language search
  • Car recommendations
  • Pricing insights
  • Image analysis (coming soon)

Infrastructure ​

Hosting & CDN ​

  • Cloudflare Pages - Frontend hosting
  • Cloudflare CDN - Content delivery network
  • Cloudflare Workers - Edge computing (future)

Object Storage ​

  • Cloudflare R2 - S3-compatible object storage
  • Zero egress fees - Cost-effective media delivery

DNS & Security ​

  • Cloudflare DNS - Fast DNS resolution
  • Cloudflare WAF - Web application firewall
  • DDoS Protection - Built-in protection
  • SSL/TLS - Automatic HTTPS

Server Hosting ​

  • Railway - Container hosting (backend)
  • Render - Alternative hosting platform
  • DigitalOcean - VPS option

External Services ​

Communication ​

  • Africa's Talking - SMS/OTP service (primary)
  • Twilio - SMS backup provider
  • Resend - Transactional email

AI Services ​

  • Google Gemini API - Generative AI
  • VIN Decoder API - Vehicle information

Analytics ​

  • Cloudflare Web Analytics - Privacy-first analytics
  • MongoDB Atlas Charts - Data visualization
  • Custom Analytics - In-house tracking

Payments (Coming Soon) ​

  • Stripe - International payments
  • Paystack - African payment gateway
  • Mobile Money APIs - Local payment methods

Development Environment ​

Version Control ​

  • Git - Source control
  • GitHub - Code hosting
  • GitHub Actions - CI/CD

Package Management ​

  • npm - Node package manager
  • pnpm - Fast, disk-efficient package manager (alternative)

Code Quality ​

  • TypeScript - Type checking
  • ESLint - Code linting
  • Prettier - Code formatting
  • Husky - Git hooks
  • Commitlint - Commit message linting

Testing (In Progress) ​

  • Jest - Testing framework
  • React Testing Library - React component testing
  • Supertest - API testing
  • Playwright - E2E testing

DevOps ​

CI/CD ​

  • GitHub Actions - Automated workflows
  • Docker - Containerization
  • Docker Compose - Multi-container development

Monitoring ​

  • Cloudflare Analytics - Traffic monitoring
  • MongoDB Atlas Monitoring - Database metrics
  • Uptime Robot - Uptime monitoring
  • Sentry (planned) - Error tracking

Deployment ​

  • Git-based deployment - Push to deploy
  • Automatic builds - On commit to main
  • Preview deployments - For pull requests
  • Rollback capability - One-click rollback

Architecture Patterns ​

Frontend Patterns ​

  • Component-based architecture - Reusable UI components
  • Custom hooks - Reusable logic
  • Context API - Global state
  • Compound components - Complex UI patterns
  • Render props - Component composition

Backend Patterns ​

  • MVC (Model-View-Controller) - Separation of concerns
  • Middleware pattern - Request processing pipeline
  • Repository pattern - Data access abstraction
  • Service layer - Business logic encapsulation
  • Dependency injection - Loose coupling

Database Patterns ​

  • Schema design - Embedded vs referenced documents
  • Indexing strategy - Performance optimization
  • Aggregation pipelines - Complex queries
  • Data validation - Mongoose schemas

Code Organization ​

Frontend Structure ​

frontend/
├── src/
│   ├── components/      # Reusable UI components
│   ├── pages/          # Page components
│   ├── layouts/        # Layout components
│   ├── hooks/          # Custom React hooks
│   ├── context/        # React context providers
│   ├── services/       # API services
│   ├── utils/          # Utility functions
│   ├── types/          # TypeScript types
│   ├── styles/         # Global styles
│   ├── assets/         # Static assets
│   └── config/         # Configuration files
├── public/             # Public static files
└── tests/              # Test files

Backend Structure ​

backend/
├── src/
│   ├── controllers/    # Request handlers
│   ├── services/       # Business logic
│   ├── models/         # Database models
│   ├── routes/         # API routes
│   ├── middleware/     # Custom middleware
│   ├── utils/          # Utility functions
│   ├── config/         # Configuration
│   ├── interfaces/     # TypeScript interfaces
│   ├── validators/     # Request validators
│   └── types/          # TypeScript types
├── tests/              # Test files
└── scripts/            # Utility scripts

API Design ​

RESTful Principles ​

  • Resource-based URLs
  • HTTP methods (GET, POST, PUT, DELETE)
  • Status codes (200, 201, 400, 401, 404, 500)
  • JSON request/response

API Versioning ​

  • URL versioning: /api/v1/
  • Header versioning: Accept: application/vnd.yebocars.v1+json

Response Format ​

json
{
  "success": true,
  "data": {...},
  "message": "Operation successful",
  "error": null
}

Error Format ​

json
{
  "success": false,
  "error": "error_code",
  "message": "Human-readable error message",
  "details": {...}
}

Performance Optimization ​

Frontend ​

  • Code splitting
  • Lazy loading
  • Image optimization
  • Service worker caching
  • Bundle size optimization
  • Tree shaking

Backend ​

  • Response compression (gzip)
  • Database query optimization
  • Connection pooling
  • Caching strategies
  • Load balancing

Database ​

  • Compound indexes
  • Query optimization
  • Aggregation optimization
  • Read replicas
  • Sharding (future)

Security Measures ​

Application Security ​

  • JWT authentication
  • Bcrypt password hashing (12 rounds)
  • Rate limiting
  • Input validation
  • XSS prevention
  • CSRF protection
  • SQL/NoSQL injection prevention

Infrastructure Security ​

  • HTTPS everywhere
  • Cloudflare WAF
  • DDoS protection
  • Security headers (Helmet)
  • Environment variable encryption
  • Secret management

Data Security ​

  • Encryption at rest
  • Encryption in transit
  • Regular backups
  • Access control (RBAC)
  • Audit logging

Browser Support ​

Supported Browsers ​

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
  • Opera 76+

Mobile Browsers ​

  • Chrome Mobile
  • Safari iOS
  • Samsung Internet
  • Firefox Mobile

Progressive Enhancement ​

  • Core functionality works without JavaScript
  • Enhanced experience with modern features
  • Graceful degradation

Mobile Support ​

Progressive Web App ​

  • Service worker
  • Web app manifest
  • Offline functionality
  • Push notifications
  • Install prompt

Responsive Design ​

  • Mobile-first approach
  • Touch-friendly controls
  • Adaptive layouts
  • Performance optimization

Future Technology Considerations ​

Planned Upgrades ​

  • React Server Components - Server-side rendering
  • GraphQL - Flexible API queries
  • Microservices - Service separation
  • Kubernetes - Container orchestration
  • ElasticSearch - Advanced search

Experimental Features ​

  • WebAssembly - Performance-critical code
  • Edge Computing - Cloudflare Workers
  • AI/ML Models - Custom models for image analysis
  • Blockchain - Vehicle verification

Development Workflow ​

Local Development ​

  1. Clone repository
  2. Install dependencies: npm install
  3. Copy .env.example to .env
  4. Start development server: npm run dev

Environment Variables ​

bash
# Backend
NODE_ENV=development
PORT=6792
MONGODB_URI=mongodb://localhost:27017/yebocars
REDIS_URL=redis://localhost:6379
JWT_SECRET=your-secret-key
GEMINI_API_KEY=your-gemini-key

# Frontend
VITE_API_URL=http://localhost:6792
VITE_SOCKET_URL=ws://localhost:6792

Scripts ​

json
{
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "lint": "eslint . --ext ts,tsx",
  "format": "prettier --write \"src/**/*.{ts,tsx}\""
}

Documentation ​

Code Documentation ​

  • JSDoc comments for functions
  • TypeScript interfaces for types
  • README files for each module
  • Architecture decision records (ADRs)

API Documentation ​

  • Swagger/OpenAPI specification
  • Interactive API explorer
  • Code examples
  • Postman collection

Developer Guides ​

  • Setup instructions
  • Contributing guidelines
  • Code style guide
  • Testing guide

Dependencies Summary ​

Frontend Core ​

json
{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.20.0",
  "vite": "^5.0.0",
  "tailwindcss": "^3.4.0"
}

Backend Core ​

json
{
  "express": "^4.18.0",
  "mongoose": "^8.0.0",
  "socket.io": "^4.6.0",
  "jsonwebtoken": "^9.0.0",
  "bcrypt": "^5.1.0"
}

Development Dependencies ​

json
{
  "typescript": "^5.0.0",
  "eslint": "^8.55.0",
  "prettier": "^3.1.0",
  "@types/node": "^20.10.0",
  "@types/react": "^18.2.0"
}

One chat. Everything done.

© 2026 Omevision Ltd.