DEV Community: Tony Lea

Creating a SaaS in 2021 🚀💰

Tony Lea — Sat, 24 Apr 2021 14:43:30 +0000

Many developers have dreams of creating their own profitable Software as a Service. Mainly because it provides you with the freedom to work on the things you are super passionate about. It's also a good feeling to make money working on your own stuff.

Each step you take toward building your SaaS will eventually lead to a successful product as long as you keep pushing forward. Eventually, you'll be making money to continue improving your product and dominating your niche 😉.

In this post, I want to highlight five actionable steps you can take towards building a SaaS application today!

Let's dive into it. 😉

1. Craft Your Idea 💡

Coming up with an Idea for your SaaS is pretty fun 😃. Here are a few ways you can find an idea if you do not have one.

One of the best ways to find an idea is by solving your own problem. Is there a repetitive task that you constantly find yourself doing? Many other people may be doing the same repetitive task, so if you can find a way to automate this and save people time, you may be very close to striking gold.

Next, if there is a service with many customers yet you feel like many of their services are too complex, try creating a simplified version of that service, and you will start creating some buzz 🐝.

Need help with inspiration? Visit a few of these resources below for inspiration on finding an idea for your SAAS.

2. Design a simple logo 🧑‍🎨

Logo design is pretty simple, and the logo you come up with in the early stages may change down the road. Don't spend too much time on this step ⏳.

Here's a good thing to keep in mind when designing your logo. SIMPLICITY. That's right! Keeping it simple and clean will help your brand looking memorable and professional.

Sometimes all you need is a simple bold letter. Facebook has the bold letter f. ProductHunt has a simple letter p inside a circle. Simplicity is key 🔑.

You may also find it helpful to check out TheNounProject. Slap a simple icon next to your SaaS name, and BOOM 💥 , you have yourself a simple and professional logo.

3. Find your domain 🔡

Finding the right domain may seem difficult, but it's not. If you are having trouble finding a domain, here are some tricks that you may want to follow.

Try using some new TLD's such as .co, .so, .io, .dev, .app, and many others.
Add a filler word to the beginning or end. Try adding words like get, use, hello to the beginning of your domain. Try adding words like now, hq, app to the end of your domain.
Try to make it simple and memorable.

Find something you are happy with and commit to it. If your app starts making millions, you can buy a better domain later. This happened with Basecamp; their name used to be basecamphq.com, and after they purchased basecamp.com. Clicky.com used to be GetClicky.com, and there are so many others that have done the same.

4. Build your SaaS with Wave ⚒️

When you are ready to start building your SaaS application and are familiar with Laravel, you may want to reach for a SaaS starter kit such as Wave.

Wave has all the main building blocks you will need for your SaaS, including Authentication, Billing, Plans, User Profiles, and so much more. Be sure to check out the official videos page to learn more about how to use Wave.

Wave is 100% open source and free to use. If you would like to support the project and gain access to a few premium tools, you may want to consider upgrading to a Pro Account 😉.

5. Design your SaaS with Tails 🎨

Designing your SaaS is easier than ever before with all the cool design tools available.

If you are using Wave to build your SaaS application, then you'll be able to design with ease using TailwindCSS. There is also a premium tool you can gain access to with a Pro account, called Tails.

Tails is a Drag and Drop page builder that can help you craft the landing page of your dreams. I've created a quick video about how you can make/design your own SaaS using Tails in under 10 minutes. Check out the video below 🍿:

Conclusion

Building your own SaaS is a Journey on its own. There can be times when it seems challenging, and you feel like you're not making much traction, but I guarantee that if you stay persistent, you will always end up on top.

You will never go down if you never give up.

Learning is all part of the process of growing a successful SaaS. Here at the DevDojo, we are building tools to help you as you embark on your Journey of SaaS creation. You can get started by using our awesome SaaS starter kit Wave, and you can design your SaaS by using Tails.

You have the potential to create amazing things. So, be sure to keep building, keep creating, and enjoy the Journey. ⛰️

TailwindCSS Hidden Gems 💎

Tony Lea — Wed, 10 Mar 2021 23:30:15 +0000

If you are new to TailwindCSS, you're probably familiarizing yourself with some of the utility classes and starting to build some awesome stuff. 😉

As you learn about this awesome framework, there may be a few utility classes that you skimmed over. In this tutorial, I want to share with you some awesome utility classes you might have missed.

Space Between

Using the space utility classes, you can easily add equal spacing between your elements instead of using margin.

Here is a quick example of equally spacing a few boxes using margins:

<div class="flex">
    <div class="w-20 h-20 bg-black"></div>
    <div class="w-20 h-20 bg-black ml-5"></div>
    <div class="w-20 h-20 bg-black ml-5"></div>
    <div class="w-20 h-20 bg-black ml-5"></div>
</div>

Now, instead of adding the ml-5 to each element (except the first) we could add the class space-x-5 to the parent and it will get displayed the same way, with equally spaced elements:

<div class="flex space-x-5">
    <div class="w-20 h-20 bg-black"></div>
    <div class="w-20 h-20 bg-black"></div>
    <div class="w-20 h-20 bg-black"></div>
    <div class="w-20 h-20 bg-black"></div>
</div>

Here is how the output of our code above:

Hooray for spacing utilities 🥳. Be sure to check out my other article I wrote on Tailwind Spacing Utilities here, or you can checkout the spacing utility documentation here.

Dividers

Similar to the way that you can use the spacing utility classes, you can also use the divider classes to add dividers between your elements instead of using borders.

Here is an example of dividing elements using borders:

<div class="flex">
    <div class="px-5 border-r border-gray-300">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5 border-l border-r border-gray-300">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5 border-l border-gray-300">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5 border-l-2 border-gray-300">
        <div class="w-20 h-20 bg-black"></div>
    </div>
</div>

Now, here is the same design using the divider utility classes:

<div class="flex divide-x-2 divide-gray-300">
    <div class="px-5">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5">
        <div class="w-20 h-20 bg-black"></div>
    </div>
    <div class="px-5">
        <div class="w-20 h-20 bg-black"></div>
    </div>
</div>

Here is an example of how this will look:

There are 4 different divider utility classes we can use, which are:

Our code looks a lot cleaner, and it's easier to manage if we utilize these awesome divider utility classes 🙌.

Rings

Next are the ring utility classes. Instead of using custom box-shadow values to create rings around elements, we can utilize these classes to display the same output.

Here is an example of adding a ring around an element using box-shadows (notice we need to add some custom CSS):

<style>
    .custom-class{
        box-shadow: 0px 0px 0px 4px #90bafb;
    }
</style>

<div class="custom-class text-sm w-48 py-3 rounded-md font-semibold text-white bg-blue-500 ml-2 mt-2 text-center focus:outline-none ">
    Rings Are Awesome
</div>

This will give us the following output:

We can apply the same styles to our element by using the ring utility classes like so:

<div class="ring-4 text-sm w-48 py-3 rounded-md font-semibold text-white bg-blue-500 ml-2 mt-2 text-center focus:outline-none">
    Rings Are Awesome
</div>

Here is the output of the code above:

You can see that they both produce the same output; however, utilizing the ring utility classes will make our lives much easier.

There are 5 ring utility classes that we can use to change the appearance of the ring around our elements. These utilities include:

Be sure to use these ring utility classes in your designs to make your buttons or inputs sparkle. ✨

Placeholder Colors

Don't settle for the ordinary gray input placeholder colors, especially if your form inputs are a different color than white. You'll want to leverage the placeholder color and opacity utility classes.

Here is an example of a form with the default placeholder color:

<div class="bg-gray-900 h-screen w-screen">
    <input type="text" placeholder="Placeholder Colors!" class="border border-purple-600 rounded-lg px-4 py-2 ml-1 mt-1 bg-purple-600  text-white focus:outline-none">
</div>

This is how the form will look:

As you can see, the default placeholder text color doesn't look that great. Let's change that with by adding placeholder-purple-400 to our input:

<div class="bg-gray-900 h-screen w-screen">
    <input type="text" placeholder="Placeholder Colors!" class="border border-purple-600 rounded-lg px-4 py-2 ml-1 mt-1 bg-purple-600 placeholder-purple-400 text-white focus:outline-none">
</div>

As you can see, our input looks much better with a more appropriate placeholder color.

There are 2 placeholder utility classes you can leverage to change the appearance of your element placeholder text, which include:

Make sure to use these placeholder utilities to display your placeholder text in style 👕.

Animations

I wanted to mention animations because... Well, they're fun, and it's a really nice way to add some quick animations to your site.

Here is an example of a simple spinner using the animate-spin utility:

Here is another example of a simple bounce animation by using the animate-bounce utility class:

You can learn more about adding your own custom animations from my previous post on TailwindCSS Animations, or you can check out the official documentation on TailwindCSS animations here.

Conclusion

Those are just a few hidden gems you may have missed throughout your journey of learning TailwindCSS.

Keep on learning more about this awesome framework because your designs are going to soar ✈️.

Want to get a kick-start on building out some awesome pages using TailwindCSS, be sure to checkout Tails, our TailwindCSS page builder.

Happy Coding ✌️.