product

TV Premiere Alert: A Tool I Built without Writing Code

Quick story 🗺️

Fast forward today

I used to think I was unable to learn code, but one day, I took a website development course on Udemy where I built a website from scratch, and that triggered a series of events. I gained confidence (a beginner web dev course makes magic) and started building websites. Since then, I built my first very simple web app using JavaScript (more on this in a further post). And there will be many more to come!

Without that course, I probably would still be just thinking about my ideas without taking action, pitying myself because I couldn’t code.

Thankfully, I started following Ben Tossel’s work (NewCo). He provides education, tools and a community around building side-projects. I also learned of  the crazy maker guy, Mubs, who built more products than all my ideas put together. And also, Pieter Levels, who I have been following for years, who is a true inspiration and opened up my eyes to the fact that anyone can be a maker.

I’m so proud to write this: I started shipping products and I incredibly enjoy building them. I’m a newbie maker. 👶

But the road leading here wasn’t that easy.

Rewind a few months

Every single time I came up with a new idea to test, I hit a roadblock. I couldn’t code.

The next logical thing would have been to learn to code and build my own stuff, right?

Meh.

Instead, I kept procrastinating and taking the easier way, finding a passionate developer who was happy to join forces and make the project happen.

I had seen this happening, so if others did this, I could do it as well!

There were two problems with that:

  • It was incredibly hard to find a dev who is passionate about my idea (and probably I was lame selling my ideas)
  • They don’t prefer working for free on a side project when they can work for someone for real money.

This forced me to test my ideas in a way that didn’t involve coding at all. But this was really limiting.

Even building an MVP requires some minimal coding, and I couldn’t even create a simple landing page!

One day, I came up with a new idea! Again.

I started thinking about how I would build that, and it turned out I could put together an MVP by simply combining a few apps I had been using for years.

 

Boom! 💣

I was right in the flow and spent the whole weekend working on it.

After spending the whole weekend building TV Premiere Alert, it was finally ready!

But what’s TV Premiere Alert? Let’s start with the problem it intends to solve.

About the problem💡

I got swamped this year and didn’t have the time and energy to keep up with the premiere dates of my favorite TV shows, and trust me, I have a long list.

Since I’m a TV show junkie — watching TV series instead of sleeping — this was a real problem.

I hated searching for premiere dates, mainly because I found mostly clickbait or long articles with a wall of text, often without even mentioning the premiere date or even if it was mentioned, they made sure it was buried somewhere deep in the article, so there was no way you could scan it and get the premiere date fast.

I thought there should be a solution that sent me reminders if a new season of my favorite TV show was starting.

Surprisingly, I couldn’t find any solution that would be a good fit. There are mobile apps you can use to track your selected TV shows, but that’s a standalone app that won't be opened that often (at least not by me).

I needed something that fit my current routine.

I thought it would be more useful to build something on an existing platform, such as email. Everyone has an email address, and most of us regularly check our mailbox.

I solved my own problem and built a tool for busy TV show lovers.


About TV Premiere Alert 🔔


TV Premiere Alert sends you email alerts on the premiere day of your selected TV shows. The process is really simple:

  1. Visit the website and click on the set alerts call to action
  2. You fill in the form, containing 500+ TV shows
  3. Submit the form
  4. Receive email alerts on the premiere days of the selected TV shows
  5. Subscribers can edit their preferences anytime and request to add new TV shows to the database

 How TV Premiere Alert Works

TV Premiere Alert has 4 main components:

  • Website (unicornplatform.com)
  • Embedded form (jotform.com)
  • Email management (mailchimp.com)
  • Database (Google Sheet)

Building TV Premiere Alert - Step by Step 👷

  1. Building the website

Costs

  • Website: $0
  • Design: $0

 Tools used

I was so lucky that several months ago, I came across Unicorn Platform on Product Hunt. It’s a drag-and-drop website generator, with pre-built content elements to easily put together a site.

icorn Platform
Unicorn Platform

Once you add every element you need, you can download the full HTML and CSS. I used only the free components, so I didn’t have to pay anything.

I opened the files with Brackets and the fun started.

I had a template with default texts that had to be customized. I cleaned up some elements and further tweaked the layout of the website.

This didn’t require any deep understanding of HTML and CSS. The beginner course I took provided me the necessary knowledge to customize a pre-built template.

I used Canva to create the visual elements for the website; no designer help was needed. Even my logo is a standard icon from Canva, but who cares?

It took me several hours to customize the homepage, and I also created a subscribe page for embedding the form.

The next step was to build a form.

Creating the form

Costs: $0

Tools used

After wasting hours with Mailchimp’s form, I was looking for an alternative solution since Mailchimp limited the maximum number of checkboxes to 60, and there was no way I could make my app work with this limitation.

After surfing on Google, I decided to give Jotform a try.

Jotform is a form builder tool that became the perfect fit for my project for the following reasons:

  • It allows for adding more than 500 checkboxes (for each TV show)
  • Users can edit their preferences (delete/add new TV shows)
  • It has an integration with Mailchimp
  • It has a freemium model, so the first 100 submissions are free
  • Forms can be embedded and edited

Bingo!

Shortly after registering, my form was almost ready. All the 500+ TV shows were added, integration was set up and it was tested with Mailchimp.

Embedding the form came easy, the only tricky thing was the form’s customization. The embeddable form Jotform generates didn’t really fit in the design of my page and the whole form. Thanks to the 500+ checkboxes, it wasn’t user-friendly at all.

I had to do some HTML and CSS magic to transform the form from this state:

Jotform 1st form

To this one:

Jotform v2

It looks much better, but there is still room for improvement.

The site was ready and the “backend” worked as intended: submissions are captured by Jotform and data is sent to Mailchimp through an API so I can segment the subscribers based on what TV shows they selected. Users also automatically get an email after subscribing.

Onward to glory!

Buying the domain

Costs: $15

Tools used

I did some keyword research to optimize my domain name for terms people search for. TV Premiere Alert seemed the best option, so I took it.

For buying domains, my go-to website is GoDaddy, but any similar website is just fine. The only thing that’s important is the ability to easily move your domain to other service providers.

Deploying the website

Costs: $0

Tools used

One of my colleagues recommended Netlify as a super easy tool to deploy websites. And indeed, it works like magic!

Netlify

I registered an account for my project and also did the following things:

  1. Deployed my website on a hosted site on Netlify
  2. Edited my domain’s nameservers on GoDaddy and also on Netlify to use my own domain
  3. Added SSL certificate (free open SSL) to the website, which takes just a few clicks
  4. After a few minutes, the site was up and running!

I know it might sound a bit techy, but trust me, Netlify has some easy-to-follow guides that make it easy for anyone to deploy the website and set up hosting and an SSL certificate.

Email management

Okay, subscribers were pushed from Jotfrom to Mailchimp. The next step was to set up alerts so they would receive emails on the premiere day of their selected TV shows.

This process is currently done manually. I set up the campaigns one by one in Mailchimp and schedule them for the premiere days.

This part of the app is far from optimal, but I’m here to test the idea, doing things that don’t scale. If the user base exceeds a certain level I can’t handle, then I will figure out a way to automate as many things as possible.

Using the feedback I received and will receive, I set the next steps for the product and continue to use my newbie coding skills to improve the product and sharpen my skills as well. 

Conclusion 🧘

It might not sound like a big thing for others, but this was a huge achievement for me.

I pushed myself out of my comfort zone and decided to hack together an app without coding, which helped me push myself further and build my first web app.

There are many things ahead, and I’m sure if a senior developer saw my code, she would scream, but all that matters, for now, is that it works and I’m making great progress.

I’m sharing my journey openly on this blog. If you want to follow how I succeed and fail, then subscribe to my mailing list: 

 


I'm sharing everything about shipping and marketing products. I'm learning a lot and so will you!

Comments