Forem: Dalu46

Hidden Complexities of Scaling GraphQL Federation (And How to Fix Them)

Dalu46 — Wed, 25 Jun 2025 14:00:53 +0000

Federation gives teams the autonomy to move faster, but it also creates a web of hidden dependencies that are easy to overlook, often found in complex distributed systems.

Schema changes can conflict without warning, ownership becomes harder to track, and the federation gateway, responsible for composing and deploying the supergraph, often becomes a single point of friction. Any issue in one subgraph can delay deploys for the entire graph. Platform teams are left responding to problems without the visibility or control to prevent them.

Not every issue causes an outage. Sometimes a deploy gets held back because schema checks fail unexpectedly. At other times, a feature like a product details page returns null because a field was removed from another team’s subgraph.

You may notice that authorization logic behaves differently across multiple services, or stale queries slip past CI because the gateway composition succeeded, but the runtime still fails. Even when teams follow best practices, the graph becomes harder to evolve.

This guide will teach you what starts to strain as GraphQL federation scales. I’ll walk you through the common failure points, the coordination challenges that emerge over time, and how we’ve built Grafbase to help platform teams manage federation without slowing down teams or introducing additional risk.

How cross-team changes create friction in the graph

As the graph grows and more teams contribute, friction becomes harder to contain. These issues stem from the accumulation of edge cases, mismatched assumptions, and operational gaps between teams.

Here’s what that tends to look like in practice:

Schema changes that don’t fail fast. A field gets renamed or restructured in an individual subgraph. Another team’s query still depends on it. The gateway composes cleanly, but the runtime fails. Clients receive nulls, and no one is certain whether the issue originated from the schema, the query, or the deployment process.
Inconsistent conventions across multiple subgraphs. One team returns paginated lists with pageInfo, another returns raw arrays. Errors follow different structures. Without shared review rules or CI checks, the unified API becomes inconsistent for consumers and harder to support.
Deployments are blocked by schema drift. A platform team tries to publish the supergraph, but composition fails due to an uncoordinated change in a subgraph. The deploy is held until that team updates their schema, even if their change had nothing to do with the intended release.
Performance costs from distributed queries. A single client query might pull data from pricing, inventory, and recommendations subgraphs. Each adds a few hundred milliseconds. The end-user sees the total delay, even if each service is fast in isolation.
Drift in authentication, logging, and schema checks. One subgraph uses field-level authentication, while another skips authentication altogether. Some teams log queries; others don’t. Traces are inconsistent, and without shared tooling or policy enforcement, platform teams end up stitching together visibility after things go wrong.

These cases emerge quietly at first, then repeatedly, disrupting your process. They add risk to every deployment and shift platform work toward reactive maintenance instead of scalable support.

What these frictions are costing you

A poorly managed federated graph can increase cognitive load for developers and overwhelm platform teams with issues like schema inconsistencies and network latency. This can lead to application errors, downtime, and even delayed shipping, resulting in lost revenue or deterioration of the organization's reputation.

For instance, one of the common operational pain points in federated architecture is the "all-or-nothing" failure mode, which is frequently debated in community forums, such as this GitHub thread. In such scenarios, when a single subgraph becomes unhealthy or unresponsive, the central GraphQL gateway can fail the entire supergraph, resulting in a system-wide 500 error for clients.

The longer these frictions accumulate, the more you shift your focus from making meaningful improvements to protecting what already exists:

Refactoring shared types becomes too risky: You duplicate fields across subgraphs (with the same purpose, but different names) because it feels safer than coordinating changes across groups.
Ownership becomes unclear: You end up managing schema sequencing, gateway composition, and rollout order, even when you’re not responsible for the underlying services. Time that could be invested in infrastructure or automation is redirected toward conflict resolution.
Schema migrations get delayed: Cleanup tasks remain open for months. Duplicate logic is left in place because you don’t feel confident removing it. You wait until it’s necessary to touch anything shared.
Product decisions are shaped by coordination overhead: You defer exposing new data because integrating it into the unified graph means relying on another team’s schema, and this pressure can sometimes lead to skipping crucial validation steps to avoid a delay in shipping.

By the time you recognize the pattern, it’s already affecting how you plan, test, and deploy your work.

What should scaling GraphQL federation look like?

In a healthy setup, subgraph teams deploy on their own timelines. Schema changes validate cleanly across environments before anything blocks, and ownership is embedded in the schema.

Platform engineers won't spend time chasing rollbacks or patching CI. Instead, they’re working on systems that make the graph easier to evolve.

You should expect:

Schema conflicts are caught early through automated checks across environments. The federated GraphQL schema is designed to be backward compatible.
Auth, logging, and validation are defined within each subgraph but applied consistently across the graph.
Gateway tooling provides clear traces, error context, and actionable insights, enhancing query planning.
There are fewer internal docs and handoffs, so teams can onboard and contribute without friction, leading to a smoother developer experience.
There are coordinated improvements across the platform without disrupting feature development.

That setup is possible, and in the next section, I’ll walk you through how to use Grafbase to achieve this kind of environment, making federation easier to manage as adoption grows without adding overhead.

How to use Grafbase to simplify federation for your enterprise teams

Grafbase is designed to tackle the complexities of a growing federated architecture through its comprehensive approach, focusing on:

Built-in schema validation, observability, and audit-level insight
As mentioned earlier, one of the primary challenges in scaling GraphQL federation is managing schemas across independently evolving subgraphs. For example, imagine managing the schema for a User service and an Orders service as separate entities. If the User service changes a fundamental field, such as id, it could break the Orders service if the Orders service extends the User type based on that id.

Grafbase tackles this through its platform's architecture. By configuring subgraphs via the grafbase.toml, specifying their GraphQL endpoints:

# grafbase.toml

[graphql]
schema = "./schema.graphql"

[subgraphs.accounts]
introspection_url = "http://localhost:4000/graphql"

[subgraphs.orders]
introspection_url = "http://localhost:4001/graphql"

Grafbase automatically introspects these endpoints during local development, pulling the latest schema from each subgraph. This allows teams to iterate on services independently while still catching breaking changes early, before they make it into production.

Grafbase analyzes these schemas and registers them within its schema registry. This registry acts as the source of truth for your GraphQL schemas. During this composition, Grafbase performs automated checks, including build, operation, and lint checks, to identify potential schema inconsistencies before deployment. This validation helps maintain the stability and integrity of the federated API.

The Grafbase Gateway also provides logs, metrics, and traces for monitoring and debugging the federated graph. It even allows viewing schema changes over time via a changelog, and supports custom checks with the grafbase check command to enforce organization-specific rules.

Performance
Built with Rust, Grafbase delivers around 40% faster query speeds and significantly reduced CPU usage. It maintains low latency and consistent performance even during traffic spikes. This ensures fast applications and lower infrastructure costs at any scale.

Security and self-hosting
Grafbase provides security through field-level, WebAssembly (Wasm) based authorization. This allows you to define precisely who is allowed to view specific fields within your GraphQL types. With Wasm, you can attach arbitrary and complex authorizations, granting full access to request and response data and potential Input/Output (I/O) operations. This provides you with the freedom to tailor security policies to your unique data model and business rules, extending beyond simple role-based or type-level authorization.

For companies with specific security and compliance requirements, Grafbase also offers flexibility in deployment options, including crucial self-hosted and air-gapped environments. This simplifies API infrastructure, giving you control over your entire system and data, and ensuring compliance with internal and industry regulations without relying on a fully managed cloud solution.

Customization
Grafbase extensions and hooks are a powerful mechanism for customizing the Grafbase gateway's behavior without the overhead of managing additional infrastructure. This stands in contrast to approaches that utilize external plugins, which must be configured and updated independently. Grafbase extensions make it easier to adopt GraphQL Federation by enabling the declarative integration of services such as authentication, storage, and databases within your schema.

AI-powered API querying
Grafbase features forward-looking capabilities, such as native Model Context Protocol (MCP) support. MCP paves the way for the potential of incorporating AI agents that can query APIs using natural language. From an engineering perspective, this presents new avenues for consumption and interaction with APIs, particularly in high-scale deployments where it can be challenging to familiarize oneself with the entire API surface.

What’s next?

Not every team needs the same federation setup. But the further you scale, the more evident the gap between tools that let you patch things together and platforms built to support distributed teams by default.

Grafbase is designed for that next stage:

Moving from a monolith? Grafbase simplifies the transition by encouraging clear subgraph boundaries and managing the gateway for you.
Managing infra in-house? Use Grafbase declaratively, self-hosted or in the cloud, with native support for CI/CD, caching, and observability.
Migrating off Apollo Gateway? Avoid stitching and manual resolver work. Grafbase automates schema composition without giving up team-level control.
Navigating compliance and access control? Define field-level authentication, RBAC, and isolated preview environments directly within your schema.

If you’re looking for a GraphQL federation setup that prioritizes autonomy and structure, Grafbase might be the shift you’re looking for.

Start with the docs, explore our schema composition guide, or check out the Apollo migration walkthrough to see how Grafbase can help you scale without the friction.

Get Started with Serverless Architectures: Top Tools You Need to Know

Dalu46 — Tue, 01 Apr 2025 23:47:36 +0000

Managing the infrastructure to host and execute backend code requires you to size, provision, and scale several servers, apply security patches, and then manage operating system updates and infrastructure for performance and availability.

Wouldn't it be great if you could build out your application without spending time managing servers? That's the whole idea behind serverless architecture.

This article will guide you through the essential tools for adopting serverless architecture, offering a practical roadmap to get started. It aims to demystify the serverless ecosystem and highlight key technologies.

What Does Serverless Really Mean?

One of the most common misconceptions in the industry is that going serverless means eliminating servers entirely. In contrast, it just means removing them from the developer’s perspective. At the end, there is a server running your application code. Serverless just means that you don’t operate them. The cloud providers (e.g., AWS Lambda and Azure Functions) handle the infrastructure, allowing you to focus on your code.

Think of ordering food from your favorite restaurants. You have great food without needing to shop, cook, or clean. Serverless computing is pretty much the same: you run your code without managing the servers.

As your application grows and gains many users worldwide, processing data becomes complex and demands scaling. This will require handling downtime, reducing latency, and managing servers, which results in additional costs and resources. By adopting serverless architecture, larger applications can run faster with lower costs and resources.

Serverless architecture is well-suited for web and mobile applications with different workloads. Examples are real-time data processing apps like chat apps, backend for frontend services (BFF) apps like e-commerce apps, automation and scheduled tasks apps like task manager apps, and more.

Key Benefits of Serverless Architecture

There are many other reasons why going serverless is a good design choice over managing your servers yourself. Here are the most essential ones:

Cost-Effectiveness: Serverless architecture uses a pay-as-you-go model; you pay only for what you use. This method can significantly reduce operational expenses, which is great for developers with strict budgets.
Lower DevOps Requirements: Developers or businesses using serverless platforms do not need to spend on hiring and training DevOps resources, as server operations are managed for them. Instead, it allows the engineering team to focus on application development.
High Availability: Serverless platforms generally offer high availability by distributing functions across multiple data centers or regions. This built-in redundancy enhances application reliability and reduces the risk of downtime.
Scalability: Serverless solutions scale up and down automatically, responding to changing workloads without manual provisioning. This allows you to quickly increase your resources anytime without being concerned about the server's capacity as it scales.

Top Serverless Tools for Compute, Storage, and Databases

This section will discuss the top serverless tools that will give you an edge while getting started with serverless architecture. It will be divided into serverless compute tools and serverless databases.

Serverless compute tools

Here are the top serverless cloud providers. While each platform has distinct features and advantages, they allow developers to focus on writing code rather than managing servers.

AWS Lambda
AWS Lambda is a compute service that runs your backend code in response to events such as object uploads and HTTP requests.
It automatically handles all the capacity, patching, scaling, and administration of the infrastructure to run your AWS Lambda functions.
Lambda also provides visibility and performance and automatically manages the computing resources, making it easy to build applications that respond quickly to new information.
Like other serverless providers, Lambda as a service doesn't come with built-in storage.
Lambda functions are stateless; each invocation is considered a clean slate.
Nevertheless, Lambda functions can work with additional services that provide storage.
Common examples include S3 (Simple Storage Service), EFS (Elastic File System), and databases like RDS, Neon, and DynamoDB.

Use Case

AWS Lambda is perfect for applications that process images due to its integration with AWS S3, an object storage service. A good example is an e-commerce application that renders images in different sizes.
Here are the top features:
- Monitoring and Logging: Lambda integrates with Amazon CloudWatch for monitoring and logging, providing insights into function performance and errors.
- Multi-language Support: AWS Lambda supports multiple programming languages.
Azure Functions
Azure Functions is a function-as-a-service in Microsoft Azure that runs small pieces of code or "functions" in the cloud.
Functions are executed by a trigger (an action that invokes the code).
Azure Functions is an extension of the Azure App Service.
Azure Functions focus on event-driven scenarios and provide on-demand compute resources required for your applications.
You can use Azure Functions to build web APIs, respond to database changes, process IoT streams, manage messaging queues, and more.

Use Case

Azure Functions integrates with most tools in the Microsoft ecosystem, including Azure Queue (adding messages to a queue) and SignalR (sending real-time updates). This makes Azure Functions the perfect choice for real-time applications like chat apps.
Here are the top features:
- It supports multiple languages, including C#, Java, Python, PowerShell, and TypeScript, and it can extend its language support to languages such as Go.
- Microsoft Azure offers single-pane operations, a powerful feature that provides a unified view of hybrid environments via the Operation Management Suite (OMS), a Management-as-a-Service (MaaS).
- It allows monitoring and management of various data sources, including storage, virtual network services, machines, logs, and insights.
- Flexible development with integrations with GitHub and Azure DevOps.
- The entire SDK for functions is open-source.
Google Cloud Functions
Google Cloud Functions is a scalable serverless execution environment for building and connecting cloud services. It provides triggers automatically, with out-of-the-box support for HTTP and event-driven triggers from GCP services.
There are two types of Google Cloud Functions: API cloud functions and event-driven cloud functions.
The API cloud functions are invoked from standard HTTP requests, while the events-driven cloud functions handle events from the cloud infrastructure.
The event driver provides you with a trigger, which is stored in the data, and then sends you a response according to your function.

Use Case

Out of all the tools in this list, Google Cloud Functions is the best for image analysis.
While AWS Lambda is good for processing images, Google Cloud Functions is the perfect choice for applications that require image analysis because of its integration with Google Cloud Vision API. It is excellent for building social media applications and applications with face recognition.
Here are its key features:
- Allows configuration of functions based on the application's need, enabling trigger-based execution, memory and CPU allocation, and scaling controls.
- Allows configuring an instance to complete multiple concurrent requests.
- Automatic provisioning of resources.
- Simplified and intuitive developer experience.
Cloudflare Workers
Cloudflare Workers is a serverless computing platform that allows users to create or augment existing serverless applications. Unlike most serverless platforms, it requires little configuration and no region selection, enabling users to deploy applications anywhere on Earth.

Use Case

It’s best for geo-location content delivery applications because of its low latency and edge network spread around the globe. Examples are live streaming apps, online games, product apps that show products and currency based on the users' location, and so on.
Here are the key features:
- It is fast and runs on lightweight V8 isolates.
- Easy deployments with just a little configuration.
- High-performance global network.
- Cloudflare Workers use the same network that runs Cloudflare content delivery network, load balancing, web application firewall, and more, leading to faster performance.

Serverless databases

Here are the top serverless databases with their key features and use cases:

Neon
Neon is a serverless Postgres database that scales up and down based on your application workload by separating storage and computing. When you develop your app, you don’t need to worry about the cost of using it. Neon scales to zero when the database is not in use. When you deploy your app to production, you don’t need to worry about the capacity of your database; Neon automatically scales to the demands of your workload. It’s the perfect database for working with serverless architecture.
Neon applications can be deployed traditionally and connected over TCP using any Postgres driver. However, more teams are leveraging edge deployment in environments where they can’t establish a direct TCP connection, such as Cloudflare workers, AWS Lambda, and Vercel Edge functions. Neon provides a low-latency serverless driver for such deployments, working over both WebSockets and HTTP for efficient real-time and request-based interactions.

Use Cases

Neon is best for building modern, data-driven, and SaaS applications. An example is a subscription-based analytics app with real-time customer insights for different businesses.
Here are the key features:
- Provides database read replica, a feature that allows replicating databases, enabling you to provide read-only access without duplicating data.
- Provides API and CLI tools for database management.
- It’s cost-efficient, as your costs are directly tied to the resources your workload consumes—you don't pay for idle capacity.
- Integrates with any language or framework and supports over 70 Postgres extensions.
- Neon uses PgBouncer for connection pooling.
Firebase
Firebase is a serverless app development platform based on Google Cloud. It integrates with several other Google products, such as analytics, and provides client-side SDKs for building iOS, Android, and web applications.
Firebase offers Cloud Functions edge deployments, enabling the serverless execution of backend code in response to events triggered by HTTPS requests. This allows you to build responsive and scalable applications without managing servers.

Use Cases

Firebase is great for building real-time applications that work with media content like images, videos, and audio. Examples are social media applications and e-commerce apps that have real-time customer support.
Here are its key features:
- Offers fast and secure static web hosting with global CDN delivery.
- Provides out-of-the-box authentication with support for multiple providers like Google, Facebook, and email with password.
- It comes with Firestore and Realtime Database. These are scalable NoSQL databases for storing data and building interactive applications.

Building A Simple Serverless API

To fully understand serverless architecture, let’s build a simple application to see how it works. This section will walk you through a step-by-step guide to building a simple serverless API using Cloudflare Workers and Neon, a serverless Postgres database.

Getting Started

First, create an account at neon.tech. Once you have an account, click Create a new project and name it serverless_api.

Next, click on Dashboard → Connect, then copy the connection string. Keep it safe because you will need it to connect with Cloudflare Workers.

Create a Cloudflare Worker

Name your Worker, serverless-api, and click Deploy.

Once the Worker is deployed, you will be directed to the Worker editor page, where you can write your Worker code directly in the browser. In a real application, you would write the logic to query your Neon database. However, the API will return a simple “Hello Serverless World” text for this application.

Connect Cloudflare Worker with Neon

On the sidebar, click Compute (Workers) → Workers & Pages → Integrations, then select Neon and click Add Integration.

Follow the prompt. You will be asked to authorize Neon and select the project, branch, and database. Cloudflare will automatically show your Neon connection string. Compare it with the one you have retrieved from Neon to confirm.

These Secrets will be added to the existing Environment Variables of this Worker.

Once that is done, Cloudflare will provide an endpoint that you can fetch in frontend code, similar to this:

https://serverless-api.<your email>.workers.dev/

You can also test the serverless function in the preview browser on the Cloudflare console.

In the Worker.js file, paste the following code:

    export default {
      async fetch(request, env, ctx) {
        console.log(env)
        return new Response('Hello Severless World!');
      },
    };

This will return a simple Hello World and log the Neon connection string in the console to show that the database was successfully connected.

You may ask why a serverless API is needed when you could query the database directly. Well, the answer is simple: as soon as the application begins to grow, there will be lots of users calling that API (function). However, since the serverless provider automatically handles scalability, your server will be able to handle the change in workload without crashing. If you want a more extensive tutorial on building a serverless application with Cloudflare Workers and Neon, check this tutorial.

Wrapping Up

Serverless computing offers a powerful approach to building modern applications, enabling automatic scaling, low cost, and faster response time. By using the right tools, such as AWS Lambda, Google Cloud Functions, Cloudflare Workers, and Neon for databases, you can simplify development while reducing infrastructure complexity.

Curious about Neon’s capabilities? Sign up today and experience hassle-free, serverless PostgreSQL!

This Is Why You Should Use Cloudflare Workers

Dalu46 — Sat, 15 Mar 2025 15:12:43 +0000

Cloudflare Workers are serverless edge-computing providers that allow users to create or augment existing serverless applications. It uses the V8 engine under the hood, the same engine used by Node.js and Chromium. These Workers are deployed all around the globe to process data closer to your users, yielding faster responses and improving processing speed.

Building large-scale applications requires rigorous infrastructure and server management. Cloudflare Workers eliminate this burden by deploying and managing your code. They handle issues related to downtimes due to heavy traffic and have low latency, which improves your application's performance.

By the end of this article, you will understand the benefits of Cloudflare Workers and how they differ from other serverless platforms like AWS Lambda. You will also learn about Neon's serverless capabilities, the benefits of using Neon database, and how you can use Neon with Cloudflare Workers to build your application.

Why use Cloudflare Workers

Large applications with millions of users worldwide require complex data processing. Usually, the necessary servers for storing and processing data are in more than one physical location worldwide. To ensure the application runs smoothly, large applications require complex procedures such as configurations, database maintenance, and automation, which lead to additional costs and resources.

If you are looking to build scalable applications, some of the benefits of using Cloudflare Workers over other serverless providers are:

Minimal Latency: Because Cloudflare Workers deploy your code across its global network, there is less distance between your data and your users’ devices. As a result, your application loads and processes faster.
Scalability: As your application scales, handling client requests and managing your servers becomes tedious. Cloudflare Workers solve this issue by storing and processing your code, minimizing downtime, and ensuring your application remains accessible.
Cost: Cloudflare Workers are cost-effective as you only have to pay for the resources (e.g., CPU time, requests) you use. This pricing structure helps you save costs.
Flexibility: Cloudflare Workers give you control over writing logic that can handle your HTTP requests and responses.

In the next section, you will see how Cloudflare Workers compares to AWS Lambda, another serverless provider.

Cloudflare Workers vs. AWS Lambda@Edge

AWS Lambda@Edge is a feature in AWS Lambda that supports running serverless functions at Amazon CloudFront edge locations, bringing computation closer to the user. It is optimized for CDN-based workloads and supports request and response modification, content customization, security features, and smart routing—all without the need for infrastructure management.
However, Cloudflare Workers stand out in certain areas. If you are contemplating which one to use, here’s how they compare:

Feature	Cloudflare Workers	AWS Lambda@edge
Latency	Distributed across wider areas, making it much faster.	Runs in AWS's global edge locations, tied to CloudFront.
Edge Computing	Designed for edge computing, optimized for API gateways, content localization, and personalization.	Optimized for CDN-based workloads within Amazon CloudFront, enabling request and response modifications, content personalization, and security enhancements at the edge.
Deployment	Easier setup with abstracted complexities, better documentation, and deployment tools.	Requires deploying via AWS Lambda with CloudFront triggers, involving IAM roles and permissions.
Cold Starts	Faster cold starts due to small functions and edge capabilities.	Generally slower cold starts, but mitigated by CloudFront caching and optimizations.
Integration	Easily integrates with services like Neon serverless database.	Best suited for AWS services like Amazon S3, DynamoDB, and Cognito; optimized for CloudFront workloads.
Code Size Limit	5MB total package size	1MB per function (after compression), with a max of 50MB uncompressed including dependencies.

Next, let’s explore the benefits of integrating Cloudflare Workers with Neon, how it transforms everything, and how it can make life easier. You'll understand how to integrate your Cloudflare Worker with Neon in a snap and also see how to build a serverless web app in an instant.

Benefits of Integrating Cloudflare Workers with Neon Serverless Database

Neon serverless database is a fully managed open-source Postgres database that decouples the storage and compute components, enabling it to dynamically scale up during high activities and down during idle periods. Neon comes with a serverless driver that makes it super easy to connect Neon to your Cloudflare Workers.

Other reasons why you should consider integrating your Cloudflare Workers with Neon serverless database are:

Low Latency: Cloudflare Workers run on the edge, which means they are close to the user and have low latency. Because Neon’s read replicas and autoscaling capabilities enable efficient fetching of all data, the database queries remain fast for users anywhere, improving the overall app performance.
Cost Efficiency: Both Cloudflare Workers and Neon adjust to workload spikes based on your application's demand, which requires zero infrastructure management. They use a pay-as-you-go model and suspend idle instances to help lower costs. You only pay for what you use.
Simplified Deployment: You don’t need to worry about provisioning or managing servers, as both Cloudflare Workers and Neon are fully serverless.
Security: Cloudflare Workers ship with built-in security features such as DDoS protection, request filtering, and firewalls. On the database side, Neon enables secure access with end-to-end encryption (TLS) and row-level security, simplifying enforcing access control. ## Building a Serverless Web App Using Cloudflare Workers and Neon

Neon serverless databases can be integrated with Cloudflare Workers to process data. Neon provides you with a serverless driver that you can use to connect to your database and then create access data from your database in Cloudflare Workers. Neon’s serverless driver is optimized for edge environments, enabling SQL queries over HTTP or WebSockets. This makes it ideal for Cloudflare Workers, which run in a lightweight, distributed manner without persistent connections.

This section demonstrates how to use the Neon serverless database with Cloudflare Workers to build a serverless web application. This application is a simple Next.js application that fetches brief details about African countries.

Prerequisites
To follow through this tutorial, you need the following:

A Cloudflare account - create a Cloudflare account
A Neon account - create a Neon account
Familiarity with Next.js and TypeScript
Node installed

How The Application Works
The Cloudflare Worker serverless function is created and contains code that accepts and processes requests from the Next.js application. This function serves as your backend code, fetching data from your Neon serverless Postgres database and returning a JSON version of the data as the response. You can then render the response data in your application.

Step 1: Project Setup and Installations
Follow the steps below to set up and install the necessary packages for the application:

Clone the project from GitHub. On the terminal, paste the following code:

git clone https://github.com/Dalu46/my-workers.git && cd my-workers

Open the project in your code editor (preferably VSCode).
Create your first worker by running the following command in the integrated terminal:
```
npm create cloudflare@latest
```
This will attempt to install cloudflare-client-cli (also known as C3 in Cloudflare docs) and wrangler with the following prompts in the image below. Type “./workers” for the first question. This will be the name of your Cloudflare Worker and the folder created when the installation is completed. Select the Hello World example option, click enter, then select the TypeScript option and click enter.
Finally, select No for the last question about deploying your application. You will deploy your application after adding your serverless function code.

Step 2: Create your Neon Serverless Database
Follow the steps below to create a Neon database for the application:

Log in to your Neon account.
Create a new project and a new database, neon-db.
On the left dashboard menu, click on the SQL Editor to add queries to create a new table.

Using Neon’s AI feature, you can generate a simple table using this prompt; you can generate the SQL command from your Neon Console:

“create a table with 3 columns: id | country | Details where id is the unique numeric identifier, country is a string type, and details is a string type. Populate the table with 10 unique fields. Each field has a unique ID, a name of an African country, and a 2-paragraph sentence of that African country”

This will generate a PostgreSQL query command, and after it is done, click the Run button to create the table. The table would have 3 columns: the id, country, and details columns, and it should look like this:

Step 3: Connect your Cloudflare Worker to your Neon Serverless Database
Your database is ready. You can now connect your serverless function to it by following the steps below:

Click the Connect button to retrieve your database URL from your Neon dashboard. This URL should look like this: postgresql://username:FzB6q0lQTTOF@ep-lively-union-42160037-pooler.us-east-2.aws.neon.tech/neon-test-db?sslmode=require
Open the wrangler.json file in the ./workers folder. Add your DATABASE_URL to the variable object to enable your Worker access and connect to your database:

Open your VSCode integrated terminal, run the following command to navigate to the Workers directory, and generate your DATABASE_URL variable type in the worker-configuration.d.ts file.
```
cd workers && npm run cf-typegen
```
Install the @neondatabase/serverless package (this package connects to your Neon serverless database).
```
npm install @neondatabase/serverless
```
Open the index.ts file in the path workers/src/index.ts. This file is your Cloudflare Worker (a.k.a. serverless function). It contains the logic to connect to and fetch your database records from the Neon serverless database and return a JSON response of your database data.

Replace the default content in the index.ts file with the following:

    /**
     * Welcome to Cloudflare Workers! This is your first worker.
     *
     * - Run `npm run dev` in your terminal to start a development server
     * - Open a browser tab at <http://localhost:8787/> to see your worker in action
     * - Run `npm run deploy` to publish your worker
     *
     * Bind resources to your worker in `wrangler.json`. After adding bindings, a type definition for the
     * `Env` object can be regenerated with `npm run cf-typegen`.
     *
     * Learn more at <https://developers.cloudflare.com/workers/>
     */

    import { Client } from '@neondatabase/serverless';

    export default {
            async fetch(request, env, ctx): Promise<Response> {
            // connect to Neon serverless database
                    const client = new Client(env.DATABASE_URL);
                    await client.connect();
                    const { rows } = await client.query('SELECT * FROM african_countries;');
                    console.log(rows);

            // handle CORs error by whitelisting domains
                    const origin = request.headers.get('Origin')
                    const allowedOrigins = [
                            '<http://localhost:5173>',
                            '<http://localhost:5174>',
                            '<http://localhost:5175>',
                            '<http://localhost:3000>',
                    ]

            const corsHeaders = {
                    'Access-Control-Allow-Origin': origin && allowedOrigins.includes(origin) ? origin : '*',
                    'Access-Control-Allow-Credentials': 'true',
                    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
                    'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE'
            }
                    return new Response(JSON.stringify(rows), {
                            headers: corsHeaders
                    });
            },
    } satisfies ExportedHandler<Env>;

Step 4: Deploy your Cloudflare Worker
You’re ready to deploy your serverless function to your Cloudflare account. Follow the steps below to deploy your Cloudflare Worker:

Run the following command:
```
npx wrangler deploy
```
This will open a new browser window where you must authenticate and authorize using your Cloudflare account. The page will require you to log in if you're not already. Otherwise, click the Allow button to authorize. You should see something like this:
Close the browser tab and retrieve your serverless function URL from your terminal. You can also see your new serverless function (Cloudflare Worker) deployed to your Cloudflare account. Click on workers to view details of your deployed Cloudflare Worker.

Once you have retrieved your serverless function URL, you can send an HTTP request using the fetch() method. The data returned in the response is then used to build the application. In the src/app/details/[id]/page.tsx file, replace the URL with your serverless function URL.

'use client'
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation"
import styles from "../../page.module.css";
interface AfricanCountry {
  id: number,
  country: string,
  details: string
}
function Details() {
    const [countries, setCountries] = useState<AfricanCountry[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const URL = "https://workers.your_url.workers.dev"; // serverless function URL
    const params = useParams();
    const countryData = countries.find(({id}) => id === Number(params.id));

    const router = useRouter();
    const handleRedirect = () => router.push('/');

    useEffect(() => {
        // fetch countries data from our neon db using our serverless function URL
        (async () => {
            try {
                setIsLoading(true);
                const data = await fetch(URL);
                const _countries = await data.json();
                setCountries(_countries);
            } catch(error) {
                alert('Unable to fetch data');
                if (error instanceof Error) reportError(error.message);
            } finally {
                setIsLoading(false);
            }
        })();
    }, [])
    return (
        <div className={styles.page}>
            {isLoading 
            ? <>
                <span className={styles.loader}></span>
                <p>Fetching details from Neon DB</p>
            </>
            : <>
                <h1 className={styles.header}>{ countryData?.country }</h1>
                <p className={styles.description}>{ countryData?.details }</p>
            </>
            }
            {
                (!countries.length && !isLoading) && <p>No data found</p>
            }
            <button className={styles.btn} type="button" onClick={handleRedirect}>BACK</button>
        </div>
    )
}
export default Details;

To preview the application, run npm run dev. You should be able to try it out at localhost:3000.

This is the final application preview:

Final Thoughts

Cloudflare Workers bring the power of edge computing to serverless development with speed, scalability, and efficiency. When used with serverless databases like Neon, you can build incredibly responsive yet cost-effective apps without managing any infrastructure. Whether building real-time apps, handling API calls, or serving dynamic content, this combination offers performance and agility to scale faster.

Looking to learn more? Look at this Neon tutorial about building web applications using a Neon serverless database with Cloudflare Workers. You can also harness and explore other concepts covered by Cloudflare Workers, such as edge computing, security, and deployments, while keeping in mind the challenges of edge computing, including resource constraints, network reliability issues, security risks, and management complexities.

6 Common Postgres Beginner Mistakes and Best Practices

Dalu46 — Fri, 28 Feb 2025 15:57:58 +0000

“Anyone who has never made a mistake has never tried something new.” - Albert Einstein

Postgres' popularity is steadily increasing. It is the most popular open-source relational database available, and with almost 40 years of development, it is an excellent choice for applications of all sizes. However, starting with Postgres can feel like climbing a mountain, and just like learning anything new, you will undoubtedly make mistakes. Although mistakes are a normal part of the learning experience, they can be time-consuming and difficult to debug. So why not avoid them in the first place?

In this article, you'll learn about the most common mistakes beginners make when starting with Postgres. You'll see why these mistakes happen, how to avoid them, and techniques to help you write queries correctly. You'll also get actionable advice and practical tips to build confidence and develop better habits for database management. Learning from others' experiences can save you valuable time and frustration, so let's get started!

Common Beginner Mistakes

Here are the six common PostgreSQL mistakes beginners should avoid to maintain efficient and secure database environments.

1. Not Understanding What VACUUM Is or When to Use it

Understanding and using VACUUM accurately is important for maintaining a healthy and performant PostgreSQL database. VACUUM is a powerful command that reclaims storage occupied by dead tuples (dead rows). When a vacuum process runs, it marks the space occupied by dead tuples as reusable by other tuples.

When you delete records from a Postgres database table, Postgres does not immediately remove the rows from the database; these are just marked as deleted. The previous version of the record still remains in the data file. This is the same with updates; each update of a row creates a new version of that row. This is called table bloat. These dead spaces are empty rows that occupy unused disk space in the data file and remain present until a vacuum is done.

Many beginners are unaware that they need to run the VACUUM command to clean up dead tuples, which results in bloated databases and slower performance.

It is necessary to run the VACCUM command periodically, especially on frequently updated tables. Regularly reclaiming dead space can improve query performance, reduce disk space usage, decrease disk I/O by reducing table bloat, and ensure your database runs smoothly.

To identify tables requiring vacuuming, run the following code:

SELECT relname, n_dead_tup  
FROM pg_stat_all_tables  
WHERE n_dead_tup > 0;

Note that despite being necessary for a healthy database, VACUUM can have damaging effects when misused. For instance, using the VACUUM FULL command on the production database can lock it for some time.

2. Forgetting to Close Connections

Every time you open a connection, either to fetch or update data, it takes time and utilizes resources like memory and CPU. If these connections are not closed properly after use, they remain open and idle, consuming system resources and eventually running out of the database’s connection limit. This is called a connection leak and can result in errors and downtimes.

One common cause of poor database performance is idle connections. Most developers new to Postgres think that open connections are just idle connections that are not doing anything, but this is incorrect because they’re consuming server resources.

When a connection is not closed, it can trigger an increase in resource consumption, lock tables or rows, and even stop the execution of other queries. This can lead to degradation in database performance over time or even crash your application.

To prevent connection leaks, you must ensure that every connection opened is correctly closed after use. You can do this manually in your code or by using connection pooling tools like PgBouncer, which manage connections efficiently and prevent resource exhaustion.

Here's a sample Python code snippet to properly handle PostgreSQL connections and avoid connection leaks:

import psycopg2

conn = psycopg2.connect("dbname=test user=postgres password=secret")
try:
    cur = conn.cursor()
    cur.execute("SELECT * FROM users")
    print(cur.fetchall())
finally:
    cur.close()
    conn.close()

3. Writing Inefficient Queries

If you’re working with a large number of rows from a big table, you need to be careful while writing queries because it can be tricky. An unoptimized query may scan the entire table or touch significantly more rows than necessary.

Inefficient queries are often the result of poorly written SQL, missing indexes, or a lack of understanding of how PostgreSQL executes queries. When a query hits too many rows, it drives up disk I/O and uses up more CPU and memory (thus decreasing available resources for other queries). Eventually, this will limit the overall performance of your database and your application.

Wrong queries are common among beginners. For example, SELECT * without WHERE or INNER or joining two large tables without proper indexes causes PostgreSQL to scan and process more data than necessary, leading to performance issues.

Here are some useful tips for writing better-optimized queries:

Use Indexes: Indexes are one of the most effective ways to speed up queries. They allow PostgreSQL to quickly locate rows without scanning the entire table. For example, if you frequently query a user table by email, create an index on the email column:

CREATE INDEX idx_users_email ON users(email);

Avoid SELECT *: Fetching all columns when you only need a few can increase the amount of data processed and transferred. This is called the wildcard frenzy. The wildcard might seem enticing, as it displays all data at once, but this approach is not recommended. It’s like going through a lot of things you don’t need to find what you’re looking for, and that’s not efficient.

The best way to query data is to be specific. Rather than returning all of the data from the database and filtering post-query, ask for the data columns you actually need. This makes queries faster and your results clearer.
Rather than writing:

SELECT * FROM users WHERE email = 'test@example.com';

Instead, specify only the columns you need:

SELECT id, name FROM users WHERE email = 'test@example.com';

Use LIMIT: When working with small tables, you may not need to worry about the number of returned rows. However, when working with more oversized tables, LIMIT is beneficial for improving query performance. You can achieve that by using the LIMIT command.

SELECT * FROM users LIMIT 10

4. Forgetting to Add Primary Keys, Impacting Data Integrity

Whenever you create tables in your Postgres database, define primary keys. Without a primary key, the table lacks a unique identifier for each row, making it impossible to enforce data integrity and leading to problems such as duplicate rows. Over time, this can lead to inconsistent data, ruptured relationships, and unreliable query results.

Most novices skip creating a primary key for a table, either because they are unaware of its necessity or they mistakenly think Postgres will provide some unique enforcement on its own. However, this assumption can lead to serious problems, especially as your database grows and becomes more complex.

To avoid these problems, continually assign a primary key for each table. This will help you maintain the integrity of your data, ensure good performance in your queries, and have consistent relationships in your database.

Here are some best practices to prevent data integrity issues emerging from missing primary keys:

Always Define a Primary Key: Include a primary key that uniquely identifies each row when defining a table. For example, in an orders table, you can use order_id as the primary key:

CREATE TABLE orders (
order_id SERIAL PRIMARY KEY,
customer_id INT NOT NULL,
order_date DATE NOT NULL
);

Use Composite Keys: Sometimes, using a single column isn’t sufficient to uniquely identify a row. In such cases, use a composite key (a combination of columns) as the primary key. For example, in an order_items table, you might use both order_id and product_id:

CREATE TABLE order_items (
order_id INT NOT NULL,
product_id INT NOT NULL,
quantity INT NOT NULL,
PRIMARY KEY (order_id, product_id)
);

Add Primary Keys to Existing Tables: If you have already created a table without a primary key, you can add one later using the ALTER TABLE command. For example:

ALTER TABLE orders ADD PRIMARY KEY (order_id);

5. Overcomplicating Schema Design

A database schema is any structure that you define around the data. This includes views, tables, relationships, fields, indexes, functions, and other elements. Without any of these, getting lost in a database is easy.

Most beginners are tempted to design a database schema with hundreds of tables, complex relationships, and constraints to guarantee flexibility and scalability. This practice often leads to an overcomplicated schema design that is difficult to maintain and inefficient to query. Overcomplicating schema design usually results in reduced performance and an increased developer learning curve.

When designing your schema, it is essential to maintain a balance between normalization and simplicity. Although data normalization reduces redundancy and improves data integrity, it can also increase complexity. For example, splitting a single logical entity into multiple tables or adding too many foreign key relationships can make queries harder to write and slower to execute.

To avoid complicating the schema too much, consider simplicity and practicality. Start with a base design that fulfills your immediate needs and expand it as your application grows. Keeping your schema clean and intuitive will make it easier to maintain and query your database.

Here are some helpful tips for creating less complex schemas:

Start Simple: Begin with a minimal schema that addresses your immediate needs. Avoid adding tables or columns that you don’t currently require. For example, if you’re building a user table, start with basic fields like id, name, and email:

CREATE TABLE users (
id SERIAL PRIMARY KEY,
name TEXT NOT NULL,
email TEXT UNIQUE NOT NULL
);

Normalize Thoughtfully: Normalization is important, but don’t overdo it. For example, splitting a user table into user_profiles, user_emails, and user_addresses might seem like a good idea, but it can lead to unnecessary complexity. Instead, keep related data together unless there’s a compelling reason to separate it.
Avoid Overusing Foreign Keys: While foreign keys are essential for maintaining relationships between tables, using them excessively can complicate your schema. For example, creating a separate table for every one-to-many relationship can result in too many joins. Instead, consider embedding related data directly in a table when appropriate.

6. Overlooking the Importance of Backups

Data loss is a nightmare scenario, whether caused by a malicious attack, human error, or a software bug. One of the common mistakes that most developers new to Postgres or working with databases make is overlooking the importance of backups, and the consequences could be devastating.

The most critical aspects of database management are implementing and regularly maintaining a reliable backup strategy. When disaster hits, and it ultimately will, you'll be incredibly grateful that you took the time to plan ahead and back up your valuable data.

There are different ways to backup your data, including using:

pg_dump, a command-line utility for backing up PostgreSQL databases. It can generate logical backups (SQL scripts) or physical backups (binary replicas of the data files). Logical backups are usually more flexible, while physical backups are faster to restore. Here’s an example of how to use it:

# Logical backup (plain SQL script)
pg_dump -U username -h hostname -p port database_name > backup.sql

# Physical backup (directory format)
pg_dump -U username -h hostname -p port -Fc database_name > backup.dump

Third-party tools like Barman or pgBackups provide advanced backup and recovery capabilities for PostgreSQL. These tools make managing backups easier and offer granularity in the backup process.
A managed PostgreSQL service (e.g., Amazon RDS, Google Cloud SQL, Azure Database for PostgreSQL, and Neon). One that is a beginner-friendly managed Postgres database is Neon. The following section will discuss how Neon simplifies database management for beginners, especially for backups and schema design.

Tackling Schema Changes, Autoscaling, and Backups the Smart Way

Managing a large database has a few drawbacks: schema upgrades will introduce downtime, backups will be problematic, and scaling will require a lot of hands-on effort. This can lead to insecurity, data loss, downtime, etc.

Neon helps mitigate such issues with a serverless PostgreSQL solution that prioritizes flexibility and resilience. One of the biggest challenges of working with databases is schema changes, especially with growing applications. Traditional database migrations may be risky and cause downtime or inconsistencies. Neon supports schema migration tools such as SQLAlchemy or Alembic, Flyway, Liquibase, and so on. This allows developers to perform structured migrations with minimal or no user interruption.

Another challenge of working with a database is ensuring the database scales efficiently as the workload fluctuates. Neon handles autoscaling to enable your database to withstand workload changes automatically without the need for manual intervention.

Additionally, manually maintaining data and recovering it quickly is a common database challenge. Neon has automatic backups and point-in-time recovery, so if anything goes wrong, like a failing migration or a mistake with a delete, you can quickly restore the data.

There are three main ways to perform backups in Neon:

Point-in-Time Restore (PITR): Point-in-time recovery allows you to restore your database to a specific moment in time. It requires backing up live database files and archiving the Write Ahead Log (WAL), which is the log of all the modifications happening on the database. Neon automatically backs up all of the data with Point-in-Time Restore (PITR), which helps users restore data to any specific point in time. Neon achieves this by retaining a history of all branches without explicitly taking backups. This is crucial for data integrity, guaranteeing your apps’ continuity in case of accidental data deletion and failed login attempts.
Manual Backup Using pg_dump: Like in regular PostgreSQL databases, Neon supports manual backup using pg_dump.
Automated Backups through GitHub Actions: Neon allows for planning automated remote backups (e.g., on Amazon S3) using GitHub Actions to back up sensitive data. You can read more about using GitHub Actions for automated backups here.

Each method serves different needs: PITR is best for quick recovery, pg_dump for full database snapshots, and GitHub Actions for automated external backups.

What’s next?

There are many mistakes that might make you feel discouraged when getting started with Postgres. Don't be; there are several resources and tools available to help you learn more about Postgres. One such tool is Neon, a serverless solution that helps reduce the performance impact of vacuuming, provides autoscaling, offers a branching feature for backups, and many more.

Remember that making mistakes is a major part of the learning process. Don’t be afraid to make mistakes; they help you improve.

Resources

For more information on the tools and concepts used in this guide, refer to the following resources:

How to safely create a read replica of production for analytics and data teams

Dalu46 — Wed, 15 Jan 2025 23:18:10 +0000

Analyzing real-time production data can significantly improve decision-making and business intelligence capabilities. However, direct queries to production databases may result in data loss and performance issues. This is where a read replica is most beneficial. A read replica is a solution that engineers can leverage to guarantee that business intelligence teams can aggressively query data without compromising the integrity of primary production systems.

The general idea of using read replicas involves segregating read-only work from production database operations, which serve multiple purposes. One of these is the ability to distribute read requests across multiple read replica compute instances. This allows for easy application scaling and significantly increases throughput for both read-write and read-only workloads.

This tutorial will guide you through the steps to set up a read-only replica database on Neon, a fully managed serverless Postgres database that simplifies the creation and management of databases and their replicas. After setting up the read replica, we will use it with Metabase, a GUI capable of parsing and presenting data.

Prerequisites

A Neon paid plan account
A Metabase account
Basic knowledge of PostgreSQL

Creating a Neon project

One requirement for following this tutorial is having a Neon project. We’d create a simple e-commerce project with three tables: Orders, Products, and Reviews. Let’s get started.

To create a Neon project, first sign up on Neon. On the Neon console, click on the New Project button. Fill in the Project Creation form and click on Create project.

Note: When you create a project in Neon, a ready-to-use database named neondb is automatically created within the Postgres cluster. You can then create additional databases as needed within the project.

Once the project is successfully created, navigate to the tab on the left side of the screen and click on SQL Editor.

Paste the following command to create the Orders, Products, and Reviews tables, respectively:

Orders table:


    -- Create the orders table
    CREATE TABLE Orders (
        OrderID VARCHAR(10) PRIMARY KEY,
        CustomerEmail VARCHAR(50),
        OrderDate DATE,
        OrderTotal DECIMAL(10, 2),
        Status VARCHAR(20)
    );

    -- Insert the orders data
    INSERT INTO Orders (OrderID, CustomerEmail, OrderDate, OrderTotal, Status) VALUES
    ('ORD00001', 'john.smith@email.com', '2024-05-15', 125.43, 'Shipped'),
    ('ORD00002', 'mary.jones@email.com', '2024-05-12', 78.99, 'Processing'),
    ('ORD00003', 'david.lee@email.com', '2024-05-10', 219.00, 'Completed'),
    ('ORD00004', 'jane.doe@email.com', '2024-05-08', 42.11, 'Awaiting Payment'),
    ('ORD00005', 'william.chen@email.com', '2024-05-07', 99.95, 'On Hold'),
    ('ORD00006', 'sarah.miller@email.com', '2024-05-05', 15.20, 'Cancelled'),
    ('ORD00007', 'michael.brown@email.com', '2024-05-03', 32.78, 'Returned'),
    ('ORD00008', 'jennifer.williams@email.com', '2024-05-01', 87.42, 'Delivered'),
    ('ORD00009', 'daniel.garcia@email.com', '2024-04-29', 101.33, 'Partially Shipped'),
    ('ORD00010', 'elizabeth.taylor@email.com', '2024-04-27', 54.00, 'Shipped');

Products table:

    -- Create the table
    CREATE TABLE Products (
        ProductID VARCHAR(10) PRIMARY KEY,
        SKU VARCHAR(10),
        Name VARCHAR(100),
        Category VARCHAR(50),
        Price DECIMAL(10, 2),
        Stock INT
    );

    -- Insert the data
    INSERT INTO Products (ProductID, SKU, Name, Category, Price, Stock) VALUES
    ('PRO00001', '123ABC', 'Wireless Noise-Cancelling Headphones', 'Electronics', 199.99, 50),
    ('PRO00002', 'DEF456', 'Running Shoes (Men\'s)', 'Clothing', 79.95, 25),
    ('PRO00003', 'GHI789', 'Coffee Maker (Smart)', 'Appliances', 129.00, 10),
    ('PRO00004', 'JKL012', 'Yoga Mat', 'Fitness', 39.99, 75),
    ('PRO00005', 'MNO345', 'Wireless Phone Charger', 'Electronics', 24.99, 100),
    ('PRO00006', 'PQR678', 'Backpack (Travel)', 'Accessories', 59.99, 30),
    ('PRO00007', 'STU901', 'Hardcover Notebook', 'Office Supplies', 14.99, NULL), -- Unlimited stock represented as NULL
    ('PRO00008', 'VWX234', 'Beard Trimmer (Electric)', 'Personal Care', 42.50, 40),
    ('PRO00009', 'YXZ567', 'Air Purifier', 'Home & Garden', 99.00, 15),
    ('PRO00010', 'CBA123', 'Stainless Steel Water Bottle', 'Kitchen & Dining', 19.99, 80);

Reviews table:

    -- Create the reviews table
    CREATE TABLE Reviews (
      ReviewID VARCHAR(255) PRIMARY KEY,  -- Can be alphanumeric for unique identifier
      ProductID INT NOT NULL,
      CustomerName VARCHAR(255) NOT NULL,
      Rating DECIMAL(2,1) NOT NULL,  -- Decimal for rating (1.0 to 5.0)
      ReviewText TEXT NOT NULL,          -- Text allows for longer reviews

      FOREIGN KEY (ProductID) REFERENCES Products(ProductID)  -- Links reviews to products
    );

    -- Insert the orders data
    INSERT INTO Reviews (ReviewID, ProductID, CustomerName, Rating, ReviewText)
    VALUES
      ('REV00001', 1, 'Alice Johnson', 5.0, 'These headphones are amazing! The noise cancellation is incredible and the sound quality is top-notch.'),
      ('REV00002', 2, 'David Lee', 4.0, 'Great shoes for running, very comfortable and lightweight. However, the size runs a bit small, so I recommend ordering a half size up.'),
      ('REV00003', 3, 'Sarah Miller', 3.0, 'The coffee maker works well, but the app can be a bit buggy sometimes. It would be great if they could improve the connectivity.'),
      ('REV00004', 4, 'Michael Brown', 5.0, 'Love this yoga mat! Perfect thickness and grip for my workouts. It also folds up nicely for easy storage.'),
      ('REV00005', 5, 'Jennifer Williams', 4.5, 'This phone charger is super convenient. No more fumbling with wires! The only downside is that the charging speed could be a bit faster.'),
      ('REV00006', 6, 'Daniel Garcia', 4.0, 'This backpack is great for travel. Its spacious enough to fit everything I need, and the straps are comfortable for carrying even when its full.'),
      ('REV00007', 7, 'Elizabeth Taylor', 5.0, 'This hardcover notebook is exactly what I was looking for. The paper quality is excellent, and the cover feels very durable.'),
      ('REV00008', 8, 'William Chen', 3.5, 'The beard trimmer works well, but its a bit noisy. Otherwise, its a good value for the price.'),
      ('REV00009', 9, 'John Smith', 4.0, 'The air purifier is definitely making a difference in the air quality of my home. I can already breathe easier.'),
      ('REV00010', 10, 'Mary Jones', 5.0, 'This stainless steel water bottle is perfect for keeping my drinks cold all day long. Its also very stylish and leakproof.');

We have successfully created our e-commerce Neon project with three tables: Orders, Products, and Reviews. We’ve also seeded the database with sample data.

Creating a read replica for the database

Neon read replicas are dedicated instances for handling read-only operations on existing data. Unlike traditional methods, Neon doesn't copy data. Instead, Neon's architecture routes read requests to a single source. Adding a read replica to a Neon project does not require additional storage.

Creating a read replica is just adding a read-only compute endpoint to a Neon branch. You can create multiple read replicas per branch. Connecting to a read replica is the same as connecting to any branch, but you use a read-only compute endpoint instead of a read-write one.

In the Neon Console, select Branches. Select the branch where your database resides and click on Add. You’ll be prompted with a Create Compute Endpoint dialog. Select Read-only replica as the Compute type and click on Create.

Note: You can specify the Compute size options by configuring a Fixed-Size compute with a precise amount of vCPU and RAM (the default) or choosing a minimum and maximum compute size to enable autoscaling. Additionally, you can adjust the Suspend compute after a period-of-inactivity parameter, determining how long your read-only compute will remain inactive before being automatically suspended. The default setting is five minutes.

We have successfully created a read-only replica for our database. To view the read replicas for a branch, select Branches in the Neon Console and select the branch where you created the replica. Your read replicas are identified in the Type field under the Computes header. Read replicas have a R/O value instead of an R/W value.

Retrieving the read replica connection string

Connecting to a read replica in a Neon project is similar to connecting to any branch. The only difference is that we use a read-only compute endpoint instead of a read-write one. The read replica connection string will connect our read replica to Metabase, enabling us to perform analytics on our replica data without affecting the main data.

To get the read replica connection string, select Branches on the Neon Console, and on the branch where you created the read replica, click on the ellipsis menu and click on Connect like so:

You’ll be prompted with a modal. Copy the connection string and save it somewhere. We will need it to connect our read replica to Metabase.

A PostgreSQL connection string is similar to the following: postgresql://neondb_owner:************@ep-silent-sound-n9ittsn1.us-west-2.aws.neon.tech/neondb?sslmode=require.

Connecting your read replica to Metabase

Metabase is an open-source business intelligence (BI) tool that allows users to explore, analyze, and visualize data from various sources. We are going to leverage Metabase to visualize our Neon read replica database.

To add a database connection, click on the settings icon in the top right of the Metabase dashboard, navigate to Admin settings, click on Databases, and then click Add a database. We will be prompted with a Metabase's setup field. Fill out the field with the connection string from the Neon console. The string can be broken down like so:

    # connection url breakdown: postgres://[user]:[password]@[neon_hostname]/[dbname]
    DATABASE TYPE='PostgreSQL'
    DISPLAY NAME='PostgSQL database' # The display name for the database in the Metabase interface
    HOST='neon_hostname' # eg 'ep-silent-sound-n9ittsn1.us-west-2.aws.neon.tech'
    PORT='5432' # default postgress port
    DATABASE NAME='dbname' # eg 'neondb'
    USERNAME='user' # eg 'neondb_owner'
    PASSWORD='password' # eg 'JOrmPQz34tAf'

Set the SSL to require. This ensures that your connection to the Neon database is encrypted for secure data transmission. Neon requires that all connections use SSL/TLS encryption.

After filling in the details, click Save. If you encounter errors while adding the Neon read replica database to Metabase, check out the Metabase documentation on adding a PostgreSQL database.

Performing analysis on Metabase

We can analyze the data now that we have successfully added our read replica database to Metabase.

On the Metabase dashboard, navigate to Browse data. This will show us all the databases we have created or added. Click on the PostgreSQL database, which we just added. We can now see the Orders, Products, and Review tables we created on the Neon console.

One thing to note is that this isn’t the actual database but a replica of the database with read-only access. Now, we can query, analyze, and do anything else with this data without affecting the original database. This is the key aspect of the read replica feature.

Let's analyze the total sum of the order by order date. We can achieve this by clicking on the Orders section and selecting the Order Total field. Finally, applying the Sum over time function will give us the desired aggregated daily order totals.

The read replica database stays in sync with the primary database. It is also asynchronous, meaning it is updated with changes made by a read-write compute as soon as those changes are processed by Safekeepers and Pageservers.

Conclusion

This tutorial explores creating read replicas in Neon, a serverless PostgreSQL solution. Read replicas offer a dedicated environment for data analysis without compromising production database performance. Unlike traditional methods, Neon doesn't copy data but efficiently routes read requests.

We built a sample e-commerce project with Neon and created a read replica. We then connected it to Metabase, a BI tool, for data exploration.

Sign up for a Neon account today and leverage the read replica feature to scale your applications and perform in-depth analytics seamlessly.

How to Create Real-time AI Video Avatar in 7 Minutes

Dalu46 — Sat, 07 Dec 2024 11:10:15 +0000

What if you could turn dull, static text and audio-based content into exciting videos with the help of AI? With AI video avatar generators, you can easily create high-quality videos that grab your audience's attention starting from simple text or audio.

These AI video generators can serve several purposes, from being deployed as a customer support agent in your application to give more engaging support and enhance customer satisfaction to being used as an educational tool to engage students in interactive learning environments. They can also be used to create virtual assistants that guide users through getting started with a product or tool without needing to go through the documentation.

This tutorial will guide you in setting up and implementing real-time AI video avatars using Simli, an AI video avatar generator. Simli provides developers with a speech-to-video API to create Lipsynced AI avatars with lifelike, animated characters, realistic head movements, and synchronized speech.

Following this guide, you will learn how to quickly create a video avatar from voice inputs, ready to be deployed in interactive projects. So, let's get started right away!

The complete source code for the project is available on GitHub.

Prerequisites

You should have:

A basic understanding of JavaScript and React.
Node and Node Package Manager (NPM) installed on your computer.

Before setting up the API environment and then moving on to creating a real-time AI video avatar using the Simli API, let's briefly look at the steps needed to create an AI video avatar with Simli.

Steps to Create an AI Video Avatar with Simli:

Obtain the API key
Choose a face ID
Initialize the Simli client
Call the simliClient.start() function to set the WebRTC connection
Stream audio using sendAudioData()

Set Up Your API Environment in Minutes

Start by signing up on Simli to retrieve your API key. For a quick sign-in, you can choose Google.
Once you’ve successfully created an account, you will be redirected to the user profile dashboard, where you can generate your API key and track your API usage.

Click the icon above to copy your API key and store it securely. After retrieving your API key, select an avatar to display on the frontend.

Choose Your AI Avatar

Simli provides sample AI avatars that can be accessed through its available faces, with new avatars being added constantly.

Here are a few of the available faces:

To get the ID for each face, copy the random text after the name. For example, the ID for Jenna will be tmp9i8bbq7c.

If you don’t want to use any available avatars, Simli has a create avatar tool that lets you create custom avatars simply by uploading images. However, this tutorial will use an existing avatar.

Now that you have the face ID and the Simli API key, let’s create a Next.js app.

Create a Next.js App

To bootstrap a Next.js application, open your terminal, cd into the directory where you would like to create the application, and run this command:

npx create-next-app@latest simli-demo

This command will prompt a few questions about configuring the Next.js application. Here’s what you should respond to each question:

Select the response for each question as shown above by pressing enter.

Installing Dependencies

Next, install the simli-client and AudioContext packages by running this code:

npm install simli-client standardized-audio-context

The SimliClient, also known as Simli’s WebRTC frontend client, is a tool to integrate real-time video and audio streaming capabilities into web applications using WebRTC. This will enable you to avoid the manual WebRTC setup.

The AudioContext is used to downsample the audio and convert it into chunks that the SimliClient can process.

Initialize the SimliClient in Your Project

In your Next.js application, navigate to the page.js file and paste the following code:

// src/app//page.js
...
// Declare video and audio ref 
... 

import { useRef, useEffect } from 'react';

function Home() {
  const videoRef = useRef(null);
  const audioRef = useRef(null);

return (
  <div>
    <video ref={videoRef} autoPlay playsInline></video>
    <audio ref={audioRef} autoPlay></audio>
  </div>
);
...

In the code above, a videoRef and audioRef was created using the useRef hook to access the <video> and <audio> HTML elements in the component. The SimliClient SDK uses videoRef and audioRef to attach live WebRTC video and audio streams to these HTML elements. The <video> and <audio> elements will be used to render the video and audio data from the remote streams on the client side.

The next step is to configure SimliClient and pass in the video and audio ref. To do so, paste the following code inside Interview.js:

// src/app//page.js
...
// configure the simli client
...  

import { SimliClient } from 'simli-client';

const simliClient = new SimliClient();

const simliConfig = {
  apiKey: "your api key",
  faceID: "tmp9i8bbq7c",
  handleSilence: true,
  maxSessionLength: 3600,
  maxIdleTime: 600,
  videoRef: videoRef,
  audioRef: audioRef,
};
...

This block of code creates a new instance of the SimliClient and a simliConfig object. Let’s break down each part of the simliConfig object:

apiKey: This is a unique key when creating an account with Simli.
faceID: Represents the avatar face ID that will be rendered in the video stream. Simli provides different avatars; you can choose one using its face ID.
handleSilence: This boolean indicates whether the client should handle silent moments in the audio stream (e.g., muting or pausing the video if no audio is detected).
maxSessionLength: Sets the maximum session length (in seconds). Here, it's set to 1 hour (3600 seconds), limiting the duration of any single connection session.
maxIdleTime: Sets the maximum idle time (in seconds). The session will disconnect after 600 seconds (10 minutes) without activity.
videoRef and audioRef: These are references to the video and audio elements where the media streams will be displayed in the browser. SimliClient can connect the WebRTC streams directly to these elements by passing these refs.

Start Real-time Streaming with AI Video Avatar

Once you have successfully configured SimliClient, the next step is establishing the webRTC connection.

But before that, you need to create a function that will reduce the audio to 16 kHz and break it into smaller pulse-code modulation (PCM) chunks. This guide will use a prerecorded mp3 audio that will be sent to the SimliClient. You can download and use any audio of your choice.

Paste the following code inside page.js file to create the downsampleAndChunkAudio function:

// src/app//page.js
...
// Downsample the audio to PCM chunks
... 

const downsampleAndChunkAudio = async (audioUrl, chunkSizeInMs = 100) => {
  // Create an AudioContext with a target sample rate of 16kHz
  const audioContext = new AudioContext({ sampleRate: 16000 });
  // Fetch and decode audio file
  const response = await fetch(audioUrl);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  // Extract PCM data from audio buffer
  const rawPCM = audioBuffer.getChannelData(0); // assuming mono audio for simplicity
  // Calculate chunk size in samples (16-bit PCM)
  const chunkSizeInSamples = (chunkSizeInMs / 1000) * 16000;
  const pcmChunks = [];
  // Loop through the raw PCM data and create chunks
  for (let i = 0; i < rawPCM.length; i += chunkSizeInSamples) {
    const chunk = rawPCM.subarray(i, i + chunkSizeInSamples);
    // Convert each chunk to Int16Array PCM data
    const int16Chunk = new Int16Array(chunk.length);
    for (let j = 0; j < chunk.length; j++) {
      int16Chunk[j] = Math.max(-32768, Math.min(32767, chunk[j] * 32768));
    }
    pcmChunks.push(int16Chunk);
  }
  return pcmChunks;
};

This downsampleAndChunkAudio function takes audio as an argument and processes the audio file by downsampling it to 16 kHz and breaking it into smaller PCM chunks. This format is required for audio to be sent to the SimliClient.

Next, you have to initialize SimliClinet and establish the WebRTC connection. To do so, paste the following code inside page.js file:

// src/app//page.js
...
// Initialize simli client
... 

async function initializeClient() {
   try {
     simliClient.Initialize(simliConfig);
     await simliClient.start();
     // setIsInitialized(true);
     // Send audio data in chunks
     const pcmChunks = await downsampleAndChunkAudio(audioUrl);
     const interval = setInterval(() => {
       const chunk = pcmChunks.shift();
       // if (isInitialized && chunk) {
         chunk && simliClient.sendAudioData(chunk);
       // }
       if (!pcmChunks.length) clearInterval(interval);
       console.log("PCM ", chunk);
     }, 120);
   } catch(error){
     alert(error);
   }
 }

The initializeClient function initializes the SimliClient with the simliConfig object that was earlier declared. It then calls the downsampleAndChunkAudio function to break the audio into chunks of type PCM16 before sending it to the Simli client.

Note: The audio data should be of PCM16 type and have a sample rate 16KHz.

PCM16 is a standard audio format ideal for voice processing. When you send this audio format to Simli's API, it helps maintain synchronization between the audio and the avatar's lip movements. This enhances the viewer experience, as it mimics natural speaking in real-time.

Render and Integrate the AI Avatar on the Frontend

Now that you have finished building the application, let’s render it on the browser. To do so, open your terminal and run this code:

npm run dev

This command will start a local host server on http://localhost:3000.

Watch the application in action through this video.

You should checkout this GitHub repository to explore a hands-on example on how to integrate Simli's API for building interactive AI avatars.

Conclusion

This quick guide showed how to create a real-time AI video avatar using the Simli API. While this article covered only the basics—such as sending prerecorded audio to the Simli API—Simli offers capabilities that extend far beyond this scope.

To unlock Simli's full potential, you can enhance your AI video avatars by integrating additional tools like OpenAI for language models and Deepgram or Elevenlabs for converting text to speech. These tools work seamlessly with Simli to create more engaging and interactive video experiences.
Check this tutorial for a more advanced use case of Simli. Sign up on Simli today to get started!

Turn Job Descriptions Into Recruitment Video With AI

Dalu46 — Tue, 19 Nov 2024 13:28:16 +0000

According to Statistics by the Genius, 60% of job seekers quit because the interview process is too long or complicated, and the average process takes about 23 days.

The traditional recruitment process is time-consuming and prone to bias. Instead of interviewing each candidate individually, you can use an AI avatar to simultaneously conduct interviews with all candidates. This way, you no longer need to wait as long as 23 days as the recruitment process can be completed in two to three days.

This article will guide you through building a recruitment AI video avatar that will interview prospective candidates using Simli’s API. It will show how to build an application that can turn job descriptions into interactive interviews, streamlining your hiring process and improving the candidate experience.

Prerequisites

To follow along with this tutorial, make sure you have the following:

An understanding of JavaScript and React.
Node and the Node Package Manager installed.
A Simli account. To get started, create a free Simli account.
An OpenAI account.

You can find the complete source code on GitHub.

Generate Interview Questions With OpenAPI

OpenAI provides APIs that use a large language model trained on large quantities of data to generate text from a prompt. One of these APIs is the chat completions endpoint. By using this endpoint and providing a job description as a prompt, you can generate customized interview questions.

Once the questions are generated, the next step is to convert them to audio so they can be sent to the SimliClient API, which will generate a Lipsynced AI avatar to interview the applicant. Simli is an AI video generator that provides you with a speech-to-video API to create video AI avatars.

Also, OpenAI provides an audio API with a speech endpoint based on its TTS (text-to-speech) model. This speech endpoint requires three key inputs: the model, the text to be converted into audio, and the voice for audio generation. This functionality will be used to convert the generated questions to audio.

Here’s How The Application Will Work

The recruiter enters a job description that is sent to OpenAI’s chat completions API.
The API returns a list of interview questions as text.
These questions are then sent to the speech endpoint, where they are converted into audio.
Finally, the audio is sent to Simli’s API, which generates a realistic, lip-synced video avatar to deliver the questions, creating an interactive and engaging interview experience for candidates. ## Set Up Your API Environment

Simli’s endpoint requires an API key, which you can get by creating a Simli account. Once you’ve successfully created an account, you will be redirected to the user profile dashboard, where you can generate your API key and track your API usage.
Click the copy button and save it.

Next, create an account on OpenAI to receive the API key. Once you create an account, you’ll be redirected to the profile dashboard. On the dashboard, navigate to the API keys section.

In the API keys section, click Create new secret key, give the key a name, and click Create secret key button.

Your secret key will now be generated. Be sure to copy and store it in a secure location to retrieve it later easily.

Note: The OpenAI real-time API is in beta and only available for paying users.

With your API keys ready, you can build your AI-driven interview experience. The next step is selecting an AI avatar that aligns with your brand and hiring role.

Choosing Your AI Avatar for Recruitment

When selecting an avatar for your AI recruiter, consider the desired brand image and the role you're hiring for. This tutorial will use the 'Franco' avatar, which was randomly chosen. You can explore Simli's library of avatars to find the perfect fit for your needs.

Simli has a create avatar tool that allows users to create custom avatars by uploading images. Consider using this feature if none of the available faces suit your needs.

Here’s a picture of Franco in the red box:

Once you’ve selected your avatar, let’s bring it to life by building a Next.js application.

Setting Up the Next.js Project

To get started, create a Next.js app by running the following command:

npx create-next-app@latest interview-simli

This command will prompt a few questions about configuring the Next.js application. Here's the response to each question:

Next, navigate to the application and install dependencies. Run the following command:

cd recruitment-video-app
npm install simli-client openai github:openai/openai-realtime-api-beta

The SimliClient is a tool for integrating real-time audio and video streaming capabilities into your web applications using WebRTC.

Once the project is set up, run the development server:

npm run dev

Your Next.js project should now be running at http://localhost:3000.

In your project's root directory, create a .env file and store the Simli and OpenAI API key credentials as shown below.

NEXT_PUBLIC_SIMLI_API_KEY="your simli api key"
NEXT_PUBLIC_OPENAI_API_KEY="your openai api key"

Create Real-time Video Interactions With Applicants

In your project, Navigate to the src/app folder, create a components folder, and create an Interview.js file. This component will set up the interactive interview interface where users can initiate and respond to interview questions generated by an AI avatar.

First, you need to declare state variables and references that help control and monitor different aspects of the component. To do so, paste the following code snippet:

// src/app/components/Interview.js
// State management
//...
const [isLoading, setIsLoading] = useState(false);
const [isAvatarVisible, setIsAvatarVisible] = useState(false);
const [error, setError] = useState("");
const [isRecording, setIsRecording] = useState(false);
const [userMessage, setUserMessage] = useState("...");
// Refs for various components and states
const videoRef = useRef(null);
const audioRef = useRef(null);
const openAIClientRef = useRef(null);
const audioContextRef = useRef(null);
const streamRef = useRef(null);
const processorRef = useRef(null);
// New refs for managing audio chunk delay
const audioChunkQueueRef = useRef([]);
const isProcessingChunkRef = useRef(false);
//...

This code block declares different state variables to track isLoading, isAvatarVisible, error and userMessage state.
It also creates multiple refs. Let’s look at what each one does:

videoRef and audioRef provide direct access to the video and audio elements. They are required for configuring the SimliClient.
audioContextRef and processorRef manage audio processing and encoding, which is critical for capturing and sending audio data.
audioQueueRef is a buffer for audio chunks, ensuring seamless audio playback by queuing chunks until they’re ready to be sent. The SimliClient requires the audio to be sent in chunks in PCM16 format, with a 16KHz sample rate.

Simli Client Initialization

Now, let’s initialize the Simli client. Paste the following code snippet inside the Interview.js file:

// src/app/components/Interview.js
...
// Initializes the Simli client with the provided configuration
...
const initializeSimliClient = useCallback(() => {
   if (videoRef.current && audioRef.current) {
     const SimliConfig = {
       apiKey: process.env.NEXT_PUBLIC_SIMLI_API_KEY,
       faceID: simli_faceid,
       handleSilence: true,
       maxSessionLength: 60, // in seconds
       maxIdleTime: 60, // in seconds
       videoRef: videoRef,
       audioRef: audioRef,
     };
     simliClient.Initialize(SimliConfig);
     console.log("Simli Client initialized");
   }
 }, [simli_faceid]);
//...

This code block above initializes and configures a new instance of the SimliClient. Let’s break down each part of the SimliConfig function:

apiKey: This is Simli API key.
faceID: Represents the avatar face ID that will be rendered in the video stream.
handleSilence: This boolean indicates whether the client should handle silent moments in the audio stream (e.g., muting or pausing the video if no audio is detected).
maxSessionLength: Sets the maximum session length (in seconds).
maxIdleTime: Sets the maximum idle time (in seconds). The session will disconnect after 600 seconds (10 minutes) without activity.
videoRef and audioRef: These are references to the video and audio elements where the media streams will be displayed in the browser.

OpenAI Client Initialization

The next step is to initialize the OpenAI client. To do so, paste the following code inside the Interview.js file:

// src/app/components/Interview.js
...
// Initializes the OpenAI client, sets up event listeners, and connects to the API
...
const initializeOpenAIClient = useCallback(async () => {
  try {
    console.log("Initializing OpenAI client...");
    openAIClientRef.current = new RealtimeClient({
      apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
      dangerouslyAllowAPIKeyInBrowser: true,
    });
    await openAIClientRef.current.updateSession({
      instructions: initialPrompt,
      voice: openai_voice,
      turn_detection: { type: "server_vad" },
      input_audio_transcription: { model: "whisper-1" },
    });
    // Set up event listeners
    openAIClientRef.current.on(
      "conversation.updated",
      handleConversationUpdate
    );
    openAIClientRef.current.on("conversation.interrupted", () => {
      interruptConversation();
    });
    openAIClientRef.current.on(
      "input_audio_buffer.speech_stopped",
      handleSpeechStopped
    );
    // openAIClientRef.current.on('response.canceled', handleResponseCanceled);
    await openAIClientRef.current.connect();
    console.log("OpenAI Client connected successfully");
    setIsAvatarVisible(true);
  } catch (error) {
    console.error("Error initializing OpenAI client:", error);
    setError(`Failed to initialize OpenAI client: ${error.message}`);
  }
}, [initialPrompt]);
//...

The function initializeOpenAIClient initializes the OpenAI client, which will handle real-time conversations with the applicant. The client is set up with an API key and an initial message that welcomes the user to the interview. After that, the event listeners are added to manage mistakes and updates within the conversation. Once the client is configured, isAvatarVisible is set to true, which makes the avatar appear in the user interface.

Note: Setting dangerouslyAllowAPIKeyInBrowser to true is generally for development or prototyping, as your OpenAI API key could be exposed to the client-side, which is vulnerable. In a production environment, API calls are better handled on the server side by creating a secure Next.js API route, which keeps your key hidden.

Audio Processing and Sending

You need to create a function to reduce audio to 16 kHz and break it into smaller PCM chunks. To do so, paste the following code inside Interview.js file:

// src/app/components/Interview.js
...
// Downsamples audio data from one sample rate to another
...
const downsampleAudio = (
  audioData,
  inputSampleRate,
  outputSampleRate
) => {
  if (inputSampleRate === outputSampleRate) {
    return audioData;
  }
  const ratio = inputSampleRate / outputSampleRate;
  const newLength = Math.round(audioData.length / ratio);
  const result = new Int16Array(newLength);
  for (let i = 0; i < newLength; i++) {
    const index = Math.round(i * ratio);
    result[i] = audioData[index];
  }
  return result;
 };
 //...

Sending Audio Data To Simli

To send audio data to SimliClient for playback, you’ll create a function. To do so, paste the following code snippet:

// src/app/components/Interview.js
...
// Processes the next audio chunk in the queue.
...

const processNextAudioChunk = useCallback(() => {
  if (
    audioChunkQueueRef.current.length > 0 &&
    !isProcessingChunkRef.current
  ) {
    isProcessingChunkRef.current = true;
    const audioChunk = audioChunkQueueRef.current.shift();
    if (audioChunk) {
      const chunkDurationMs = (audioChunk.length / 16000) * 1000; // Calculate chunk duration in milliseconds
      // Send audio chunks to Simli immediately
      simliClient?.sendAudioData(audioChunk);
      console.log(
        "Sent audio chunk to Simli:",
        chunkDurationMs,
        "Duration:",
        chunkDurationMs.toFixed(2),
        "ms"
      );
      isProcessingChunkRef.current = false;
      processNextAudioChunk();
    }
  }
 }, []);
//...

The processNextAudioChunk function checks if there are any chunks in audioQueueRef. If so, it takes the next chunk, sends it to Simli for playback, and removes it from the queue. This ensures that only one chunk is sent at a time, providing a smooth playback experience for the user without overlapping audio. Then, recursively call the function to process the next chunk in the queue.

Handle OpenAI Responses

Next, a function will be created to manage responses from the OpenAI API.

// src/app/components/Interview.js
...
// Handles conversation updates, including user and assistant messages
...
const handleConversationUpdate = useCallback((event) => {
  console.log("Conversation updated:", event);
  const { item, delta } = event;
  if (item.type === "message" && item.role === "assistant") {
    console.log("Assistant message detected");
    if (delta && delta.audio) {
      const downsampledAudio = downsampleAudio(delta.audio, 24000, 16000);
      audioChunkQueueRef.current.push(downsampledAudio);
      if (!isProcessingChunkRef.current) {
        processNextAudioChunk();
      }
    }
  } else if (item.type === "message" && item.role === "user") {
    setUserMessage(item.content[0].transcript);
  }
 }, []);
//Handles interruptions in the conversation flow.
const interruptConversation = () => {
  console.warn("User interrupted the conversation");
  simliClient?.ClearBuffer();
  openAIClientRef.current?.cancelResponse("");
};
//...

The code above defines two functions: handleConversationUpdate and interruptConversation. The handleConversationUpdate function first checks if the message is from the assistant. Then, it checks If the assistant’s message includes audio data; if true, it uses the downsampleAudio function to convert the audio to a lower sample rate (24,000 Hz to 16,000 Hz).

This downsampled audio is added to audioChunkQueueRef.current, a reference for storing audio chunks. If no chunk is being processed, the processNextAudioChunk() function (which we have previously declared) is called to start processing the audio chunks.

The interruptConversation function handles conversation interruption. If the user interrupts the interviewer, the function clears the SimliClient buffer and cancels the ongoing response from the OpenAI API.

Audio Recording

Next, let’s create functions to handle audio recording when the prospective candidate is talking. Paste the following code:

// src/app/components/Interview.js
...
// Starts audio recording from the user's microphone
...

const startRecording = useCallback(async () => {
   if (!audioContextRef.current) {
     audioContextRef.current = new AudioContext({ sampleRate: 24000 });
   }
   try {
     console.log("Starting audio recording...");
     streamRef.current = await navigator.mediaDevices.getUserMedia({
       audio: true,
     });
     const source = audioContextRef.current.createMediaStreamSource(
       streamRef.current
     );
     processorRef.current = audioContextRef.current.createScriptProcessor(
            2048,
            1,
            1
          );
     processorRef.current.onaudioprocess = (e) => {
       const inputData = e.inputBuffer.getChannelData(0);
       const audioData = new Int16Array(inputData.length);
       let sum = 0;
       for (let i = 0; i < inputData.length; i++) {
         const sample = Math.max(-1, Math.min(1, inputData[i]));
         audioData[i] = Math.floor(sample * 32767);
         sum += Math.abs(sample);
       }
       openAIClientRef.current?.appendInputAudio(audioData);
     };
     source.connect(processorRef.current);
          processorRef.current.connect(audioContextRef.current.destination);
     setIsRecording(true);
     console.log("Audio recording started");
   } catch (err) {
     console.error("Error accessing microphone:", err);
     setError("Error accessing microphone. Please check your permissions.");
   }
 }, []);

// Stops audio recording from the user's microphone

const stopRecording = () => { const stopRecording = useCallback(() => {
   if (processorRef.current) {
     processorRef.current.disconnect();
     processorRef.current = null;
   }
   if (streamRef.current) {
     streamRef.current.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
   }
   setIsRecording(false);
   console.log("Audio recording stopped");
 }, []);
//...

Here’s what each function does:

startRecording:
- Requests microphone access, creates an audio context and streams audio data.
- Audio data is captured, converted to PCM format for compatibility, and sent to the OpenAI client for processing.
stopRecording: Closes the audio context and disconnects the processor.

Interaction Start and Stop

// src/app/components/Interview.js
...
// Handles starting the interaction
...
const handleStart = useCallback(async () => {
  setIsLoading(true);
  setError("");
  try {
    await simliClient?.start();
    await initializeOpenAIClient();
  } catch (error) {
     console.error("Error starting interaction:", error);
     setError(`Error starting interaction: ${error.message}`);
  } finally {
     setIsAvatarVisible(true);
     setIsLoading(false);
        }
      }, [initializeOpenAIClient]);

      // Handles stopping the interaction, cleaning up resources and resetting states.

const handleStop = useCallback(() => {
  console.log("Stopping interaction...");
  setIsLoading(false);
  setError("");
  stopRecording();
  setIsAvatarVisible(false);
  simliClient?.close();
  openAIClientRef.current?.disconnect();
  if (audioContextRef.current) {
    audioContextRef.current.close();
  }
  stopRecording();
  onClose();
  console.log("Interaction stopped");
 }, [stopRecording]);

In the code above, the handleStart function initializes the interaction by starting the necessary clients and preparing the interface for recording. By calling the simliClient?.start() method, the SimliClient initiates a WebRTC handshake to negotiate a connection between the client and Simli's server.

The handleStop function stops the interaction by calling the simliClient?.close() method, cleaning up used resources, like client connections, and updating the loading and avatar visibility states.

Component Mount and Cleanup

Finally, for this component, we need to initialize the simliClient when the component mounts. Paste the following code:

// src/app/components/Interview.js
...
// Effect to initialize Simli client once the component mounts and clean up resources on unmount
... 

useEffect(() => {
  initializeSimliClient();
  if (simliClient) {
    simliClient?.on("connected", () => {
      console.log("SimliClient connected");
      const audioData = new Uint8Array(6000).fill(0);
      simliClient?.sendAudioData(audioData);
      console.log("Sent initial audio data");
      startRecording();
    });
    simliClient?.on("disconnected", () => {
      console.log("SimliClient disconnected");
    });
  }
  return () => {
    try {
      simliClient?.close();
      openAIClientRef.current?.disconnect();
      if (audioContextRef.current) {
        audioContextRef.current.close();
      }
    } catch {}
  };
}, [initializeSimliClient]);

This useEffect hook initializes the simliClient when the component mounts, setting up event listeners for when it connects or disconnects. On connection, it sends a silent audio signal to keep the connection alive and starts recording audio. The cleanup function, triggered on component unmount, closes simliClient, and disconnects the OpenAI client.

Next, navigate to the src/app/pages.js file and paste the following code:

// src/app/components/Interview.js
...
// configure the avatar and display the home page
... 
"use client";
import React, { useState, useEffect } from "react";
import Interview from "./components/Interview";

const Demo = () => {
  const [jobDescription, setJobDescription] = useState("");
  const avatar = {
    name: "Frank",
    openai_voice: "alloy",
    simli_faceid: "5514e24d-6086-46a3-ace4-6a7264e5cb7c",
    initialPrompt: `Your name is Frank, an interviewer hiring for a specific role. You are looking for a candidate whose expertise aligns closely with the following job description: ${jobDescription}. Please generate three interview questions that assess key qualifications and relevant experience. Begin by introducing yourself and asking the interviewee to share a bit about their background.`,
  };
  return (
    <div className="bg-black min-h-screen flex flex-col items-center font-abc-repro font-normal text-sm text-white p-8">
      <div className="flex flex-col items-center mt-4">
        <label htmlFor="job-description" className="font-bold mb-2">
              Add Job Description
        </label>
        <textarea
              id="job-description"
              placeholder="Enter job description, e.g., Responsibilities, Requirements"
              value={jobDescription}
              onChange={(e) => setJobDescription(e.target.value)}
              className="p-2 border border-gray-300 rounded-md w-80 h-24 resize-none mb-4 text-black"
            />
      </div>
      <div className="flex flex-col items-center gap-6 bg-effect15White p-6 pb-[40px] rounded-xl w-full">
        <div>
          <Interview
            openai_voice={avatar.openai_voice}
            simli_faceid={avatar.simli_faceid}
            initialPrompt={avatar.initialPrompt}
          />
        </div>
      </div>
    </div>
  );
};
export default Demo;

This code handles the job description input from the recruiter and passes it to the initial prompt, the face ID, and the OpenAI voice that should be sent to the OpenAI API. Then, it is passed on as props to Interview.js. component.

The Final Result

To test the app, the user inputs the job description in a text area, which OpenAI API processes. The OpenAI API uses this prompt to generate three questions for the avatar to ask the applicant.
Here's the video link to see how the application works:

Conclusion

By leveraging SimliClient and OpenAI, this guide provides a comprehensive solution to the problem of time-consuming recruitment by building an application that converts static job descriptions into dynamic, interactive interview videos. Combining these tools is a game-changer because together they can be utilized to automate the initial candidate screening process and ease the stress of going through the traditional recruitment process.

Simli’s API comes with a free plan. Sign up on Simli today to get started.

Building Secure Private Screens in React

Dalu46 — Thu, 25 Jul 2024 11:43:56 +0000

Introduction

Most modern applications require creating private or restricted pages, documents or even features only accessible to authorized users. This could include financial dashboards and collaborative documents to confidential project plans. One thing that is critical in building modern applications is to ensure that only the right users have access to confidential pages in your application.
Traditionally, implementing fine-grained access control in your application requires significant development effort and time. Fortunately, Permit Share-If offers a streamlined solution. By providing pre-built, embeddable UI components for access sharing, Permit Share-If simplifies managing user permissions.
This article will guide you through a step-by-step process of integrating the Permit.io request access element into a React application to enable you to build private screens in your application.

Prerequisite

Knowledge of JavaScript, React, and a bit of Nodejs
A Permit.io account # Authentication vs Authorization

Before going forward, it is important to understand the core difference between authentication and authorization, as some people are still unclear about this.
Authentication is concerned with verifying the identity of a user’s credentials, such as username and password, before granting them access. Conversely, authorization determines what a user can access in a system. Authentication is a prerequisite to authorization.
An example of authentication is logging into an application with a username and password using fingerprints or OTPs. An example of authorization is requesting and getting access to become an editor for a document on Google Docs.

What is Permit.io?

Permit.io is a full-stack authorization-as-a-service that simplifies managing authorization for any application, eliminating the need for developers to build complex authorization systems from scratch. It supports multiple authorization models, including RBAC(Role-based access control), ABAC (Article-based access control), and ReBAC (Relationship-based access control). It integrates swiftly with your dev workflow, leveraging APIs, Terraform providers, and SDKs for various languages.
In this article, to proceed in building private screens in a react application, we will use a Permit.io feature called Access Request Element. This Access-Request Element is a frontend component that enables users to request access to resources, pages on your application, or documents that are restricted or require certain permissions. Once the request is sent from your application, the workspace owner or admin receives it and can decide to approve or deny it.

Implementing Access Request Element

As mentioned earlier, the access request element is a frontend component that allows users to send access requests via a dedicated UI embedded into your application. To use the element, you just have to embed it into your frontend application, and then, by clicking the “Request Access” button, users can request access to restricted resources.
Note: It is vital to have a User Management Element in place first to use the Access Request Element. The workspace owner can review submitted access requests in the User Management Element.
To create a User Management element, navigate to the Permit dashboard, and on the sidebar, click on elements, click on C*reate element* under User Management. Choose the roles for each level and click on Create.

Creating the Request Access Element

To create the Request Access Element, navigate to the management element on the new project you just created, click on elements on the sidebar, and under Access Request, click on Create Element.

You’ll be prompted with a dialog box. First, choose the User Management Element that you want to connect to your Access Request Element, in this case, private-screen, then give the element a name and click Create.

You will need to do the same for the User Management element. Navigate to the User Management element and connect the Request Access element.

Generating the iFrame

After successfully creating the Request Access element, the next step is to get the generated iframe code and embed it in your application; in this case, your React application.
On the Permit dashboard, under the Access Request element, you’ll find the new request-access-tut element that we created. Click on Get Code.

NOTE: It is necessary to select the Tennant appropriate for this element to make it work properly. For this tutorial, we will use the default tenant.
The generated iframe will look similar to this:

    <iframe
            title= “Permit Element Name”
            src="<https://embed.permit.io/><ELEMENT_NAME>?envId=<SOME_UNIQUE_ID>&darkMode=false&resourceInstanceKey=<RESOURCE_INSTANCE_KEY>&tenantKey=<TENANT_KEY>"
            width= “100%”
            height= “100%”
            style= “border: none;”
    />

The iframe must be embedded after it is generated. You’ll need to establish a login to do that. I’ll guide you through the login process in the next section.

Creating React App

To test out the newly generated iframe, let’s bootstrap a simple React app like so:

npx create-react-app private screen

Install the required dependency

npm install –-save @permitio/permit-js

We first need to configure a backend route using one of the options provided by permit.io, which is either cookies, headers, bearer tokens, or a frontend-only method. We’d be using the login with cookie method for this tutorial.
Note: It is important to use the same login method on the backend and frontend.

Creating the backend route

I have initialized a backend server using Node.js. In your React application, create a backend folder, and in the backend folder, create a server.js file. Paste the following code into the file, then let’s go over explaining each line of the code:

    const { Permit } = require("permitio");
    const express = require("express");
    const path = require("path");
    jav 
    require("dotenv").config({ path: path.resolve(__dirname, "../.env") });
    const app = express();
    const port = 8080;
    console.log(process.env.PERMIT_KEY_SECRET);
    const PERMIT_KEY_SECRET = YOUR_API_KEY; // your api key gotten from the permit dashboard
    const USER_KEY = "paul@gmail.com";
    const TENANT_ID = YOUR_TENANT_ID; // the tenant for your project, usually 'default'
    const permit = new Permit({ token: PERMIT_KEY_SECRET });
    app.get("/login_cookie", async (req, res) => {
      console.log("login_cookie");
      const ticket = await permit.elements.loginAs({
        userId: USER_KEY,
        tenantId: TENANT_ID,
      });
      res.status(302).redirect(ticket.redirect_url);
    });
    app.listen(port, () => {
      console.log(`Example app listening at <http://localhost>:${port}`);
    });

At the top, I have declared two main variables, which are the PERMIT_KEY_SECRET which is your API key, and TENANT_ID, which is the default tenant. I set the current user as myself but generally, this user will be the one that has been authenticated by your application through an authentication provider.

To get your Permit API key, go to your dashboard, click on Projects, then click on the project and environment (i.e., development) to connect to. Click on the menu icon on the top right of the environment element and click on Copy API Key. Traditionally, you’d need to store the key in an env variable.
After declaring the tenant, the next thing is to initialize Permit, and then define the endpoint /login_cookie using app.get.

Next, we login the user to Permit using the loginAs function, which takes two parameters: a userId, and a tenant_key or tenantId.
The route redirects the user to the redirect_url provided in the login ticket using a 302 (Found) status code.

Login the User on the Frontend

In the src of the application, create a Login.js file and paste the following code into the file:

    import React, { useState } from "react";
    import permit, { LoginMethod } from "@permitio/permit-js";
    import { btnStyle } from "./Home";

    const Login = () => {
      const [isLogin, setIsLogin] = useState(false);
      const tenantKey = "default";
      const backendUrl = `http://localhost:8080/login_cookie`;
      const login = () => {
        permit.elements
          .login({
            loginUrl: backendUrl,
            tenant: tenantKey,
            loginMethod: LoginMethod.cookie,
          })
          .then((res: any) => {
            console.log("res", res);
            setIsLogin(true);
          })
          .catch((err: any) => {
            console.log("err", err);
            setIsLogin(false);
          });
      };
      return (
        <div>
          <button
            style={btnStyle}
            onClick={() => {
              login();
            }}
          >
            login
          </button>
          <button
            style={btnStyle}
            onClick={() => {
              permit.elements.logout();
            }}
          >
            logout
          </button>
          {isLogin && <div>Logged in</div>}
        </div>
      );
    };
    export default Login;

First, we created an isLogin state to track when a user is logged in. Then, we use the login method to log in the user to Permit. The login method accepts three parameters: loginUrl, tenant, and a LoginMethod.

loginUrl: This is the URL you created in the previous stage (backend).
LoginMethod: The backend login mechanism that you are utilizing.
Tenant (Optional): The tenant name that the user belongs to

Once the login is successful, we update the i’sLogin “state to true. Finally, we set an onClick handler to enable users to log in and out.

Creating the Access Request and User Management Pages

Next, create a UserManagement.js file and paste the generated User Management iframe code. The User Management element will be used by the admin to approve or deny users access to the restricted page. After that, create a RequestAccess.js file and paste the generated Request Access iframe code into it.

 import React from “react”;
    const RequestAccess = () => {
      // TODO paste your iframe code here
      return (
        <div style={{ height: "60vh", width: "80%", margin: "0 auto"}}>
          <iframe
            title= "Permit Element Name"
            src="<https://embed.permit.io/><ELEMENT_NAME>?envId=<SOME_UNIQUE_ID>&darkMode=false&resourceInstanceKey=<RESOURCE_INSTANCE_KEY>&tenantKey=<TENANT_KEY>"
            width= "100%"
            height= "100%"
          />
        </div>
      );
    };
    export default RequestAccess;

Now create a Home.js file and paste the following code:

    const Home = () => {
      const nav = useNavigate();

    return (
        <div>
          <Login />
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <div>
              <button
                style={btnStyle}
                onClick={() => {
                  nav(`/request-access`);
                }}
              >
                View Private Screen
              </button>
            </div>
          </div>
        </div>
      );
    };
    export default Home;

In the Home component, we’ve created a View Private Screen button and set the navigation to the RequestAccess page. Once a user clicks on it, it directs them to first request for access, and when they are granted access, it redirects them to the restricted page.
Now create a PrivatePage.js file and paste the following code:

import React from “react”;
            const PrivatePage = () => {
                    return (
                            <div style={{ height: “60vh”, width: “80%”, margin: “0 auto”}}>
                                    <p>This is a Private page. You are only here because you were granted access</p>
                            </div>
                    );
            };

            export default PrivatePage;

Finally, paste the following code into the `App.js` file while I explain below:

    import React, { useState, useEffect } from 'react';
    import RequestAccess from "./RequestAccess";
    import PrivatePage from "./RequestAccess";
    import Home from "./components/Home";

    function App() {
      const [accessGranted, setAccessGranted] = useState(null);
      const [message, setMessage] = useState('');
      const cookie = '<COOKIE FROM LOGIN>' // Replace with your actual cookie value 
      const element_id = 'ELEMENTS_CONFIG_ID' 
      const project_id = '{project_id}' // Replace with your project ID 
      const env_id = '{env_id}' // Replace with your environment ID 
      const access_request_id = '{access_request_id}' // Replace with your access request ID

      useEffect(() => {
        const checkAccess = async () => {
          try {
            fetch(`https://api.permit.io/v2/facts/${projectId}/${envId}/access_requests/${accessRequestId}`, {
            method: 'GET',
            headers: {
            'cookie': cookie,
            'element_id': elementId
          }
      })
      .then(response => response.json())
      .then(data => {
      console.log('Access request data:', data);
      if (data.status === 'approved') {
        setAccessGranted(true);
        } else {
          setAccessGranted(false);
        }
      })
      .catch(error => {
      console.error('Error fetching access request:', error);
      setAccessGranted(false)
      });
      checkAccess();
      }, []);
        return ( 
          <div className="App"> 
            <BrowserRouter> 
                <Home /> 
                <Routes> 
                  <Route path="/" element={<div />} /> 
                  {accessGranted ? ( <Route path="/private-page" element={<PrivatPage />} /> ) : ( <Route path="/embed" element={<RequestAccess />} /> )} 
              </Routes>
           </BrowserRouter> 
         </div> 
      ); 
    }
    export default App;

First, we have set up a state to track when the user has been granted access to the restricted page. Next we use the API provided by Permit to check the status of a request if it is approved or not. This API takes four parameters:

cookie: This is the cookie you have extracted from logging in a user into Permit
element_id = The element_id is the text after the domain on the iframe’s src
project_id: This is the id of your project. Follow this link to get your project id
env_id = Env id. Follow this link to get your env id
access_request_id: The id of the access request you want to check. Follow this link to get an access_request id.

Once this request is successful, we check to see if the status from the data is “approved” or not and set the accessGranted state based on the status. Then we check in the UI code to know if a user has been granted access and show them either the Private Page if they have been granted access or the Request Access element if they haven’t.

An image of the element_id

Running the Application

Spin up the local server for the frontend application using npm start and then spin up the server by navigating to the server folder in your terminal and running the command node server.js

When the user clicks the View Private Screen button, the Request Access elements pop up. Once they request access, it is sent to an admin for approval.
After sending the access request with a viewer account, I logged in with an admin account. I navigated to the User Management page just to show how easy it is to accept or reject the viewer account request to access the private screen that I’ve created.

Admin (user management element)
Now, as an admin, I can approve or deny access to my restricted page. Once the admin approves, then the user who requested access gets access the the restricted/private page.

Conclusion

In this article, we learned how to create private/restricted screens in React leveraging Permit.io’s Access Request element which saves the time and effort that would have been spent on trying to implement this feature from scratch.
Resources:

Learn more on Access Request
Learn more about User Management
Learn more about Permit

CTA:
Ready to revolutionize your application’s access control? Check out Permit Share-If on Product Hunt and learn how it can transform your development process.

Build a simple contact manager with PostgREST, Railway, and Postgres

Dalu46 — Wed, 28 Feb 2024 10:25:55 +0000

PostgreSQL is powerful in the world of databases and is known for its robustness, extensibility, and versatility. As a relational database management system, it is the go-to choice for developers seeking data integrity, SQL support, and scalability. However, harnessing the full potential of PostgreSQL sometimes involves creating custom APIs, a task that can quickly become difficult.

But what if there were a way to seamlessly traverse this hassle, eliminating the need for manual API creation while harnessing the power of your PostgreSQL database? Meet PostgREST – the game-changer that liberates developers from the intricacies of building custom APIs. PostgREST steps in as your ally, simplifying the integration of your PostgreSQL database with the world of RESTful APIs.

This comprehensive guide will explore the seamless integration of PostgREST, Neon Postgres, and Railway to create a robust application. You will learn how PostgREST transforms your Postgres database into a RESTful API, how Neon Postgres provides serverless database management, and how Railway simplifies deployment. To illustrate this, we will build a simple contact web application that renders, adds, and deletes contact data from your Neon database.

This guide will take you through step-by-step instructions to set up Neon, configure PostgREST, and deploy a demo Next.js application on Railway. By the end, you'll have a fully functional application with live interaction between Neon Postgres, PostgREST, and Railway, showcasing the power of these tools in harmony.

What is PostgREST?
PostgREST is a tool that generates a RESTful API from your Postgres database. PostgREST automatically translates database schema, tables, and operations into a RESTful API, reducing the need for custom API development. To modify your Postgres database, you can send HTTP requests to the provided API endpoints.

What is Neon Postgres?
Neon is a serverless Postgres database that offers features such as branching, bottomless storage, and more. Neon also provides APIs and an intuitive dashboard console for managing your Postgres database.

What is Railway?
Railway is a deployment platform for running and managing your application infrastructure. Railway provides features such as an observability graph, out-of-the-box templates, integrations to popular tools, instant deployment, interactive CLI, cloud hosting, and more.

Prerequisites

To follow along fully, you‘ll need some knowledge on the following:

PostgreSQL commands
JavaScript and React fundamentals
Basic terminal commands

Set up Neon

To get started, we’ll need to create an account with Neon. After creating an account, choose a project and a database name, then click the Create Project button.

Next, you’ll see a modal containing your database connection string (in our case ”postgresql://lawrencefranklin100:7hzVnZSiG9yC@ep-old-firefly-95393312.us-west-2.aws.neon.tech/neondb?sslmode=require” ), which you will connect to PostgREST later. This string is always available on the dashboard console, so click the I’ll do this later button. Now, you should see your Neon dashboard, which should look like this:

Follow the steps below to create a table and add sample data to the database:

Click on the SQL Editor tab

Clear all text and insert the following query:

CREATE TABLE contacts (id SERIAL PRIMARY KEY, name TEXT NOT NULL, phone TEXT);
INSERT INTO contacts (name, phone) VALUES ('John Doe', '+23344874'), ('Alice Bob', '+33349847');```

These SQL commands create a table named contacts in the Neon database with three columns— id, name, and phone—and then insert two records into that table.

After running these SQL commands, you'll have a table named contacts populated with two records for John Doe and Alice Bob. The id column will be automatically populated with unique serial values due to its SERIAL type.

Click on the Run button.

Now, navigate to the Tables tab to view the sample added data:

Set up PostgREST

To use PostgREST, you have to install it. Homebrew is a simple way to install PostgREST. Type the following command into your terminal to install PostgREST:

brew install postgrest

Once the installation is completed successfully, you must connect your Neon Postgres database. To do this, create a postgrest.conf file in any folder of your choice (e.g., documents folder) and add the following content:

    # postgrest.conf

    # The standard connection URI format, documented at
    # https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING
    db-uri = ""

    # The database role to use when no client authentication is provided.
    # Should differ from authenticator
    db-anon-role = ""

    ## The name of which database schema to expose to REST clients
    db-schemas = "public"


    # The secret to verify the JWT for authenticated requests with.
    # Needs to be 32 characters minimum.
    jwt-secret = "reallyreallyreallyreallyverysafe"
    jwt-secret-is-base64 = false

    # Port the postgrest process is listening on for http requests
    server-port = 5432

NOTE: the postgrest.conf file can be created anywhere. However, it is important to remember the path to its location as this file will be used to spin up a local server to listen to HTTP requests from the demo application. Also, you can use any port (server-port) you want.

Go to your Neon console and copy your connection string. Note the structure of the string:

Add the string (wrapped in double quotes) as the db-uri value in your Postgrest.conf file. Also, add the role (as seen in the string structure above) as the db-anon-role value.

For example:

db-uri = "postgres://alex:AbC123dEf@ep-cool-darkness-123456.us-east-2.aws.neon.tech/dbname"

    db-anon-role = "alex"

The default port, i.e., server-port is 3000, but since the demo application will be run on port 3000, use port 5432.

Save the postgrest.conf file and run the following command in your terminal to start listening for HTTP requests (make sure to use the correct path where the postgrest.conf file was created e.g., postgrest user/documents/code/postgrest.conf):

postgrest path/to/postgrest.conf

After running the PostgREST command, you should see something like this:

This should spin up a local server on the port that allows you to send HTTP requests to http://localhost:5432/contacts. This endpoint represents your Neon Postgres database table (contacts). A GET request to this endpoint returns the sample data from your Neon Postgres database. To test this, send a GET request using Postman, Curl, or whatever HTTP request client you prefer.

Set up a demo project

The demo project is a basic Next.js application that renders a list of contacts that can be added and deleted from your Neon Postgres database. The application uses the endpoint provided by PostgREST to modify data in the Neon Postgres database.

To set up the demo project, clone this repo. Once you’ve cloned this repo, create a .env.local file in your project root and add the following environment variable:

NEXT_PUBLIC_URL=https://localhost:5432/contacts

This variable stores the endpoint created by PostgREST. Save the .env.local file and run the following command to preview the application:

npm run dev

This spins up a localhost where you can preview the demo application, usually on port 3000, like this: http://localhost:3000. Open this URL in your browser, and you should see the demo project with two contacts from your Neon Postgres database:

You can add or delete contacts at this stage, which should sync with the data in your Neon Postgres database. Go ahead, test it out!

Create a remote repo on your GitHub and push this project to the remote repo on GitHub. The remote repo will be used to deploy the application on Railway.

Deploy demo project to Railway

To deploy to Railway, you need a Railway account. Create a Railway account (most preferably using your GitHub). After creating an account, you should see your railway dashboard. Type cmd + K or click the New Project button to create a new project.

Follow the steps below to deploy your application:

Click on New Project
Click on Deploy from GitHub repo
Click on Configure GitHub app
Follow the prompts and grant access to your GitHub repo

Once access is granted, your repo will be listed in Railway’s New Project options. Select your repo and deploy.

After deploying, follow the steps below to run the demo application:

Click on the project.
Click on the Settings tab.
Scroll to the Public Networking section and click on the Generate Domain button. This will generate a production URL where you can preview the application.
To access the PostgREST endpoint (running on your localhost server), you must create an environment variable on Railway. Click on the Variables tab, click on the New Variable button, and then add the environment variable just like you have it in your .env.local file.

Now, your production URL should be able to render, add, and remove contacts from your Neon Postgres database.

Here’s a link to the live video of how the application works:

NEON Contact list | Opentape

Lawrence Franklin Chukwudalu - Feb 28th, 8:43am

app.opentape.io

Conclusion

At this stage, you have learned what PostgREST is and how it can connect to a Postgres database such as Neon Postgres to create RESTful API endpoints. You also learned how to build a Next.js application using the provided endpoints and deploy your application to Railway.

Neon is fast and can facilitate easy scaling of your application. In addition to its UI features, such as SQL Editor, with which you can modify your data, it also works nicely with PostgREST and Railway to alter and deploy your application.

Here are a few resources to learn more:

Develop a travel expense management app with Nextjs

Dalu46 — Tue, 11 Jul 2023 08:23:30 +0000

Creating a robust application has become essential as the need for efficient expense tracking and management becomes essential in the travel industry. Next.js, a popular React framework, provides a solid foundation for building dynamic web applications, while Appwrite simplifies backend development by offering ready-to-use features like user authentication, database management, and cloud functions.

By leveraging the power of Next.js and Appwrite, we will create a scalable and feature-rich travel expense management app that streamlines the process of tracking, managing, and analyzing travel expenses.

In this article, we will go through the step-by-step process of building this application. We will also explore Relationships in Databases, a new feature in beta (at the time of this writing) that allows us to read, update, or delete related documents together.

The complete source code for the application we will build is on GitHub; clone and fork it to get started.

Prerequisites

To follow along with this tutorial, the following are required:

Appwrite instance running on Docker. See this article to learn how to set up an Appwrite account running on Docker. We can also install Appwrite with one click on DigitalOcean or Gitpod.
A basic understanding of JavaScript, React, and Next.js.
Node installed with node package manager (NPM ). We can install them here.

Getting started with Appwrite

Appwrite is a cross-platform and framework-agnostic backend-as-a-service platform for developers to build full-stack applications. It comes with many APIs and tools, as well as a management console with a fully built-out UI that allows us to build applications much faster and more securely.

Project setup

For this project, we will use Next.js for the front end. To bootstrap a Next.js app, navigate to the desired directory and run the command below in the terminal.

npx create-next-app@latest travel-expense-app

This command will prompt a few questions about configuring our Next.js application. Here’s our response to each question:

Select No for each question and press enter.

Installing dependencies

To install Appwrite, run the command below:

npm install appwrite

For this project, we will also use Pink D esign, Appwrite's open-source, comprehensive solution for creating consistent and reusable user interfaces, to build an interactive UI for our application.

To install Pink Design, run the following command:

npm install @appwrite.io/pink

Setting up Appwrite

To set up the backend part of our project, we need to sign in to Appwrite. Head to localhost:80 on your machine, sign in, and create a new project travel-app.

PS: This article assumes we’ve already created an Appwrite instance running on Docker.

We can now create our project on any type of framework. Since we’re using Next.js, click on the Web App button.

This will take us to the Add a Web Project page. Input travel-app as the app's name, put the * symbol in the localhost input, and then click the Next button.

The next step is to create a database. Appwrite’s databases service empowers us to establish organized collections of documents, effortlessly query and refine lists of documents, and effectively administer an array of read and write access permissions.

To create a database, navigate to the Database tab, click on the Create database button, input the name of our database, which is a travel app, and then click on the Create button.

After creating the database, create a collection for storing the project details. We will create two separate collections: cost, and location. To create a collection, click the Create collection button, input the collection's name (one for cost and one for location), then click the Create button.

Next, we need to set up some attributes. We use attributes to define the structure of our documents and help the Appwrite API to validate users' input. We need only two inputs for this application: the location's name and the cost.

To create an attribute, click the Create attribute button; we will be prompted with two inputs requiring a key and a type. The key is used as an identifier for the attribute, whereas the type is the type of value we expect from the user — that is, string, Boolean, integer, etc.

We will create a name attribute whose type will be a string since we expect the user to pass a string as the location's name. We will create this attribute under the location collection.
Then we will create an amount attribute under the cost collection. Its type will be an integer. We will set them as required fields so that every location has them.

We need to update our collections’ permission. To do this, navigate to the Settings tab in the collection, scroll down to the Update Permissions section, select a new role for Any user, and click the Create, Update, Delete and Read checkboxes. This will enable anyone (user) to write, update, delete, and read from the database. We will update the permission for both the cost and location collections.

Next, create a Relationship attribute for the location collection (select Relationship as the attribute type). Select the Two-way relationship type in the Relationship modal and set cost as the related collection and cost as an attribute key. Select one-to-one as the relation (because we want each location to have a cost and each cost a location). Next, select Cascade as the desired on-delete behavior. Click the Create button to create the Relationship.

Go to the Documents section in the locations collection and click Create Document. On the Create Document page, input the location's name — here, Lagos, Nigeria — and click the Next button to create a location manually from the console.

Navigate to the Documents section on the cost collection and repeat the process above to create a cost for the location (Lagos, Nigeria) we just created. While creating this, we can see the Relationship text, which signifies that the cost collection is in “a relationship“ with the locations collection.

Next, select the id for the location we created (Lagos, Nigeria). Now whenever we make a request to any of the collections, we will get access to the others.

We can now set up our Next.js application to use Appwrite.

Fetch and render data from Appwrite

Here, we will fetch the location collection we created from Appwrite using Next.js's getServerSideProps() function provided by Next.js. In the index.js file, just below the Home function, paste the following code:

import { Client, Databases, ID } from "appwrite";

export async function getServerSideProps(context) {
  const client = new Client();
  client.setEndpoint("OUR API ENDPOINT").setProject("OUR PROJECT ID");
  const database = new Databases(client);
  const locations = await database.listDocuments(
    "OUR DATABASE ID",
    "OUR LOCATIONS COLLECTION ID"
  );
  return {
    props: { locations },
  };
}

The above code snippet does the following:

Imports the essential modules, Client, Databases, and ID.
Creates the client connection by setting the endpoints. Then it establishes the database, pulls the location from it, and returns it as props.

It is important to note that we can get our API Endpoint, Project ID, [DATABASE_ID], and [COLLECTION_ID] from the Appwrite console.

Here’s one way that shows the impressiveness of the relationships in database feature. In the snippet above, we made a request to just the locations collection, but we still get access to the cost collection.

This feature is very useful if we have many collections, as we will need to make only one request and then get access to the other collections. This saves time and reduces redundancy in code, as we wouldn’t have to make individual calls for different collections.

Next, we pass the props into the home components as locations so that we can render the list of locations in the Home components.

import { useEffect } from 'react';

export default function Home({ locations }) {
  console.log(locations);
}

Building the UI

In the index.js file inside the pages component on VS Code, paste the following code:

import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";

<div className="" style={{ boxShadow: "hsl(var(--shadow-large))" }}>
  <h3 className="heading-level-3">Travel Expense Management App</h3>
  <form onSubmit={addLocation} className="u-flex u-column-gap-24">
    <input
      onChange={handleLocationName}
      value={location}
      className="u-max-width-250 u-min-height-100-percent u-max-width-250"
      type="text"
      required
    />
    <input
      onChange={handgleCostChange}
      value={cost}
      className="u-remove-input-number-buttons u-min-height-100-percent u-max-width-250"
      type="number"
      required
    />
    <button className="button">Submit</button>
  </form>
</div>;

The above code snippet does the following:

Imports Pink Design and Pink Design icons.
Creates two input fields (one for cost, and one for location) and a submit button.
An onChange handler is set on the cost input with a reference to the handleChangeCost function, and on the locations input with a reference to the handleLocationName function, to update the cost state and locations state, as the user types in each input field.
An onSubmit handler is set on the form referencing the addLocation function we created earlier.

Pink Design provides us with components, utility classes, and more. The Pink Design utility classes used above does the following:

heading-level-3: Makes a text an h3 element
u-flex: Sets display to flex
u-min-height-100-percent and u-max-width-250: Sets the minimum height to 100 percent and the maximum width to 15.625rem
button: Gives the basic styling for a button element

To render the list of locations, create a components folder above the node modules folder. Then create a LocationList.js file and paste the following code into the file.

const LocationList = ({ locations, deleteLocation }) => {
  return (
    <div>
      <h2 className="heading-level-1">Locations</h2>
      {locations.documents.map((location) => (
        <div key={location.$id} className="card">
          {/* style={{ display: 'flex', justifyContent: 'space-between' } */}
          <ul className="list">
            <li className="list-item u-main-space-between u-flex">
              <div>
                <span
                 className="icon-arrow-circle-right u-margin-32 u-cross-center"
                    aria-hidden="true"
                ></span>
                <span className="text heading-level-4 u-cross-center">
                  {location.name} - ${location.cost.amount}
                </span>
              </div>
              <button className="tooltip" aria-label="variables info">
                <span
                  onClick={() => deleteLocation(location)}
                  className="icon-trash button"
                  ></span>
                <span className="tooltip-popup" role="tooltip">
                  Delete travel details
                </span>
              </button>
            </li>
          </ul>
        </div>
      ))}
    </div>
  );
};
export default LocationList;

The above code snippet does the following:

Accepts locations, and deleteLocation as props. Locations show the list of all the locations in our database, while deleteLocation is a function that will enable a user to delete a location from our application.
Maps through the list of locations, rendering its name and cost for every location.
Uses Pink design for styling, and Pink Design icons to create a delete icon.

We can see what our app looks like by running the following command:

npm run dev

Let’s add the logic to enable users to add both a new location and cost to the application. We’ll also look at the logic allowing users to delete a location. Finally, we’ll add the logic for displaying the total cost of all the locations.

Update the index.js file with the following syntax:

// enable user to add new location and cost
const [location, setLocation] = useState("");
const [cost, setCost] = useState(1);
const [totalCost, setTotalCost] = useState(0);
const [locationsToRender, setlocationsToRender] = useState(
  locations.documents
);

const [totalCostUpdated, setTotalCostUpdated] = useState(false);

useEffect(() => {
  const subscription = async () => {
    const client = new Client();
    client
      .setEndpoint(process.env.NEXT_PUBLIC_ENDPOINT)
      .setProject(process.env.NEXT_PUBLIC_PROJECT);
    // Subscribe to documents channel
    client.subscribe(
        `databases.${process.env.NEXT_PUBLIC_DATABASE}.collections.${process.env.NEXT_PUBLIC_COLLECTION_LOCATION}.documents`,
      (response) => {
        try {
          if (response.events[0].includes("create")) {
            setlocationsToRender([...locationsToRender, response.payload]);
          } else {
            const update = locationsToRender.filter((item) => {
              return item.$id !== response.payload.$id;
            });
            console.log(update);
            setlocationsToRender(update);
          }
        } catch (error) {
          console.log(error);
        }
      }
    );
  };
  const updateTotalCost = () => {
    const total = locationsToRender
      .map((location) => location.cost.amount)
      .reduce((acc, car) => acc + car, 0);
    setTotalCost(total);
  };
  subscription();
  updateTotalCost();
}, [totalCostUpdated, locationsToRender]);

const handleLocationName = (e) => {
  setLocation(e.target.value);
};
const handgleCostChange = (e) => {
  setCost(e.target.value);
};

const addLocation = async (e) => {
  e.preventDefault();
  const client = new Client();
  const database = new Databases(client);
  client.setEndpoint("OUR PROJECT ENDPOINT").setProject("OUR PROJECT ID");
  const response = database.createDocument(
    "OUR DATABASE ID",
    "OUR LOCATION COLLECTION ID",
    ID.unique(), // generates unique IDs
    {
      name: location, // the location state,
      cost: { amount: cost }, // the cost state
    }
  );

  response.then(function (res) {
    console.log(res);
    setTotalCostUpdated(!totalCostUpdated);
    setCost(0);
    setLocation("");
  }),
    function (error) {
        console.log(error);
    };
};

const deleteLocation = async (location) => {
  const client = new Client();
  const database = new Databases(client);
  client
    .setEndpoint(process.env.NEXT_PUBLIC_ENDPOINT)
    .setProject(process.env.NEXT_PUBLIC_PROJECT);
  const response = database.deleteDocument(
    process.env.NEXT_PUBLIC_DATABASE,
    process.env.NEXT_PUBLIC_COLLECTION_LOCATION,
    location.$id
  );
  response.then(function (res) {
    console.log(res);
    setTotalCostUpdated(!totalCostUpdated);
  }),
    function (error) {
        console.log(error);
    };
};

//paste the following code at the end of index.js file just below the list of locations
return (
  ....
  <LocationList locations={locationsToRender} />
  <h3 className="heading-level-3">Total Cost: ${value}</h3>
)

The above code snippet does the following:

Creates a cost and location state to handle user inputs for cost and location, respectively.
Creates a totalCost state to calculate the total cost of all the locations.
Creates a totalCostUpdated state to check whether the total cost has been updated. It is passed into the dependency array of the useEffect() hook to ensure that the application rerenders whenever a location is added or removed from the database.
Creates a locationsToRender state to hold locations.documents which is the list of locations passed to the Home components as props.
We create a subscription function in the useEffect() hook to subscribe to changes in the location collection documents. We then use the try-catch block to update the locationsToRender state appropriately whenever the user adds or deletes a location.
The addLocation function creates a new client connection and establishes a connection to the database. Then it uses the database.createDocument() method to create a new document in the collection.
The deleteLocation function uses the database.deleteDocument() method to remove a document from the collection.

Since we selected Cascade as the desired on-delete behavior while configuring the Relationship, both collections will be gone whenever we delete either collection. Again, that's another cool thing about the relationships in database feature.

Our final application should look like this:

https://www.loom.com/share/99e0544630a34cd99c434e6719a0f52f

Conclusion

Appwrite's Relationships feature is a powerful tool for managing databases, enabling the elimination of redundant information when working with data sets. Pink Design is a flexible framework that empowers developers to create highly responsive applications while providing extensive customization options. This winning combination enables us to rapidly build applications with captivating UIs.

Resources

Which Frontend Framework to Pick for Your E-commerce Storefront?

Dalu46 — Thu, 16 Jun 2022 11:17:51 +0000

An ecommerce storefront should provide users with the best experience to facilitate their purchases. A lot of factors can affect the user’s experience; from the quickly the pages load to the intuitive experience it provides.

However, not all ecommerce platforms provide you with the flexibility to implement a good experience in your ecommerce storefront, especially if you’re creating a custom experience based on your brand.

Medusa is an open source headless commerce with many ecommerce functionalities like an intuitive admin panel, order management, RMA flows, and much more.

Unlike other ecommerce platforms, Medusa is completely customizable and extendable, meaning that every business ranging from startups to enterprise-sized businesses can benefit from using Medusa to create personalized experiences for their own businesses and their customers.

This article introduces you to the most efficient frontend frameworks that can be the best fit for building a storefront for your headless commerce server.

8 Frontend Frameworks for your Ecommerce Storefront

Frontend frameworks help ease development processes by providing tools to simplify the creation of repetitive tasks for specific projects.

There are many frontend frameworks that are fit for building ecommerce storefronts, but it's impossible to cover all of them or a few of them extensively in a single article. For this reason, this article focuses mainly on the functionalities that the listed frameworks possess to facilitate headless ecommerce storefronts.

Next.js

Next.js is a React-based frontend framework that offers you building blocks for creating blazing-fast and user-friendly websites.

Next.js offers several functionalities such as server-side rendering (SSR) and data fetching to give faster page load and improve your end-user experience. It also offers seamless integration to third-party services which can help you create highly interactive ecommerce stores.

Medusa has a Next.js starter to help you easily spin up a Next.js ecommerce storefront within a matter of minutes and start selling your products.

Pros of Next.js

It offers a lot of features to enhance your website’s speed including image optimization and code-splitting and bundling.
It offers both SSG and SSR rendering modes.
It offers API and file system routing.
It provides detailed documentation and a library of examples to learn better how to use Next.js

Gatsby

Gatsby is a React-based static site generator that combines the functionality of React for customizing your ecommerce website structure and GraphQL to make efficient API calls.

Gatsby provides you with a library of plugins that enables you to integrate third-party applications and services related to analytics, CMS, ecommerce, and more.

Gatsby’s popularity has grown over the years, and as a matter of fact, most e-commerce platforms offer resources to enable you to easily spin up a Gatsby ecommerce store. Medusa as one of them provides a Gatsby starter template to help you quickly bootstrap an ecommerce storefront in a very short time.

Alternatively, you can use Medusa’s Gatsby source plugin if you want to develop a Gatsby storefront from scratch.

Pros of Gatsby

It is optimized for great speed and performance.
It offers great developer experience with detailed documentation and libraries of plugins, starters, and themes.
It is easily customizable with concepts like shadowing for themes.

Nuxt.js

Nuxt.js is a Vue framework built to optimize app performance. Nuxt.js offers support for SEO (search engine optimization) settings out of the box and several other functionalities like code-splitting, automatically generated routes*,* pre-rendering, and Server Side Rendering (SSR).

You can leverage all of its functionalities to create an overall fast and improved search engine optimized ecommerce store.

If you’re interested in learning how to create a Nuxt.js storefront for your Medusa server, here’s a tutorial that will guide you through it.

Pros of Nuxt.js

It has a small size and it’s great for search engine optimization.
It includes support for different types of middlewares
It delivers a great developer experience through detailed documentation, example code snippets, and libraries of modules and themes.

Vue Storefront

Vue Storefront is an open source frontend framework for headless ecommerce built on top of Vue.js. It provides ready-made integrations to existing ecommerce platforms and allows you to extend the framework to build your own integration.

It has a small bundle size and only loads what is required, leveraging code-splitting, lazy-loading, and lazy hydration to produce lightning-fast online stores.

You can alternatively use their Storefront UI library. It is a Vue.js design system for ecommerce. It allows you to use Vue Storefront’s UI when building your own Vue.js or Nuxt.js ecommerce storefront

Pros of Vue Storefront

The frontend is independent of what ecommerce platform you use for the backend, allowing you to switch from one to another if necessary.
It has a lot of plugins and integrations to headless CMS services, payment providers, search engines, and more.
It is great for building mobile-friendly user experiences and a unified user experience across platforms.

Remix

Remix has been gaining popularity in the ecommerce space lately. Remix is a React-based framework with a lot of potential features for ecommerce like data loading, built-in routing, built-in forms, client/server-side rendering, and more.

Remix’s features improve the build time of an ecommerce store. Remix is a good choice for large ecommerce stores with dynamic (always changing) contents like frequent changes in price or changes in stock.

If you’re interested in creating a Remix storefront with Medusa, you can check out our tutorial that will guide you through it.

Pros of Remix

It provides a parallel-loading mechanism for faster loading.
It enhances the loading of updated data loaded from the server.
It supports easier error handling to handle errors in unprecedented situations.

Angular

Angular is a component-based frontend framework and platform built on top of TypeScript. It offers a set of well-integrated libraries with a wide range of functionalities including server-client communication, routing, cross-platform apps, and more.

Angular’s functionalities facilitate producing highly performant ecommerce stores. It also offers a set of developer tools designed to aid in testing and updating your code to improve the developer experience. It is suitable for building larger full-fledged ecommerce stores.

Pros of Angular

Although it has a steep learning curve, It provides a simplified testing function for testing your code to give a better development experience.
It is great for Model-View-Controller (MVC), a model for creating scalable projects.
It provides utility functions and features for animation, accessibility, and more.

Ember.js

Ember.js is a component-based framework for building ecommerce stores. It offers stability as it has a very short release circle which allows it to add fixes and new features. This is beneficial in the fast-moving world of frontend web development and technology.

It offers a ready-to-use configuration for build pipelines, testing, routing, and more which makes it optimal for large-scale ecommerce storefronts.

Pros of Ember.js

It is a good choice for building scalable UIs and ecommerce stores.
It facilitates building efficient and highly performant websites.
It has detailed documentation, an API reference, and a guide for their CLI tool to provide a better developer experience. It also has a Discord server to get help instantly.

Sapper

Sapper is a frontend framework built on top of Svelte for building dynamic, interactive, and customizable websites with minimal code.

It offers server-side rendering and code-splitting which facilitates building fast ecommerce storefronts. It includes all of Svelte’s features like reactivity, no virtual DOM, and more to give an overall developer experience and make your ecommerce website load faster.

Pros of Sapper

As it is powered by Svelte, your ecommerce storefront will be fast and small.
It helps you build reactive and highly scalable ecommerce stores.
It requires less code to build an ecommerce store which makes it a good choice for a better development experience.

Conclusion

Choosing one framework over another for your ecommerce storefront is totally dependent on your use case and the developer experience they offer.

When picking a framework for your ecommerce storefront, it is important to pick a framework that offers a great development experience, a fast and highly performant storefront, and more customization features.

If you are interested in starting out an ecommerce project, Medusa is the right platform for you as it provides you with several functionalities and resources to aid integration with popular frontend frameworks.

Refer to Medusa’s quickstart guide to getting started in minutes. Also, if you have any Medusa-related questions or issues, you can reach out to the Medusa team via discord for instant help.

Forem: Dalu46

Hidden Complexities of Scaling GraphQL Federation (And How to Fix Them)

How cross-team changes create friction in the graph

What these frictions are costing you

What should scaling GraphQL federation look like?

How to use Grafbase to simplify federation for your enterprise teams

What’s next?

Get Started with Serverless Architectures: Top Tools You Need to Know

What Does Serverless Really Mean?

Key Benefits of Serverless Architecture

Top Serverless Tools for Compute, Storage, and Databases

Serverless compute tools

Use Case

Use Case

Use Case

Use Case

Serverless databases

Use Cases

Use Cases

Building A Simple Serverless API

Getting Started

Create a Cloudflare Worker

Connect Cloudflare Worker with Neon

Wrapping Up

This Is Why You Should Use Cloudflare Workers

Why use Cloudflare Workers

Cloudflare Workers vs. AWS Lambda@Edge

Benefits of Integrating Cloudflare Workers with Neon Serverless Database

Final Thoughts

6 Common Postgres Beginner Mistakes and Best Practices

Common Beginner Mistakes

1. Not Understanding What VACUUM Is or When to Use it

2. Forgetting to Close Connections

3. Writing Inefficient Queries

4. Forgetting to Add Primary Keys, Impacting Data Integrity

5. Overcomplicating Schema Design

6. Overlooking the Importance of Backups

Tackling Schema Changes, Autoscaling, and Backups the Smart Way

What’s next?

Resources

How to safely create a read replica of production for analytics and data teams

Prerequisites

Creating a Neon project

Creating a read replica for the database

Retrieving the read replica connection string

Connecting your read replica to Metabase

Performing analysis on Metabase

Conclusion

How to Create Real-time AI Video Avatar in 7 Minutes

Prerequisites

Steps to Create an AI Video Avatar with Simli:

Set Up Your API Environment in Minutes

Choose Your AI Avatar

Create a Next.js App

Installing Dependencies

Initialize the SimliClient in Your Project

Start Real-time Streaming with AI Video Avatar

Render and Integrate the AI Avatar on the Frontend

Conclusion

Turn Job Descriptions Into Recruitment Video With AI

Prerequisites

Generate Interview Questions With OpenAPI

Here’s How The Application Will Work

Choosing Your AI Avatar for Recruitment

Setting Up the Next.js Project

Simli Client Initialization

OpenAI Client Initialization

Audio Processing and Sending

Sending Audio Data To Simli

Handle OpenAI Responses

Audio Recording

Interaction Start and Stop

Component Mount and Cleanup

The Final Result

Conclusion

Building Secure Private Screens in React

Introduction

Prerequisite

What is Permit.io?

Implementing Access Request Element