DEV Community

Cover image for DO Hackathon: Blokii Image Maker - Submission
Rachel
Rachel

Posted on

DO Hackathon: Blokii Image Maker - Submission

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

Alt App Screenshot

Alt Text Settings

Alt Image Settings

Alt Unsplash Dialog

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 Image Maker

The Blokii Image Maker is built with the Quasar Framework.

Install the dependencies

yarn
Enter fullscreen mode Exit fullscreen mode

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

quasar dev
Enter fullscreen mode Exit fullscreen mode

Lint the files

yarn run lint
Enter fullscreen mode Exit fullscreen mode

Build the app for production

quasar build
Enter fullscreen mode Exit fullscreen mode

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 is currently compiled and deployed as an SPA with the server on Digital Ocean.

Contribute

Read the GUIDELINES




Backend:

Blokii Image Maker

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.

  1. Make sure you have NodeJS and npm installed.

  2. Install your dependencies

    cd path/to/do-feathers
    npm install
    
  3. 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.

Blokii Image Maker Project Notes

This project does not use authentication, but if it were to…

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!

Discussion (0)