Building consumer brands in the F&B industry is challenging, requiring seamless integration, high performance, and scalability. Crave.js simplifies this process, providing a comprehensive platform with powerful tools and APIs that make it easier to create high-quality online ordering experiences. This guide introduces you to building with Crave.js, explaining our architecture, components, and how they streamline your development process, helping you overcome the complexities of building and scaling consumer brands in the F&B sector.

​
The Crave.js Platform Architecture

Crave.js is a complete headless commerce platform for the food and beverage industry. The platform provides everything you need to create custom ordering experiences without managing complex infrastructure:

  1. Storefront Starter Template - Our open-source template that you can customize
  2. Storefront API - Powerful APIs for customer-facing experiences
  3. Admin API - Comprehensive backend services for merchant operations
  4. CLI Tool - A simple way to set up and configure your project

This architecture enables rapid development, consistent experiences, and maximum flexibility for businesses of all sizes.

​
What is a Custom Storefront?

A custom storefront is a model of building headless, where the frontend and backend of your storefront are independent of each other. You build the frontend while Crave.js powers the backend, allowing merchants to create bespoke storefront experiences with the robust capabilities of Crave.js’s ordering engine.

With Crave.js, you can:

  • Clone our Storefront Starter Template and customize it to your needs
  • Connect to our powerful APIs with minimal configuration
  • Create unique ordering experiences for your customers

​
How Custom Storefronts Work

A custom storefront is designed, built, and managed by you. This is the frontend. You can use your preferred tech stack and a development framework that you already know to build faster. You build headless by integrating your custom frontend with Crave.js’s powerful ordering capabilities and backend operations, ensuring a seamless and efficient online ordering experience.

​
Getting Started with Crave.js

Getting started with Crave.js is simple:

  1. Sign up for an API Key: Visit dashboard.craveup.com to create an account and obtain your API key
  2. Clone the Storefront Starter Template: Our open-source template gives you a head start
  3. Use Our CLI Tool: Our CLI will guide you through setup, connecting your template to our backend using your API key
  4. Customize Your Experience: Modify the template to match your brand and requirements

​
Data and Online Ordering Capabilities

Your custom storefront uses data and ordering capabilities from Crave.js. This is the backend.

Data includes:

  • Products and menus
  • Customer profiles and preferences
  • Order history and status
  • Payment methods and transactions
  • Location and availability information

Ordering capabilities include:

  • Cart management
  • International pricing and tax calculation
  • Checkout processes
  • Payment processing via Stripe
  • Order tracking and notifications

​
Building on an API-First Platform

Headless online ordering doesn’t apply just to websites. Crave.js can be used in various ordering experiences such as:

  • Web applications
  • Mobile apps
  • Kiosks
  • Smart devices
  • IoT devices
  • Voice assistants
  • And more

The benefit of building on an API-first platform is the flexibility and power of enabling new customer touchpoints while using the same shared ordering data and backend tools that Crave.js provides.

​
Integration Capabilities

Crave.js seamlessly integrates with various business systems:

  • Payment Processing - Built-in Stripe integration for secure payments
  • Authentication - Stytch integration for customer and merchant authentication
  • Communications - SendGrid for email and Twilio for SMS notifications
  • Database - MongoDB for reliable data storage
  • Additional Systems:
    • Content management systems (CMS)
    • Customer relationship management (CRM)
    • Point of Sale systems (POS)
    • Inventory management systems

​
When Should I Build a Custom Storefront?

If a merchant’s desired business system architecture, business process, or customer experience can’t be achieved with standard solutions, then consider building a custom storefront with Crave.js.

Consider building a custom storefront in the following scenarios:

  • You’re building a unique storefront experience that isn’t possible or easily achievable with existing web or mobile tools
  • You have an existing web frontend technology stack that doesn’t align with standard solutions
  • You want to integrate Crave.js-powered ordering into an existing infrastructure
  • You have robust omni-channel needs, with multiple channels not being offered out of the box
  • You’re either using or looking to use a content management system (CMS) for more complex content needs that are integrated into your storefront experience

However, before taking on the commitment, make sure that the merchant is comfortable with taking on the added costs and complexity of managing a custom storefront solution. The merchant should also have development resources available to manage the ongoing integration after launch.

​
Key Benefits

Building a custom storefront with Crave.js offers the following key benefits:

  • Flexibility: Our APIs are device-agnostic and platform-agnostic. You can build a custom storefront using any programming language, making your workflow flexible.
  • Customization: Create a solution that grows and adapts with a merchant’s business. As customer trends and interactions change, the ordering solution can adapt quickly to long-term market shifts.
  • Integration: Bring your own tools, technology stack, and experience, and integrate your custom backend with Crave.js’s ordering data.
  • Development Speed: Leverage our Storefront Starter Template and CLI tool to accelerate development.
  • Scalability: Built on modern technologies that scale with your business needs.
  • Comprehensive Solution: Get everything you need in one platform - starter template, APIs, and setup tools.

​
Examples

With Crave.js, you have complete flexibility in your frontend tech stack and development framework. Here are some common business types and use cases:

​
Business Types

  • Hotels
  • Restaurants
  • Golf Courses
  • Cafes
  • Food Trucks
  • Ghost Kitchens
  • Food Courts
  • And more!

If your business type isn’t listed, reach out to us at hello@craveup.com to discuss how we can support your needs.

​
Use Cases

  • Provide hotel in-room delivery services for food and amenities
  • Sell products from a native mobile app or a progressive web application (PWA)
  • Enable in-course ordering for golf courses using delivery robots
  • Add a buy button to an existing website for seamless transactions
  • Offer food and beverages through a smart fridge or IoT device
  • Sell products in video livestreams
  • Facilitate contactless ordering and pickup for cafes
  • Manage multiple locations from a single dashboard
  • Implement subscription-based meal plans
  • Create personalized ordering experiences based on customer preferences

​
Getting Started with Crave.js

​
Storefront Starter Template

The Storefront Starter Template is Crave.js’s open-source custom storefront. You can clone it as a starting point to build your own custom storefront.

​
Setup Process

To get started with Crave.js development:

  1. Sign up at dashboard.craveup.com to obtain your API key
  2. Clone the Storefront Starter Template repository
  3. Install our CLI tool: npm install -g @cravejs/cli
  4. Run the setup wizard: cravejs init
  5. Enter your API key when prompted
  6. Start the development server: npm run dev

Our CLI tool handles all the configuration, allowing you to focus on building your custom experiences rather than managing infrastructure.

​
Documentation and Support

We welcome any feedback! For additional support or questions, please reach out to hello@craveup.com. Happy building!