This monorepo contains example frontend applications that demonstrate how to build web applications using RESTHeart Cloud as a backend.
- Plain JavaScript Contact Form - Vanilla JavaScript form without framework dependencies
A simple contact form that demonstrates:
- Form submission with validation
- /setup page to setup the backend
- POST requests to RESTHeart Cloud
- Using
application/x-www-form-urlencodedcontent type - Email validation
- Success/error handling
TIP: you can also define a Webhook to receive notifications when the contact form is submitted.
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
- npm or yarn
- A RESTHeart Cloud instance (get started at cloud.restheart.com)
Follow the setup instructions in the RESTHeart Cloud Examples documentation to:
- Create the
productscollection - Add sample product data
- Configure permissions for unauthenticated read access
# 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 AngularFor 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.cloudFor Angular:
# Edit src/environments/environment.ts and set restHeartUrl# Install dependencies
npm install
# Start development server
npm run dev # For Vue.js and React
# OR
npm start # For Angularrestheart-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
├── plain-js-contact-form/ # Plain JavaScript contact form
│ ├── src/
│ │ ├── config.js # Endpoint configuration
│ │ ├── app.js # Form logic
│ │ └── styles.css # Styling
│ ├── index.html
│ └── README.md
└── README.md # This file
Each application directory contains its own README with specific instructions:
- 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
- Direct API calls using native fetch/HttpClient
- MongoDB query filters with
$regex,$gte,$lte - Sorting capabilities
- Error handling
- Loading states
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}MIT License - feel free to use this code for your own projects!
- Issues: GitHub Issues
- Documentation: restheart.org
- Community: GitHub Discussions