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 uses a Fontawesome Pro License, which is domain restricted and only works on certain domains.
Contribute
Read the GUIDELINES
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 /imagesPermissive 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)