Forem: Moronfolu Olufunke

Switching from Hasura to Grafbase: A Step-by-Step Migration Guide

Moronfolu Olufunke — Wed, 25 Jun 2025 10:22:03 +0000

Hasura gained popularity and became widely adopted for its ability to quickly let teams spin up a GraphQL API on top of a relational database, particularly PostgreSQL. That speed makes it a strong early-stage choice. But as systems grow, many teams start running into architectural limits like:

Schema rigidity: Hasura’s API layer is tightly coupled to the database schema, which makes it harder to evolve APIs or decouple logic over time.
Architectural control: Fine-grained control over resolver logic, caching, or gateway behavior is challenging to achieve.
Vendor lock-in: Hasura’s proprietary metadata format introduces vendor lock-in and complicates migration efforts.
Limited extensibility: Adding functionality through actions or remote schemas often requires managing external services, adding friction to development workflows.

If you're starting to hit those limits and exploring alternatives, a more robust solution like Grafbase should be on your radar. Grafbase’s schema-first model supports multiple data sources out of the box, enables declarative federation, and avoids the need to stitch or host separate subgraph services. With the Postgres extension, you can introspect your schema and publish it directly into a federated GraphQL API while controlling how your gateway behaves.

This guide provides practical migration steps to guarantee a smooth migration from Hasura to Grafbase, offers side-by-side comparisons with Hasura, and helps you determine whether Grafbase is the right next step for your team.

Grafbase vs. Hasura: Comparing key concepts

This section compares key features between Hasura and Grabase to help you understand how these core features are translated and handled on each platform.

Feature	Hasura	Grafbase
Schema management	Auto-generated from Postgres	Schema Definition Language (SDL) first, explicit schema definition, declarative GraphQL schema (`schema.graphql`)
Data sources	PostgreSQL (primary), Remote schemas, REST via actions	PostgreSQL, REST, gRPC, Snowflake, Kafka via extensions
API Gateway	Basic built-in API layer; limited control over gateway behavior	GraphQL Gateway with custom resolvers, and federated subgraphs
CLI	`hasura-cli` for migrations, metadata, and project management	`grabase` CLI for local dev, schema introspection, publishing, and gateway setup
Schema registry	No native schema registry or versioning; schema can be exported via introspection or the console	Built-in schema registry, versioning, schema validation with Grafbase check

To dig deeper into how the two tools compare, this Hasura alternative guide covers more architectural and workflow-level differences. You’ll also find platform-specific details in the Grafbase docs if you're exploring a larger rollout across teams or environments.

Once you are familiar with what Grafbase offers, the next step is learning how to implement it. The following sections guide you through each stage of the process, including exporting Hasura metadata, generating your Grafbase schema, configuring subgraphs, and deploying via the Grafbase Gateway.

Preparing for migration

Before starting your migration, audit your current setup and align your team on what a successful switch looks like. Use this checklist to make sure your team is ready for migration:

Audit Hasura setup: List all tables, relationships, permissions, actions, event triggers, and remote schemas in use.
Identify business logic: Document any implemented custom logic.
Map auth flows: Understand your current authentication and authorization setup.
List integrations: Note any webhooks, REST endpoints, or third-party integrations.
Set clear migration goals: Get your team on board, make sure everyone agrees on the plan, and define the migration objectives.

Migration tools

You’ll need to have these tools installed:

Step-by-step migration process

We’ll build a small demo project with features like custom actions and remote schema (REST API) to demonstrate how to safely migrate a real Hasura setup to Grafbase.

1. Export Hasura metadata

As mentioned earlier, you need to audit your Hasura setup before the migration process. Start by exporting your Hasura metadata via the CLI by running:

hasura metadata export

Alternatively, you can also use the Hasura console or API which is part of the Hasura open source framework.

This will instantly generate a metadata containing configuration data about your Hasura actions, remote schemas, custom types, and more. Study them carefully, as these will help you shape your Grafbase schema.

2. Generate a federated GraphQL schema

The next step is to generate GraphQL schema. Even if your database is complex, the Grafbase PostgreSQL extension makes it easier to convert and translate the exported Hasura metadata for use in Grafbase. This extension also helps teams generate a GraphQL schema from an existing PostgreSQL database.

To generate the GraphQL schema, follow these steps:
a. Make sure you have installed the Grabase CLI and the Grafbase Postgres extension.
b. Next, create a grafbase-postgres.toml configuration file in your project and add this:

# Change this to reflect the version of the extension you want to use.
extension_url = "https://grafbase.com/extensions/postgres/0.4.7"

# The generated SDL needs to know in which schema the type comes from.
# If the schema name is not written in the schema, Grafbase will use this value.
default_schema = "public"

# The name of the database in the Grafbase configuration.
database_name = "default"

c. Next, introspect your database and generate a GraphQL schema by running:

grafbase postgres \
  --database-url "postgres://postgres:user@password:5432/your_db_name" \
  introspect > schema.graphql

This will generate a schema.graphql file that represents your database schema.

3. Configure the project

Next, within your project, create a grafbase.toml file to configure the Postgres extension and point to the generated schema:

[extensions.postgres]
# Change to the latest version.
version = "0.4.7"

[[extensions.postgres.config.databases]]
name = "default" # This must match the name in the grafbase-postgres.toml
url = "postgres://postgres:user@password:5432/your_db_name"

[subgraphs.postgres]
schema_path = "./schema.graphql"

Test the success of the SDL generation and launch the development server by running:

grafbase dev

Navigate to http://127.0.0.1:5000 in your browser to explore the generated schema.

With the Postgres subgraph deployed, let’s now federate an external REST API into the graph.

4. Publish the Postgres subgraph

Once you're ready, first create a new graph in the Grafbase Dashboard. Next, publish the Postgres schema to the Grafbase platform as a virtual subgraph using this command:

grafbase publish \
--name postgres \
<name-of-org>/<name-of-graph>@<branch> \
--schema schema.graphql \
--virtual

This lets you map your database into a federated graph with no intermediate API layer, no stitching, and no subgraph service to maintain.

You can do this for as many schemas as you have. But what happens if you have REST APIs to federate?

5. Migrate remote schemas

Grafbase provides different extensions to extend federated graphs. One such extension is the REST extension, which, when integrated, enables you to define REST endpoints and map them to GraphQL fields using two directives: @restEndpoint and @rest .

To use this REST extension, you must create a new schema file separate from your Postgres schema, as Grafbase requires that Postgres and REST extensions reside in different subgraphs.

This example uses the publicly available fake store REST API. Follow these steps to see how you will use it in Grafbase:

a. Add the REST extension: In the grafbase.toml file, add the code below to install the REST extension, then add the link to the new REST schema you created. Like so:

[extensions.rest]
version = "0.4.1"

[subgraphs.rest]
schema_path = "./rest-schema.graphql"

Run grafbase extension install to install the newly added REST extension into the grafbase_extensions directory. This command installs any extensions declared in the grafbase.toml that are not yet installed.

b. Define the REST schema: In the newly created REST schema file, add this code:

extend schema
  @link(
    url: "https://grafbase.com/extensions/rest/0.4.1"
    import: ["@restEndpoint", "@rest"]
  )
  @restEndpoint(name: "restProducts", baseURL: "https://fakestoreapi.com")
type RestProducts {
  title: String!
  price: Float!
  description: String!
  category: String!
  image: String!
}
type Query {
  getAllRestProducts: [RestProducts!]!
    @rest(
      method: GET
      endpoint: "restProducts"
      path: "/products"
      selection: """
      [.[] | {
        title: .title,
        price: .price,
        description: .description,
        category: .category,
        image: .image
      }]
      """
    )
}

This code fetches product data from a public REST API (fakestoreapi.com) and exposes it as a GraphQL query (getAllRestProducts) using Grafbase’s REST extension.

Test locally by saving, stopping your local development environment, and then running grafbase dev again. It’s as simple as that!

c. Publish the REST subgraph: Now, you can publish this new subgraph to the Grafbase platform by running the deploy command you used previously, but with a change to reflect the name of the subgraph you want to publish and the path to the current local schema:

grafbase publish \
--name rest \
<name-of-org>/<name-of-graph>@<branch> \
--schema rest-schema.graphql \
--virtual

Integrating REST APIs typically requires setting up Actions in Hasura, which can involve complex configuration. By contrast, as demonstrated above, this was accomplished in just three straightforward steps on Grafbase.

6. Combine and deploy subgraphs with the Grafbase Gateway

After publishing the new subgraph, you can deploy the federated graph using the Grafbase Gateway. The gateway automatically keeps up with subgraph updates and unifies different subgraphs into a single federated graph for querying. In this case, it will federate the Postgres and REST subgraphs.

Follow these steps to deploy:
a. Create an access token in the Grafbase organization settings.

b. Export the access token and start the gateway using this command:

export GRAFBASE_ACCESS_TOKEN="ey..." //exported token

c. Start the gateway by running:

grafbase-gateway --graph-ref name-of-graph --config grafbase.toml

The --config argument is optional, but to start the gateway with a graph ref, the access token is mandatory.

You now have the schema registry populated, the gateway set up, and the federated graph on Grafbase up and running. You can send queries to the Grafbase Gateway and observe it in action with your Federated Graph.

Refer to the Grafbase Postgres extension guide for more information on features, configuration options, and running the gateway.

Post-migration tips

On successful migration from Hasura to Grafbase, it's also essential to validate and optimize your new setup. Here’s a checklist of what to test and monitor post-migration:

Query parity between systems

Confirm that all critical and/or complex queries and mutations behave as expected and return the same data structures and values as they did in Hasura.

Additionally, to verify schema consistency between the exported Hasura metadata and the generated schema on Grafbase, run:

diff name_ofhasura_metadata.graphql name_of_grafbase_schema.graphql

This will show you line-by-line differences between your Hasura-generated schema and your Grafbase schema, helping you identify mismatches or missing types and fields.

Set up schema checks

Using the grafbase check command, you can check your schema against the Grafbase Platform. This will help you safeguard against introducing breaking changes or errors into your GraphQL API, especially when working in multiple teams. Read more on the dedicated docs page.

Deployment configuration (cloud services or self-hosted)

Validate that tokens, secrets, and environment variables are securely stored and accessible in your cloud or container platform.

Subgraphs management

Organize schemas and group related functionality into logical subgraphs for modularity and clarity.

Observe latency and performance changes

Without relying on external tools like Grafana or Datadog, Grafbase provides built-in solutions for telemetry and observability features. You can benchmark workload and key metrics after migration, and use the Grafbase dashboard to view insights and analytics on error rates and slow responses, helping you to detect regressions proactively.

Horizontal scaling

Monitor how your federated graph performs as you add more subgraphs or services. Grafbase’s gateway is designed to scale, but you’ll still want observability in place.

There are additional steps to verify success after migration, but taking the above as a starting point is a great approach.

Troubleshooting mixing resolver extensions in the same subgraph

You might encounter the following error when starting the federated gateway:

Error: could not start the federated gateway
Caused by: Error validating federated SDL: Selection Set Resolver extension postgres-0.4.1 cannot be mixed with other resolvers in subgraph 'postgres', found rest-0.4.1

Cause: This error occurs when you try to use both the Postgres and REST resolver extensions in a single subgraph (in this case, using REST extension in the Postgres subgraph). Grafbase doesn't support combining multiple selection set resolver extensions (such as @postgres and @rest) within the same subgraph.

Solution: Separate the conflicting extensions into distinct subgraphs. For example, if your Postgres subgraph already uses the @postgres extension, create a new subgraph (e.g., rest) for REST-based resolvers and configure it independently in your grafbase.toml.

These benefits are available to you after migration

Now that you have seen how to easily migrate from Hasura to Grafbase, here’s a summary of some advantages that the highlighted Grafbase features provide for your team and how they help you scale beyond Hasura’s limitations.

Hasura limitations	Grafbase solution
Schema rigidity	Grafbase uses a schema-first approach. As such, it lets you compose your GraphQL schema from multiple sources (databases, APIs) rather than binding it directly to a single database schema.
Architectural control	Grafbase provides more granular control over caching strategies and gateway behavior. Its Edge Gateway allows you to orchestrate all your data fetching and optimize performance at the gateway layer, rather than being restricted to database-driven resolvers.
Vendor lock-in	Grafbase avoids proprietary metadata formats tightly coupled to its runtime. Its approach is to use standard GraphQL schemas and open configuration, making migration and integration with other tools less risky and complex.
Limited extensibility	Grafbase is designed for extensibility, allowing you to connect multiple APIs and services and implement domain-specific logic directly within your schema.

Wrapping up

For teams running into Hasura’s limitations, exploring alternatives like Grafbase provides benefits that make it a worthwhile move.. The benefits include long-term flexibility and maintainability, improved API architecture, enhanced developer productivity, and experience. Grafbase also provides more control over your GraphQL gateway and production-grade federation support.

Ready to try it out? Get started with Grafbase and migrate your federated graph to Grafbase in minutes.

Insights from building my portfolio with Astro

Moronfolu Olufunke — Thu, 31 Oct 2024 11:56:44 +0000

For years, whenever I needed to share my work, I relied on my Linktree link. It was fine when I had just a few pieces to showcase. However, as my portfolio grew, managing the increasing number of links became more cumbersome and less user-friendly.

Some organizations I wrote for provided an author profile, which made sharing my work easy. However, others didn’t, which meant I had to add each article to Linktree manually—I even started wondering if Linktree had a link limit!

It became clear that I needed to fine-tune my approach. But that raised several questions, like:

How should I handle content from the different publisher sites like Hygraph or Cloudinary?
Should I build or use WordPress?
If the response to question 2 is “build,” what tools should I use to build, host, and maintain my portfolio?

Solving question one

To address the first question, I decided to build my own “Linktree Pro Max.” The idea is simple: from my portfolio, I link directly to the platforms where each piece is hosted. Easy peasy, lemon squeezy!

At the surface level, question one is solved. However, exploring the solution deeper raised another question: What about my personal articles? (like this one you’re reading) Should I publish them directly on my portfolio or…?

I went with the “or.” Why?

Before I started writing for other organizations, I had already published my work on platforms like Dev.to, Hackernoon, and Medium, each serving different purposes. Instead of over-engineering what was meant to be a simple portfolio—and to keep my audience on the external blogging platforms—I decided to continue using these existing accounts.

For example, just like this article is published on Dev.to, other personal works will be posted on the relevant platforms and linked from my portfolio.

Yes, that’s a lot of links to manage. Still, it solves my problem with Linktree while also giving my portfolio the personal touch I want. Did I say I am building Linktree Pro Max?

Maybe I’ll wake up tomorrow with a different idea, but as of September 2024, this is where I am at!

Solving question two

This was the easiest to answer. I chose to build—no long stories.

Solving question three

Now, onto question 3: What tool should I use to build my portfolio? As a Software Engineer turned Technical Writer, I must admit that my hands still itch to build things. Plus, I’m always learning something new, and I always want to flex the latest tech I’ve been playing around with.

Sure, I could have gone the easy route with WordPress. But why use WordPress when I can build it myself? Right, right! But then, what tool/tech do I use?

My all-time favorite, Vue/Nuxt?
Next.js to stay with the “cool kids”?
Plain HTML and CSS (going full vanilla)?
Or one of the latest kids on the block—Astro?

My portfolio’s use case was so simple that I could have easily used HTML, CSS, and JavaScript. But how would I then tell you about Astro, an underrated yet incredible JavaScript framework? I even recently wrote an article for Hygraph about Astro and its versatility as an all-in-one framework.

So, you’ve probably guessed it by now: I went with Astro.

If you haven’t tried Astro yet, you probably think, “Get this lady out of my face.” But if you have, you’ll understand why I chose it. Either way, let me tell you why.

Why I chose to build with Astro

Extensibility with other JavaScript libraries
Astro allows you to integrate any JavaScript library or framework seamlessly into your project. Unlike other tools like Next.js or Nuxt, which limit you to their specific ecosystems, Astro provides flexibility. If, later in the future, I decide to use React, Vue, or any other library, I can progressively add it to my site with little to no hassle.

I can even concurrently use different libraries in different app parts as needed—there are no restrictions.

Optimized for content-driven sites
My portfolio consists mostly of text and links, with minimal JavaScript. Astro's approach to rendering pages—where you can opt in or out of JavaScript—was perfect for my needs. I didn’t need a bunch of unnecessary libraries or frameworks to display links and text.

Sure, I could have used Jekyll or a similar tool, but Astro goes further by defaulting to lightweight HTML and stripping out unnecessary JavaScript, making it an ideal choice for a site like mine.

Easy content management with markdown
While I publish my personal articles on platforms like Dev.to, Hackernoon, and Medium, adding an in-app publishing feature directly to my site is just as easy with Astro. I can write content in Markdown (.md) or MDX (Markdown with JSX support) with no complex setups or dependencies.

Furthermore, integrating with other content management systems like Hygraph, Sanity, and Storyblok is also easy.

It makes one wonder that given that such a significant portion of the web is based on text and links, perhaps more companies should consider using content-centric tools like Astro or Jekyll.

If you’re curious about Astro, I recommend checking out the official documentation and reading my Hygraph blog post.

Now, let’s move on to the main crux of this article: the gotchas I encountered and the things I liked while using Astro.

Astro highlights: favorite features and gotcha

I will begin this section by using a line from the Astro documentation.

"If you know HTML, you already know enough to write your first Astro component."

Except, this is incorrect. Here is how I think it ought to have been written:

"If you know HTML, then you know enough to write Astro - not just its component."

With good HTML knowledge, you can create magic with Astro.

Capitalization matters

This was one of the first problems I encountered - what I expected wasn’t getting displayed on the UI. On further investigation, I found out that I used this import statement in my frontmatter:

import Layout from '../layouts/default.astro'

Then, later in my file, I used the Layout like so:

<layout>
  <h1>Welcome to my portfolio</h1>
</layout>

You might wonder if changing the import statement to use a lowercase layout would solve the issue:

import layout from '../layouts/default.astro';

Unfortunately, this still won’t work.

In Astro, all components—whether built-in or custom—must be capitalized. When a component is declared in lowercase, Astro interprets it as a regular HTML tag instead of a component. So, in my example, using <layout> instead of <Layout> caused Astro to render it as an HTML element (<layout>) rather than processing it as a component.

Switching the <layout> to use uppercase fixed the problem. This may seem like an obvious error, but it got me nonetheless.

Using slot in Astro

I would argue that Astro was designed to enhance developer experience. It wasn't created to replace any libraries you may already be using; rather, it allows you to leverage your existing libraries and knowledge and apply them effectively. As a result, many concepts in Astro may feel familiar if you have experience with other libraries or tools.

One such concept is the <slot />, which you might recognize from HTML5 or Vue. Slots serve as placeholders for content that can be injected dynamically, functioning similarly in both frameworks.

However, a unique aspect of Astro is that you must use a slot to display content within a layout component. This can be especially useful if you want to define a consistent structure or style but still allow flexible, context-specific content for each page.

As I said, most of what you need for Astro is good HTML knowledge.

Scoped CSS

Vue, is that you (again)?! Within a specific .astro file, you can declare scoped CSS by adding a <style> tag at the end of your file. This means that the styles defined in that Astro file will only apply to that specific file, keeping your styles contained and organized.

If you later decide these styles should be accessible globally, you can add the is:global attribute to the <style> tag, allowing other .astro files to use these styles. This approach is quite similar to Vue’s scoped CSS feature, making it intuitive if you come from a Vue background.

NB: Astro styles are scoped by default.

Classes are just `class`

Astro, for the most part, doesn’t require learning new syntax to get started. You can dive right in, using familiar HTML and CSS conventions as you build.

For example, when declaring inline styles, you use class just as you would in standard HTML, instead of className as you would in React. This makes applying styles straightforward. Here’s an example:

<h1 class="title">Welcome to My Astro Site</h1>

And just like that, your styles are applied.

No `key` needed when using map

If you’ve worked with React or Vue, you know how important it is to add a unique key when using the map() function. In those frameworks, the key helps React and Vue identify each item uniquely, allowing efficient updates, additions, and removals without re-rendering the entire list. Without keys, you may encounter issues with component state and rendering.

In Astro, however, there’s no need to add a key. Astro renders content at build time to static HTML, so there’s no dynamic reactivity on the client side, meaning the structure doesn’t change after the page loads. This makes the key attribute unnecessary in Astro.

In React, you would typically use a key like this:

const items = ['JavaScript', 'Java', 'Elixir'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );

In contrast, mapping in Astro looks like this:

---
const items = ['JavaScript', 'Java', 'Elixir'];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

As you can see, in Astro, you don’t need to worry about the key attribute—just declare your map, and it will work.

I could go on and on talking about the intriguing things about using Astro, but I’ll wrap it up here, hoping that what I’ve shared has sparked your interest in exploring Astro if you haven’t already.

At the time of writing, I’ve built two fully functioning, content-based websites with Astro in less than two months—and I’m very pleased with the results!

Have you used Astro recently? I'd love to hear about your experience!
If you haven’t tried it yet, I’d be excited to hear your thoughts once you do.

Hacktoberfest for Low or No-Code Professionals: 5 OSS Projects to Contribute To

Moronfolu Olufunke — Fri, 04 Oct 2024 12:01:46 +0000

October is here, and with it comes Hacktoberfest—an exciting annual event for Software Engineers. Since its launch over a decade ago by DigitalOcean, Hacktoberfest has evolved with changes to the rules and the types of contributions accepted. One of the most notable updates since 2022 is the inclusion of low-code and no-code contributions, making it more accessible to a broader audience.

Originally focused on encouraging contributions to open-source software, Hacktoberfest now invites non-coding professionals to get involved. From content creators and technical writers to usability testers and product designers, anyone can support their favorite open-source software (OSS) projects in diverse ways.

For non-coders in the tech industry interested in contributing, this article will highlight some great OSS projects to explore. Let’s get started.

Hyperswitch

Hyperswitch is an open-source global payment switching solution. Your Hacktoberfest contributions can include creating videos, writing tutorials, improving documentation, or supporting the community.

For every merged pull request or contribution, you can win exclusive Hyperswitch swag.

How to participate

Explore the Hyperswitch GitHub repository for Hacktoberfest-tagged issues
Join their community on Slack or Discord to discover more ways to contribute

Freecodecamp

FreeCodeCamp is a non-profit organization that provides accessible resources for learning how to code. They are currently overhauling their interactive lessons and are seeking contributions for knowledge quizzes. Each quiz consists of 20 questions on various topics.

How to participate

Read their Hactoberfest contribution guideline
Explore their GitHub repository to choose an issue to work

Owncast

Owncast is a free and open-source live video streaming and web chat server. They are accepting low-code and no-code Hacktoberfest contributions, including writing documentation, providing design feedback, and advocating for Owncast.

How to participate

Start by reviewing Owncast's contributing guide.
Find a "good first issue" on GitHub
Install your own instance of Owncast, introduce yourself to the community, and begin contributing

Manifest

Manifest is a simple backend open-source solution designed to be lightweight enough to fit into a YAML file. Manifest is accepting low-code and no-code contributions, especially those related to creating tutorials.

How to participate

Visit Manifest’s GitHub repository and select an issue. Some issues already include suggested tutorials, but feel free to come up with your own ideas.

Tooljet

Tooljet is a low-code platform for building business applications. They are looking for low-code contributions, particularly those that improve documentation.

How to participate

Start by reviewing Tooljet's contribution guide
Pick an issue from their GitHub repository and start contributing

Hacktoberfest general rules

While each project may have its own set of rules, remember to also adhere to the official Hacktoberfest guidelines, which are available on the Hacktoberfest website.

Additionally, in your excitement to complete the required 4 pull requests or whatever metric the project uses, avoid submitting spam or low-quality contributions. Focus on providing meaningful, high-quality input. Remember, quality over quantity is what truly matters.

Additional resources

For more no or low-code open source projects to contribute to during Hacktoberfest, explore the following:

OSS projects on Up-For-Grabs
OSS projects on GitHub
OSS projects on GitLab

NB: While many of these projects carry the "Hacktoberfest" tag, you may need to filter further to find no-code or low-code projects to contribute.

If I’ve missed any great low- or no-code OSS projects accepting contributions this Hacktoberfest, please share them in the comments section.

Query Postgres from Netlify Functions with Neon serverless driver

Moronfolu Olufunke — Wed, 28 Feb 2024 08:50:43 +0000

Neon is a serverless Postgres that makes database development and management easy and efficient. Offering modern features like autoscaling, auto-suspending, and branching, Neon separates compute and storage and scales automatically up or down based on demand, so developers can focus on building their applications without the hassle of managing servers or databases.

Imagine a game company running a massively multiplayer online (MMO) game service that experiences fluctuating user numbers throughout the day. By continuously monitoring the number of online players, the serverless driver can automatically scale the database up or down to meet the changing demand. In peak hours, this ensures that the database can accommodate the growing number of concurrent queries and maintain optimal performance, providing a smooth and lag-free gaming experience for all players.

Conversely, during off-peak hours, when the player counts drop, the serverless driver efficiently recognizes the reduced demand and initiates scaling down the database. This involves releasing unused database resources, such as CPU and memory, to optimize resource utilization and reduce costs. This ensures that companies only pay for used resources, contributing to cost savings and overall efficiency.

In a broader context, the Neon serverless driver is crafted explicitly for data querying in serverless and edge environments, using HTTP or WebSockets rather than conventional TCP. This design choice streamlines operations by removing the requirement for extra infrastructure configuration or worries about TCP connections, saving you time and money. Furthermore, you’ll have the flexibility to leverage Neon's PostgreSQL database service in diverse environments, encompassing Cloudflare Workers, Vercel Edge Functions, and Netlify Functions.

This article will explore how to query Postgres from Netlify Functions using the Neon serverless driver.

GitHub

Check out the complete source code here.

Prerequisites

To best follow along with this demo, you’ll need a few things:

Installation of Node.js
Basic knowledge of SQL
Basic understanding of JavaScript
A neon account. Sign up here
Creating a free Netlify account

Benefits of using Neon serverless driver

Low latency: The Neon serverless driver is optimized for low latency, making it ideal for use in serverless and edge environments.
Easy to use: It is also a drop-in replacement for the popular node-postgres driver, so starting is straightforward.
Scalable: The Neon serverless driver is scalable and can handle the most diverse workload demands.

What are Netlify Functions?

Netlify Functions are serverless functions executed in response to specific events, such as HTTP requests, when users visit a particular URL. Netlify Functions acts as a bridge between the frontend and backend, allowing developers to write backend code that can be integrated with the frontend code and deployed as part of the same project.

With the introduction of the Neon serverless driver, developers can also query the Neon serverless Postgres database directly within Netlify Functions to further enhance the versatility and efficiency of serverless architecture.

Connecting to Neon Postgres

If you’re a first-time Neon user, go ahead and create a Neon project by signing up; then, we can create a project. Neon provides a simplified way of connecting to a created Postgres database using psql and a connection string. To obtain a connection string, we will navigate to the Neon dashboard, and within the connection details, we will select the database we want to connect to and the type of connection. Neon then creates the connection string as seen below:

We will take note of the connection string as we will use it to connect and query data from the Neon DB later in the article.

Creating tables on Neon

Now that we have our dashboard created, we can create a table. First, navigate to the dashboard of interest and access the SQL editor.

In our case, we will create a table named “POSTS” and add the data below:

CREATE TABLE posts (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT NOT NULL
);

INSERT INTO posts (title, content) 
  VALUES ('Query Postgres from Netlify Functions with Neon serverless driver', 'This post goes over querying ...');

INSERT INTO posts (title, content) 
  VALUES ('5 reasons why you should start using Neon', 'This post talks about the features Neon provides.');

In the SQL code above, we created a table named “posts” with columns for an auto-incrementing primary key (id), a title (title), and content (content). Then, we inserted two rows of data into the table, each representing a post with a title and content.

At this point, our SQL editor should look like the image below:

To add this table to the dashboard, click “Run”.

Now, if we navigate to "Tables,” you’ll see the table “posts” with the two rows of data we inserted.

We’re ready to query this data now that we have our table.

Creating our application

For this tutorial, we’ll create a new application to query Postgres and use Netlify functions and Neon serverless driver. Start by running the commands below:

mkdir <folder-name> //creates a new folder
cd <folder-name> //navigate into the created folder

Next, we’ll initialize a new Node.js project by running the command below:

npm init -y

This allows us to install and manage dependencies for our project easily.

We will also set up the dotenv package to manage environment variables locally and after Netlify deployment. To do this, we will install dotenv using the command below:

npm i dotenv

Installing the Neon serverless driver package

To use the Neon serverless driver within our application, install it using the command below:

npm install @neondatabase/serverless

Creating a Netlify Function

Netlify Functions are essentially serverless functions that can be deployed and executed on Netlify's serverless platform. To create a Netlify Function, start by creating a directory for these functions at the root of your project. Conventionally, this directory is named functions.

We will now create a .mjs file for our function inside the functions directory. This file should export a handler function, and within this file, we will connect the Neon serverless driver and query Postgres.

We will start by importing the Neon serverless driver.

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

Then, we’ll import dotenv to use in our functions by adding the code below:

require("dotenv").config();

Next, we will create a new Neon client:

const sql = neon(process.env.DATABASE_URL!);

Now, we can write our first SQL queries:

const result = await sql("SELECT * FROM posts WHERE id = $1", [postId]);

We will get a result that we can then return from the Netlify function:

return {
  statusCode: 200,
  body: JSON.stringify(post),
};

Bringing it all together, the Netlify function will look like this:

import { neon } from "@neondatabase/serverless";
require("dotenv").config();

const databaseUrl = process.env.DATABASE_URL;
if (!databaseUrl) {
  throw new Error("DATABASE_URL is not defined");
}
const sql = neon(databaseUrl);

exports.handler = async function (event, context) {
  try {
    const postId = parseInt(event.queryStringParameters.postId, 10);
    const result = await sql("SELECT * FROM posts WHERE id = $1", [postId]);
    if (!result || result.length === 0) {
      return {
        statusCode: 404,
        body: JSON.stringify({ error: "Post not found" }),
      };
    }
    const post = result[0];
    return {
      statusCode: 200,
      body: JSON.stringify(post),
    };
  } catch (error) {
    console.error("Error:", error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "Internal Server Error" }),
    };
  }
};

Here’s what’s going on in the previous code block:

We imported the neon function, which we used to establish a connection to the Neon database using the DATABASE_URL.
We also imported the config function from the dotenv library to handle environment variables.
We are reading the value of the DATABASE_URL from the environment variable set in the Netlify project dashboard, and we set it to throw an error if the variable is not defined.
We used the neon function to establish a connection to the database using the retrieved URL.
We also executed an SQL query to retrieve posts from the database based on the postId
If the post variable is null, the code will return a 404 error message. Otherwise, the code will return a 200 OK response and the post data.
The code returns a 500 status code in the case of an internal server error.

Configuring `netlify.toml`:

We will create a netlify.toml file at the root of our project and specify the functions directory, like so:

[build]
  functions = "functions"

This tells Netlify where to find our functions.

Testing the Netlify Function

Testing locally
After creating the Netlify function, we can test our integration locally by ensuring we have Netlify’s latest CLI version. Do this by running the command below:

npm install netlify-cli -g

Configuring the .env file
We will also create a .env file in our project’s root folder and add our connection string:

DATABASE_URL=postgresql://[user]:[password]@[neon_hostname]/[dbname]

Doing this allows our function to access the process.env.DATABASE_URL, which is necessary to connect our function to Neon DB.

We can then start Netlify’s development environment using the command below:

netlify dev

At this point, we will see a message like the one below in our terminal:

Server now ready on http://localhost:8888

We can test the success of our implementation by opening up Postman or downloading the latest version here. Afterwards, follow the steps below:

Create a GET request.
Then, set the URL to the “localhost’s URL/.netlify//”. In our case, we will set the URL to this: http://localhost:8888/.netlify/functions/function.
Add a query parameter named postId with the value 1.
Click “Send”.

Now, we should have our Postman looking like the image below, with the result showing the query of the data with the postId of 1 in our Neon DB.

Testing after deployment
Usually, we will not always use our applications locally, and there will be cause to deploy our applications beyond our local machines. To do this, we can use Netlify.

As a new user, we can sign up with Netlify here. Then, we can select the project we would like to work with; under the project’s “site configuration,” we can select the “environment variables” option.

Using the connection string from the Neon dashboard, we can set the project’s environment variable to the DATABASE_URL, like so:

DATABASE_URL=postgresql://[user]:[password]@[neon_hostname]/[dbname]

By storing the DATABASE_URL as an environment variable in Netlify, we can protect the connection string from unauthorized access. It also allows the Netlify function in our code to access the Neon connection string to query the Neon database.

After creating the environment variable on Netlify, we can deploy our application. To complete the final stage of our testing, navigate to the “site configuration” tab and copy the site’s name.

Let’s navigate back to our Postman and query the data using the site's names. Then, follow these steps:

Create a new GET request.
Then, we will set the URL to the “/.netlify//”. In our case, we will set the URL to this: https://neon-serverless-driver.netlify.app/.netlify/functions/function.
Add a query parameter named postId with the value 2 to get the second item in the Neon DB.
Click “Send”.

At this point, we should see the second row of data from the posts table showing in our Postman:

We have successfully queried Postgres from Netlify Functions using the Neon serverless driver.

Conclusion

This article explained how to query Postgres from Netlify Functions using the Neon serverless driver. This approach allows developers to streamline their workflow and query Postgres efficiently, saving time and money.

Resources

Here are a few additional resources to help you through this process:

How to Build a File Explorer using Xata and Vue.js

Moronfolu Olufunke — Sat, 30 Sep 2023 13:39:05 +0000

In our fast-paced digital age, where data rules supreme, having a robust and user-friendly file explorer is no longer a luxury but a necessity. Whether you are a developer seeking to streamline your file management tasks or a business owner looking to provide your users with an intuitive file navigation experience, building a File Explorer is a powerful solution. In this ever-evolving tech landscape, harnessing the right tools and frameworks is critical to creating efficient and responsive applications.

Enter Xata and Vue.js – a dynamic duo that promises to revolutionize how you approach file management. Xata, a modern, lightweight database designed for developers, and Vue.js, the progressive JavaScript framework known for its flexibility, combine seamlessly to help you craft a feature-rich File Explorer that is easy to develop and delightful to use.

Let us unlock the potential of Xata and Vue.js as we explore the fusion of Xata and Vue.js in building our own File Explorer that caters to our every need.

GitHub

Check out the complete source code here.

Netlify

We can access the live demo here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
Creating a free account with Xata

Creating a Vue app

We can create a new Vue app using the npm create vue@latest command.
Scaffolding the project would provide a list of options from which we can select the best fit for the project.

Styling

The CSS framework we will use in this project is Tachyons CSS, which we will install by running the command below in the terminal.



npm i tachyons

Afterward, we will make it globally available for usage in the project by adding the line below in our src/main.js:



import 'tachyons/css/tachyons.css';

Installing dependencies

We will need some vital dependencies to supercharge our file explorer application. We will install them accordingly using the command below:



npm install --save axios vue-axios @kyvg/vue3-notification vue-pdf-embed

From the above command, we installed the following packages in our application:

axios: This is a popular JavaScript library for making HTTP requests from the browser. It allows Vue.js applications to interact with APIs and fetch data from external sources
vue-axios: This is a package that provides integration between Axios and Vue.js. It makes it easier to use Axios in Vue components.
@kyvg/vue3-notification: This package is a Vue 3 notification plugin that shows notifications or alerts to the user in Vue applications. It is a handy tool for informing users about various events or updates.
vue-pdf-embed: This package embeds PDF files into Vue.js application. It allows displaying PDF documents within Vue applications, making it useful for a File Explorer where users might want to preview or interact with PDF files.

To use these new dependencies in our application, we will edit our src/main.js like so:



import Notifications from "@kyvg/vue3-notification";
import axios from "axios";
import VueAxios from "vue-axios";
app.use(VueAxios, axios);
app.use(Notifications);

Setting up the Xata database

We will harness the full potential of Xata as we build out our project. To kick things off, we will either log into our existing Xata account or create a new one. Once inside our Xata account, we will navigate to the database section and establish a fresh database tailored to our project's needs. In our specific case, we have aptly named our database file-explorer to align with the project's core objectives.

Once our database is in place, our next step involves crafting the essential tables and their corresponding records. We require two distinct tables within our project's scope: the 'users' and 'files' tables. The 'users' table serves as the repository for user information, while the 'files' table is designated to house detailed data about the files we intend to store within the Xata platform.

The media below shows we would create a ‘users’ table in Xata. The same process applies to creating the 'files' table.

The ‘users’ table encompasses records such as usernames, email addresses, and passwords. To add these records to the table, we will follow the process in the media below:

We will also create the relevant records for the files table as shown below:

Links and relationships in Xata

When we upload a file, we want to associate the file with the user responsible for the upload. To do this, Xata provides a record type of link, which allows us to set up relationships between entities (tables). In other words, we can link the 'users' table to the 'files' table in a one-to-many relationship.

We will have a target table and a source table for this to happen. In our case, the 'files' table will be the source, and the 'users' table will be the target. This arrangement means we target a single user within the 'users' table from the 'files' table.

Here is how we can create a new record in the files table called user and give it a type of 'link to table':

Setting up Xata in our Vue application

To incorporate Xata into our project, we will follow these installation steps:

Install Xata SDK

We will run the following command in the command line interface:



npx xata

Initialize Xata

Now, we can initialize Xata for use within the application with this command:



xata init

Configuration Options

Xata will present us with various configuration options to choose from. After making our selections, Xata will generate essential files, including .xatrc and .env.

Edit API Key

To ensure our Vue application can access the Xata environment, we will need to modify the Xata API key within the Vue app like so:



VITE_XATA_API_KEY="add your api key"

We can now modify the xata.js file to use this intialised VITE_XATA_API_KEY like so:



const defaultOptions = {
  enableBrowser: true,
  apiKey: import.meta.env.VITE_XATA_API_KEY,
  databaseURL:
    "https://...",
};

We would have seamlessly integrated Xata into our project by following the steps above.

Creating the landing page

First, we will create a basic homepage and progressively enhance it as functionality requires. To do this, we will create a file in views/HomeView.vue and add the code block below:



<template>
  <header class="vh-100 bg-light-pink dt w-100 helvetica">
    <div class="background-container dtc v-mid cover ph3 ph4-m ph5-l">
      <div class="flex justify-around">
        <div>
          <h1 class="f2 f-subheadline-l measure lh-title nb1 fw9 white">
            Xata File Explorer
          </h1>
          <h2 class="f6 fw6 white">
            Storing and managing files made easy with Xata (File Attachments)
          </h2>
        </div>
      </div>
    </div>
  </header>
</template>
<style>
  .background-container {
    background-image: url("../assets/tamanna-rumee-QR56LDZADZ4-unsplash.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

Now, when users open the link to the application, the landing page shows the below:

Building the Signup Page

To enable user registration for our application, a signup page is essential. We will create a new file called components/Signup.vue to achieve this. Then, we will populate it with the following code:



<template>
  <form
    @submit.prevent="signUp"
    class="ba b--white dark-pink bw4 bg-black br2 mw6 center pv2 ph4 shadow-5 f6">
    <h2 class="ttc tc">Sign Up</h2>
    <label for="name" class="db mb2">Username</label>
    <input
      id="username"
      v-model="username"
      name="username"
      type="text"
      class="db mb3 w-100 br2 pa2 ba bw1 b--black"
      placeholder="John Doe" />
    <label for="email" class="db mb2">Email</label>
    <input
      id="email"
      v-model="email"
      name="email"
      type="email"
      class="db mb3 w-100 br2 pa2 ba bw1 b--black"
      placeholder="example@email.com" />
    <label for="password" class="db mb2">Password</label>
    <input
      id="password"
      v-model="password"
      name="password"
      type="password"
      class="db mb3 w-100 br2 pa2 ba bw1 b--black"
      placeholder="••••••••" />
    <button
      type="submit"
      class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-dark-pink bg-animate pointer f7">
      Sign up
    </button>
    <p class="f7">
      Already have an account?
      <a @click="switchToSignin" class="white pointer b">Sign in</a>
    </p>
  </form>
</template>

With the above, we have effectively established the user interface for our Signup page. Our next focus will be on implementing the essential functionality for authentication and authorization.

We will leverage Xata to achieve our authentication objectives. To integrate Xata into our SignupView, let us start by adding the following code to the components/Signup.vue file:



<script>
  import { getXataClient } from "@/xata";
  export default {
    name: "Signup",
    data: () => ({
      username: "",
      email: "",
      password: "",
    }),
    methods: {
      switchToSignin() {
        this.$emit("user-has-account", true);
      },
      async signUp() {
        const xata = getXataClient();
        const user = await xata.db.users.filter("email", this.email).getFirst();
        if (!user) {
          await xata.db.users
            .create({
              username: this.username,
              password: this.password,
              email: this.email,
            })
            .then((res) => {
              this.$router.push({
                name: "dashboard",
                params: { username: res.username },
                query: { user: res },
              });
              this.$notify({
                type: "success",
                text: "Account creation successful!",
              });
            });
        }
      },
    },
  };
</script>

The code block provided above allowed us to accomplish the following:

Imported the Xata client, establishing the connection necessary for interacting with our database
Implemented a mechanism to check for the existence of a user. Our code creates a new user profile if the current user doesn't exist
Upon successfully creating a user account, the user is seamlessly redirected to the dashboard (which we will create later). Here, the users can access the functionality required to manage their files efficiently

Building the sign-in page

In addition to user registration, providing a seamless sign-in experience for individuals who already possess an account is essential. We will generate a new file named Signin.vue to achieve this. Within this file, we will insert the code below:



<template>
  <form
    class="ba f6 b--white bw4 bg-black dark-pink br2 center pa3 shadow-5"
    @submit.prevent="signIn">
    <h2 class="ttc tc">Sign In</h2>
    <label for="email" class="db mb2">Email</label>
    <input
      id="email"
      v-model="email"
      name="email"
      type="email"
      class="db mb3 w-100 br2 pa2 ba bw1 b--black"
      placeholder="example@email.com" />
    <label for="password" class="db mb2">Password</label>
    <input
      id="password"
      v-model="password"
      name="password"
      type="password"
      class="db mb3 w-100 br2 pa2 ba bw1 b--black"
      placeholder="••••••••" />
    <button
      type="submit"
      class="f7 center db pv2 ph3 mb3 tracked bg-black ba br3 white pointer hover-black hover-bg-dark-pink bg-animate pointer">
      Sign in
    </button>
    <p>
      Don't have an account?
      <a @click="goToSignUp" class="white b f7 pointer">Sign up</a>
    </p>
  </form>
</template>

The code provided above furnishes us with the foundation for our sign-in interface. However, we must incorporate some key functionalities to ensure it function as intended.
To achieve this, let us add the following code to the <script></script> section of the SigninView.vue file:



<script>
  import { getXataClient } from "@/xata";
  export default {
    name: "Signin",
    data: () => ({
      email: "",
      password: "",
    }),
    methods: {
      goToSignUp() {
        this.$emit("go-to-sign-up");
      },
      async signIn() {
        const xata = getXataClient();
        const user = await xata.db.users.filter("email", this.email).getFirst();
        if (!this.email || !this.password) {
          this.$notify({ type: "error", text: "Please fill all empty fields" });
        } else if (
          this.email !== user.email ||
          this.password !== user.password
        ) {
          this.$notify({ type: "error", text: "Incorrect credentials" });
          this.email = "";
          this.password = "";
        } else {
          this.$router.push({
            name: "dashboard",
            params: { id: user.id },
          });
          this.$notify({ type: "success", text: "Login successful!" });
        }
      },
    },
  };
</script>

The code block above does the following:

Imported the Xata client, establishing the connection needed to interact with our database
Our code checks if the user has provided an email and a password. If either of these is missing, it returns the relevant error message
Implemented a verification step by comparing the entered email and password with the corresponding records stored in the database
Upon successful validation, the user is seamlessly redirected to the dashboard. Here, they gain access to the functionality required for managing files effortlessly

To view the sign-in and signup components, we will import them into the views/HomeView.vue, like so:



<template>
  <header class="vh-100 bg-light-pink dt w-100 helvetica">
    <div class="background-container dtc v-mid cover ph3 ph4-m ph5-l">
      <div class="flex justify-around">
        <!-- main code -->
        <div class="mv2">
          <div v-if="userHasAccount">
            <Signin @go-to-sign-up="switchToSignUp" />
          </div>
          <div v-else>
            <Signup @user-has-account="handleUserHasAccount" />
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script>
  import Signin from "@/components/Signin.vue";
  import Signup from "@/components/Signup.vue";
  export default {
    components: {
      Signin,
      Signup,
    },
    data() {
      return {
        userHasAccount: false,
      };
    },
    methods: {
      handleUserHasAccount(value) {
        this.userHasAccount = value;
      },
      switchToSignUp() {
        this.userHasAccount = false;
      },
    },
  };
</script>

The code block above does the following:

Imported the two child components, Signin and Signup, which handle the sign-in and signup functionality
The data property initialises the component's userHasAccountdata property as false. This property controls whether the sign-in or signup form should be displayed
handleUserHasAccount(value): This method updates the userHasAccount property based on whether the user has an account. It is called when the Signup component emits the user-has-account event
switchToSignUp(): This method sets userHasAccount to false, switching the view to the signup form

At this point, our interface should look like the below:

Adding upload mechanism

Designing the Upload User Interface
To streamline the process of uploading files, we will create a new file named, components/Uploader.vue, and then we will add the following code block into the file:



<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-100 ph3">
      <form enctype="multipart/form-data" v-if="isInitial || isSaving">
        <h2>Upload File</h2>
        <div
          class="b--dashed bw1 b--light-purple pa3 hover-bg-black-10 bg-animate pointer relative h4">
          <input
            type="file"
            accept="image/*,application/pdf"
            class="input-file absolute w-100 h4 pointer o-0" />
          <p  class="tc f4">
            Drag your file here to begin<br />
            or click to browse
          </p>
        </div>
      </form>
    </div>
  </div>
</template>

We achieved the following from the above:

Implemented a <form> element with the enctype="multipart/form-data" attribute, facilitating file uploads
Incorporated an input field with the file type attribute, allowing file uploads and restricting the input to accept only pdf and image files using the accept="image/*,application/pdf" attribute

Now, our upload interface should look like the below:

Adding an upload service

To handle the file upload to be displayed in the UI, we will create a utils/file-upload.service.js and add the code block below:



function upload(formData) {
  const photos = formData.getAll('photos');
  const promises = photos.map((x) => getImage(x)
  .then(img => ({
    id: img,
    originalName: x.name,
    fileName: x.name,
    url: img
  })));
  return Promise.all(promises);
}
function getImage(file) {
  return new Promise((resolve, reject) => {
    const fReader = new FileReader();
    const img = document.createElement('img');
    fReader.onload = () => {
      img.src = fReader.result;
      resolve(getBase64Image(img));
    }
    fReader.readAsDataURL(file);
  })
}
function getBase64Image(img) {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  const dataURL = img.src;
  return dataURL;
}
export { upload }

The code above reads the image we will upload, draws it into a canvas, and then converts it to a Base64 string.

Uploading the file to Xata

To upload the file to Xata, we will edit the components/Uploader.vue to the below:

In the code block above, we achieved the following:

Represented various component states during file uploading using STATUS_INITIAL, STATUS_SAVING, STATUS_SUCCESS, and STATUS_FAILED definitions, which we initialised in the corresponding computed properties - isInitial, isSaving, isSuccess, and isFailed
File Upload Section:
- This section contains a form (<form>) with enctype="multipart/form-data" for file upload
- It displays an "Upload File" heading and a drag-and-drop or file input field that allows users to select files
- Depending on the component's state, it shows messages like "Drag your file here to begin" or "Adding file..." to provide user feedback
- When a file is successfully added, it displays a success message and an option to upload another file and previews the uploaded file just by the side
  - If the uploaded file is an image, then the <img /> element will have its :src attribute populated with the right URL
  - However, if the file is a pdf, the earlier installed vue-pdf-embed package has its :source filled with the right pdf URL to show the document
Component Data:
- The component manages various data properties, including uploadError, currentStatus, fileDataObject, fileURL, and fileName, to track the state and information related to the file uploads and processing
Methods:
- reset(): Resets the form and component's state to its initial state - STATUS_INITIAL
- save(formData): Initiate the file uploadFileToXata() to foster uploading to Xata by using the upload service
- filesChange(fieldName, fileList): Handles changes in the selected files and prepares a formData object for upload
- prepareFormData(): Processes uploaded file data to create an object with metadata, base64 content, name, and URL for the uploaded image
- uploadFileToXata(): Uploads the processed file data to a database using the Xata client. The xata.db.files.create({ … }) takes in the user object, which is necessary to link the file we will upload to the user who uploads it

At this stage, our user interface will look like this:

Listing uploaded files

We have done a great job by allowing the user upload their files to Xata database. But our file explorer will not be enough if the users cannot view these files and download them if need be. To allow the user view all the files we have uploaded, we will create a new file called, components/Filelist.vue. In this newly created file, we will add the code below:



<template>
  <main class="flex flex-wrap items-center justify-between">
    <div v-if="files">
      <section
        class="w-33-l w-50-m w-100 h-50"
        v-for="file in files"
        :key="file.id">
        <div
          class="link dt bb b--black-10 pb2 mt2 blue pointer flex items-center">
          <div class="dtc w3">
            <div v-if="file.file.mediaType.toLowerCase().includes('image')">
              <img :src="file.file.url" alt="Uploaded Image" />
            </div>
            <div v-else-if="file.file.mediaType.toLowerCase().includes('pdf')">
              <img
                src="../assets//pdf-placeholder.png"
                alt="pdf placeholder Image" />
            </div>
          </div>
          <div class="dtc v-top pl2">
            <h1 class="f6 f5-ns fw6 lh-title black mv0">File Name:</h1>
            <h2 class="f7 fw4 mt2 mb0 black-60">{{ file.file.name }}</h2>
            <a
              class="bg-purple dib mv2 f7 pa1 br2 pointer black"
              @click="viewFile(file)"
              >View File</a
            >
          </div>
        </div>
      </section>
    </div>
    <div v-else class="tc f4">No files uploaded yet</div>
  </main>
</template>
<script>
  import { getXataClient } from "@/xata";
  const xata = getXataClient();
  export default {
    data() {
      return {
        files: [],
      };
    },
    components: {
      VuePdfEmbed,
    },
    mounted() {
      this.getFilesFromXata();
    },
    methods: {
      async getFilesFromXata() {
        const userId = this.$route.params.id;
        this.files = await xata.db.files
          .filter({ "user.id": userId })
          .getMany();
      },
    },
  };
</script>

The code above does the following:

Vue.js directives like v-if, v-for, and v-else conditionally render content based on whether there are files to display
Iterates through the list of files and displays each file's details, such as its type (image or PDF), name, and an option to view the file
The data function initializes the files array, storing the list of files to be displayed
In the mounted lifecycle hook, the component calls the getFilesFromXata method to fetch the list of files associated with the user when the component is mounted
The getFilesFromXata method retrieves files associated with a specific user using Xata's database query capabilities. It filters files based on the user's ID and populates the files array with the retrieved data

Our interface should appear like below:

Viewing file content

The implementation above allows users to see a list of all the files they have uploaded to Xata, but it does not cover viewing the file content. To allow users view the uploaded files, we will create a new component called, Fileviewer.vue and add the code below:



    <template>
      <div class="overlay">
        <!-- Overlay content -->
        <div class="overlay-content">
          <!-- Close button -->
          <span
            class="close-button f3 bg-dark-pink white b h1 w1 br3 pa2 center auto flex items-center dim pointer"
            @click="closeOverlay"
            >X</span
          >
          <div v-if="fileType === 'image'">
            <img :src="fileUrl" alt="File" />
            <img
              @click="downloadImage"
              src="../assets/icon_download.svg"
              class="bg-dark-pink pa2 flex items-center br2 white download-button dim" />
          </div>
          <div v-else-if="fileType === 'pdf'">
            <a ref="downloadLink" @click="downloadPdf(fileUrl)">
              <img
                src="../assets/icon_download.svg"
                class="bg-dark-pink pa2 flex items-center br2 white download-button dim" />
            </a>
            <vue-pdf-embed :source="fileUrl" />
          </div>
        </div>
      </div>
    </template>
    <script>
      import VuePdfEmbed from "vue-pdf-embed";
      export default {
        props: {
          fileUrl: String,
          fileType: String,
        },
        components: {
          VuePdfEmbed,
        },
        methods: {
          closeOverlay() {
            this.$emit("close-overlay");
          },
          downloadImage() {
            this.$emit("download-image");
          },
          async downloadPdf(file) {
            try {
              const response = await this.axios.get(file, {
                responseType: "blob", // Set the response type to 'blob' for binary data
              });
              const blob = new Blob([response.data], { type: "application/pdf" });
              const url = window.URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.href = url;
              link.download = "downloaded.pdf"; // Set the desired file name
              link.click();
              window.URL.revokeObjectURL(url);
            } catch (error) {
              console.error("Error downloading PDF:", error);
            }
          },
        },
      };
    </script>
    <style scoped>
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      .overlay-content {
        background: #fff;
        padding: 20px;
        max-width: 80%;
        max-height: 80%;
        overflow: auto;
      }
      .close-button {
        position: absolute;
        top: 25px;
        right: 30px;
      }
      .download-button {
        position: absolute;
        top: 25px;
        left: 30px;
      }
    </style>

An "X" button for closing the overlay (the closeOverlay method is called on click)
fileType prop (either 'image' or 'pdf') displays an image or a PDF viewer component
It imports the VuePdfEmbed component for displaying PDFs
The component receives two props: fileUrl (the file URL to display or download) and fileType (indicating whether it's an image or PDF)
closeOverlay(): This method emits the "close-overlay" event to signal that the overlay should be closed
downloadImage(): This method emits the "download-image" event to trigger image download
downloadPdf(file): This method handles PDF download. It uses Axios to fetch the PDF file as binary data, creates a Blob from the response, and generates a downloadable link for the user. If an error occurs during the download process, it's logged to the console

In the Filelist.vue component, we will import the Fileviewer.vue and add the necessary methods like so:



<template>
  <main class="flex flex-wrap items-center justify-between">
    <div v-if="files">
      <section
        class="w-33-l w-50-m w-100 h-50"
        v-for="file in files"
        :key="file.id">
        <div
          class="link dt bb b--black-10 pb2 mt2 blue pointer flex items-center">
          <div class="dtc w3">
            <!-- codes -->
          </div>
          <div class="dtc v-top pl2">
            <!-- codes -->
            <file-viewer
              v-if="showOverlay"
              ref="goat"
              :fileUrl="overlayFileUrl"
              :fileType="overlayFileType"
              @close-overlay="closeOverlay"
              @download-image="downloadImage"></file-viewer>
          </div>
        </div>
      </section>
    </div>
  </main>
</template>
<script>
  import { transformImage } from "@xata.io/client";
  import { getXataClient } from "@/xata";
  import Fileviewer from "@/components/Fileviewer.vue";
  const xata = getXataClient();
  export default {
    data() {
      return {
        showOverlay: false,
        overlayFileUrl: "",
        overlayFileType: "",
      };
    },
    components: {
      Fileviewer,
    },
    mounted() {
      this.getFilesFromXata();
    },
    methods: {
    // other methods
      viewFile(file) {
        this.overlayFileUrl = file.file.url;
        file.file.mediaType.toLowerCase().includes("image")
          ? (this.overlayFileType = "image")
          : (this.overlayFileType = "pdf");
        this.showOverlay = true;
      },
      closeOverlay() {
        this.showOverlay = false;
      },
      downloadImage() {
        const imageToDownload = transformImage(this.overlayFileUrl, {
          download: "image",
          format: "jpeg",
        });
        window.open(imageToDownload, "_blank");
      },
    },
  };
</script>

We achieved the following using the code block above:

Imported transformImage from "@xata.io/client" and getXataClient from "@/xata"
viewFile(file): When a user clicks on a file, this method is called. It sets the overlayFileUrl to the URL of the clicked file, determines the file type (image or PDF) based on its media type, and sets showOverlay to true to display the overlay
closeOverlay(): This method is called when the user wants to close the overlay. It sets showOverlay to false, hiding the overlay
downloadImage(): This method is called when the user wants to download an image. It transforms the image using Xata's transformImage function, then opens a new browser window to download the transformed image

We should have our UI looking like this at this stage:

Now we will create a new file called, views/DashboardView.vue which will be our dashboard. In this file, we will import the components/Uploader.vue and the components/Filelist.vue file, like so:



<template>
  <div class="bg-light-purple vh-100 dt w-100 helvetica pv2 ph3">
    <div class="flex justify-between items-center">
      <h1 class="ttc">Xata File Explorer</h1>
      <span class="b db underline-hover pointer" @click="signOut"
        >Sign out</span
      >
    </div>
    <Uploader />
  </div>
</template>
<script>
  import Uploader from "@/components/Uploader.vue";
  export default {
    components: {
      Uploader,
    },
    methods: {
      signOut() {
        this.$router.push({ name: "home" });
        this.$route.params.id = "";
        this.$notify({ type: "success", text: "User logged out!" });
      },
    },
  };
</script>

In the code above, we achieved the following:

Created a new file called views/DashboardView.vue
Imported the Upload component
Created a signOut method that logs users out

At this point, our file explorer application built with Xata should look like the below:

Conclusion

In this article, we talked about building a File Explorer using Xata. This project exemplifies the capabilities of Xata and Vue.js and the amazing tools we can build from combining these two tools together or individually. The File Explorer we built is the beginning of what we can achieve.

Resources

Here are some additional resources that will be helpful when working with Xata:

Building a Custom Image Editor with Xata

Moronfolu Olufunke — Tue, 26 Sep 2023 10:07:14 +0000

Imagine having the ability to build our very own image editor, one that is not just functional but also oozes with style and user-friendliness. In this article, we will unveil the secret recipe for creating a custom image editor that is as delightful to use as it is to build.

"Building an image editor? Isn't that too complex?" Well, fret not! We are about to prove that with a pinch of Vue.js, a dash of Xata, and a sprinkle of imagination, we can create an image editor that will leave users clicking and smiling.

This article will discuss building an image editing tool that allows users to upload, transform, and download images effortlessly. We will walk through the process of building an image editor step by step using Vue.js and Xata.

Xata is a Serverless Data platform designed to simplify how developers work with data. It combines the power of a traditional database with the ease of use found in SaaS (Software as a Service) spreadsheet applications.

Xata recently introduced a new feature - File Attachments. This feature lets developers integrate files, images, and documents directly into their database records. It eliminates the need for separate storage services and streamlines the process of managing structured data and binary objects like images, videos, and documents.

In essence, Xata's File Attachments revolutionize data app development by simplifying the architecture and reducing the number of services developers need to manage while enhancing the user experience and versatility of applications.

GitHub

Check out the complete source code here.

Netlify

We can access the live demo here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
Creating a free account with Xata

Creating a Vue app

We can create a new Vue app using the npm create vue@latest command.
Scaffolding the project would provide a list of options from which we can select the best fit for the project.

Styling

The CSS framework we will use in this project is Tachyons CSS, which we will install by running the command below in the terminal.

npm i tachyons

Afterward, we will make it globally available for usage in the project by adding the line below in our src/main.js:

import 'tachyons/css/tachyons.css';

Creating a Xata Database

To set up a database in Xata, we will start by logging into our existing account or creating a new one. After accessing our account, we will navigate to the database section in the user dashboard. Here, we can create a new database. We will name this database image-transformation for our specific use case since it aligns with the task at hand.

Once we create this database, the next step is to establish a table within that database and define the necessary records or fields we want the table to contain. In our project, we will name the table images. Within the images table, we will create a record called image with a type of file. This image record will be the focal point for all our manipulations.

The accompanying media below provides a visual guide to creating a record.

Setting up Xata in our Vue application

To incorporate Xata into our project, we will follow these installation steps:

Install Xata SDK
We will run the following command in the command line interface:

npx xata

Initialize Xata
Now, we can initialize Xata for use within the application with this command:

xata init

Configuration Options
Xata will present us with various configuration options to choose from. After making our selections, Xata will generate essential files, including .xatrc and .env.

Edit API Key
To ensure our Vue application can access the Xata environment, we will need to modify the Xata API key within the Vue app like so:

VITE_XATA_API_KEY="add your api key"

We can now modify the xata.js file to use this intialised VITE_XATA_API_KEY like so:

const defaultOptions = {
  enableBrowser: true,
  apiKey: import.meta.env.VITE_XATA_API_KEY,
  databaseURL:
    "https://...",
};

We would have seamlessly integrated Xata into our project by following the steps above.

Creating the landing page

In an ideal scenario, our solution should include a welcoming landing page that provides users with essential information about the product. For our project, we will design a simple landing page that offers users a quick overview of the product's purpose. To achieve this, we will create a views/HomeView.vue file and insert the following code:

<template>
  <header class="vh-100 bg-light-pink dt w-100 helvetica">
    <div
      style="
        background: url(http://mrmrs.github.io/photos/display.jpg) no-repeat
          center right;
        background-size: cover;
      "
      class="dtc cover ph3 ph4-m ph5-l tc">
      <div class="tc mt4 mb5">
        <h1 class="f2 f-subheadline-l measure lh-title nb1 fw9">X-Transformr</h1>
        <h2 class="f6 fw6 black">
          Store, transform and update images using Xata (File Attachments)
        </h2>
      </div>
    </div>
  </header>
</template>

At the addition of the code above, our view should appear like the below:

Adding the uploading mechanism

Creating the upload UI
We will include a user-friendly input interface that enables users to upload images from which we can extract text. We will integrate the following code block into the components/Uploadcontainer.vue file to achieve this.

<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-50-ns w-100 ph3">
      <form enctype="multipart/form-data">
        <h2>Add Image</h2>
        <div
          class="b--dashed bw1 b--light-purple pa3 hover-bg-black-10 bg-animate pointer relative h4">
          <input
            type="file"
            id="fileInput"
            accept="image/*"
            class="input-file absolute w-100 h4 pointer o-0" />
          <p class="tc f4">
            Drag your image here to begin<br />
            or click to browse
          </p>
        </div>
      </form>
    </div>
  </div>
</template>

We achieved the following from the above:

Implemented a <form> element with the enctype="multipart/form-data" attribute, facilitating file uploads.
Incorporated an input field with the file type attribute, allowing file uploads and restricting the input to accept only image files using the **accept="image/*" attribute."

Creating the transformation UI
Xata has a number of image transformation options that we can apply to images to transform them to our desired taste in real-time. In our case, we will focus on four transformation options, which include the height, width blur, and sharpness of the image. To achieve this, we want to create a mechanism that allows users to add the transformation option values. For this, in the components/Uploadcontainer.vue we will create a <form></form> and add input methods that can be fed to Xata.

In the code above, we achieved the following:

Created a form with input fields that allow the user to adjust the parameters of interest
In the data property, we initialized the input fields and set default values for each parameter.
Added a download button to allow users to get the transformed images

In the views/HomeView.vue, we imported the component like so:

<template>
  <header class="vh-100 bg-light-pink dt w-100 helvetica">
    <div
      style="
        background: url(http://mrmrs.github.io/photos/display.jpg) no-repeat
          center right;
        background-size: cover;
      "
      class="dtc cover ph3 ph4-m ph5-l tc">
      <div class="tc mt4 mb5">
        ...
      </div>
      <Uploadcontainer />
    </div>
  </header>
</template>
<script>
  import Uploadcontainer from "@/components/Uploadcontainer.vue";
  export default {
    components: {
      Uploadcontainer,
    },
  };
</script>

We did the above to facilitate the component to show up on the landing page. At this point, our landing page should look like the below:

Adding an upload service

To handle the file upload to be displayed in the UI, we will create a utils/file-upload.service.js and add the code block below:

function upload(formData) {
  const photos = formData.getAll('photos');
  const promises = photos.map((x) => getImage(x)
  .then(img => ({
    id: img,
    originalName: x.name,
    fileName: x.name,
    url: img
  })));
  return Promise.all(promises);
}
function getImage(file) {
  return new Promise((resolve, reject) => {
    const fReader = new FileReader();
    const img = document.createElement('img');
    fReader.onload = () => {
      img.src = fReader.result;
      resolve(getBase64Image(img));
    }
    fReader.readAsDataURL(file);
  })
}
function getBase64Image(img) {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  const dataURL = img.src;
  return dataURL;
}
export { upload }

The code above reads the image we will upload, draws it into a canvas, and then converts it to a Base64 string.

Uploading the image to Xata

Before we can transform the image, we will have to first upload the image to Xata. To do this, we will edit the components/Uploadcontainer.vue to the below:

The code block above does the following:

Represented various component states during image processing using STATUS_INITIAL, STATUS_SAVING, STATUS_SUCCESS, and STATUS_FAILED definitions, which we initialised in the corresponding computed properties - isInitial, isSaving, isSuccess, and isFailed.
Image Upload Section:
- This section contains a form (<form>) with enctype="multipart/form-data" for file upload.
- It displays an "Add Image" heading and a drag-and-drop or file input field that allows users to select image files.
- Depending on the component's state, it shows messages like "Drag your image here to begin" or "Adding image..." to provide user feedback.
- When an image is successfully added, it displays a success message along with an option to upload another image and previews the uploaded image.
Component Data:
- The component manages various data properties, including uploadedImages, uploadError, currentStatus, uploadFieldName, imageDataArray, recordId, imageURL, and imageName, to track the state and information related to image uploads and processing.
Methods:
- reset(): Resets the form and component's state to its initial state - STATUS_INITIAL
- save(formData): Initiate the image uploadImageToXata() to foster uploading to Xata by using the upload service
- filesChange(fieldName, fileList): Handles changes in the selected image files and prepares a formData object for upload.
- prepareFormData(): Processes uploaded image data to create an object with metadata, base64 content, name, and URL for the uploaded image.
- uploadImageToXata(): Uploads the processed image data to a database using the Xata client.

At this point, if you check your Xata dashboard, you should see an image uploaded like the below:

In this image, we can see the images table with the image record. This image record currently has the uploaded image with the id (record_id) which we will be using later in our project.

When we upload an image, we should see our UI look like this:

Transforming images

Now that we have successfully uploaded our image, it is now time to apply transformations. To do this, we will edit the components/Uploadcontainer.vue file and add the following:

In this code block, we achieved the following:

Added a conditional render (v-if="imageURL") based on the existence of an imageURL property. If the image has been uploaded successfully to Xata and we have a URL, the form component for customising the transformation values will become visible to the user
debounceTransform: This function is a debounced version of the editImage method, which means it waits for a specified delay (2000 milliseconds or 2 seconds) after the user stops typing before executing editImage.
editImage: This asynchronous function performs image editing and transformation using data from the Xata API. It calculates a new image URL based on the user's height, width, sharpening, and blur input and updates the component's properties accordingly.
Installed lodash and used the debounce() function to control the rate at which the debounceTransform method is executed.

Download image

After editing the pictures, we made available functionality for the user to download the edited image. We will edit the components/Uploadcontainer.vue to reflect this change.

<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-50-ns w-100 ph3">
      <!-- upload image -->
    </div>
    <section class="w-40-l w-50-m w-100 ph3 tl" v-if="imageURL">
      <h2>Transform Image</h2>
      <form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6">
        <!-- input fields -->
        <button
          @click="downloadimage"
          class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7">
          Download
        </button>
      </form>
    </section>
  </div>
</template>
<script>
  import { transformImage } from "@xata.io/client";
  export default {
    data() {
      return {
        imageURL: "",
        imageName: "",
        transformedImageUrl: "",
      };
    },
    computed: {...},
    methods: {
    downloadimage() {
        this.transformedImageUrl = transformImage(this.imageURL, {
          download: this.imageName,
          format: "jpeg",
        });
        window.open(this.transformedImageUrl, "_blank");
      },
    },
    mounted() {...},
  };
</script>

At this point, our whole application should look like the below:

Conclusion

In this article, we talked about building an image editor using Xata. Xata acts as our database and the image transformer using the options made available by the Xata service.

Here are some additional resources that will be helpful when working with Xata:

Enhancing user experience with real-time health data insights in Nuxt.js

Moronfolu Olufunke — Fri, 17 Mar 2023 08:16:16 +0000

Real-time data processing involves almost instantaneous feedback after program execution. This type of processing is critically important in the health field to track and monitor items such as user dosage or patient test results to decide on a patient's health status.

In this article, we will demonstrate the use of Appwrite to build application in Nuxt.js that allows tracking and enhancing user experience by leveraging on Appwrite's real-time feature. Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application

GitHub

Check out the complete source code here.

Prerequisites

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript and Vue.js
Docker installation
An Appwrite instance; check out this article on how to set up an instance locally or via one-click install on DigitalOcean or Gitpod
Installation of the Appwrite CLI

Creating a Nuxt project

Use npx create-nuxt-app <project-name> to create a new Nuxt.js project.
Scaffolding the Nuxt.js project provides a list of options, from which we will pick the one that best suits our preferences.

We can start our Nuxt3 application by running the following command:

cd <project name>
npm run dev

Nuxt.js will, in turn, start a hot-reloading development environment that is accessible by default at http://localhost:3000.

Creating an Appwrite project

To create a new project, we will start the Appwrite instance on our machine and navigate to the specified hostname and port http://localhost:80. Next, we must log into our account or create an account if we don't have one.

Learn more about setting up Appwrite here. On the console, click on the Create Project button.

The project dashboard becomes visible on the console after the project creation. We can access the inner page from the Settings tab at the bottom of the page.

The inner page allows us to copy the Project ID and API Endpoint for our Nuxt application.

Adding Appwrite Web SDK to Nuxt.js

We will then proceed to create an init.js file in our Nuxt.js application's root directory to initialize the Appwrite Web SDK by adding the code block below:

import { Client, Account, functions } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
    .setEndpoint('http://localhost/v1') // API Endpoint
    .setProject('***') // project ID
;

export const insightFunction = () => {
  const functions = new Functions(client)
  return functions.createExecution('***') // Function ID
}

Creating an Appwrite function

Among Appwrite's supported runtimes for creating a serverless function is Node.js. Appwrite's serverless function gives room to build on and customize Appwrite server functionality by adding and executing our custom code.

Integrating Appwrite function in Nuxt.js

We will start by logging onto Appwrite's server using the Appwrite command-line interface (CLI), like so:

appwrite login

Running the command above requires us to use our Appwrite credentials in the terminal.

After logging into the application, we will initialize and link the Nuxt.js application with the previously created Appwrite project. To do this, we will run the command below:

appwrite init project

Running the command above will display a list of options from which we will pick those appropriate for our project.

Next, let’s create a function in our Nuxt.js application. We will do this by running the command below:

appwrite init function

At the successful execution of the above command, we will see a new folder named functions/<function-name> in our Nuxt.js application.

Deploying the Appwrite function

To deploy the Appwrite function, we will run the command below:

appwrite deploy function

Executing the above command will require us to pick the appropriate function we want to deploy. Upong successful deployment, we will get a message like the one below in our terminal.

✓ Success Deployed <function-name> ( functionID)

In our Appwrite function console, we will also have a view that looks like the below:

This signifies the successful deployment of our Appwrite function.

We will also update the function's permissions to allow access within the Nuxt.js application. To do this, navigate to the Settings tab and add a role of any to the Executive Access field:

Creating the signup page

We will create a signup page where people who will later be assigned roles to perform certain operations within the database can generically create an account. To do this, we will create a components/Sign-up.vue and add the code below:

<template>
  <div class="ba b--light-blue bg-light-blue bw3 vh-100 pv5 ph2 athelas">
    <form @submit.prevent="signUp" class="white bg-navy br3 mw6 w-40-m w-70 w-20-l center pa3 shadow-5">
      <h2 class="ttc tc">Sign up</h2>
      <label for="name" class="db mb1 white">Name</label>
      <input name="name" id="name" type="text" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="John Doe" v-model="name">
      <label for="email" class="db mb1 white">Email</label>
      <input name="email" id="email" type="email" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="example@email.com" v-model="email">
      <label for="password" class="db mb1 white">Password</label>
      <input name="password" id="password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="••••••••" v-model="password">
      <label for="confirm-password" class="db mb1 white">Confirm Password</label>
      <input name="confirm-password" id="confirm-password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" v-model="confirmPassword" placeholder="••••••••">
      <button type="submit" class="center db ph4 pv2 bg-navy ba br3 white pointer">Sign up</button>

      <p>Already have an account? <a href="/signin" class="white b">Sign in</a> </p>
    </form>    
  </div>
</template>

Implementing the code block above, we achieved the following:

Created a functional form to handle input from potential users of our dashboard
Added the data in the Vue script to manage the username, email, and password of the people who will fill out the form

Adding the signup functionality

Our interface will need to be connected to Appwrite to authenticate users. To do this, we will add the following code in the <script> tag of our components/Sign-up.vue file.

<script lang="ts">
import Vue from 'vue'
import {account} from '~/init'
export default Vue.extend({
  data: () => ({
    name: "",
    email: "",
    password: "",
    confirmPassword: ""
  }),
  methods: {
    signUp: async function(){
      if (this.password.length >= 8){
        if(this.password === this.confirmPassword) {
          try{
            await account.create('unique()', this.email, this.password, this.name)
            alert("account created successfully")
            window.location.href = '/signin'
          } catch (e) {
            console.log(e)
          }
        } else {
          alert("password do not match")
        }
      } else {
        alert("password length should be up to 8 characters")
      }
    },

  }

})
</script>

The code block above achieves the following:

Imports the Appwrite SDK initialized in the init.js file.
Creates the signUp function in the methods property, which performs the following functions:
- Verifies that the password length is equal to or greater than eight characters.
- Confirms that the characters in password and confirmPassword are the same.
- Accesses Appwrite's services using the account.create to create a new account using the user's email, password, and name.
  - To use Appwrite's create account service, it's mandatory to add the userId; in this case, we used uniqueId to generate one automatically.
  - Adding email and password is also mandatory.
  - The name option is optional; we can create an account without one.
- window.location.href allowed us to navigate to the insight interface after successful account creation.

Next, let's import the components/Sign-up.vue into the pages/index.vue, like so:

<template>
  <div>
    <Signup/>
  </div>
</template>

At this point, our signup page should look like the below:

Creating the sign in interface

We also need to create a sign in page that allows registered users to log in to the dashboard. To do this, we will create a pages/Signin.vue and add the code below:

<template>
  <div class="ba b--light-blue bg-light-blue bw3 vh-100 pv5 ph2 athelas">
    <form @submit.prevent="signIn" class="bg-navy br3 mw6 w-40-m w-70 w-20-l center pa3 shadow-5 white">
      <h2 class="ttc tc">Sign In</h2>
      <label for="email" class="db mb1 white">Email</label>
      <input name="email" id="email" v-model="email" type="email" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="example@email.com">
      <label for="password" class="db mb1 white">Password</label>
      <input name="password" id="password" v-model="password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="••••••••">
      <button type="submit" class="center db ph4 pv2 bg-navy ba br3 white pointer">Sign in</button>

    </form>    
  </div>
</template>

The code block above achieves the following:

Creates a functional form to handle input from registered users
Adds the data in the Vue script to manage the email and password

Adding the signin functionality

Our interface must be connected to Appwrite to authenticate users for signing in. To do this, we will add the code below in the Signin.vue.

<script lang="ts">
import Vue from 'vue'
import {account} from '~/init'
export default Vue.extend({
  data: () => ({
    email: "",
    password: "",
  }),
  methods: {
    signIn: async function () {
      try{
        let accountDetails = await account.createEmailSession(this.email, this.password)
        alert("user signed in")
        this.$router.push({ path: `/insight/${accountDetails.userId}`})
      } catch (e){
          console.log(e)
      }
    }
  }

})
</script>

Above, we imported the Appwrite SDK initialized in the init.js file. We also created a function called signIn that does the following:

Accesses Appwrite's services using the account.createEmailSession to create a new account session using the user's email and password
this.$router.push allows us to navigate to the insight interface after successful user login

At this point, our interface will look like this:

Setting up Appwrite's database

One of the services offered by Appwrite is the Database Service, which allows us to store data and fetch it as needed.

Creating a database

To create a database in Appwrite, click on the Database option in the menu tab, where we can add a database to the system.

Creating a collection

Appwrite's database services also provide collection services. These collections act as containers for documents. To create a collection, select the desired database from which we can add a new collection.

Creating an attribute

Our document will have some particular attributes. To create them, we will navigate to the Attributes section. In our case, we will choose the Boolean Attribute. We can then create an Attribute ID with the name "doses".

Now, will set the permission roles for the document. Click on the Settings tab, and in the Role input field, pick the role that best describes to whom we are giving access.

In our case, the role is any, and we will allow all four actions: create, read, update, and delete.

Creating the Insight page

We will be creating a page where we track users' dosages. Every day a user is allowed to take just three doses, after which they are prompted to log in the next day to get access to more doses.

We will start by creating an interface that allows users to log their dosage. To do this, we will create a pages/_insight/insight.vue and add the code below:

<template>
  <div class="bg-light-blue vh-100 pa3 tc">
    <h2 class="ttc">Real Time Health Data analytics with Appwrite</h2>
    <div class="br3 bg-navy ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4 h5">
      <p class="f3">Click on this button to get the dosage</p>
        <button class="link br3 pv2 ph2 mt4 dib black fw6 bg-white ba b--navy pointer inline-flex items-center hover-bg-lightest-blue" @click="getDosage">
          <span class="f4 ml2 pr2">Get dosage</span>
        </button>
    </div>
  </div>
</template>

The code above achieves the following:

Creates an interface where users are redirected after sign up or sign in
The insight interface allows users to click on a button getDosage to track their dosage journey for each day

Adding the getDosage() functionality

Now we will connect the interface to a working functionality that allows users to log and track their dosage.

<script>
import {client, insightFunction} from '~/init'
import { Databases } from "appwrite";
const databases = new Databases(client);
import moment from "moment";
export default {
  data() {
    return {
      permisssionsArray: [],
    }
  },
  mounted() {
    insightFunction().then((res)=> res).catch((error)=> {
      console.log(error)
    })
    this.checkDosage();
    if(this.$route.params.insight){
      try {
        client.subscribe("documents", (response) => {
          this.checkDosage();
        });
      } catch (error) {
        console.log(error, "error");
      }
    }
  },
  methods: {
    moment,
    async getDosage() {
      await databases.createDocument(
        "63ef7e057f16c9d0b811",
        "63ef7e389fdfbe02d8e9",
        "unique()",
        {
          doses: true,
        }
      );
    },
    async checkDosage() {
      const dosageDetails = await databases.listDocuments(
        "63ef7e057f16c9d0b811",
        "63ef7e389fdfbe02d8e9"
      );
      dosageDetails.documents.filter(obj => {
        if( moment(obj.$createdAt).format("YYYY-MM-DD") === moment().format("YYYY-MM-DD")) {
          obj.$permissions.find(element => {
          if(element.includes(this.$route.params.insight)) {
            this.permisssionsArray.push(element)
            if (this.permisssionsArray.length >= 3){
              this.$swal({icon: 'success', title: 'Wait one day before taking another dose. Take a walk instead', timer: 10000, showConfirmButton: false,});
            }
              return;
            } else {
              return;
            }
          })
        }
      })
    }
  }
}
</script>

The code above achieves the following:

Imports the dependencies from the init.js file as well as from Appwrite.
Installed the moment.js package, which we used for checking and comparing the days for the dosages.
The getDosage method accesses the databases method from Appwrite to create a new document in the database. This method takes the database ID, collection ID, Appwrite's ID.unique() method, and the attribute value(s) as parameters. In this case, our attribute value is doses, which we created on the Appwrite admin dashboard.
We call the listMessages() function, which lists all the messages that were sent to the Appwrite's database.
Checks whether the user has taken up to 3 doses and shows a notification telling the user to come back the next day.

At this point, our application should look like the below:

Conclusion

This article discusses enhancing user experience by providing data insights using Appwrite's real-time features.

Resources

Quickly add role-based access control (RBAC) to a blog dashboard in Nuxt.js

Moronfolu Olufunke — Fri, 23 Dec 2022 09:31:34 +0000

Role-based access control (RBAC) is a form of system security that restricts unauthorized people from gaining access to some system’s data. It helps to protect not only data, but it also separate provides users the data needed to get their work done.

RBAC for an entry-level employee or intern could mean restricting access to any of the company’s services that could be potentially at risk if not handled properly.

Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Appwrite delivers solutions that help building backend servers for applications.

This article discusses adding RBAC to a blog dashboard in Nuxt.js using Appwrite.

GitHub

Check out the complete source code here.

Prerequisites

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
Docker installation
An Appwrite instance; check out this article on how to set up an instance locally or via one-click install on DigitalOcean or Gitpod

Creating our project

Use npx create-nuxt-app <project-name> to create a new Nuxt.js project.
The process of scaffolding the project provides a list of options, which should look like this:

We can start our Nuxt3 application by running the following command:

cd <project name>
npm run dev

Nuxt.js will, in turn, start a hot-reloading development environment that is accessible by default at http://localhost:3000.

Adding the blog dashboard template

To add RBAC to an application, we will grab an off-the-shelf dashboard that we will modify to meet our goal. Our off-the-shelf template will be the dashboard example from the Bootstrap website.

By the time we are through with customization, the dashboard should look like the image below.

We can follow the progress by switching to the starter-app branch in this GitHub repository.

Installing Appwrite

To use Appwrite in our project, we will install the Appwrite SDK from the command line, like so:

npm install appwrite

Creating an Appwrite project

To create a new project, we will start up the Appwrite instance on our machine and navigate to the specified hostname and port http://localhost:80. Next, we need to log into our account or create an account if we don’t have one.

Learn more about setting up Appwrite here. On the console, click on the Create Project button.

!Appwrite project creation page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enjfmgfj9sih7gz0ekrc.png)

The project dashboard becomes visible on the console after the project creation. We can access the inner page from the Settings tab at the bottom of the page.

The inner page allows us to copy the Project ID and API Endpoint for our Nuxt application.

We will then proceed to create an init.js file in our Nuxt.js application’s root directory to initialize the Appwrite Web SDK by adding the code block below:

import { Client, Account } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
    .setEndpoint('http://localhost/v1') // API Endpoint
    .setProject('***') // project ID
;

Creating the signup page

<template>
  <div class="">
    <main class="form-signin w-100 mx-auto py-5 px-5 my-5">
      <form class="mt-5" @submit.prevent="signUp">  
        <h1 class="h3 mb-4 fw-normal text-center">Admin Dashboard</h1>
        <div class="form-floating mb-3">
          <label for="floatingInput">Username</label>
          <input type="username" v-model="username" class="form-control" id="floatingInput" placeholder="Username">
        </div>
        <div class="form-floating mb-3">
          <label for="floatingInput">Email address</label>
          <input type="email" v-model="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        </div>
        <div class="form-floating mb-4">
          <label for="floatingPassword">Password</label>
          <input type="password" v-model="password" class="form-control" id="floatingPassword" placeholder="Password">
        </div>
        <div class="form-floating mb-4">
          <label for="floatingPassword">Confirm Password</label>
          <input type="confirm-password" v-model="confirmPassword" class="form-control" id="floatingPassword" placeholder="Confirm Password">
        </div>

        <button class="w-100 btn btn-lg btn-primary" type="submit">Get Access</button>
        <p class="mt-3">Already have an account? <nuxt-link to="/signin">Sign in</nuxt-link> </p>
      </form>
    </main>
  </div>
</template>
<script>
export default {
  data: () => ({
    username: "",
    email: "",
    password: "",
    confirmPassword: ""
  }),
}
</script>

<style scoped>
.form-signin {
  max-width: 400px;
  padding: 15px;
  border: 5px solid #0069D9;
}
.form-signin .form-floating:focus-within {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>

Implementing the code block above, we achieved the following:

Created a functional form to handle input from potential users of our dashboard
Added the data in the Vue script to manage the username, email, and password of the people who will fill out the form

Adding the signup functionality

Our interface will need to be connected to Appwrite to authenticate users. To do this, we will add the following code in the <script> tag of our components/Signup.vue file.

<script>
import {account} from '~/init'
export default {
  data: () => ({
    // data goes here
  }),
  methods: {
    signUp: async function(){
      if (this.password.length >= 8){
        if(this.password === this.confirmPassword) {
          try{
            await account.create('unique()', this.email, this.password, this.username)
            alert("account created successfully")
            window.location.href = '/signin'
          } catch (e) {
            console.log(e)
          }
        } else {
          alert("password do not match")
        }
      } else {
        alert("password length should be up to 8 characters")
      }
    },
  }
}
</script>

The code above does the following:

Imports the Appwrite SDK initialized in the init.js file.
Creates the signUp function in the methods property, which performs the following functions:
- Verifies that the password length is equal to or greater than eight characters.
- Confirms that the characters in password and confirmPassword are the same.
- Accesses Appwrite’s services using the account.create to create a new account using the user’s email, password, and name.
  - To use Appwrite’s create account service, it’s mandatory to add the userId; in this case, we used uniqueId to generate one automatically.
  - Adding email and password is also mandatory.
  - The name option is optional, and we can create an account without one.
- window.location.href allowed us to navigate to the chat interface after successful account creation.

Next, let's import the components/Signup.vue into the pages/index.vue, like so:

<template>
  <div>
    <Signup/>
  </div>
</template>

At this point, our signup page should look like the below:

Creating the sign-in interface

We also need to create a sign-in page that allows already registered users to log in to the dashboard. To do this, we will create a pages/Signin.vue and add the code below:

<template>
  <div class="">
    <main class="form-signin w-100 mx-auto py-5 px-5 my-5">
      <form class="mt-5" @submit.prevent="signIn">  
        <h1 class="h3 mb-4 fw-normal text-center">Admin Dashboard</h1>
        <div class="form-floating mb-3">
          <label for="floatingInput">Email address</label>
          <input type="email" v-model="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        </div>
        <div class="form-floating mb-4">
          <label for="floatingPassword">Password</label>
          <input type="password" v-model="password" class="form-control" id="floatingPassword" placeholder="Password">
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">Get Access</button>
        <p class="mt-3">New? Create an account? <nuxt-link to="/">Sign up</nuxt-link> </p>    
      </form>
    </main>  
  </div>
</template>
<script>
import {account} from '~/init'
export default {
  data: () => ({
    email: "",
    password: "",
  }),
}
</script>

The code block above achieves the following:

Creates a functional form to handle input from registered users
Adds the data in the Vue script to manage the email and password ### Adding the sign-in functionality Our interface will need to be connected to Appwrite to authenticate users for signing in. To do this, we will add the code below in the SigninView.vue.

<script>
import {account} from '~/init'
export default {
  data: () => ({
    email: "",
    password: "",
  }),
  methods: {
    signIn: async function () {
      try{
        let accountDetails = await account.createEmailSession(this.email, this.password)
        alert("user signed in")
        this.$router.push({ path: `/dashboard/${accountDetails.userId}`})
      } catch (e){
        console.log(e)
      }
    },
  }
}
</script>

Above, we imported the Appwrite SDK initialized in the init.js file. We also created a function called signIn that does the following:

Accesses Appwrite’s services using the account.createEmailSession to create a new account session using the user’s email and password
this.$router.push allows us to navigate to the chat interface after successful user login

At this point, our interface will look like this:

Adding user role on the Appwrite dashboard

Appwrite allows us to give users role-based access to perform either or all of these functions:

Read
Read and write
Read, write, and delete

To do this, we will create three users from our signup page and give them different role access from Appwrite.

Creating users

We will create one user here for demo purposes to show us how the signup process works.

We will do this for two more users. Afterward, we will navigate to our appwrite dashboard to add the permissions for each user.

Setting up Appwrite’s database

One of the services offered by Appwrite is the Database Service, which allows us to store data and fetch it as needed.

Creating a database

To create a database in Appwrite, click on the Database option in the menu tab, where we can add a database to the system.

Creating a collection

Appwrite’s database services also provide collection services. These collections act as containers for documents. To create a collection, select the desired database from which we can add a new collection.

After creating a new collection, the system redirects us to the Settings page, where we can set the top-level permissions needed to access the database service. In our case, we will allow document security, allowing users to access only the documents they have express permission to access.

Creating attributes

Our document will have some peculiar attributes. To create them, we will navigate to the Attributes section. In our case, we will choose the New String Attribute.

We will also add an Attribute Key named “message” with a size of 256 bits.

Next, we will create a document from where we can add the document permissions.

From the newly created document, we can set roles and permissions.
We will click on the permissions tab, and in the Role input field, we will pick the role that best describes to whom we are giving access. In our case, the role is select users, as this allows us to assign roles to only specific users. We will match this role with the corresponding user id from some of the already-created users in our database.

We will create three different roles, and at the end, we should have our documents permission looking like the below:

Connecting the dashboard to Appwrite’s database

We will navigate to the dashboard.vue file and import the Appwrite’s SDK initialized in the init.js and Appwrite’s database method. We will also create an instance of databases using the imported databases method from Appwrite, which takes the client as a parameter. Like so:

import {client} from '~/init'
import { Databases } from 'appwrite';
const databases = new Databases(client);

We will also update the data property in the script tag with the following options that will add state changes to the dashboard. Like so:

data() {
  return {
    permisssionsArray: [],
    denyActive: false,
    dashboardActive: false,
    orderActive: false,
    reportActive: false,
  }
}

Get documents permissions from the database

Now, we can use the getDocumentPermissions function to get document permission:

mounted(){
  this.getDocumentPermissions()
},
methods: {
  getDocumentPermissions: async function() {
    let promise = await databases.getDocument('6381e4342875d287ab7b', '6381e44a94d7c36be8f9', '6385d5b030814a0a9b78');
    const match = promise.$permissions.find(element => {
      if (element.includes(this.$route.params.dashboard)) {
        this.permisssionsArray.push(element)
        let newPermission = ''
        for (let i = 0; i< this.permisssionsArray.length; i++){
          newPermission += this.permisssionsArray[i]
        }

        if(newPermission.includes('read') && newPermission.includes('update') && newPermission.includes('delete')){
          this.reportActive = true;
        } else if(newPermission.includes('read') && newPermission.includes('update')){
          this.orderActive = true;
          this.dashboardActive = true;
        } else if(newPermission.includes('read')){
          this.dashboardActive = true;
        } 
      }
    });
  },
},

We achieved the following from the above code block:

Created the getDocumentPermissions method, which accesses the databases method from Appwrite to get all documents in the database.
The getDocumentPermissions method takes the database, collection, and Document ID as parameters. These IDs can be found on the document dashboard on Appwrite.
Returned documents from the Appwrite database are stored in the promise variable.
Checked whether the user ID in the permissions object matches the current user. If this is true, we create a permissionsAray that contains all the permission for that user.
Looped through the array to concatenate the user permissions for easy identification of the proper permissions for interface access.
Created conditions based on the user’s permission.

At this point, a user with read access permission can only see the dashboard navigation.

A user with read and update permissions can see the dashboard navigation and the navigation links to check orders.

Likewise, a user with the read, update, and delete permissions will be able to see the dashboard, the order reports, and the saved reports. Like so:

Conclusion

This article discusses adding role-based access control to a dashboard using Appwrite’s database and permissions features.

Resources

Build a Waitlisting Application in Vue using Xata and Cloudinary

Moronfolu Olufunke — Thu, 24 Nov 2022 15:55:37 +0000

For many reasons, businesses start their introduction to the market by launching a waitlist. Universities and medical institutions are known for having waitlists for admissions and surgeries, respectively.

This article will discuss building a waitlisting application in Vue using Cloudinary and Xata.

Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web.

Xata is a Serverless Data platform that simplifies how developers work with data by providing the power of a traditional database with the usability of a SaaS spreadsheet app.

GitHub

Check out the complete source code here.

Netlify

We can access the live demo here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
A Cloudinary account (sign up here)
Creating a free account with Xata

Creating a Vue app

Using the vue create <project-name> command, we will create a new Vue app.
The process of scaffolding the project would provide a list of options, which could look like this:

We can start our Vue application by running the following command:

cd <project name>
npm run serve

Vue will, in turn, start a hot-reloading development environment accessible by default at http://localhost:8080.

Styling

The CSS framework to be used in this project is Tachyons CSS. Install it by running the command below in the terminal.

npm i tachyons

Afterward, make it globally available for usage in the project by adding the line below in our src/main.js:

import 'tachyons/css/tachyons.css';

Creating a Xata Database

To create a database on Xata, we must either log into our account or create a new account. Next, we will go to the user dashboard's database tab to create an appropriate database.

We will create a new table within the database and add the appropriate records/fields that we want the table to have. In the case of the solution we are building, we will create a signups table with three fields: firstname, lastname, and email.
These fields signify the data we will track in our application before saving it to the database.

Setting up Xata in our Vue application

Installing Xata CLI

We will first need to install Xata CLI on our machine. To do this, we will open the command line terminal as an administrator and run the command below.

npm install -g @xata.io/cli@latest

Installing Xata in our project

To use Xata in our project, we will install the Xata software development kit (SDK) from the command line like so:

npx xata

After this, we can then initialize Xata for use in our application by running the command below:

xata init

Xata will present us varieties of options from which we can choose. In the end, Xata will generate some files for usage, among which we will have the .xatrc and .env files.
We will need to edit the name of the Xata API key in our Vue app to the one below to allow the Vue application to pick up the environment variable.

VUE_APP_XATA_API_KEY="add your api key"

Cloudinary Setup

For our application's asset management, if you haven't already, you need to create an account with Cloudinary by clicking here. Creating an account is entirely free.
We will need to install the Cloudinary Vue.js SDK with the command below before configuring it in your Vue app.

npm install cloudinary-vue

We will need to configure the installed SDK in our Vue app by navigating to the main.js and adding the following to the file.

import Cloudinary from "cloudinary-vue";

Vue.use(Cloudinary, {
  configuration: { 
    cloudName: "XXX," //add the cloudinary cloudname here,
    secure: true }
});

Our waitlist will have an image, which we will upload to Cloudinary. In this case, we used this image by Hannah Busing.

Adding the landing page image

We want our waitlist application to have the image we uploaded to Cloudinary. To do this, we will create a file named components/TheCloudinaryBackground.vue and add the code below:

<template>
  <cld-image publicId="hannah-busing-unsplash" dpr="auto" class="dn db-l w-50-ns vh-100" quality= "auto">
    <cld-transformation flags="rasterize" />
  </cld-image>
</template>
<script>
export default {
  name: "TheCloudinaryBackground",
}
</script>

From the above, we achieved the following:

Cloudinary provides us with several templates to use in our Vue app. One of which is the <cld-image /> and the <cld-transformation /> components we will use to generate our invoice
Passed in the publicId of the Cloudinary file we will be using, which is named hannah-busing-unsplash
Cloudinary components support asset transformations, which we leveraged by adding attributes like the dpr attribute, which we set to a value of auto. The dpr attribute ensures that users receive images at their devices' pixel ratio(dpr) and size.

To render this template, we will need to import it into the views/HomeView.vue file like so:

<template>
  <div class="flex-l flex-row-l justify-center justify-between-l">
    <TheCloudinaryBackground />
  </div>
</template>
<script>
import TheCloudinaryBackground from "@/components/TheCloudinaryBackground.vue";
export default {
  components: {
    TheCloudinaryBackground,
  }
}
</script>

Creating the waitlisting form

The waitlisting application is incomplete without the form where interested candidates can register.
To create this form, we will create a components/TheWaitlistForm.vue file and add the code below.

<template>
  <div class="bg-waitlist vh-100 w-50-ns w-100-m">
    <div class="w-70 center pv6">
      <h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
        <span class="lh-copy brown pa1 tracked-tight">
          Joinr.
        </span>
      </h3>
      <h4 class="f5 fw1 lh-copy georgia i mt0">
        Be one of the first to access our service!
      </h4>
      <p></p>
      <form @submit.prevent="submitForm">
        <label for="firstname" class="db mb2 brown b georgia">First Name</label>
        <input type="text" class="db w-80 w-60-m pa2 br2 mb3 ba bw1 b--brown" name="firstname" id="firstname" v-model="firstname" placeholder="First name">
        <label for="lastname" class="db mb2 brown b georgia">Last Name</label>
        <input type="text" class="db w-80 w-60-m pa2 br2 mb3 ba bw1 b--brown" name="lastname" id="lastname" v-model="lastname" placeholder="Last name">
        <label for="email" class="db mb2 brown b georgia">Email</label>
        <input type="email" class="db w-80 w-60-m pa2 br2 mb4 ba bw1 b--brown" name="email" id="email" v-model="email" placeholder="Email">
        <div class="w-100">
          <button type="submit" class="f6 ttu tracked black-80 bg-brown pa3 br3 white bb link b--brown hover-white dim bg-animate pointer">Join waitlist</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    firstname: "",
    lastname: "",
    email: ""
  })
}
</script>

From the code block above, we achieved the following:

Created a functional form to handle interested candidates' input for the waitlist
Added the data in the Vue script to manage the names and email of the people who will fill out the form

To render this template, we will need to import it into the views/HomeView.vue file. Together with the imported Cloudinary background, our views/HomeView.vue file should be like the below:

<template>
  <div class="flex-l flex-row-l justify-center justify-between-l">
    <TheCloudinaryBackground />
    <TheWaitlistForm />
  </div>
</template>
<script>
import TheCloudinaryBackground from "@/components/TheCloudinaryBackground.vue";
import TheWaitlistForm from "@/components/TheWaitlistForm.vue";
export default {
  components: {
    TheCloudinaryBackground,
    TheWaitlistForm
  }
}
</script>

At this stage, our page should look like the below:

Creating the success page

We want to ensure that on successfully adding the user's details to the waitlist, the user gets directed to a confirmation page. For this, we will create a file called views/SuccessView.vue and add the code below:

<template>
  <div class="bg-waitlist vh-100">
    <div class="w-60-l w-80-m w-100 center tc pv6 ph3">
      <h3 class="f1 measure-narrow lh-title mv0">
        <span class="lh-copy brown pa1 tracked-tight">
          You are now on the waitlist
        </span>
      </h3>
      <h4 class="f5 fw1 lh-copy georgia i mt0">
        We will reach out to you soon with juicy updates!
      </h4>
      <a href="/" class="db link f6 ttu tracked black-80 bg-brown pv3 br3 white bb link b--brown hover-white dim bg-animate pointer mt5 w-70 w-30-ns center">
        Go To Home
      </a>
    </div>
  </div>
</template>

From the code block above, we were able to achieve the following:

Created a success page which the user gets directed to
Added a button that takes the user back to the home page

Our waitlist confirmation page should look like the following:

Submitting waitlist

We must submit the form data from interested people into the "Signups" table in our previously created Xata database. To do this, we will add the code below to the script tag of the components/TheWaitlistForm.vue file.

<script>
import { getXataClient } from '@/xata'
export default {
  data: () => ({
    // data goes here
  }),
  methods: {
    async submitForm() {
      const xata = getXataClient()
      await xata.db.signups.create({
        firstname: this.firstname,
        lastname: this.lastname,
        email: this.email
      }).then(() => {
        this.$router.push({path:`/success`})
      })
    }
  }
}
</script>

From the code block above, we achieved the following:

Imported the Xata client
Created a new record for the user on the Xata database
At successful record creation, the user's view gets changed to the waitlist confirmation page

At this point, our waitlist application should look like the below:

Conclusion

This article discusses how to build a waitlisting application using Cloudinary and Xata. Cloudinary was used for asset management and image transformation, while we used Xata for storing user details.

Resources

Building an Invoice Generator using Cloudinary and Xata

Moronfolu Olufunke — Thu, 24 Nov 2022 15:53:48 +0000

Invoices are documents tended by a service provider to the recipient of the service. Crafting a detailed invoice regarding the services rendered, the price, and all the needed details are fast becoming a vital skill of business owners as the ease of conducting transactions also determines the scope of future business encounters.

This article will discuss creating an invoice generator in Vue using Cloudinary and Xata.

Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web.

Xata is a Serverless Data platform that simplifies how developers work with data by providing the power of a traditional database with the usability of a SaaS spreadsheet app.

GitHub

Check out the complete source code here.

Netlify

We can access the live demo here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
A Cloudinary account (sign up here)
Creating a free account with Xata

Creating a Vue app

Using the vue create <project-name> command, we will create a new Vue app.
The process of scaffolding the project would provide a list of options, which could look like this:

We can start our Vue application by running the following command:

cd <project name>
npm run serve

Vue will, in turn, start a hot-reloading development environment that is accessible by default at http://localhost:8080.

Styling

The CSS framework to be used in this project is Tachyons CSS. Install it by running the command below in the terminal.

npm i tachyons

Afterward, make it globally available for usage in the project by adding the line below in our src/main.js:

import 'tachyons/css/tachyons.css';

Creating a Xata Database

To create a database on Xata, we must either log into our account or create a new account. Next, we will go to the user dashboard's database tab to create an appropriate database.

We will create a new table within the database and add the appropriate records/fields that we want the table to have. In this case, we created a user table with three fields: email, password, and username.
These fields signify the data we will be tracking in our application and saving to the database.

Setting up Xata in our Vue application

Installing Xata CLI
We will first need to install Xata CLI on our machine. To do this, we will open the command line terminal as an administrator and run the command below.

npm install -g @xata.io/cli@latest

Installing Xata in our project

To use Xata in our project, we will install the Xata software development kit (SDK) from the command line like so:

npx xata

After this, we can then initialize Xata for use in our application by running the command below:

xata init

VUE_APP_XATA_API_KEY="add your api key"

Cloudinary Setup

npm install cloudinary-vue

We will need to configure the installed SDK in our Vue app by navigating to the main.js and adding the following to the file.

import Cloudinary from "cloudinary-vue";

Vue.use(Cloudinary, {
  configuration: { 
    cloudName: "XXX," //add the cloudinary cloudname here,
    secure: true }
});

We will upload to Cloudinary the invoicing template we want to use in our application. In this case, we used this Invoicing template from Canva.

Creating the invoice dashboard

The invoice dashboard is where the bulk of the work happens, as this is where we will fill in the data we will add to the invoice and generate the invoice. We will start by creating a file called components/TheDashboardBody.vue, and add a form that allows the user to add the inputs they will show on their invoice.

Creating the basic input data file

Our dashboard page will have a form where users can add the information they want to display on their invoices. While we can manually add all the input fields, we also would like to use a different approach to minimize the number of input fields we will have to add to our file.
To do this, we will create a JSON file called util/basic-form-data.json and add all the data for the basic input fields we want, like so:

[
  {
    "id": 1,
    "inputdata": "",
    "formdata": "Invoice From",
    "type": "text",
    "otherdata": "invoicefrom"
  },
  {
    "id": 2,
    "inputdata": "",
    "formdata": "Invoice To",
    "type": "text",
    "otherdata": "invoiceto"
  },
]

Creating the items input data file

The invoice we are building will also have a section catering to the items or services we rendered. As a result, we will add a JSON file called items-form-data.json and add the things we want. Like so:

[
  {
    "id": 11,
    "inputdata": "",
    "formdata": "Item One",
    "type": "text",
    "otherdata": "itemone"
  },
  {
    "id": 12,
    "inputdata": "",
    "formdata": "Item Two",
    "type": "text",
    "otherdata": "itemtwo"
  },
]

Creating the dashboard input component

We will create an input component with props from the JSON files we created, which will help us create an input field that we will loop over later. To do this, we will create a components/TheInputTemplate.vue file and add the code below:

<template>
  <div>
    <label for="otherData" class="db mb3 black-70 ttu fw7">{{formData}}</label>
    <input
      :value="inputData"
      :type="type"
      id="otherData"
      name="otherData"
      class="db mb3 w-90 br2 pa2 ba bw1 b--black bg-black-05"
      :placeholder="formData"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  props: ["inputData", "formData", "type", "otherData"]
}
</script>

If we match the code above with the items we have in the JSON files, we can see each JSON data's use cases.

Creating the dashboard body

Now, we will pull it together to create a dashboard body by creating a file named components/TheDashboardBody.vue and adding the code below.

<template>
  <div class="flex absolute vh-auto top-4 left-2 right-2 w-90 center mw9">
    <div class="mr3 bg-white w-70 br3 pa3">
      <form @submit.prevent="generateInvoice" class="flex justify-between flex-wrap">
        <div v-for="basicinfo in basicData" :key="basicinfo.id" class="w-50-l w-100">
          <TheDashboardInput v-model="basicinfo.inputdata" :formData="basicinfo.formdata" :type="basicinfo.type" :otherData="basicinfo.otherdata"/>
        </div>

        <h3 class="dark-blue w-100 f3 underline">ITEMS</h3>
        <div v-for="item in itemsData" :key="item.id" class="w-50-l w-100">
          <TheDashboardInput v-model="item.inputdata" :formData="item.formdata" :type="item.type" :otherData="item.otherdata"/>
        </div>

        <div class="w-100">
          <button type="submit" class="f6 ttu tracked black-80 bg-black pa3 br3 white bb link b--black hover-white hover-bg-dark-blue bg-animate pointer">
            Create Invoice
          </button>
        </div>
      </form>
    </div>
    <div class="bg-white w-30 br3 pa3">
      <iframe :src="iframeSRC ? iframeSRC : initialSRC" width="100%" height="100%" />
    </div>
  </div>
</template>

<script>
import TheDashboardInput from "@/components/TheDashboardInput.vue";
import itemsData from "../../util/items-form-data.json";
import basicData from "../../util/basic-form-data.json"
export default {
  components: {
  TheDashboardInput
  },
  data: ()=>({
  basicData,
  itemsData,
  basicDataInfo: {},
  itemInfo: {},
  iframeSRC: '',
  initialSRC: 'https://res.cloudinary.com/moerayo/image/upload/v1668849124/invoiced.pdf',
  }),
  methods: {
    generateBasicDataInfo() {
      let newBasicData = basicData.map(({otherdata,inputdata })=> ({[otherdata]:inputdata}))
      this.basicDataInfo = Object.assign({}, ...newBasicData)
    },
    generateItemInfo(){
      let newItemData = itemsData.map(({otherdata,inputdata })=> ({[otherdata]:inputdata}))
      this.itemInfo = Object.assign({}, ...newItemData)
    }
  }
}
</script>

From the code block above, we achieved the following:

We imported the two JSON files we created - itemsData and basicData - and added both to the data options of the Vue script tag to use later in our code
Looped through each of the JSON data we instantiated in the data options using the Vue v-for directive
Imported the TheDashboardInput component we created and passed in the suitable data to fill the props option
Added an iframe that shows the current invoice template and the yet to be generated filled invoice template
Created a generateBasicDataInfo() and generateItemInfo() methods that both take in their respective data from the JSON files. These data are reformatted using the JavaScript map() function to create a new array with the otherdata as the array key and the inputdata as the value. The result of this formatted array is then copied into an object using the JavaScipt Object.assign() method. Doing this is crucial for picking the data passed through the v-model

Creating the invoice template

To generate our invoice template - i.e., what we will download and send to the client - we will use Cloudinary's powerful image and text transformation features. These features will enable us to overlay the invoice template with texts. To do this, we will create a file called components/TheInvoiceTemplate.vue and add the code below like so:

<template>
  <div>
    <cld-image publicId="invoiced.pdf" ref="ref" >
      <cld-transformation flags="rasterize" />
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 60, text: basicDataInfo.invoicefrom,  fontWeight: 'bold'}" color="#023982" gravity="west" x="130" y="-670"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 45, text: basicDataInfo.invoiceto}" color="#023982" gravity="west" x="130" y="-480"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 20, text: basicDataInfo.date}" color="#000" gravity="west" x="560" y="-525"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 20, text: basicDataInfo.invoicenumber}" color="#000" gravity="west" x="610" y="-465"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 43, text: basicDataInfo.total}" color="#023982" gravity="west" x="990" y="-475"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 20, text: basicDataInfo.bankname}" color="#5b4f47" gravity="west" x="265" y="255"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 20, text: basicDataInfo.accountnumber}" color="#5b4f47" gravity="west" x="265" y="285"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 30, text: basicDataInfo.subtotal}" color="#000" gravity="west" x="1000" y="180"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 30, text: basicDataInfo.tax}" color="#000" gravity="west" x="1000" y="230"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 43, text: basicDataInfo.total}" color="#000" gravity="west" x="1000" y="300"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 35, text: itemInfo.itemone}" color="#000" gravity="west" x="155" y="-248"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 35, text: itemInfo.itemtwo}" color="#000" gravity="west" x="155" y="-180"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 35, text: itemInfo.itemthree}" color="#000" gravity="west" x="155" y="-80"/>
      <cld-transformation :overlay="{fontFamily: 'Poppins', fontSize: 35, text: itemInfo.itemfour}" color="#000" gravity="west" x="155" y="-1"/>
    </cld-image>  
  </div>
</template>
<script>
export default {
  name: "TheResumeTemplate",
  props: {
    basicDataInfo: {
      type: Object
    },
    itemInfo: {
      type: Object
    }
  }
}
</script>

From the above, we achieved the following:

Cloudinary provides us with several templates to use in our Vue app. One of which is the <cld-image /> and the <cld-transformation /> components we will use to generate our invoice
Passed in the publicId of the Cloudinary file we will be using, which is named invoiced.pdf
Configured the Cloudinary components to accept the basicDataInfo and itemInfo props which we will pass in from the TheDashboardbody component.
Cloudinary components support asset transformations, which we leveraged by adding text transformations like the font family, colors, font sizes, and the specific places we want the texts to be placed on the invoice.

To render this template, we will need to import it in the TheDashboadBody component like so:


<template>
<div class="dn" v-if="showTemplate">
    <TheInvoiceTemplate :basicDataInfo="basicDataInfo" :itemInfo="itemInfo" ref="ref" />
  </div>
</template>

<script>
import TheInvoiceTemplate from "@/components/TheInvoiceTemplate.vue";
export default {
  components: {
  TheInvoiceTemplate,
  },
  data: ()=>({
  showTemplate: false,
  })
}
</script>

We can find the complete code for the TheDashboardBody.vue in this GitHub gist.
At this point, the UI for TheDashboardBody.vue file should look like the below:

Creating the Signup Page

We will need a user to sign up for our application to create an invoice. To do this, we will create a file named views/SignupView.vue and add the following code to it:


<template>
  <div class="bg-lightest-blue vh-100">
    <div class="pv5 ph2">
      <form class="ba b--dark-blue bw3 bg-white br2 mw6 w-40-m w-70 w-20-l center pa3 shadow-5" @submit.prevent="signUp">
        <h2 class="ttc tc">
          Sign up
        </h2>
        <label for="name" class="db mb2 black-70">Name</label>
        <input
          id="name"
          v-model="username"
          name="name"
          type="text"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--lightest-blue"
          placeholder="John Doe"
        >
        <label for="email" class="db mb2 black-70">Email</label>
        <input
          id="email"
          v-model="email"
          name="email"
          type="email"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--lightest-blue"
          placeholder="example@email.com"
        >
        <label for="password" class="db mb2 black-70">Password</label>
        <input
          id="password"
          v-model="password"
          name="password"
          type="password"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--lightest-blue"
          placeholder="••••••••"
        >
        <button type="submit" class="center db pa3 mb3 tracked bg-dark-blue ba br3 white pointer hover-black hover-bg-lightest-blue bg-animate pointer">
          Sign up
        </button>
        <p>Already have an account? <a href="/signin" class="black-70 b">Sign in</a> </p>
      </form>
    </div>
  </div>
</template>

By this, we have successfully created an interface for our Signup page. Now we will add the functionality for authentication and authorization.

We will use Xata to accomplish our authentication goal. To do this, we will add this to the SignupView.view file:

<script>
import { getXataClient } from '@/xata'
export default {
  name: 'signup',
  data: () => ({
    username: '',
    email: '',
    password: '',
  }),
  methods: {
    async signUp() {
      const xata = getXataClient()
      const user = await xata.db.users.filter('username', this.username).getFirst()
      if (!user) {
        await xata.db.users.create({
          username: this.username,
          password: this.password,
          email: this.email
        }).then((res) => {
          this.$router.push({path:`/dashboard/${res.username}`, params: user})
        })
        this.$notify({type: 'success', text: "Account creation successful!" })
      }
    }
  }
}
</script>

From the code block above, we achieved the following:

Imported the Xata client
Checked if a user exists and created a new user if the current user does not exist
At successful account creation, the user's view gets changed to the dashboard from where they can generate an invoice.

At this point, our application should look like the below:

Creating the SignIn page

We also need to create options to allow signing in for people who have already created an account. To do this, we will create a file called SigninView.vue and add the code below:


<template>
  <div class="bg-lightest-blue vh-100">
    <div class="pv5 ph2">
      <form class="ba b--dark-blue bw3 bg-white br2 mw6 w-40-m w-70 w-20-l center pa3 shadow-5" @submit.prevent="signIn">
        <h2 class="ttc tc">
          Sign In
        </h2>
        <label for="email" class="db mb2 black-70">Email</label>
        <input
          id="email"
          v-model="email"
          name="email"
          type="email"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1  b--lightest-blue"
          placeholder="example@email.com"
        >
        <label for="password" class="db mb2 black-70">Password</label>
        <input
          id="password"
          v-model="password"
          name="password"
          type="password"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1  b--lightest-blue"
          placeholder="••••••••"
        >
        <button type="submit" class="center db pa3 mb3 tracked bg-dark-blue ba br3 white pointer hover-black hover-bg-lightest-blue bg-animate pointer">
          Sign in
        </button>
      </form>
    </div>
  </div>
</template>

The above creates a sign-in interface for us. But we will need to wrap some functionalities around it to make it work as expected.
To do this, we will add the code below in the SigninView.vue.


<script>
import { getXataClient } from '@/xata'
export default {
  data: () => ({
    email: '',
    password: ''
  }),
  methods: {
    async signIn() {
      const xata = getXataClient()
      const user = await xata.db.users.filter('email', this.email).getFirst()
      if (!this.email || !this.password ){
        this.$notify({type: 'error', text: "Please fill all empty fields"})
      } else if (this.email !== user.email || this.password !== user.password){
        this.$notify({type: 'error', text: "Incorrect credentials"})
        this.email = '';
        this.password = '';
      } else {
        this.$router.push({path:`/dashboard/${user.username}`, params: user})
        this.$notify({type: 'success', text: "Login successful!"})
      }
    }
  }
}
</script>

From the above, we created a function called signIn function that does the following:

Imported the Xata client
Checks if the user passes an email and password, then returns the appropriate error if it is unavailable
Cross checks the email and password entered to be sure it matches the email and password from the database
If the checks pass, the page gets routed to the dashboard, where the user can generate n invoice

At this point, our interface will look like this:

At this point, our complete application will look like the below:

Conclusion

This article discusses generating an invoice using Cloudinary and Xata. Cloudinary was used for asset management and text transformation, while we used Xata for authentication.

Resources

Build a CV Generator Using Cloudinary and Xata in Vue

Moronfolu Olufunke — Thu, 24 Nov 2022 11:16:25 +0000

A Curriculum Vitae, often referred to as a CV, summarizes someone's career, qualifications, and education. A well-crafted CV highlighting one's achievements or proficiencies is an art.
For junior or entry-level professionals looking for their first jobs, sometimes it will take to get the next role to have a stellar CV that adequately speaks of one's abilities without the reader getting bored.

This article will discuss building a CV generator in Vue using Cloudinary and Xata.

Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web. The OCR add-on for text detection and extraction is also a part of the solutions rendered by Cloudinary.

Xata is a Serverless Data platform that simplifies how developers work with data by providing the power of a traditional database with the usability of a SaaS spreadsheet app.

GitHub

Check out the complete source code here.

Netlify

The link to the live demo can be found here.

Prerequisite

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of JavaScript
A Cloudinary account (sign up here)
Creating a free account with Xata

Creating a Vue app

We will create a new Vue app using the vue create <project-name> command.
The process of scaffolding the project would provide a list of options, which could look like this:

We can start our Vue application by running the following command:

cd <project name>
npm run serve

Vue will, in turn, start a hot-reloading development environment that is accessible by default at http://localhost:8080.

Creating a Xata Database

To create a database on Xata, we will need to either log into our accoount or create a new account. Next, we will go to the database tab on the user's dashboard to create an appropriate database.

We will then create a new table and add the appropriate records/fields that we would want the table to have. In this case, we created a user table with the email, password, and username records.
These records signify the data we will be tracking in our application and saving to the database.

Setting up Xata in our Vue application

Installing Xata

To use Xata in our project, we will install the Xata software development kit (SDK) from the command line like so:

npx xata

After this, we can then initialize Xata for use in our application by running the command below:

xata init

Xata will present us varieties of options from which we can choose. In the end, Xata will generate some files for usage, among which we will have the .xatrc and .env files.
We will need to edit the name of the Xata api key in our Vue app to the one below to allow the Vue application to pick up the environment variable.

VUE_APP_XATA_API_KEY="add your api key"

Cloudinary Setup

For our application’s asset management, if you haven’t already, you need to create an account with Cloudinary by clicking here. Creating an account is entirely free.
We will need to install the Cloudinary Vue.js SDK with the command below before configuring it in your Vue app.

npm install cloudinary-vue

We will need to configure the installed SDK in our Vue app by navigating to the main.js and adding the following to the file.

import Cloudinary from "cloudinary-vue";

Vue.use(Cloudinary, {
  configuration: { 
    cloudName: "XXX" //add the cloudinary cloudname here,
    secure: true }
});

We will upload the template we want to use to our cloudinary application. In this case, we used this CV template that helped Danny Thompson land his first tech role.

Creating the Signup Page

We will need a user to sign up for our application to generate a CV. To do this, we will create a file named, views/SignupView.vue and add the following code to it:


<template>
  <div class="bg-gold vh-100">
    <div class="pv5 ph2">
      <form class="ba b--black bw4 bg-white br2 mw6 w-40-m w-70 w-20-l center pa3 shadow-5" @submit.prevent="signUp">
        <h2 class="ttc tc">
          Sign up
        </h2>
        <label for="name" class="db mb2 black-70">Name</label>
        <input
          id="name"
          v-model="username"
          name="name"
          type="text"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--black"
          placeholder="John Doe"
        >
        <label for="email" class="db mb2 black-70">Email</label>
        <input
          id="email"
          v-model="email"
          name="email"
          type="email"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--black"
          placeholder="example@email.com"
        >
        <label for="password" class="db mb2 black-70">Password</label>
        <input
          id="password"
          v-model="password"
          name="password"
          type="password"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--black"
          placeholder="••••••••"
        >
        <button type="submit" class="center db pa3 mb3 tracked bg-black ba br3 white pointer hover-black hover-bg-gold bg-animate pointer">
          Sign up
        </button>
        <p>Already have an account? <a href="/signin" class="black-70 b">Sign in</a> </p>
      </form>
    </div>
  </div>
</template>

By this, we have successfully created an interface for our Signup page. Now we will add the functionality for authentication and authorization.

We will use Xata to accomplish our authentication goal. To do this, we will add this to the SingupView.view file:

<script>
import { getXataClient } from '@/xata'
export default {
  name: 'signup',
  data: () => ({
    username: '',
    email: '',
    password: '',
  }),
  methods: {
    async signUp() {
      const xata = getXataClient()
      const user = await xata.db.users.filter('username', this.username).getFirst()
      if (!user) {
        await xata.db.users.create({
          username: this.username,
          password: this.password,
          email: this.email
        }).then((res) => {
          this.$router.push({path:`/dashboard/${res.username}`, params: user})
        })
        this.$notify({type: 'success', text: "Account creation successful!" })
      }
    }
  }
}
</script>

From the code block above, we achieved the following:

Imported the Xata client
Checked if a user exists and created a new user if the current user does not exist
At successful account creation, the user’s view is changed to the dashboard from where they can generate a CV.

At this point, our application should look like the below:

Creating the SignIn page

We also need to create options to allow signing in for people who have already created an account. To do this, we will create a file called SigninView.vue and add the code below:


<template>
  <div class="bg-gold vh-100">
    <div class=" pv5 ph2">
      <form class="ba b--black bw4 bg-white br2 mw6 w-40-m w-70 w-20-l center pa3 shadow-5" @submit.prevent="signIn">
        <h2 class="ttc tc">
          Sign In
        </h2>
        <label for="email" class="db mb2 black-70">Email</label>
        <input
          id="email"
          v-model="email"
          name="email"
          type="email"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--black"
          placeholder="example@email.com"
        >
        <label for="password" class="db mb2 black-70">Password</label>
        <input
          id="password"
          v-model="password"
          name="password"
          type="password"
          class="db mb3 w-100 br2 ph2 pv3 ba bw1 b--black"
          placeholder="••••••••"
        >
        <button type="submit" class="center db pa3 mb3 tracked bg-black ba br3 white pointer hover-black hover-bg-gold bg-animate pointer">
          Sign in
        </button>
      </form>
    </div>
  </div>
</template>

The above creates a Signin interface for us. But we will need to wrap some functionalities around it to make it work as expected.
To do this, we will add the code below in the SigninView.vue.


<script>
import { getXataClient } from '@/xata'
export default {
  data: () => ({
    email: '',
    password: ''
  }),
  methods: {
    async signIn() {
      const xata = getXataClient()
      const user = await xata.db.users.filter('email', this.email).getFirst()
      if (!this.email || !this.password ){
        this.$notify({type: 'error', text: "Please fill all empty fields"})
      } else if (this.email !== user.email || this.password !== user.password){
        this.$notify({type: 'error', text: "Incorrect credentials"})
        this.email = '';
        this.password = '';
      } else {
        this.$notify({type: 'success', text: "Login successful!"})
        this.$router.push({path:`/dashboard/${user.username}`, params: user})
      }
    }
  }

}
</script>

From the above, we created a function called signIn function that does the following:

Imported the Xata client
Checks if the user passes an email and password, then returns the appropriate error if it is unavailable
Cross checks the email and password entered to be sure it matches the email and password from the database
If the checks pass, the page is routed to the dashboard, where the user can generate a CV

At this point, our interface will look like this:

Creating the dashboard

Our dashboard is where the bulk of the work happens, as this is where we will generate the CV. We will start by creating a file called TheDashboardBody.vue, and we will then add a form that allows the user to add the inputs they want to be shown on their CV.


<template>
  <div class="flex absolute vh-auto top-4 left-2 right-2 w-90 center mw9">
  <div class="mr3 bg-white w-70 br3 pa3">
    <form @submit.prevent="createResume" class="flex justify-between flex-wrap">
      <div class="w-50-l w-100">
        <label for="email" class="db mb3 black-70 ttu fw7">Firstname</label>
        <input
          id="firstname"
          v-model="userData.firstname"
          name="firstname"
          type="text"
          class="db mb3 w-90 br2 pa2 ba bw1 b--black bg-black-05"
          placeholder="Firstname"
        >
      </div>
      <div class="w-50-l w-100">
        <label for="lastname" class="db mb3 black-70 ttu fw7">Lastname</label>
        <input
          id="lastname"
          v-model="userData.lastname"
          name="lastname"
          type="text"
          class="db mb3 w-90 br2 pa2 ba bw1 b--black bg-black-05"
          placeholder="Lastname"
        >
          </div>
          <div class="dn" v-if="showTemplate">
          <TheResumeTemplate :userData="userData" ref="ref" />
        </div>

        <div class="w-100">
          <button type="submit" class="f6 ttu tracked black-80 bg-black pa3 br3 white bb link b--black hover-black hover-bg-gold bg-animate pointer">Create Resume</button>
        </div>
        </form>
      </div>
      <div class="bg-white w-30 br3 pa3">
      <iframe :src="iframeSRC ? iframeSRC : initialSRC" width="100%" height="100%" />
    </div>
  </div>
</template>

Above is the template of how the dashboard interface will look.
We added the input fields for the data we will add to the CV from the above. We also added an iframe showing the generated CV in PDF form.

Now we will add the functionality to effect the changes we would like to see in the generated PDF.


<script>
import TheResumeTemplate from "@/components/TheResumeTemplate.vue";
export default {
  components: {
    TheResumeTemplate,
  },
  data: () => ({
    userData: {
      firstname: '',
      lastname: '',
      },
    showTemplate: false,
    iframeSRC: '',
    initialSRC: 'https://res.cloudinary.com/xxx/image/upload/v1667335911/cv_gen.pdf'
  }),
  methods: {
    createResume(){
      if(!this.userData.firstname){
        this.showTemplate = false
      } else {
        this.showTemplate = true
        this.$nextTick(() => {
          this.iframeSRC = this.$refs.ref.$refs.ref.$el.src;
        });
      }
    }
  }

}
</script>

From the above, we could connect our createResume method to the template, allowing us to generate the PDF.
The complete code for this interface and functionality for this dashboard can be found in this GitHub gist.

Adding the Cloudinary CV template

We will employ Cloudinary’s powerful features to generate and overlay content to finish our CV generation. To do this, we will create a new file called TheResumeTemplate.vue and add the code below.


<template>
  <div>
    <cld-image publicId="cv_gen.pdf" ref="ref" >
    <cld-transformation flags="rasterize" />
      <cld-transformation :overlay="{fontFamily: 'Open Sans', fontSize: 75, text: `${userData.firstname} ${userData.lastname}`}" color="#58697B" gravity="west" x="100" y="-670"/>
</cld-image>

  </div>
</template>
<script>
export default {
  name: "TheResumeTemplate",
  props: {
    userData: { 
      type: Object, 
      required: true 
    }
  },
}
</script>

From the above, we added a props which will have its value filled from the TheDashboardBody.vue. We also used Cloudinary’s transformation features to overlay texts as we would prefer.
The complete implementation of the Cloudinary CV template can be found in the GitHub gist here.

At this point, our application will look like the below:

Conclusion

This article discusses generating a CV using Cloudinary and Xata. Cloudinary was used for image transformation, while we used Xata for authentication.

Resources

Authenticate a Nuxt.js App Using a Magic URL and Mailgun

Moronfolu Olufunke — Fri, 28 Oct 2022 12:19:35 +0000

Authentication involves checking and ascertaining the genuineness of a user, i.e., verifying if the person trying to gain access to a product is the right person. Authentication has evolved from the traditional method of manually using passwords to using magic Uniform Resource Locators (URL).

A Magic URL is a one-time passwordless authentication URL sent to a secure destination, most times the email, from where the user can access it to log into the application. The magic URL removes the user's effort to put their password into an application manually. Instead, a securely generated link is sent to the user’s account, and opening this magic link will subsequently sign the user in to access the application.

This article will discuss how to authenticate a Nuxt application using Appwrite’s magic URL.

GitHub

Check out the complete source code here.

Prerequisites

Understanding this article requires the following:

Installation of Node.js
Basic knowledge of TypeScript
Docker installation
Basic understanding of Simple Mail Transfer Protocol (SMTP)
An Appwrite instance; check out this article on how to set up an instance locally or one-click install on DigitalOcean or Gitpod

Creating a Nuxt project

Use npx create-nuxt-app <project-name> to create a new Nuxt project.
The process of scaffolding the project would provide a list of options, which should look like this:

We can start our Nuxt3 application by running the following command:

cd <project name>
npm run dev

Nuxt will, in turn, start a hot-reloading development environment that is accessible by default at http://localhost:3000.

Installing Appwrite

To use Appwrite in our project, we will install the Appwrite web software development kit (SDK) from the command line, like so:

npm install appwrite

Creating an Appwrite project

To create a new project, start up the Appwrite instance on your machine and navigate to the specified hostname and port http://localhost:80. Next, we need to log in to our account or create an account if we don’t have one.

The project dashboard becomes visible on the console after the project creation. We can access the inner page from the Settings tab at the top of the page.

The inner page allows us to copy the Project ID and API Endpoint for use in our Nuxt application.

We will then proceed to create an init.js file in our Nuxt application’s root directory to initialize the Appwrite Web SDK by adding the code block below:

import { Client, Account } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
  .setEndpoint('http://localhost/v1') // Your API Endpoint
  .setProject('***') // Your project ID
;

Setting up Mailgun as an SMTP

Simple Mail Transfer Protocol (SMTP) is a protocol, sometimes referred to as an application used in sending and receiving emails. There are several SMTP services like SendGrid and Mailgun, but in this article, we will use Mailgun - Appwrite also supports other emailing services.

We will start by creating an account with Mailgun. We can then log into our Mailgun dashboard to get hold of our credentials for usage on Appwrite. From our dashboard, we will navigate to Sending > Overview, from where we can select SMTP as seen below:

Clicking on SMTP brings the Mailgun credentials as shown below:

We take note of these credentials as we need them in Appwrite.

Updating our Appwrite `.env` with Mailgun credentials

Installing Appwrite on our computer makes a docker.comopose.yml and a .env environment file available, as seen below:

We are at liberty to customize the .env to meet our server needs. To use Mailgun SMTP, we will need to update some properties within the Appwrite env, like so:

_APP_SYSTEM_EMAIL_NAME=Name
_APP_SYSTEM_EMAIL_ADDRESS=example@outlook.com
_APP_SMTP_HOST=smtp.mailgun.org
_APP_SMTP_PORT=587
_APP_SMTP_SECURE=tls
_APP_SMTP_USERNAME=postmaster@sandbox2a88e2********b40.mailgun.org
_APP_SMTP_PASSWORD=f13cd0*******e93193

_APP_SYSTEM_EMAIL_NAME=Name : Denotes senders’ name

_APP_SYSTEM_EMAIL_ADDRESS : Refers to senders’ email addresses.

_APP_SMTP_HOST : The SMTP hostname, which in this case is smtp.mailgun.org

_APP_SMTP_PORT : SMTP Transmission Control Protocol (TCP) port represented as 587

_APP_SMTP_SECURE : Represented with tls to denote the SMTP connection protocol

_APP_SMTP_USERNAME : SMTP’s username

_APP_SMTP_PASSWORD : SMTP password

After setting the above and saving our file, we will need to restart our Appwrite container using the command below in our terminal, after navigating into the folder that contains the docker-compose file:

cd Appwrite // navigate into the Appwrite folder
docker-compose up -d --remove-orphans

With this done, we can navigate to our Appwrite console to add a new platform to use magic URL on Appwrite.

Adding the magic URL platform on Appwrite console

To use Appwrite’s magic URL service, we will need to add a new platform within the Appwrite application we have created. To do this, we will navigate to the project we want to use the magic URL. We will then create a New Web App platform like so:

We will add a distinct name for the platform with a hostname.

The hostname represents the Appwrite domain added during the Appwrite installation - in our case, localhost was used like so:

_APP_DOMAIN=localhost
_APP_DOMAIN_TARGET=localhost

The domain name used depends on what we set in the .env file, and this domain should always match the base URL of the application.

Getting the magic URL

Now we are ready to begin building our application. To do this, we will navigate into our application’s pages/index.vue and edit the file to the code below:

<template>
  <div class="bg-lightest-blue vh-100 pa3 tc">
    <h2 class="ttc">Magic URL with Appwrite</h2>
    <div class="br3 bg-navy ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4 h5">
      <p class="f3">Click on this button to get the magic URL</p>
        <button class="link br3 pv2 ph2 mt4 dib black fw6 bg-white ba b--navy pointer inline-flex items-center hover-bg-lightest-blue" @click="sendMagicURL">
          <span class="f4 ml2 pr2">Get magic URL</span>
        </button>
    </div>
  </div>
</template>

<script lang="ts">

import Vue from 'vue'
import {account} from '~/init'
import { ID } from 'appwrite';

export default Vue.extend({
  name: 'IndexPage',
  methods: {
    sendMagicURL: async function () {
      try {
        await account.createMagicURLSession(ID.unique(), 'example@email.com', 'http://localhost:3000/verify')
        alert('Magic URL sent')
      } catch (error) {
        console.log(error)
      }
    }
  }
})
</script>

The code snippet above performs the following functions:

We added a button in our <template>, which calls the sendMagicURL function within our methods object
The sendMagicURL function access the createMagicURLSession on Appwrite’s account method
The createMagicURLSession takes in two required parameters:
- userId: A unique Id is gotten by accessing Appwrite’s ID method.
- email: The email we would like to send the magic URL to
The third optional parameter in the createMagicURLSession function is the URL we would like to redirect the user to after clicking on the magic URL. This URL must be the hostname added to our Appwrite project platform.

At this point, we will have an email in our inbox that will expire in an hour. Our pages/index.value will also look like the below:

Verifying the magic URL

The magic URL sent to the email address added will have a userId and secret key for creating a session, which we will access to complete our login process. To do this, we will create a new file named pages/verify.vue, which the user gets redirected to after clicking the email in the inbox. We will edit the page by adding the code below:

<template>
  <div class="bg-lightest-blue vh-100 pa3 tc">
    <h2 class="ttc">Magic URL with Appwrite</h2>
    <div class="br3 bg-navy ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv3 h5">
      <p class="f3">Verify Magic URL</p>
      <p>To complete this session, please verify your magic URL by clicking the verification button.</p>
        <button class="link br3 pv2 ph2 mt3 dib black fw6 bg-white ba b--navy pointer inline-flex items-center hover-bg-lightest-blue" @click="verifyMagicURL">
          <span class="f4 ml2 pr2">Verify magic URL</span>
        </button>
    </div>
  </div>
</template>
<script lang="ts">

  import Vue from 'vue'
  import {account} from '~/init'

  export default Vue.extend({
    methods: {
      verifyMagicURL: async function ()  {
        const urlParams = new URLSearchParams(window.location.search);
        const userId : any = urlParams.get('userId');
        const secret : any = urlParams.get('secret');
        try {
          await account.updateMagicURLSession(userId, secret);
          alert("Magic URL verified")
          window.location.href = '/landing'
        } catch (err){
          console.log(err)
        }
      }
    }
  })
</script>

From the code snippet above, we were able to verify our account by doing the following:

Added a verifyMagicURL function within our methods which creates a new URLSearchParams object which returns a URL querying string
Returned the values of the userId and secret using urlParams.get() method
Accessed the updateMagicURLSessionon Appwrite’s account method, which takes in the values of the userId and secret
Redirected our application to the landing page represented with /landing after successful verification

Our pages/verify.vue will look like the below before verification:

Creating the landing page

After successfully verifying the magic URL, we will redirect the user to a landing page. To achieve this, we will create a pages/landing.vue and add the code below:

<template>
  <div class="bg-lightest-blue vh-100 pa3 tc">
    <h2 class="ttc">Magic URL with Appwrite</h2>
    <div class="br3 bg-navy ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv3 ">
      <p class="f2">Verification successful 🎉🎉</p>
      <p></p>
    </div>
  </div>
</template>

At this point, our landing page will look like the below:

We have successfully implemented a Magic URL login using Appwrite, and our application will look like the gif below:

Conclusion

One of the fantastic features Appwrite provides is the magic URL that simplifies authentication for users without the hassle of the user trying to remember their passwords. This post discusses how to implement the magic URL during authentication.

These resources might be helpful:

Forem: Moronfolu Olufunke

Switching from Hasura to Grafbase: A Step-by-Step Migration Guide

Grafbase vs. Hasura: Comparing key concepts

Preparing for migration

Migration tools

Step-by-step migration process

1. Export Hasura metadata

2. Generate a federated GraphQL schema

3. Configure the project

4. Publish the Postgres subgraph

5. Migrate remote schemas

6. Combine and deploy subgraphs with the Grafbase Gateway

Post-migration tips

Query parity between systems

Set up schema checks

Deployment configuration (cloud services or self-hosted)

Subgraphs management

Observe latency and performance changes

Horizontal scaling

Troubleshooting mixing resolver extensions in the same subgraph

These benefits are available to you after migration

Wrapping up

Insights from building my portfolio with Astro

Solving question one

Solving question two

Solving question three

Why I chose to build with Astro

Astro highlights: favorite features and gotcha

Capitalization matters

Using slot in Astro

Scoped CSS

Classes are just class

No key needed when using map

Hacktoberfest for Low or No-Code Professionals: 5 OSS Projects to Contribute To

Hyperswitch

How to participate

Freecodecamp

How to participate

Owncast

How to participate

Manifest

How to participate

Tooljet

How to participate

Hacktoberfest general rules

Additional resources

Query Postgres from Netlify Functions with Neon serverless driver

GitHub

Prerequisites

Benefits of using Neon serverless driver

What are Netlify Functions?

Connecting to Neon Postgres

Creating tables on Neon

Creating our application

Installing the Neon serverless driver package

Creating a Netlify Function

Configuring netlify.toml:

Testing the Netlify Function

Conclusion

Resources

How to Build a File Explorer using Xata and Vue.js

GitHub

Netlify

Prerequisite

Creating a Vue app

Styling

Installing dependencies

Setting up the Xata database

Links and relationships in Xata

Setting up Xata in our Vue application

Install Xata SDK

Initialize Xata

Configuration Options

Edit API Key

Creating the landing page

Building the Signup Page

Building the sign-in page

Adding upload mechanism

Adding an upload service

Uploading the file to Xata

Classes are just `class`

No `key` needed when using map

Configuring `netlify.toml`: