2018 was a great year for me as a developer. I managed to put together an open-source project (still under heavy development) that was sitting on the back of my mind for many years.
I don't know about you but, as a programmer that is comfortable with both the backend and frontend, I'm always testing new ideas, apps and websites. Doing so for years and years I noticed a repetitive task that was getting quite annoying. Each of my projects required a presentation website with a blog where I get to talk about it in more detail.
That means at least one web server with a database attached. It's not hard but takes a lot of time that I would rather spend on something else instead so I stopped and brainstormed my next project that would end this repetitive cycle of costly deployments.
Every good house starts with a strong foundation
My framework of choice was Gatsby. It had most of the things that I would consider to be required:
- it has to compile to static files
- easy to deploy to a CDN such as Netlify
- image optimization in place
- vibrant community
- hackable because I like to get my hands dirty
- extensible via plugins
- uses GraphQl to fetch data
query($slug: String, $tags: [String], $categories: [String]) {
post: markdownRemark(fields: { slug: { eq: $slug } }) {
...postFragment
}
}
The result had to be something oriented towards programmers. I hate wysiwyg editors with a passion because there are many constraints and the output never seems to be predictable. I wanted something where I put the power of the framework at reach for both the developer and content editor.
Developers and Publishers express without barriers
Slowly but surely Qards took shape. My goal was to give more power to the writer by using, what I like to call, "smart cards". The content editor should be able to create interactive presentations using widgets that respond to events, to dates, to browser types, regions or any other external factors that can be made available to a frontend engineer. Some of those widgets include:
- automatically generated toc (table of contents) (developed)
- charts (planned)
- accordions (developed)
- images (developed)
- galleries (developed)
- video embeds (developed)
- audio playlist (developed)
- code blocks (developed)
- callouts (developed)
- countdowns (developed)
- grid lists (planned)
- references to other posts (developed)
- etc
One other must-have for such a platform was the ability to add custom widgets via an internal plugin system (still under development/planned). The developer creates directives and data requirements which are interpreted by the admin interface (Netlify CMS) where the content publisher is able to create those experiences. That's right, let's navigate from simple posts to "experiences" for our visitors. We're all affected by bounce rates that connect directly with dull interfaces.
Let's get the word out
One month later into the project I had a clear path and an idea that was no longer just a blurry shape. I like to test such things before an official launch by putting it out there on ProductHunt and other similar platforms.
Qards was quickly picked-up and got to 2nd place for that day which was not bad at all for something which was not even in an alpha stage.
The feedback was more than helpful and my mailing list reached 2,000+ in one night so it was a productive experience for me. That's everything I needed to validate my project. I was going to use it anyway but I wasn't sure if I could make something for the general public out of it.
More than just a blog
I may be advertising a blog but Qards is more than that. Being powered by Gatsby, it can be your next big project...with a blog. You simply get the added benefit of not having to worry about content any more.
In summary
In summary I would like to recap everything that Qards is and does so here's a list of all the parts that make this project work:
- powered by Gatsby and Netlify CMS, comes with all benefits
- free to use and free to deploy to Netlify or other CNDs (free SSL as well)
- rich, interactive widgets to keep your readers engaged
- more power to the content editors (think of it like Bootstrap for publishers)
- compiles to static files
- offline support
- pluggable
- extensible
- hackable
- free to use and develop with 0 restrictions
- code/content sits on Github or Gitlab
- static files are served by any CDN you can think of
- open source
- tested (work in progress)
- developer oriented
- developed in Typescript
- blazing fast
- appealing default design
- themable
- deployable and ready to publish in under 10 minutes
- markdown content
- progressive loading, image optimization and lazy loading of content
- un-hackable, always on production deployments
- awesome performance index
If I managed to spark your interest please have a look at Some of the supported cards to get a feel of what this project can do for you.
Also, it's still an early phase so AMA and feel free to suggest new things.
Top comments (2)
Looks interesting 👐 Romeo.
Signed up & 👍 on Product Hunt. 😄
Thank you Sung!