Hogis OrderNow: Revolutionizing Food Ordering in Calabar

As a Senior Frontend Engineer, I recently had the opportunity to lead the development of Hogis OrderNow, a comprehensive food ordering and delivery platform for Hogis branches in Calabar. In this post, I'll share insights into the technical decisions, challenges, and solutions that went into creating this modern web application.

The Challenge

Hogis Group needed a streamlined way for customers to order food from their various branches in Calabar. The platform needed to handle:

• Real-time order tracking
• Multiple restaurant locations
• Secure payment processing
• Efficient delivery management

Technical Stack

For this project, we chose a modern tech stack that prioritizes performance and developer experience:

• Next.js: For server-side rendering and optimal performance
• Convex: Handling real-time updates and backend operations
• Clerk: Managing user authentication and profiles
• TypeScript: Ensuring type safety across the codebase
• TailwindCSS & Shadcn UI: Creating a polished, responsive interface

Key Features

SharedCart: Collaborative Ordering Made Easy

One of our most innovative features is SharedCart, which enables groups to collaborate on food orders in real-time. Whether it's office lunches, family dinners, or party orders, SharedCart makes group ordering seamless:

• Generate and share unique cart links with anyone
• Real-time updates as group members add or remove items
• Individual payment splitting options
• Smart order consolidation to optimize delivery

// Example of SharedCart implementation
const useSharedCart = (cartId: string) => {
  const cart = useQuery(api.carts.get, { cartId });
  const addItem = useMutation(api.carts.addItem);
 
  return {
    items: cart?.items ?? [],
    addToCart: (item) => addItem({ cartId, item }),
    totalParticipants: cart?.participants?.length ?? 0,
  };
};

Real-time Order Tracking

One of the most important features we implemented was real-time order tracking. Using Convex's real-time capabilities, customers can see their order status update instantly as it moves through different stages:

// Example of real-time order status subscription
const orderStatus = useQuery(api.orders.getStatus, { orderId });

Multi-branch Management

We implemented a sophisticated branch management system that allows customers to:

• View different branch menus
• Check branch-specific operating hours
• See real-time item availability

Responsive Design

The application is fully responsive, ensuring a seamless experience across all devices. We achieved this using TailwindCSS's mobile-first approach and Shadcn UI's responsive components.

Results and Impact

Since launching Hogis OrderNow, we've seen:

• Increased order efficiency
• 40% rise in group orders through SharedCart
• Improved customer satisfaction
• Streamlined operations for restaurant staff
• Enhanced delivery coordination
• Higher average order value for group orders

Technical Challenges and Solutions

Challenge 1: Real-time Inventory Management

Managing real-time inventory across multiple branches was complex. We solved this using Convex's real-time database capabilities, ensuring that menu items are automatically updated when they become unavailable.

Challenge 2: Order Queue Management

We implemented a sophisticated queue management system to handle high-volume periods efficiently, ensuring that kitchens receive orders in a manageable sequence.

Challenge 3: Real-time Cart Synchronization

Implementing SharedCart required careful consideration of concurrency and real-time updates. We implemented:

• Optimistic updates for instant feedback
• Conflict resolution for simultaneous modifications
• Automatic cart merging when network connectivity is restored
• Rate limiting to prevent abuse

Future Plans

Our roadmap for Hogis OrderNow includes several exciting features:

1. Enhanced Loyalty Program

• Points-based rewards system
• Tier-based benefits
• Special offers and early access
• Birthday rewards and personalized promotions

2. Delivery Optimization

• Dynamic routing algorithms
• Real-time driver tracking
• Automated dispatch system
• Delivery time predictions based on traffic and weather

3. Branch-specific Features

• Custom menu management
• Branch-specific promotions
• Local inventory tracking
• Peak hour management

4. Mobile Apps

• Native iOS and Android applications
• Offline menu browsing
• Push notifications
• Mobile payment integration

Conclusion

Hogis OrderNow represents a significant advancement in food ordering technology, specifically tailored for the Nigerian market. By combining cutting-edge technology with local business requirements, it delivers a superior experience for both customers and restaurant operators.

Check out the live platform to see it in action!