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
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 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 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.
-
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.
Blokii Image Maker Project Notes
This project does not use authentication, but if it were to…
Permissive License
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!
Top comments (0)