TheLazy.Dev
Portfolio GitHub

Blog

dohackathon |digitalocean |javascript |showdev

DO Hackathon: Blokii Image Maker - Submission

rachel_cheuk

Rachel

Posted on January 10, 2021

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:

GitHub logo blokii / blokii-img-maker-client

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 uses a Fontawesome Pro License, which is domain restricted and only works on certain domains.

Contribute

Read the GUIDELINES


View on GitHub


Backend:

GitHub logo 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!

💖 💪 🙅 🚩
rachel_cheuk
Rachel

Posted on January 10, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

DO Hackathon: Blokii Image Maker - Submission
dohackathon DO Hackathon: Blokii Image Maker - Submission

January 10, 2021