How To Build A Tiny App/Product - The Tech Stacks And Tips I learned

Hi friends, today I want to talk about building tiny apps. During this pandemic, I have built some kind of 1 day 1 product, although I didn't intend to blast it as a hashtag #1day1product or #1day1app or whatever you would like to call it 😁

Not long ago, I started Ask HN in Hacker News Forum asking if can we sell tiny products?

And there are a number of people who participated the discussions which gives me a hint to probably talk a bit more about making a tiny product/app.

(And also I want to thank you for the kindness of the members there, they are kind to share what they thought and some gems. I feel humbled by the community's generosity.)

So, let's discuss A Tiny app, shall we?

What is a tiny app/product/game?

Usually from my perspective, it is

1. a one page app/game/info (if you are making an info product),
2. you can use it directly without those sign-in page. (it may differ depending on your industry)
3. you can get something out of it.
4. (Optional) Only ask for 1 input, why would you put more inputs if you can put 1?
5. (Optional & relative) You can build the tiny product in considerably short time (Less than 24 hrs to less than 1 week to less than 1 month maximum)

You may say, "That's an MVP, bro". And yes, you are correct. But I would argue MVP is also a product. But may be not so solid, still contains bugs, and so on. But we're not going to talk that here.
Those are my opinions, if you have other opinions, you can comment below or have a discussion with me on My Twitter @RicardoSawir or if you prefer by email, you can reach me out at [e-mail]

During this pandemic, I have built these apps:

1. ~March'20 - Stay Off Please Game - Inspired from lock down - A mini game I built, If I'm not mistaken, it was made in <24 hrs including watching tutorials about Unity.
2. ~April'20 LOL Product. I made this inspired by Card Against Humanity, But I changed the answers with HN's articles
3. ~May'20 Rosary Prayer - It's made HTML basically. It helps when people want to livestream prayer with their OBS App and just screen share this web so people could follow along, hence the giant font size.
4. ~June'20 Hacker News, but with 3 sections of Top, Best, New Stories side by side - It's HTML and with Axios to help with HTTP Client.
5. ~August'20 FastIcon – Generate Icons for your mobile app with ease - I'm starting to use PHP for faster development.
6. ~Early November'20 Deeper In God - An app to record 'rhema'/notes while reading bible - It may not fall into tiny, but rather small to medium app, built in 2-4 days if I'm not mistaken.
7. ~November'20 API Only Website - It is an API Only web. Really fun playing with returning JSON.
8. November'20 I make a tutorial about building login form with PHP - A screencast First time screencasting myself coding.
9. [~Mid Novemeber'20 My Subscription Form][https://subscribe.sawirstudio.com] - I build my own subscribe form.
10. November'20 I create an ebook about 50 Useful Tips using PHP There's also a write up here in Dev.to - 9 useful php tips and code snippets that get the jobs done.
11. November'20 I also create an ebook about 34 design tips to apply - There's also a write up - here
12. ~Latest November'20 HN Analytics - I started to be more active in HN communities. I think if I want to nominate the most successful tiny product, I would vote for this. This one gets the most exposure to me.

Probably, there are more. But I could only note down this 12 tiny products based on my memory 😁.

Now, let's discuss what tech stacks I used to build those.

1. I use mostly index.html and axios. It mostly done the job. especially if you are looking to host in static site. (like Netlify/Github).
2. I have a shared hosting. Cheap. But good enough to validate my ideas and products. I usually copy/paste my local code to the production server code. (Not even with FTP 😅). I think that is fast enough.
3. I use PHP if I need to handle logic. The HN Analytic contains a little PHP code, to parse the input logic. However in my opinion, PHP still excel in shipping fast and tiny product. I don't use framework for this. I will discuss about how I structure my tiny app project. (Spoiler: it's almost just an index.php!)
4. Fortunately, My shared hosting provides MySQL Database, so I use that. Easy connect with PDO. I use database usually to contain my subscribe form. Some of the apps mentioned above also use SQLite3 Database, if possible.
5. App feels an app when you show modal (agree? no? 😅 comment below, then! hehe). I use Sweet Alert 2. Fast, good, and solid.
6. CSS, I use mostly TailwindCSS and their Tailwind UI. Free, and I like it. Simple and help me fast to get start. You can also use Bootstrap, but I probably want to wait for their version 5 (as of this writing, their version is 4.5 latest).
7. I use DataTable if I need to show tables (HN Analytic uses it). That means I will also use jQuery.
8. For dropdowns/accordions, I use alpinejs (They have an example plus built in tailwind example) so if I ever need dropdown, I would just include alpine js script.

Well, without I realize it, the tech stacks here are for web apps. Do you have other not mentioned here? Comment below or tweet me some ideas, would love to here from you.

Now I want to share some of the tips I learned. (works for me at least 😋)

1. I don't separate javascript and css. I just include it with HTML. Somehow, I can better debug it when things go wrong and not have to click css/js files just to fix it.

<html>
<body>
<style>/** Hello CSS **/</style>
<script>// Hello JS. Usually I put axios here</script>
</body>
</html>

Yea, that looks more like it.
How about you?

1. I use index.php. a single file is all I need. (again it depends). PHP code on top, then below is the HTML code. I would take a PHPMailer example here
2. I want to remind you, do basic security for your apps by putting your index.php/html into your "public" folder (especially if you are working with PHP). And point your server to /public path. This will help you to prevent hacker accessing forbidden files, such as your database sqlite. You also don't need to spam .htaccess or web.config to forbidden access. Here are an example from Laravel Repository public folder
3. If you make a non app product, you may consider to use no-code if possible. I use Notion for my ebook, and Gumroad to receive the payment.

What's next

I am going to continue documenting about tiny app/product (may be also other things not related with this, who knows?) and share what I find useful to the community.

Do you have other opinions or something in mind? I would like to hear from you.

If you like this article, you can follow me as I document my journey mostly there.