RESTHeart Cloud Examples

This monorepo contains example frontend applications that demonstrate how to build web applications using RESTHeart Cloud as a backend.

Examples

This repository includes three implementations of a Product Search application, each using a different frontend framework:

• Vue.js - Modern progressive framework
• React - Popular component-based library
• Angular - Full-featured framework

All three implementations connect to the same RESTHeart Cloud backend and demonstrate:

• Product search functionality
• Real-time filtering by name
• Price range filtering
• Category-based filtering
• Responsive design

Prerequisites

• Node.js 18+ and npm
• A RESTHeart Cloud instance (get started at cloud.restheart.com)

Quick Start

1. Set up your RESTHeart Cloud Backend

Follow the setup instructions in the RESTHeart Cloud Examples documentation to:

1. Create the products collection
2. Add sample product data
3. Configure permissions for unauthenticated read access

2. Clone and Configure

# Clone this repository
git clone https://github.com/SoftInstigate/restheart-cloud-examples.git
cd restheart-cloud-examples

# Choose your framework and navigate to its directory
cd vue-product-search    # For Vue.js
# OR
cd react-product-search  # For React
# OR
cd angular-product-search # For Angular

3. Configure Environment Variables

For Vue.js and React:

# Copy the example environment file
cp .env.example .env

# Edit .env and set your RESTHeart Cloud URL
# VITE_RESTHEART_URL=https://your-instance.restheart.cloud

For Angular:

# Edit src/environments/environment.ts and set restHeartUrl

4. Install and Run

# Install dependencies
npm install

# Start development server
npm run dev    # For Vue.js and React
# OR
npm start      # For Angular

Project Structure

restheart-cloud-examples/
├── vue-product-search/       # Vue.js implementation
│   ├── src/
│   │   └── App.vue          # Main component
│   ├── .env.example
│   └── README.md
├── react-product-search/     # React implementation
│   ├── src/
│   │   ├── App.jsx          # Main component
│   │   └── App.css
│   ├── .env.example
│   └── README.md
├── angular-product-search/   # Angular implementation
│   ├── src/
│   │   ├── app/
│   │   │   ├── app.component.ts
│   │   │   ├── app.component.html
│   │   │   └── app.component.css
│   │   └── environments/
│   ├── .env.example
│   └── README.md
└── README.md                 # This file

Framework-Specific Documentation

Each framework directory contains its own README with specific instructions:

• Vue.js Product Search
• React Product Search
• Angular Product Search

Features

Product Search

• Search products by name with instant filtering
• Filter by price range (min/max)
• Filter by category
• Sort by price
• Responsive grid layout
• Real-time updates

RESTHeart Integration

• Direct API calls using native fetch/HttpClient
• MongoDB query filters with $regex, $gte, $lte
• Sorting capabilities
• Error handling
• Loading states

API Examples

All three apps use the same RESTHeart Cloud API endpoints:

// Search by name
GET /products?filter={"name":{"$regex":"headphones","$options":"i"}}

// Filter by price range
GET /products?filter={"price":{"$gte":50,"$lte":150}}

// Filter by category
GET /products?filter={"category":"electronics"}

// Combined filters with sorting
GET /products?filter={"category":"electronics","price":{"$lte":200}}&sort={"price":1}

Learn More

• RESTHeart Cloud Documentation
• RESTHeart Cloud Examples
• API Reference

License

MIT License - feel free to use this code for your own projects!

Support

• Issues: GitHub Issues
• Documentation: restheart.org
• Community: GitHub Discussions