DEV Community: Rachel

The Art of Vibe-Coding (with Google AI Studio): Personal Writing Assistant App

Rachel — Sun, 06 Jul 2025 01:49:20 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

A (long) while back, I had this idea for a startup. I wanted to build a personal writing assistant to help fiction writers. This was in the days before Generative AI. Once Generative AI came about, I knew this idea would evolve. I documented this concept on a product page I developed years ago. It was time to take AI for a spin and see what it would come up with.

My Experience

My first thought was to give it a webpage with the product features and see what it would do. I was a bit skeptical it would work, and...it didn't. It created something completely unrelated to the product page I created.

So, I would need to start simpler. Before starting this project, I had already tried creating a character generator with Google AI Studio. It was quite successful in doing that, and in under 30 minutes, I had a character generator prototype.

It was a great start, but to get the "writing assistant" I envisioned, I would need to start from a different MVP. So I began crafting.

My initial prompt generated a React App. I haven't used React in a while (Vue.js please!), but this seemed like a good opportunity to re-acquaint myself with React. So I continued the vibe-coding session in React.

Rough Outline of Steps:

Create an Editor with Gemini to help generate what comes next in a sidebar. I had to specifically prompt it to bring in a RTF editor. Otherwise it defaulted to a textarea.
Add tabs to the sidebar with the following: Characters, Events, Locations, Timeline, Notes, and Organizations. Gemini created these tabs with Characters and Notes having auto-creation features.
Implement Characters Tab. Gemini did a great job in automatically generating a form with different fields for the character, and allowing automatic creation with Gemini.
Implement Organizations Tab. Similar to Characters, Gemini did a great job in flushing out the Organizations tab with similar manual input and auto-generation features.
Implement Locations Tab. Similar to Characters and Organizations, Gemini did a great job in flushing out the Locations creation with relevant fields and auto-generation.
Remove Events Tab and create Events within the Timeline Tabs. This was fairly straightforward and handled with ease.
Add draggable interface for Events in the Timeline Tab. This gave it problems due to dependency issues. These problems would persist through the end of my Vibe-coding session.
Add Focus mode. This was done with ease, but later disappeared after adding another feature.
Add Dark mode. This was also done with ease.
Add a timer to track writing sessions.
Migrate to Next.js framework.

Is this production ready? No. But it is a great prototype. Would I deploy this? Personally, not as is. It's not really a complete MVP for me. There is definitely more customization I would like to do.

After the Next.js migration, I downloaded it, but it did not run and there were some conflicts to resolve. I decided to revert to an older code checkpoint to capture the demo video. The migration to Next.js will come later.

As the codebase grew, it became increasingly difficult to add new features. Thus, where I ended -- I think it was a good "stopping point". I may continue to ask AI for assistance, but not in the same manner going forward.

Challenges with Vibe Coding

Inevitably, just as when humans code, there are bugs. It seems the bugs are more dependency related though due to different versions loading in the browser at the same time. These bugs may be less common when developing locally.
Unsurprisingly, as the codebase grows, it becomes increasingly difficult to add new features using AI. I also lost features I previously built out. I had to ask Gemini to re-add the feature.
It will come up with suggestions on what it plans to do, or even imply it did something, when nothing changed. I had to tell it to "implement this" multiple times in order to get the files updated.
Eventually, you'll reach a point where it loses the "fast edge" and development slows down. By the end of step 10, I kept hitting dependency errors over and over again. It was time to move development offline.

Takeaways

Google AI Studio is great for getting a minimalist MVP together. It's less great for taking something to production. Yes, it can be deployed via Cloud Run, but the project I built would require more invisible features than the MVP generated. It was a great starting point for hooking up the main features I wanted. I will need to do the "hard part" afterwards. AI isn't there yet.

Demo

Notes: I didn't demo the image generation because when I ran it locally, it didn't work out of the box. Turns out...if you want to use the Imagen model, you'll need to use Vertex AI Service, which requires a different auth method and running a backend (Node.js). Trust that the image generation worked when using Google AI Studio. :)

Thanks for reading. If you're interested in seeing a deployed version, drop a comment.

AI Writing Assistant for Sci-fi Authors

Rachel — Mon, 11 Nov 2024 04:40:25 +0000

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

An AI Writing Assistant for Science Fiction Authors to help overcome writer's block with plot ideas based on their current writing. To build this project, I used postgresql with the pgai extension and Ollama.

For this challenge, an author can enter text in the editor. The "AI assistant" will use this text to help the author brainstorm ideas for what can follow and generate new text. Additional attempted functionality includes saving and embedding story text to enable embedding queries.

Frontend and backend are separate and spun up as docker containers. Frontend is built with NuxtJS/Vue/TailwindCSS/DaisyUI; Backend is built on FastAPI/Python/Postgresl leveraging the pgai and pgvector extensions with Ollama and the generative AI model.

I attempted to work with pgvector, pgvectorscale, and pgai vectorizer, but came upon several challenges in the process and ultimately didn't have enough time to overcome those challenges before the challenge deadline.

Demo

Quick Video Demo:

Code:

meditatingdragon / ollama-pgai-dev-challenge

Science Fiction Writing Assistant powered by AI

AI Writing Assistant for Sci-fi Authors

This project was developed for the Open Source AI Challenge with pgai and Ollama

It is a tool for science fiction authors to overcome writer's block by using AI as an assistant to help complete the story.

Tools

Dev Challenge Tools

pgai / postgresql
ollama

Other technologies

Nuxt.js
FastAPI
TailwindCSS
DaisyUI

Getting Started

This project can be run with docker:

docker compose up -d

This should start several containers for the frontend, backend, ollama model, and postgresql database. There is also a container for the vectorizer worker, though it is not used in this project since I did not end up using OpenAI.

For more details on the project, check out the challenge submission.

View on GitHub

Tools Used

Database: Timescale Docker Image
Frameworks: FastAPI (Python), NuxtJs (Javascript/Vue.js)
Model: Ollama
Hackathon Tools: pgai, ollama, pgvector, pgvectorscale

Final Thoughts

This was one of my first AI projects where I dug further into the end-to-end implementation of AI applications. The idea of a writing assistant has been in my mind for many years though, and I'm glad I had a chance to tinker and explore this idea.

As I haven't really worked with vector databases before, there was a bit of a learning curve understanding how to embed and store vector data. I know that if I had more time, I would work on implementing some search functionality that could leverage the power of embeddings and vector databases.

I managed to successfully store text embeddings on saving a story, but did not have enough time to overcome some challenges I ran into while trying to query on these embeddings. I think this would have required some configuration updates at different points in the application, but with the project set up the way it was, it was not a simple thing to do. This would be the next feature I would tackle if I had more time.

I also wanted to experiment more with fine-tuning models for this particular use case supporting science fiction authors and being able to run a custom model with the Modelfile in Ollama.

The "product vision" would be to be able to fine tune which elements of a story can be used for "inspiration" for the author (different story elements, such as location, characters, events, etc.) and to include AI generated graphics to help with visualizing story assets.

Overall, I learned a lot from this project and now have a better understanding of how pgai and Ollama can be used to build unique AI applications.

Prize Categories:
Aspired for all 3 prize categories, but could only incorporate one:

Open-source Models from Ollama (Ollama via docker image with llama3.2 model)

Nevertheless, Rachel Coded

Rachel — Tue, 09 Mar 2021 17:57:17 +0000

2020 was an interesting year, where the pandemic disrupted work/life balance worldwide. I was planning on skipping this post, as I couldn't think of anything to write. Then I decided I'd start and see what came out.

My most recent achievement was…

When I look back on 2020, I thought I would be searching for a new role for some stability. As the world began shutting down, that outlook changed entirely as I saw the challenges ahead for companies weathering the new, unprecedented 'storm'. Instead, I settled in for a longer journey developing different products and embracing a remote work culture.

Through this new normal, I helped a handful of clients bring data to life, creating a real-time dashboard and overhauling a product to improve its data querying and presentation. This included re-architecting how data was organized to improve speed and query times. More recently, I've been helping manage remote hires and to cultivate a remote work culture.

Outside of tech, I began rock climbing and just figured a challenging route that took over a month to figure out. 💪🏻 Haha, sometimes physical achievements feel greater than mental achievements...

My biggest goal is…

...for my side hustle Eonzah - an interactive giveaway management platform - to set the foundation to secure its first paying customer. Welcoming beta users...reach out if interested!

My advice for allies to support underrepresented folks who code is...

Take the time to listen and practice empathy. Be patient with things that aren't clear. Clarity comes with time as we learn to work better together.

I guess, now that I've put all this on "paper", 2020 wasn't without good things. It just takes intentional thought to recall the good.

DO Hackathon: Blokii Image Maker - Submission

Rachel — Sun, 10 Jan 2021 19:38:18 +0000

What I built

The Blokii Image Maker is a simple app that allows users to generate tech blog images.

Category Submission:

Built for Business

App Link

https://img-maker.blokii.com

Screenshots

Description

The Blokii Image Maker allows users to generate an image with a title, subtitle, author byline, and tech icons. The images are downloadable.

Link to Source Code

Frontend:

blokii / blokii-img-maker-client

Blokii Image Maker

The Blokii Image Maker is built with the Quasar Framework.

Install the dependencies

yarn

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

yarn run lint

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.conf.js.

Tech

In addition to leveraging the power of the Quasar Framework, it also uses the FontAwesome icon set and FeathersJS Client library to connect to the Feathers Backend server. It uses a Fontawesome Pro License, which is domain restricted and only works on certain domains.

Contribute

Read the GUIDELINES

View on GitHub

Backend:

blokii / blokii-img-gen-backend

Blokii Image Maker

About

This project uses Feathers. An open source web framework for building modern real-time applications.

Project Notes

Unsplash API

As per Unsplash's API Guidelines, this app requires an access key for using their API. This access key is retrieved as an environment variable that should be available at runtime. To learn more about creating an access key, see the Unsplash Developers API Guidelines.

CRUD

To demonstrate basic crud functionality, this project allows creating, listing, and deleting of images created to the server. The service framework used is FeathersJS.

This project uses socket.io to communicate with the server. Though if using the rest implementation, the following available API endpoints would include the following:

GET      /unsplash (get images from unsplash, proxies a request)
GET      /unsplash/track (sends a tracking request to unsplash per dev guidelines)
GET      /images (retrieves images)
GET      /images/:id (retrieves image by id)
POST     /images

…

View on GitHub

Permissive License

Apache 2.0

Background

I started blogging more on tech topics in the past couple of years. It was always a chore to find an image that would suit the blog post if it wasn't for an existing project with screenshots. I thought if it were possible to generate images automatically, it would save me some time as I came up with new blog posts.

How I built it

This application consisted of a frontend and a backend. The frontend was built with the Quasar Framework. The backend was built with FeatherJS. Both applications were deployed using Digital Ocean.

The frontend would be built as a Singe Page Application and served as a static site via Digital Ocean. The Feathers Application would be deployed and hosted using Digital Ocean's App service.

I really appreciated how easy it was to get up and running with Digital Ocean. At first, I wasn't sure if it'd be easier to serve the frontend via the backend, and that's how I originally deployed, but I found myself making more changes to the frontend than the backend and ultimately opted for separate deployment pipelines as I found it more a hassle to update the backend every time I wanted to push a frontend change.

Additional Resources/Info

Technologies that I used for this project include:

Feedback always appreciated!

DO Hackathon: Blokii Image Maker - Deployment

Rachel — Sun, 10 Jan 2021 18:53:49 +0000

I think it's time to deploy. Let's check the feature checklist.

The user interface can do the following:

~~Enable the user to add a title~~
~~Enable the user to add a subtitle~~
~~Enable the user to add a byline~~
~~Enable the user to select a font family for the text~~
~~Enable the user to change the fill and stroke color of the text~~
~~Enable the user to add technologies~~
~~Select image from Unsplash~~
~~Download the final image from the website~~
Deploy site as a static SPA

The server can do the following:

~~Proxy unsplash searches and downloads from the frontend with the Unsplash API auth token~~
Deploy to Digital Ocean as an App Droplet.

Deployment is all that remains.

Digital Ocean

When it comes to Platform-as-a-Service (PaaS) providers, I've used Heroku in the past, though never in production. For production applications, I've relied more on AWS and Google Cloud.

With all these experiences to draw on, I've found PaaS platforms great for individual maintainers. It takes the hassle out of setting up, configuring, and securing Cloud Infrastructure. Nowadays, I'm certainly more willing to consider PaaS over Cloud providers due to cost and simplicity. Cloud infrastructure isn't a bad option if you have the engineering team to support it. Though... most clients and roles I've been in ... usually don't. I've also increasingly grown to dislike configuring servers for production use...I'd rather spend my time building the application.

Using Digital Ocean was a pleasant experience overall. I knew I wanted to deploy the frontend and backend separately. The frontend would be compiled as a Single-Page Application (SPA) that pointed to the backend. The backend was a simple Node.js Application.

Deploying the SPA

Quasar provides a build command that generates the SPA (quasar build). It was quite easy to deploy a static site using Digital Ocean by creating a new App.

I connected my Github account, selected the repo, opted for auto deploy (the ease of CI/CD is such a treat nowadays...) and selected a location and repo branch to deploy. DO detected that my application was a web application. I selected to build the App as a static site. I then added the environment variable needed to point to the Feathers server and the necessary build commands.

The build commands included installing the Quasar CLI, so it could be used to build the project, which would by default output the files in to the dist/spa folder. I would then need to specify that the dist/spa folder was the directory in which to serve the application from.

Once all the values were set, it was ready to build and launch!

I pushed the button...and it started building. And then it was live! I could see the application was successfully being hosted, but in order for it to work with Unsplash, I would also need the server running.

I ran into some issues where I just didn't put in the right information (specifying the right build folder, installing the Quasar CLI), but that's on me. Overall, this was far simpler than some other services I've used for SPA deployment.

Deploying the FeathersJS

I wrote a quick write-up detailing how to deploy Feathers on Digital Ocean at the start of this Hackathon. In going through that process, I already knew what I needed to do to run a Feathers Server.

The main difference with this deployment was the addition of environment variables, primarily the UNSPLASH_ACCESS key, which would be needed to successfully query the Unsplash API.

I followed the same steps: connecting the repo, selecting the location, and defining the application variables. Again, Digital Ocean detected that it was a Node.js application, so it offered the related Node.js settings. I updated the port, added in the UNSPLASH_ACCESS key environment variable, and added in the build commands.

Then I selected the plan for the server and launched the application. Once the build was complete, it was live.

Domain Management

In order for the frontend to reach the backend, I had to set up the domain correctly.

Digital Ocean offered to manage the domain for me or provided a simple copy/paste solution so I could update the domain records myself. I opted for the latter, since I already have something hosted on another provider that is managing that domain.

After updating the domain, it was fairly easy to test whether things were connected appropriately. If the server returned results from Unsplash to display on the frontend, everything would be working as expected.

I refreshed the page...and things were working!

It was finally LIVE!

Check it out: Blokii Image Maker - https://img-maker.blokii.com

And, to test it, I used it to make this blog post image!

(and in doing so, have already seen areas that could be improved, haha).

Please note, it's not very mobile friendly yet...

Let me know what you think. Feedback always welcome!

DO Hackathon: Blokii Image Maker - The Unsplash API & Feathers Server

Rachel — Sun, 10 Jan 2021 17:50:12 +0000

In order to open up image select options, I decided to use the Unsplash API. As an Unsplash contributor and user, I was confident this would open up creative possibilities for users and provide more unique images as new images become available.

The API has requirements for attribution and security that required I develop a server proxy for any Unsplash API requests.

The User Interface

Due to the attribution requirements, I had to design the user interface with this in mind. I developed the UnsplashCard that would be responsible for most of this, displaying a single image with the necessary metadata - this primarily included displaying the right image url and contributor information (name, location, etc.) with the image.

I created a simple hover effect that would show all this at once:

The information would link to the user's profile and open a new page if clicked. Once I had the UnsplashCard component complete, I could list a bunch of results from the API.

I used a popup dialog to display results, mostly to keep things simple (I could keep the dialog in the same page and not have to make too many new views/layouts).

To keep track of the image selected by the user, I stored this information in the vuex state. Once the user selected the image, I would send a download request to the proxy server so it could relay that to Unsplash and properly track the images selected by users as required for API usage.

The FeathersJS Server

To proxy the Unsplash API requests, I created a simple FeathersJS project. If I wanted to develop user accounts down the road, Feathers provides that out-of-the-box.

I added the unsplash-js library following the Unsplash documentation, which I found quite straightforward.

Then I created a custom service in Feathers called Unsplash. It would implement the find() service method and use the provided params to make an API request.

To use the Unsplash API, I had to create a developer account and generate an access key for the application. I stored this as an environment variable for security purposes.

Find Service Method

The find service method would handle two kinds of request: a search request and a download request.

To implement the search request, I defaulted some variables, such as how to order the search results. I think ideally, this is probably something the user should be able to select. Right now, it defaults to latest, which I've found doesn't always yield the best results 😅. I mapped other variables to the pagination component options provided by Quasar so I could have pagination of results.

Once the results return, I forward that back to the frontend to be displayed in the Unsplash Dialog.

The download request is passed as an action parameter (action: trackPhoto). If the request is to send a download request to Unsplash, it does so using the download_location param saved when the user selected the image (as detailed here).

Once this returns, the response is forwarded to the frontend to confirm the request is successful.

That's it for the server!

Onto deployment.

DO Hackathon: Blokii Image Maker - The Quasar Frontend

Rachel — Sun, 10 Jan 2021 17:00:17 +0000

Background and Assumptions

For this series, I'll be focused more on explaining thought process than going over code. If anyone has questions about code, feel free to leave a comment. In general, I'm assuming a basic understanding of the involved technologies, so I won't spend too much time breaking down code snippets. Both repositories are available for review and will be linked at the end of this series.

The Layout

As this app is focused on generating an image, I wanted the focus of the app to be the image. I also knew there needed to be options for changing the image design.

This meant there would need to be two primary components that would make up the layout: the image and the settings. The image would need to take up most of the available real estate. The settings would take up the remaining.

I decided to add in a header for navigation and a footer for application links and info. The navigation would only lead to two other pages: about and help, which I would populate with some content to explain the app vision and FAQs.

The Image

After some research, I determined the features I wanted to implement could be accomplished with HTML Canvas, so the image design would take place using a canvas element.

I created a component called the Blokii Canvas to encapsulate the canvas and contain all related canvas drawing logic. It would watch for changes in settings selected by the user and draw and redraw the canvas based on user settings.

The Settings

Following the features defined, the user would need to be able to add a title, subtitle, and author byline. None are required but should be optionally customizable. The settings component would need to allow the user to customize these four elements. The user should also be able to change the color of the text and change the font family if desired.

To keep things simple, I pre-selected a subset of font faces that I would allow the user to select, taking a few from each family of fonts.

I also needed to enable the user to select an image or provide an image url to use as the background. If they wanted to download the image, a filename would also need to be provided. Finally, the user should also be able to add technology icons to their image. I pre-selected these options as well to keep things simple.

Once I grouped the functionality into their respective parts, I could break things down further.

State Management

I used vuex for state management so I could track the user's settings globally. This allowed me to update the canvas as soon as the user changed something.

Image Filters, Text Options

I stored image filter selections and text options in their respective state modules to keep them separate. Each css filter had a value associated with it to adjust the strength of the filter.

Global State

The global state module kept track of application level settings, like the filename of the downloadable image.

BlokiiCanvas

Developing the BlokiiCanvas was a bit of trial and error - as tends to be the case with design, sometimes it's hard to know if it looks good until you see it. This includes adjusting the default font size and positions. As these are fixed, I had to be sure the final result would be OK. I suppose it'd also be great if these settings were also customizable. Perhaps that can go into the next release.

Once I figured out how to add the image to the canvas and apply the css filters, I could easily iterate on it and create a bunch of if/else cases based on the outcome of user settings.

This gave me a drawable canvas that could produce this:

Good enough for now.

Settings Panel

Once I figured out how to lay things out on the canvas, I could make it variable. The settings panel would allow users to select options. I provided options for selecting font faces, title, subtitle, and byline text, and adjusting font colors. Finally, I also needed to allow the user to select the technologies they are blogging about, so I created a dropdown with options they could search against. I stored these settings as a json object in the vuex state.

Here's the text settings panel:

It's quite simple in how it accepts user input. I probably should add more validation...but there's limited validation at this point in time.

And here's the image settings panel:

The image settings allows user to either enter an existing url or to pick an image from Unsplash. Users can then opt to select an image filter for the selected image.

Download

To download the image, the user must enter a filename to name the downloaded file. The browser then convert the data from the canvas and encodes it to an image file for the user to download.

Feature Check

Let's see where we're at now...

The user interface can do the following:

~~Enable the user to add a title~~
~~Enable the user to add a subtitle~~
~~Enable the user to add a byline~~
~~Enable the user to select a font family for the text~~
~~Enable the user to change the fill and stroke color of the text~~
~~Enable the user to add technologies~~
Select image from Unsplash
~~Download the final image from the website~~
Deploy site as a static SPA

I'll cover Unsplash in the next section as I build out the server API.

Questions, comments, thoughts?

DO Hackathon: Blokii Image Maker - Defining the Project

Rachel — Sun, 10 Jan 2021 04:57:40 +0000

The App

The goal of the Blokii Image Maker is to allow users to easily generate an image that enables them to download and create a blog post with common tech frameworks they're writing about.

Defining the Features

As I planned this project, I wanted to define what done would mean for this hackathon, otherwise I tend to use my time inefficiently. For the purpose of this hackathon, I decided done would mean the following:

The user interface can do the following:

Enable the user to add a title
Enable the user to add a subtitle
Enable the user to add a byline
Enable the user to select a font family for the text
Enable the user to change the fill and stroke color of the text
Enable the user to add technologies
Select image from Unsplash
Download the final image from the website
Deploy site as a static SPA

The server can do the following:

Proxy unsplash searches and downloads from the frontend with the Unsplash API auth token
Deploy to Digital Ocean as an App Droplet.

Once the goals were defined, I could start checking off the tasks one-by-one.

Let's see how things go...

DO Hackathon: Blokii Image Maker - An Introduction

Rachel — Sun, 10 Jan 2021 04:27:16 +0000

The Project - Blokii Image Maker

The Blokii Image Maker is a simple image generator for tech blogs. It overlays common framework icons on an image provided by the user and allows basic filtering and titles to be applied.

Tech Stack

The tech stack chosen for this project is Quasar and FeathersJS. The (simple) application could have been built on just Quasar alone if it wasn't for the Unsplash API that requires a backend proxy to secure API auth tokens.

As I've been working with FeatherJS quite a bit, I decided to use FeathersJS for the backend to create a simple api that could proxy my Unsplash API requests.

The Quasar Framework is used as the frontend framework. In this series of posts, I'll write about how the project was developed.

Let's get hacking.

Deploying Realtime FeathersJS to DigitalOcean App Platform

Rachel — Thu, 17 Dec 2020 19:20:18 +0000

Recently, the DigitalOcean App Hackathon was announced. If you've been following my articles on FeathersJS, this is a great opportunity to try out Feathers.

In this brief article, I'll show how to launch your own Feathers instance on Digital Ocean.

Similar to Heroku and other PaaS (Platform-as-a-Service) providers, with the DigitalOcean App service, it's quite easy and straightforward to deploy an application. Digital Ocean provides a full workflow to add in environment variables, add a managed database, build on code push, and to deploy your application. If you don't want to deal with the stress of CI/CD (continuous integration/continuous delivery) and DevOps for an application, this may be a good option.

Generate Application

To get started, I generated a basic Feathers application using the following settings:

feathers generate app

? Do you want to use JavaScript or TypeScript? ...JavaScript
? Project name ...do-feathers
? Description ...Digital Ocean Feathers App
? What folder should the source files live in? ...src
? Which package manager are you using (has to be installed globally)? ...Yarn
? What type of API are you making? ...Realtime via Socket.io
? Which testing framework do you prefer? ...Jest
? This app uses authentication ...Yes
? Which coding style do you want to use? ...ESLint
? What authentication strategies do you want to use? (See API docs for all 180+ supported oAuth providers) ...Username + Password (Local)
? What is the name of the user (entity) service? ...users
? What kind of service is it? ...NeDB
? What is the database connection string? (nedb://../data)

This scaffolded a barebones application.

I updated the index.html in /public/index.html.

Then I pushed this to my github repo.

Digital Ocean App Platform

To create a new App, on the home screen, click the Create App button.

This will walk you through creating an app.

Connect Github to Digital Ocean

The first step will be to connect your Github to Digital Ocean.

Follow the prompts to authorize your account, and either allow access to all repositories or only select repositories.

Select the repository with your feathers app.

Name Your App and Select Deploy Branch

You'll be asked to name your application, select a region, and select a branch to deploy your application from.

You can also decide if you want Digital Ocean to automatically rebuild your application and deploy it for you once you push a new commit.

Configure Application

Digital Ocean will attempt to detect the type of application you are trying to run. It should detect that you have a Node.js based application and offer some default options.

Update the settings as needed.

Depending on your application, you may need to update the Environment Variables, Build Commands, Run Command, and Port.

Environment variables should be used to store 3rd-party API credentials and database settings.

For the default Feathers application, at a minimum, you'll need to update the port to 3030, which is the default setting for a Feathers Application (though you can change it if you choose).

Finalize and Launch

Finally, you'll be asked to select a plan. Choose one that meets your needs. If you're participating in the hackathon, you'll be given $50 credit for 60 days to use.

Once you're ready, hit the magic button: Launch Basic App.

Sample Deployment

Take a look at my deployment:

It's available here:

https://do-feathers-tc4py.ondigitalocean.app/

Here's the repo used:

meditatingdragon / do-feathers

do-feathers

About

This project uses Feathers. An open source web framework for building modern real-time applications.

Getting Started

Getting up and running is as easy as 1, 2, 3.

Make sure you have NodeJS and npm installed.
Install your dependencies
```
cd path/to/do-feathers
npm install
```
Start your app
```
npm start
```

Testing

Simply run npm test and all your tests in the test/ directory will be run.

Scaffolding

Feathers has a powerful command line interface. Here are a few things it can do:

$ npm install -g @feathersjs/cli          # Install Feathers CLI

$ feathers generate service               # Generate a new Service
$ feathers generate hook                  # Generate a new Hook
$ feathers help                           # Show all commands

Help

For more information on all the things you can do with Feathers visit docs.feathersjs.com.

View on GitHub

I don't plan to keep it up long though, as I hope to deploy another app for the hackathon, so don't be surprised if it's no longer available by the time you read this!

Your Turn

Let me know if you run into any issues. Happy Hacking!

Getting Started with Realtime Events and Streaming Data (in JS)

Rachel — Tue, 01 Dec 2020 18:08:23 +0000

About this Series

In this series, I'll be exploring how to develop an event-driven web applications in Javascript. We'll use Vue on the frontend and FeathersJS on the backend to accomplish this. If you're interested in learning more about developing real-time and streaming data applications, follow this series. This will include developing chat-based apps, streaming videos or audio apps, device-driven apps, such as those in the Internet-of-Things space, and much more.

This series assumes familiarity with Javascript. It also assumes familiarity with basic Vue and Node.js concepts, such as setting up a simple project in Vue/Node. I'll do my best to break down more complex concepts. If anything is unclear, please leave a comment so the article can be updated for clarity.

What is Realtime and Streaming Data?

Real-time data is data that is delivered immediately after collection. With ongoing improvements in hardware and computing power, it has become increasingly common for businesses to provide real-time analysis of data to identify potential issues or opportunities. Data collected can be transformed "on-the-fly" and presented to decision-makers instantly.

Traditionally, this was seen with devices and Geographical Information Systems (GIS) which would frequently emit sensor and/or location data.

With the increasing use of AI and data warehousing techniques, it's fairly common now to see real-time processed data. For high-volume applications, it's increasingly important to be able to update sites in real-time as the state of the system changes.

Real-time Events and Data Scenarios

Applications of real-time data will only continue to increase with time. Here are a few common ones to think about:

Health and Fitness Devices

As technology continues to improve, the advent of devices providing instant feedback will continue to increase in order to optimize the care and service doctors can provide. Medical equipment full of sensors will often need to transmit the information instantly in order to provide the doctor and patient the information needed to make informed decisions. In the past, X-rays would take days to process and develop. Now it's available within minutes. Other similar diagnostic procedures are increasingly becoming available to provide near real-time feedback for doctors to make decisions on a patient's condition.

Similarly, fitness trackers can transmit data such as heart rate and record your activity as you exercise or sleep. It can alert you when you've hit your daily step goals or warn you that you're working too hard. These devices all rely on real-time updates to keep the user informed as an event occurs.

E-Commerce & Scheduling

Managing inventory is important for customer satisfaction. Inventory is also finite, so when a user makes a purchase, the item is typically deducted from inventory. This generally works fine on low volume sites where a single user may only make one purchase for a single item at any given time. But what happens when multiple users try to purchase the same item at the same time?

Only one person will be able to complete the purchase. The other orders will need to be canceled once it's been discovered that the product is no longer available. This can lead to a terrible customer experience if the time taken to handle this exceeds a customer's patience and expectations.

Through real-time event updates, customers can be informed the product has been purchased and the item can be removed from their shopping cart before the purchase can be completed. This would help better manage customer expectations. The same can be applied to booking or scheduling applications.

Operational Awareness

Sometimes, monitoring data in real-time is important for business operations. This is generally true for any kind of heuristics or diagnostic platform for computing systems. For example, in preventing and mitigating cyberattacks, it's often necessary to track the flow of traffic entering a network.

The sooner an attack is discovered, the more likely a business can recover from the attack or defend against an attack. In such cases, real-time updates are important to accurately display the current situation.

Working with Realtime Data

The most common way to receive real-time updates on a website is through a real-time transport such as a socket. Sockets maintain an open channel with the server, allowing data and event notifications to pass through.

Socket.io is a popular library to support such connections. FeathersJS supports this out-of-the-box and provides additional scaffolding features for building a robust backend to support real-time applications.

Getting Started with FeathersJS

Getting started with Feathers is easy. I'll briefly go over how to create your own project so you can start using it. Afterward, I'll be using a pre-built project template to demonstrate different use cases. You can either create your own project or follow along using the same template.

Feathers Command Line Interface (CLI)

Feathers provides a CLI to enable you to quickly generate a new application. Globally install the Feathers CLI to generate an app:

npm install @feathersjs/cli -g

Create a folder for your project.

mkdir feathers-realtime
cd feathers-realtime/
feathers generate app

The Feathers CLI will prompt you with questions to help you configure your project, including auth, test frameworks, and data source providers. Adjust these based on your preferences. Make sure to select socket.io for your project when asked about APIs. Once complete, the CLI will automatically generate the project directory structure and files.

To learn more about the generated files, visit the docs.

Project Template

To start with a bit more functionality, I'm going to work from existing project templates within the FeathersJS community and build off these examples.

For the frontend, we'll use the feathers-vuex-chat frontend as a starting point which leverages the feathers-vuex library:

feathersjs-ecosystem / feathers-chat-vuex

Feathers Chat built with Feathers-Vuex 3.0

feathers-chat-vuex

Built on Feathers-Vuex 3.x

This is the new version of the Feathers Chat single page application using feathers-vuex. There is another version available that is no longer maintained at https://github.com/feathersjs-ecosystem/feathers-chat-vuex-0.7. It serves as a valuable comparison of the old API with the new API.

API Setup

This project is designed to work alongside the feathers-chat application. Please make sure you have the feathers-chat server app running before you try to use this one.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

View on GitHub

For the backend, we'll use the feathers-chat backend as a starting point:

feathersjs / feathers-chat

A Feathers real-time chat application

Feathers Chat

A FeathersJS Chat Application

About

This repository includes the server application from the official Feathers chat guide as well as chat frontend examples for different frameworks.

API server

TypeScript

The TypeScript version of the chat API server can be found in the feathers-chat-ts. To start it install the dependencies like this:

cd feathers-chat-ts
npm install

Then compile the source code and run the database migration which will initialize an SQLite database in the feathers-chat.sqlite file.

npm run compile
npm run migrate

It can now be started with:

npm start

Or in development mode with

npm run dev

Now go to http://localhost:3030 to start chatting 🕊️

Frontend

Plain JavaScript

A plain JavaScript frontend can be found in the public folder which is hosted statically by the api server examples.

React

TBD

VueJS

TBD

View on GitHub

The combined repo for this post can be found here:

meditatingdragon / realtime-feathers

Getting started with Realtime and Streaming Data in Javascript

Feathers Realtime

This repository parallels a blog post on developing event-driven applications using FeathersJS.

View on GitHub

Real-time Transports

As mentioned above, Feathers supports Socket.io as a real-time transport. It also supports Primus, which is a wrapper for real-time frameworks, making it possible to adapt Feathers to existing real-time frameworks used by other parts of the business.

Hello World - Pushing Messages to the Frontend

To kick off this project, I'm going to mock up some data on the backend to demonstrate real-time updates on the front end. We'll create a simple dashboard with different charts to display real-time data. We'll dive into more use-cases in the next series of posts.

Running the Project

This template uses vue on the frontend. To run the development server, use yarn serve within the feathers-chat-vuex directory. This will start on port 8080 by default. Navigate to your browser, http://localhost:8080/ to view the web app.

This project uses FeatherJS on the backend. To run the development server, use npm run dev. This will start on http://localhost:3030 by default.

The frontend should already be configured to connect to the backend on port 3030 through the /src/feathers-client.js setup.

Mocking the Data

To keep this first post simple, I'll mock up data to be sent by the Feathers backend at regular intervals. We'll use event listeners to detect when a user connects to the server and begin the data push once a user connects.

In channels.js, every time a connection is established with the server, it begins sending data every 5 seconds. This data is randomly generated using a helper function, getRandomInt. It provides data variables that I'll use to update the charts.

For a more realistic use-case, this data could be provided by a service or other data source (see below for a custom service implementation, which is a better approach). Consider sending logs which may provide a constant stream of log data. Or maybe you want to send binary data to display to the user, like an audio clip or video generated by another user.

  let logins = [
    getRandomInt(50, 70),
    getRandomInt(50, 70),
    getRandomInt(50, 70),
    getRandomInt(50, 70),
    getRandomInt(50, 70),
    getRandomInt(50, 70),
    getRandomInt(50, 70),
  ];

  let interval;
  app.on("connection", (connection) => {
    // On a new real-time connection, add it to the anonymous channel
    app.channel("anonymous").join(connection);
    // create 5 second interval to emit "dataAvailable" event with data payload
    interval = setInterval(() => {
      console.log("Sending new data");
    // remove one value, add a new one
      logins.shift();
      logins.push(getRandomInt(50, 70));
    // send the data through the 'dataAvailable' event
      app.io.emit("dataAvailable", {
        messageCount: getRandomInt(1000, 10000) + getRandomInt(0, 100),
        activeChatRooms: getRandomInt(5, 100),
        recentLogins: logins,
        openTickets: getRandomInt(0, 100),
        closedTickets: getRandomInt(0, 100),
        unassignedTickets: getRandomInt(0, 100),
      });
    }, 5000);
  });

  app.on("disconnect", (connection) => {
    clearInterval(interval);
  });

When you run npm run dev to start the server, the server should start transmitting data once a user connects.

Sockets Handling in the Frontend

Feathers provides a wrapper for the socket.io client that works seamlessly with a Feathers backend. Feathers-vuex integrates this library and also provides real-time socket event support within the vuex store. To get started, add the following libraries if not already in your project:

yarn add @feathersjs/feathers @feathersjs/socketio-client @feathersjs/authentication-client socket.io-client @vue/composition-api feathers-vuex feathers-hooks-common

These packages have already been added to the project template. @feathersjs/feathers, @feathersjs/socketio-client, @feathersjs/authentication-client, and socket.io-client provide the connection framework to communicate with your Feathers server through the socket.io real-time transport. The remaining libraries provide support for Vue/Vuex on the frontend.

By default, the feathers-vuex library defaults to real-time connections (the alternative being REST API calls, which you can also configure).

If this is your first time using Feathers-Vuex, I would recommend reviewing the docs, which documents the setup process and key concepts, such as the Auth Plugin, the Service Plugin, and Data Modeling. While this series will cover concepts relevant to the use-cases described, it will not be possible to cover everything.

Dashboard

To demonstrate the continuous stream of data, I'll be creating a simple dashboard filled with charts.

Creating a Dashboard View

// /src/views/Dashboard.vue
<template>
  <main class="home container">
    <div class="row text-center">
      <h1>Dashboard</h1>
    </div>
    <div class="row">
      <div class="col-6">
        <h3>Messages Sent</h3>
        <BarChart :chart-data="barchartdata" :options="options" />
      </div>
      <div class="col-6">
        <h3>Active Chat Rooms</h3>
        <BarChart :chart-data="barchartdata2" :options="options" />
      </div>
    </div>
    <div class="row">
      <h3>Recent Logins</h3>
      <LineChart :chart-data="linechartdata" :options="options" />
    </div>
    <div class="row">
      <h3>Current Tasks</h3>
      <DonutChart :chart-data="donutchartdata" :options="doptions" />
    </div>
    <div class="row">
      <h3>DEBUG</h3>
      {{ serverMessage }}
    </div>
  </main>
</template>

You may notice chart components added to this dashboard view. We'll create these down below.

Adding the View to the Routes

const routes = [
... 
  { path: '/chat', name: 'Chat', component: Chat },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
...
];

Adding a Dashboard Link to the Chat View

<div class="title-wrapper block center-element">
  <img
     class="logo"
     src="http://feathersjs.com/img/feathers-logo-wide.png"
     alt="Feathers Logo"
  />
  <span class="title">Chat</span>
</div>
<router-link class="float-right link" to="/dashboard">
    Dashboard
</router-link>

Displaying the Data

To visualize the flow of data, we'll use charts to display data updates. I'm going to use the vue wrapper library vue-chartjs for Charts.js, which provides a simple yet customizable charting library.

yarn add vue-chartjs chart.js

Creating Chart Components

vue-chartjs makes it easy to add charts as a chart component within a single vue component file. View the documentation to learn more about how it can be used within a vue app.

Here is an example of the bar chart component.

// /src/components/BarChart.vue
<script>
import { Bar, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};
</script>

Make sure you include the mixins and reactiveProp. The reactiveProp mixin adds a watcher to the chartData variable, enabling updates as data changes.

Listening to Events

To create an event listener for the dataAvailable event, add an event listener when the Dashboard component gets mounted(), and remove the event listener when the Dashboard component gets destroyed(). Take a look at the code below to see how the event listener is created:

  mounted() {
    // add an event listener to dataAvailable event
    this.establishConnection();
  },
  destroyed() {
    // remove the dataAvailable event listener
    this.destroyConnection();
  },
  methods: {
    destroyConnection() {
      feathersClient.io.off('dataAvailable');
    },
    establishConnection() {
      feathersClient.io.on('dataAvailable', (data) => {
        console.log('Receiving data from server: ', JSON.stringify(data));
        // update variables to the data received from the server
        this.messageCount = data.messageCount;
        this.recentLogins = data.recentLogins;
        this.activeChatRooms = data.activeChatRooms;
        this.openTickets = data.openTickets;
        this.closedTickets = data.closedTickets;
        this.unassignedTickets = data.unassignedTickets;
        this.serverMessage = data;
      });
    },
  },

Now, when you run the vue app and navigate to the /dashboard page, you should see the charts updating every 5 seconds.

Check Your Work

The final code up to this point is on the hello-world branch of this repo: https://github.com/meditatingdragon/realtime-feathers/tree/hello-world.

Level Up: Create a Custom Metrics Service

Go beyond Hello World and create a custom service that delivers the data. Feathers provides an easy way to generate a service for an application feature. For our dashboard, we can create a MetricsService.

feathers generate service

? What kind of service is it? A custom service
? What is the name of the service? metrics
? Which path should the service be registered on? /metrics
? Does the service require authentication? No
   create src/services/metrics/metrics.service.js
    force src/services/index.js
   create src/services/metrics/metrics.class.js
   create src/services/metrics/metrics.hooks.js
   create test/services/metrics.test.js

Define the MetricsService as a custom service that can create data every 5 seconds.

const { getRandomInt } = require("../../utils/dataGenerator");

/* eslint-disable no-unused-vars */
exports.Metrics = class Metrics {
  async create(data) {
    return data;
  }

  setup() {
    let logins = [
      getRandomInt(50, 70),
      getRandomInt(50, 70),
      getRandomInt(50, 70),
      getRandomInt(50, 70),
      getRandomInt(50, 70),
      getRandomInt(50, 70),
      getRandomInt(50, 70),
    ];

    setInterval(() => {
      console.log("Sending new data");
      logins.shift();
      logins.push(getRandomInt(50, 70));
      this.create({
        messageCount: getRandomInt(1000, 10000) + getRandomInt(0, 100),
        activeChatRooms: getRandomInt(5, 100),
        recentLogins: logins,
        openTickets: getRandomInt(0, 100),
        closedTickets: getRandomInt(0, 100),
        unassignedTickets: getRandomInt(0, 100),
      });
    }, 5000);
  }
};

Then we can update our data connection to use the service:

establishConnection() {
    feathersClient.service('metrics').on('created', data => {
        console.log('Receiving data from server: ', JSON.stringify(data));
        // update variables to the data received from the server
        this.messageCount = data.messageCount;
        this.recentLogins = data.recentLogins;
        this.activeChatRooms = data.activeChatRooms;
        this.openTickets = data.openTickets;
        this.closedTickets = data.closedTickets;
        this.unassignedTickets = data.unassignedTickets;
        this.serverMessage = data;
      });
    },
}

Check Your Work

The final code up to this point is on the metrics-service branch of this repo: https://github.com/meditatingdragon/realtime-feathers/tree/metrics-service.

Coming Up Next: Channels

To handle real-time events in future posts, we'll be making use of channels. If you want to get a jump start, take a look at the docs.

Let me know - how will you leverage real-time events in your application?

Create Beautiful Transactional Emails with the Feathers-Mailer Module

Rachel — Wed, 28 Oct 2020 12:57:25 +0000

FeathersJS is a robust web application framework for real-time applications and REST APIs. It's great for serving as a Minimum Viable Product (MVP) backend and scales when you are ready to move beyond MVP stage and grow your customer base.

Feathers provides a command-line tool to quickly scaffold a project and a handful of generators to build out services to meet your project needs.

One of the first features I developed with Feathers is transactional emails.

This article covers creating beautiful templated emails - even if you don't have design skills. By leveraging a combination of several tools, it's quite easy to develop professional emails for your platform.

The codebase for this tutorial will be building off a previous post I wrote - Intro: Fullstack JS User Roles & Management. At the end of this series, the email functionality already exists as part of account management and registration, but the emails are boring text emails like Click link here.

In this article, I'll use a combination of the following to transform the text emails into beautiful branded emails:

The Template

Beginning with the User Roles & Management Repo, I created a new repo using it as the template. You're welcome to follow along if you'd like by creating a copy of the above repo. The final repo is located here.

This repo already includes functionality for user login, password reset, and account registration, all of which send out an email when the action is triggered. I won't go into too much detail in this article, but if you'd like to learn more, read my previous article that covers it in greater detail.

Project Features

This project leverages feathers-authentication-management to provide account management functionality. An email service is also created to send out emails.

Email Service

The email service is quite simple. I set it up following the instructions found in the docs.

feathers generate service with the name 'email'.

This scaffolds out a service named email. I then defined the mailer configuration in the service file.

module.exports = function (app) {
  // Initialize our service with any options it requires
  app.use(
    '/email',
    Mailer(
      smtpTransport({
        host: app.get('smtp_host'),
        secure: true,
        auth: {
          user: app.get('smtp_user'),
          pass: app.get('smtp_pw'),
        },
      })
    )
  );
};

The app.get('variable') function pulls the value from a configuration file. Details about this can be found in the FeathersJS configuration docs.

The email service uses the feathers-mailer module, which is a wrapper for the nodemailer library so it supports the same transport options. For this project, I used the AWS SES transport, but you can also configure your service with different supported transport options or SMTP options.

To configure for AWS, the following configuration keys will be needed from your AWS account:

{
  "smtp_user": "aws_smtp_user",
  "smtp_pw": "aws_smtp_pw",
  "smtp_host": "aws_smtp_host"
}

You can add these to the ${env}.json configuration file or default.json configuration file.

Sending Emails

Feathers-authentication-management allows you to define which emails are sent based on the action requested. There's a total of 6 actions: resendVerifySignup, verifySignup, sendResetPwd, resetPwd, passwordChange, and identityChange.

These are all defined in the notifier function, which is passed to the authManagement service. Here's an excerpt of the notifier function for the Send Password Reset action:

module.exports = function (app) {
  // generates the token link
  function getLink(type, hash) {
    const url = app.get('client_url') + '/' + type + '?token=' + hash;
    return url;
  }
  // sends the email using an email service
  function sendEmail(email) {
    return app
      .service('email')
      .create(email)
      .then(function (result) {
        console.log('Sent email', result);
      })
      .catch((err) => {
        console.log('Error sending email', err);
      });
  }
  const FROM_EMAIL = app.get('from_email');

  return {
    notifier: function (type, user) {
      let tokenLink;
      let email;
      switch (type) {
        // user clicks link from email to verify their email
        case 'sendResetPwd':
          tokenLink = getLink('reset-password', user.resetToken);
          email = {
            from: FROM_EMAIL,
            to: user.email,
            subject: 'Reset Password',
            html: `<html><b>Reset Password</b>: ${tokenLink}</html>`,
          };
          return sendEmail(email);
      }
    },
  };
};

The notifier function is where we'll want to send the branded emails we'll soon be creating.

Transforming Emails

Up to this point, the code simply sends a simple HTML string with some content. We want it to do more. We want it to send a beautiful HTML email that is personalized for the user. To generate this HTML, we'll use a templating language so we can insert variables and allow customization on a per user basis.

I used Pug, but you're welcome to use a different templating language if you prefer. The template will compile to HTML, which you can then send as the email where we currently provide a text HTML string.

Within the server directory, install Pug:

npm i pug --save

Pug is a bit more concise than HTML, eliminating the need for code blocks. It relies on declaring the element type before providing the content.

Take a look:

p Welcome #{name}! You're now registered for #{event}.

When the template is compiled, you'll get something like this:

<p>Welcome Sarah! You're now registered for Fullstack Javascript.</p>

You can also use code blocks to generate HTML tags.

-
  var list = ["Apples", "Bananas", "Oranges",
          "Kiwis", "Jackfruit", "Kumquats"]
each item in list
  li= item

Which results in:

<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Kiwis</li>
<li>Jack</li>
<li>Kumquats</li>

Take a look at the docs to see it's full features.

Email Templates

While not required, I used email templates found on Really Good Emails to reduce the design time. I can easily tweak a design I like and match the colors/brands I want to use. They sort email templates into categories so you can easily search emails matching a template you want to use, from giveaways to account setup.

Once you find an email you like, you can also modify it live on their site before exporting to use elsewhere.

For this project, I'll use a simple Password Reset Template.

HTML to Pug

Once I'm done creating a template according to my brand, I can use another tool to compile the HTML to Pug, called HTML-to-Pug. Copy/paste HTML on one side, get Pug outputted on the other side. Quick and easy! It's not perfect, but it does most of the heavy lifting for generating the Pug code needed:

I save the Pug code into a new template file directly nested under the auth-management folder. You'll find the pug code under /server/src/services/auth-management/templates/password-reset.pug.

Now I can add some customization once I have the Pug template code.

For this project, I'm keeping it simple. I want to change the headline to include the user's name, and I'll add in the reset link. So if I reset my own account password, I'll see Reset your password Rachel.

I updated the pug template to include the firstname variable and the url link for the button:

Reset your password #{firstname}
...
...
a.Button-primary(href=url  ...)

The variables are then provided to the HTML compile function, so the new notifier code looks like this:

case 'sendResetPwd': {
    tokenLink = getLink('reset-password', user.resetToken);
    // create the function to compile the pug template to HTML
    const pwReset = pug.compileFile(
      path.join(__dirname, 'templates', 'password-reset.pug')
    );
    email = {
      from: FROM_EMAIL,
      to: user.email,
      subject: 'Reset Password',
      // use the function and add in the variables required by the template. This will output customized HTML.
      html: pwReset({
        firstname: user.firstname,
        url: tokenLink
      }),
    };
    return sendEmail(email);
}

Now, when I send a request for a password reset, I receive the following email:

I can then repeat this process for other transactional emails, or even create an automated email campaign.

Now it's your turn. What will you create?

Resource List

Did I Miss Something?

Leave a comment and let me know how this works for you. If something isn't clear, ask.