Introducing the "Dev Joke" App, an app dedicated to collect and share Dev Jokes - "By the Dev Community, For the Dev Community."
Update:
This app is no more a demo app, it's a live site now. You can check it at https://devjoke.app
Follow "DevJokes" on Twitter to keep having the fun:
How did I get this idea?
I was inspired by "Dad jokes" when I was in the United States. Those jokes put us in instant laughter, and we were sharing the jokes after our stand-up meeting as a daily ritual.
Later on, we were run out of "Dad jokes," so we started with "Dev jokes." Yes, the fun started there.
I have been waiting to build an App for it, and this is the right time. I take this opportunity to thank Hash node and HarperDB for the #harperdbhackathon, as that pushed me to develop and launch the App. Yay! 🎉
Okay, that was the story. Let's dive into the App details.
Built with
- Frontend - Angular & TailWindCSS
- Backend - Node.js
- Database - HarperDB
- API documentation - PostMan
Demo
After taking a quick glance at the demo, come back and read through the post to understand how I built it, what my future road plan is, and more.
Take me to the app
Take me to the API
Let me know what you think about the App in the comments section down below.
Frontend (UI) - TailWindCSS
Used TailWindCSS to create slick, developer-friendly, and responsive UI. I chose dark mode as the theme by default, having a plan to add additional themes in the future.
Frontend (SPA) - Angular
Angular is one of the popular JavaScript frameworks to build Single Page Applications. I am already hosting Meetup events for Angular. Wanted to try out Angular so that I can talk about building this App in the upcoming events.
Backend - Node.js
Node.js is the easiest and fastest way to develop APIs. I created a "Dev Joke" API to store and consume the jokes in/from HarperDB; the API is hosted in Vercel .
Database - HarperDB
HarperDB is a powerful cloud database that comes with a ton of APIs that makes the developers life easier.
I used it to basically store jokes. It was super easy to initially load the jokes from a CSV file with an out-of-the-box feature that comes with HarperDB studio.
I will discuss the tables strategy (environments) in the next couple of moments.
API documentation - PostMan
I used the in-built feature of PostMan to record and document my API and published the API documentation. Check it out here
App features explained
☑️ Users see Dev jokes as and when they land on the home page. A random dev joke is fetched through Node.js API, which further hits HarperDB for a joke.
☑️ If the joke is so funny, we always feel to share that with friends. Go ahead and share it on Twitter with a click of "Tweet" button.
☑️ The tweet has the details like content, and hashtag pre-loaded using Twitter intent URL.
☑️ If there is an urge to view more jokes, no worries, you get it with a click of the "Next Joke" button that fetches a random joke from HarperDB through API.
☑️ The app lets know the User wait for the next joke by showing the "sand clock" emoji. Yes, it should be in a funnier way; that's why I didn't choose the progress bar. Lol.
☑️ Users can submit a dev joke. Very few fields, and making "name" and "twitter handle" even optional to just get and store what really needed.
☑️ Basic validations - Required, Empty whitespace, Character limits are covered.
☑️ Submit another joke if you got one.
Table strategy
Dev - Jokes submitted from UI get stored in Dev schema. Massage data, remove duplicates, delete spam are manual processes for now.
Prod - After sorting our good jokes, they will be moved from Dev schema to Prod schema table.
Check out my Future roadmap plan down below to automate these.
The app shows jokes fetched from Prod schema table.
Future road map
Below are the features I am having on top of my mind:
Frontend - Add more social media sharing, save joke as image, copy to clipboard.
Backend - Node.js API can be consumed by other Devs to integrate with Slack, Web app, etc., API key generation, API key management, Fraud detection are for the near future.
HarperDB - Automate copying jokes from Dev to Prod schema, Duplicate joke detection.
HarperDB - Feature request
Please have a feature to auto-increment column value on an insert of record. I know you have a functionality of creating a hash that takes care of indexing, but having a readable "number" will help APIs to interact with fewer DB calls.
Open source
You are welcome to submit PR for any of the existing issues. And very welcome to report any issues that you find on the Web.
Angular app
Node.js API
References
Pato's article on setting up TailWindCSS in Angular app.
Vercel serverless functions
Enabling CORS in Vercel.
