DEV Community: Fayaz Ahmed

Supersaas - A fast, modern, and easy to use Nuxt 3 starter kit.

Fayaz Ahmed — Mon, 12 Aug 2024 20:08:55 +0000

Supersas.dev A fast, modern, and easy to use Nuxt 3 starter kit. Made for people who want to build fast

🔒 Authentication - Email/Password, OTP, Magic Link, Passkeys, Social Logins
💳 Stripe & Lemonsqueezy payments - Unified payment hook usePayment
📁 File storage - S3, Local files, Nuxthub R2
📦 Database - Turso, Postgres, Cloudflare D1, Drizzle ORM
✉️ Emails
🌎 Works on the Edge - Cloudflare workers, Nuxthub, vercel

I had actually built a bare minimum version of Supersaas a couple of months ago, dog fooded it with my clients products and I learned what it lacked. Rewrote it again from scratch and made several improvements, now its feature packed and I have literally a lot of time trying to make this as easy as possible to start new projects.

I talked to users on how to improve it and added lemonsqueezy support, made it nuxthub ready and I even went ahead and purchased a bunch of boilerplates to understand what they lacked, most of those templates tried too hard and made it too complex to understand, which kinda makes me proud of how simple I made mine

No trpc, no complex types, just plain old rest apis with a solid foundation and architecture which I have learned working at multiple companies over the years.

Almost every project I posted on dev.to has been acquired, here's another one.

Fayaz Ahmed — Sun, 27 Aug 2023 09:19:46 +0000

So almost every single project I have announced on dev.to has been acquired for a decent amount of money, these projects were used by thousands of users around the world.

Here's another one.

https://feedful.app is a modern news reader in tweet deck style.

Please support on Producthunt if you liked feedful - https://www.producthunt.com/posts/feedful

Here's a demo -

My last project I launched on Dev.to got acquired. Here's a new one

Fayaz Ahmed — Sat, 25 Mar 2023 08:24:31 +0000

I had made and launched fluenticons last year and it got acquired. So today I am launching a new one, Let's see if the magic works for this too.

Introducing PostPerfect - Improve your tweets right from Twitter - I am launching it on Producthunt - do check it out and upvote, leave a comment if you like it.
https://postperfect.xyz
https://www.producthunt.com/posts/postperfect-ai

It is built with Vue, Vite, Crxjs, building a chrome extension was quite challenging for me, but this was such an interesting product to build

Been using ChatGPT for everything and I finally thought of building something with it. I will keep building more things over time.

I made an extremely fast, fully static rss reader

Fayaz Ahmed — Sun, 30 Jan 2022 18:55:29 +0000

So, I always wanted a rss reader, which had images for all the articles and I wanted it fast, hence came this idea, I have been using this for my personal use for a very long time now, finally making it open source.

https://feedful.vercel.app - do star on github if you find it good.

Note, this is still a work in progress.

How did I make it static?

A github action scrapes data and commits the data every 4 hours
Vercel deploys it whenever a new commit is pushed.

Sideproject Update - Fluenticons v2

Fayaz Ahmed — Wed, 08 Dec 2021 08:46:18 +0000

So, last February I had made a small weekend project and last month I released a version 2 of it.

Fluenticons is an icon viewer for Microsoft fluent icons. It has over 4000+ open beautiful icons which you can use in your projects.

Fluenticons is now sponsored by Iconfinder, sign up and get $10 worth of credits (via the banner in fluenticons).

What's new in v2?

No more hacks, I've used actual SVG's now, so I was able to add some new features like manipulating them.
You can copy snippets for SVGs, Vue component, React Component, HTML Image.
You can download SVGs, PNGs, WEBP, Vue component, React Component now.
Manipulate colors to see how the icon looks.
More performant, loads way too fast now. (Scores 100 on Lighthouse Yay!!). Was surprised to see the site loading in 600ms when I moved from vercel to cloudflare pages.

What's next?

Make an advanced editor like adding frames behind the icons. Inspiration - Bakery & Iconscout's Icon Editor (requires a lot a math, which I am not good at.)
Make a npm package for others to use the components in their own web projects, probably looking a web component, maybe like boxicons.

Tech stack

Nuxt.js
Tailwind Css.
Hosted on cloudflare pages.

Making a custom toggle/switch button with Tailwindcss and Vue.js

Fayaz Ahmed — Sun, 30 May 2021 10:00:50 +0000

Not sure what you call them, toggles or switches, but here's how you make a toggle button with Tailwindcss and Vue.

Here's how it looks and works.

Let's make a new component called toggle.vue and add the below code

<template>
  <div
    class="w-14 h-8 flex items-center bg-gray-300 rounded-full p-1 duration-300 cursor-pointer"
    :class="{ 'bg-green-500': value }"
    :aria-checked="value.toString()"
    @click="toggle"
  >
    <div
      class="bg-white w-6 h-6 rounded-full shadow-md transform duration-300"
      :class="{ 'translate-x-6': value }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggle() {
        this.$emit('input', !this.value)
    }
  }
};
</script>

Now, use the component in your code, whoever you'd like to.

<template>
  <div>
    <toggle v-model="toggleValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleValue: false,
    };
  },
};
</script>

Let's break down the component and try to understand.

Sorry for the bad image quality, not sure why is dev reducing the quality, even if it's hosted somewhere else, here's the link to a higher resolution pic

An outer which acts as a container for our toggle button, styled with rounded corners, and display: flex properties.
Here's the thing when we want to add v-model to custom events, there are two important things involved, a prop named value and a event named input to emit. so technically you custom component should look like this.

<custom-component :value="variable" @input="doSomething"/>

The interesting thing is v-model directive is a shorthand for the above attributes, which would make our component markup like this.

<custom-component v-model="variable"/>

That is exactly what we're doing here with our toggle component.

3.. Add a rounded div and bind this class to it translate-x-6 so it is gets slided to the right when value === true

:class="{ 'translate-x-6': value }"

4.. The final thing, just add a receive a prop with name value, which is very important that it be named value.

We now have a working custom toggle component. Just call it wherever you need like below.

Here's a demo if you'd like to test it and here's the source code

Shameless plug, do follow me on twitter for more articles and announcements

I made a small weekend project, thoughts?

Fayaz Ahmed — Sun, 25 Apr 2021 11:01:06 +0000

So, someone I knew had a google sheet of a lot of youtube channels that are live and I thought, hey we can make a small website out of this.

Introducing YT Live, it has a list of all the youtube channels mostly news channels, that are live.

It's made with Nuxt, Firebase, and Nuxt content module.

The code is open source.

Let me know if this is helpful, or just another small project that will I will be forgetting soon.

Accepting payments with Stripe, Nuxt. js and vercel

Fayaz Ahmed — Wed, 21 Apr 2021 05:52:35 +0000

It's been a long time since my last post and I wanted to write a small article on how to accept payments with Stripe, as I was integrating Stripe into my SaaS project, which I am currently building.

Accepting payments is not that difficult and you don't even need a server.

I will be building this app with Nuxt.js, Tailwindcss and host it on vercel.

TLDR; the code and the live demo can be found at the bottom of this post

The site I have made is not complete and not responsive, but if someone wants to raise a PR and get it working, please go ahead.

Scaffold a new Nuxt project with yarn create nuxt-app stripe-nuxt and you can select a CSS framework of your choice, I chose Tailwindcss, choose axios and I have also used nuxt-content for this, for storing the products database.

Clear the index.vue page and remove styles from default.vue files.

Add this markup and the script in index.vue, this will show a grid of products on the home page.

<template>
  <main class="min-h-screen">
    <section class="p-8 max-w-4xl mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 gap-6">
        <nuxt-link
          :to="product.slug"
          class="overflow-hidden text-center"
          v-for="(product, p) in products"
          :key="p"
        >
          <img :src="product.images[0]" alt="product.name" class="mb-4" />
          <p class="font-semibold text-gray-700 mb-1">
            {{ product.name }}
          </p>
          <p class="text-sm">$ {{ product.amount }}</p>
        </nuxt-link>
      </div>
    </section>
  </main>
</template>

<script>
export default {
  transition: "fade",
  async asyncData({ $content }) {
    const products = await $content("products").fetch();
    return { products };
  },
};
</script>

The above code will be rendered and look something like this.

Make a new file and name it _slug.vue in the same directory as index.vue, this will act as our product page and fill it with the below code.

<template>
   <main>
      <div class="flex">
         <div class="w-1/2 h-screen flex items-center justify-center">
            <img :src="product.images[0]" :alt="product.name" />
         </div>
         <div
            class="w-1/2 h-screen text-white flex items-center justify-center p-8 relative"
            :style="{ backgroundColor: `#${product.color.hex}` }"
            >
            <nuxt-link
               to="/"
               class="flex items-center space-x-2 absolute top-8 left-8"
               >
               <svg
                  class="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                  >
                  <path
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     stroke-width="2"
                     d="M7 16l-4-4m0 0l4-4m-4 4h18"
                     ></path>
               </svg>
               <p>Home</p>
            </nuxt-link>
            <div class="space-y-4">
               <p class="text-2xl font-bold">{{ product.name }}</p>
               <p>$ {{ product.amount }}</p>
               <p class="text-gray-100 text-sm">{{ product.description }}</p>
               <button
                  @click="buy()"
                  class="w-full py-3 bg-white text-gray-800 font-semibold flex items-center justify-center space-x-2"
                  :class="{ 'opacity-50 cursor-not-allowed': loading }"
                  >
                  <btn-loader v-if="loading" />
                  <p>Buy Now</p>
               </button>
            </div>
         </div>
      </div>
   </main>
</template>
<script>
   export default {
     transition: "fade",
     async asyncData({ $content, params }) {
       const product = await $content("products", params.slug).fetch();
       return { product };
     },
     data() {
       return {
         stripe: null,
         loading: false,
       };
     },
     methods: {
       async buy() {
         try {
           this.loading = true;
           const { data } = await this.$axios.post("/api/checkout", {
             order: {
               name: this.product.name,
               description: this.product.description,
               images: this.product.images,
               amount: this.product.amount * 100,
               currency: this.product.currency,
               quantity: 1,
             },
             slug: this.$route.params.slug,
           });
           this.stripe.redirectToCheckout({ sessionId: data.id });
         } catch (err) {
           alert(err);
           this.loading = false;
         }
       },
     },
     mounted() {
       this.stripe = Stripe("pk_test_ZaFKDdkCzVR4hCmDsUKWodm200fZIzrcmf");
     },
   };
</script>

This will make a page looking like this, not very fancy, but looks good (not responsive).

We need to add the stripe checkout script in the nuxt.config.js file, add this in the head object.

script: [{src: "https://js.stripe.com/v3/"}]

Let's focus on the script and see what's going on.

Create an empty stripe object, this is where we will initialize the stripe object.
Now pass the stripe public key to the Stripe method(the one we added in our head tag), you can get your public key from stripe dashboard
Let's make a checkout API and use Vercels serverless functions. Any js file we add under a folder called api will act as a serverless function in Vercel, pretty cool right. So, I made one called checkout.js and wrote a small script.

const stripe = require("stripe")(process.env.STRIPE_TEST_SK);
const hostUrl = "http://localhost:3000";

export default async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [req.body.order],
    success_url: `${hostUrl}/${req.body.slug}?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${hostUrl}/${req.body.slug}?failed=true`
  });

  return res.status(200).json(session);
};

You need to install the stripe package and import it and this is all you need to create a checkout session (the secret key can be found in the stripe dashboard).
The success URL and the cancel URL as the name suggest, tell stripe where to redirect respectively.

Now that we have received a session id, just pass it the stripe redirect method

this.stripe.redirectToCheckout({ sessionId: data.id });

Here's the code and here's the live demo.

If you like my work and want to get updates, please subscribe to my newsletter or if you'd like to buy me some coffee, you can donate here, we could have a online session over coffee.

Personal blogs from awesome developers

Fayaz Ahmed — Thu, 01 Apr 2021 05:16:39 +0000

Dev community, I have been trying to collect some awesome personal blogs from amazing developers.

I have been trying to make my own and was looking for some inspiration. Care to share some amazing links if you have any.

https://joshwcomeau.com from Josh Comeau
https://leerob.io from Lee Rob
https://flaviocopes.com from @flaviocopes
https://arun.is from @zhenpixels

Writing from the hospital and bored, suggest me something to do

Fayaz Ahmed — Wed, 31 Mar 2021 04:22:25 +0000

It's been 4 days since I had touched my computer and honestly, I have never been this bored in my entire life. This is not what I meant when I said I needed a break.

I got hospitalised recently and haven't left the room in 3 days. Hospitals suck, the food sucks, it's depressing and gets quite spooky at nights.

People call me a workaholic and I might be. I am not sure what I am even supposed to do sitting idle for this long.

My friends suggested me to chill and watch Netflix, I tried but it gets boring at some point. I am sure I am going to reach the end of my Twitter feed sometime today 😅.

So, #devcommunity please suggest something you'd do to utilise this time. I like writing, but I cannot write a lot due to the drip.

A list of actually useful Nocode tools and I am not talking about site builders.

Fayaz Ahmed — Sun, 03 Jan 2021 08:31:36 +0000

There's a lot of buzz going around the web dev world regarding Nocode, but a ton of these do the same thing and kind of miss the point of why they are to be used in the first place.

These tools are not just another Website/App builder, but actual tools that will help you develop/scale your existing apps/websites which solve production use cases.

1. PWABuilder

I have used this and you will be surprised how well it works. The name says PWA Builder, but in fact it makes your PWAs - actual android apps which you can host on the Google play store, these are small light weight apps which are hardly like 1 - 2 MB in size.

PS, they even have a neat PWA component library, like Auth, Contact Picker, Install component, which you can use in your PWAs.

2. Appsmith

Another tool that I have fallen in love with recently, imagine building internal admin panels without code with charts, APIs, form collections, all with a drag and drop interface.

You can even connect it directly to your Mysql, PGSQL databased right within this tool.

I am surprised by how many complex use cases it handles.

PS - it's all open source and they even have the hosted version for free(for now).

3. NoCodeApi

I have been seeing NoCodeApi being built and grow since the beginning and I cannot stress enough how useful and polished this tool is, you need not read the docs of third party APIs, set up separate servers, write code, handle auth, tokens, API keys etc. All you need is an account and just get started using APIs from Google, Instagram, Twitter, Airtable, Slack and there are literally tons of other platform APIs you can use in your projects.

PS, I have seen the next update of NoCodeApi and Danish is making something really amazing for developers called Dev APIs.

4. Pipedream

I am not exactly sure what to call this platform, because it does so many things you won't believe. Think of it like Zapier + IFTTT + Glitch + Firebase Database combines.

It has all the automation magic and it gives you the complete flexibility of writing code, it even lets you add/edit their own hooks. Pipedream even allows you to save data on an actual database

5. Letter

People sending newsletters, you know how hard it is to make good looking emails, letter is simple yet powerful, it can import data like images, titles, descriptions from links. right in their builder

6. Mail 4 Good

For sending 10,000 emails, Mailchimp charges you $200, Mail4Good does it for $1 (I am not kidding). The thing is you need to host it yourself, it is open source and it uses Amazon SES behind the curtains which makes it so cheap.

7. Descript

Descript is like magic for Independent video makers, it generates a transcript, editing videos is a breeze with this platform. Their website says video editor that works like a doc and I could not agree more.

Just look at their demo video and you will understand what I am talking about.

8.BannerBear

BannerBear automates Image generation for you, you just need to pass along some parameters to its API, and it will make the poster, image, text embedding, image resizing on the fly.

You can even generate these images on the bulk by uploading them to Airtable or google sheets.

9. Super

Super lets you use Notion as your CMS. It even lets you connect custom domains to the site that is generated.

Do consider supporting me by buying coffees

If you like my content do follow me on twitter.

For paid articles on Javascript, APIs, SDK Integrations etc just DM on my twitter handle.

Got bored and made iPhone 12 with Tailwindcss

Fayaz Ahmed — Tue, 29 Dec 2020 16:52:49 +0000

I coded the iPhone 12. Just because.

The code can be found here

It's mostly, layers of divs and some grid utilities. I have used a custom class for the frosted glass effect and some minor configuration changes to support the positioning of buttons.
It's all HTML except the icons.

Here's how it looked at the end.