DEV Community: Mostafa Said

AI and the Developer: A Shift We've Seen Before

Mostafa Said — Tue, 01 Jul 2025 19:06:55 +0000

Almost every developer has an opinion about AI and its role in our world as developers.

Some think it'll make us better and more productive. Others are convinced it's the beginning of the end.. that AI will replace developers.

I don't think either extreme is fully right. But what I do know is that we've been here before. So many times.

When frontend and backend frameworks started becoming the norm, a lot of devs pushed back. We heard things like:

"Now anyone can build apps — we're so done"
"These frameworks are too opinionated — they take away the creativity"
"It's overcomplicating the simple stuff"
"Real developers write everything from scratch"

Sound familiar?

Then what happened? We learned those frameworks. We mastered them. And in the process, we built better apps, in less time, with less guesswork. What seemed like a threat ended up unlocking a whole new level of impact.

We saw the same kind of resistance when we moved away from jQuery. Or when SPAs started taking over. Or when TypeScript showed up and made JavaScript safer, some loved it, some hated it, but eventually most teams adopted it because the benefits were real.

Now, we're looking at a new kind of shift.

Concepts like MCPs (Model Context Protocol), RAG (Retrieval Augmented Generation), AI-assisted debugging, auto-generated tests, Vibe-coding, it became clear that AI isn't just a helper, it's becoming a real part of the dev workflow.

Do I have it all figured out yet? Not really. I'm still exploring, still testing the limits.

But what I do know for sure is that developers who stay curious, stay open, and keep learning, they won't be left behind. They'll lead.

That's exactly why I'm building AI-Driven Development (AIDD) at BitterBrains.

I'm collaborating with industry experts and top-tier developers to build a clear, structured path for learning how to truly leverage AI. The goal is to help developers make sense of this new landscape and use AI to work smarter, ship faster, and level up their efficiency in a big way.

Because this isn't just another trend. It's a shift. And if history tells us anything, devs who embrace the shift early will be the ones who shape what comes next.

Head over to https://aidd.io and fill out the quick survey, it'll help us shape the experience around what you actually need as a developer.

Working with Laravel Jetstream VueJS 3 & InertiaJS with SSR Support

Mostafa Said — Fri, 15 Jul 2022 13:58:28 +0000

You feel like you're describing a brand-new car with some fairly impressive characteristics when you read this article's headline, don't you? Working with such tools will undoubtedly give you the impression that you are driving a brand-new, stylish car.

In this Article, I'm going to help you get started with Laravel's JetStream InertiaJS stack with SSR support. JetStream will provide your next Laravel project with a well secured authentication system and InertiaJS with VueJS3 will give it a modern and elegant taste. I'll assume you have some familiarity with Laravel, but it's okay if you don't. Just follow along, and I'm sure you'll find this tutorial helpful.

TOC
What is JetStream
What is InertiaJS
Why should I use Inertia with SSR support
1- Install new Laravel App
2- Install JetStream with SSR support
3- Start your Laravel server
4- Laravel & Inertia Routing
5- InertiaJS Forms

I would like to start this by taking few seconds to give you a quick background about JetStream and InertiaJS.

What is JetStream:

Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features. Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding. Source

It's the more complete version of Laravel Breeze authentication system. JetStream allow you to start your next application without wasting anytime creating a secure authentication mechanism for you app.

What is InertiaJS:

Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks. DOCS

InertiaJS works side by side with Laravel and VueJS. You can think of it as a friendly neighbor who is always trying to help you to do anything. Inertia also allow you to use Laravel router instead of Vue router.

Why should I use Inertia with SSR support:

Server-side rendering allows you to pre-render an initial page visit on the server, and to send the rendered HTML to the browser. This allows visitors to see and interact with your pages before they have fully loaded, and also provides other benefits such as decreasing the time it takes for search engines to index your site. DOCS

Search engine optimization (SEO) might be challenging when using VueJS since single page apps are known to confuse search engines. There are other solutions available to that problem, however InertiaJS came to the rescue by adding SSR (Server Side Rendering) functionality.

Time to get started 🚀

1- Install new Laravel App:

You're free to choose the best installation method, I will use for this tutorial Laravel Installer.

laravel new {project name}

Don't forget to replace {project name} with any name you want to give your project.

2- Install JetStream with SSR support:

When you install JetStream and Vue Inertia stack, it will install InertiaJS with VueJS 3 and TailwindCSS by default. The installation will configure everything for you, you really won't have to do a thing.

Start with JetStream composer package

composer require laravel/jetstream

Install InertiaJS stack with SSR support

php artisan jetstream:install inertia --ssr

3- Start your Laravel server:

Since Laravel recently runs on Vite, we need to run 2 terminal commands.

npm run dev

And in another terminal window we need to run the below:

php artisan serve

And Voilà! You have a Laravel project with a fully secured authentication system, InertiaJS components styled with TailwindCSS and all of that ready to be customized to fit your project.

4- Laravel & Inertia Routing:

Let's create a Product model and allow our users to create a new product and get redirected to the newly created product page.

Create a new database and connect to use using your .env file in the main project directory. In my case I created a new mySQL database called tutorial and made the below changes in .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

Open up your terminal and hit the below command to create a Product model with migration:

php artisan make:model Product -mc

Head to your products table in database/migration and make the below changes to add user_id, name and slug for each product.

    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id');
            $table->string('name');
            $table->string('slug');
            $table->timestamps();
        });
    }

Now go to your newly created app/models/Product file and make those columns fillable and write the product relation to users. Since every product will belong to a user, then we're going to use belongsTo relationship.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;

    protected $fillable = [
        'user_id',
        'name',
        'slug',
    ];


    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Let's add the User relationship which will be that every user has many products. We will just add the relationship to the User model without changing anything else.

    public function products()
    {
        return $this->hadMany(Product::class);
    }

Migration time.

php artisan migrate:fresh

Time to work our routes, we need one route to show the product and another to post the create product request. In this tutorial, we will use routes/web.php as our playground.

First thing, let's work our route to show the product.

//Route to show the product
Route::get('{slug}', function () {
       return Inertia::render('ProductShow')>name('products.show');
});

Notice that we don't use return view() anymore, the return Inertia::render allows you to render InertiaJS components.

Now we need the other route for posting the request.


use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

//Route to submit a new product and redirect to show it
Route::post('products/create', function (Request $request) {
    $validated = $request->validate([
        'name' => 'required',
        'slug' => 'required',
    ]);

    $user_id = $validated['user_id'] = auth()->user()->id;
    $product_slug = $validated['slug'];

    Product::create($validated);

    return redirect()->route('products.show', [$user_id, $product_slug]);
})->name('products.create');

5- InertiaJS Forms:

Notice that we already have welcome route set by default in web.php, we will use this welcome page to add to it our form.
Head to resources/js/Pages/Welcome.vue and replace it with the below code. We will use Inertia's useForm helper.

<script setup>
import { Head, Link } from "@inertiajs/inertia-vue3";
import { useForm } from "@inertiajs/inertia-vue3";

defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
});

const form = useForm("createProduct", {
    name: null,
    slug: null,
});

const submit = () => {
    form.post(route("products.create"), {
        onSuccess: () => form.reset(),
    });
};
</script>

<template>
    <Head title="Welcome" />

    <div
        class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"
    >
        <div
            v-if="canLogin"
            class="hidden fixed top-0 right-0 px-6 py-4 sm:block"
        >
            <Link
                v-if="$page.props.user"
                :href="route('dashboard')"
                class="text-sm text-gray-700 underline"
            >
                Dashboard
            </Link>

            <template v-else>
                <Link
                    :href="route('login')"
                    class="text-sm text-gray-700 underline"
                >
                    Log in
                </Link>

                <Link
                    v-if="canRegister"
                    :href="route('register')"
                    class="ml-4 text-sm text-gray-700 underline"
                >
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <form @submit.prevent="submit">
                <input type="text" id="name" name="name" v-model="form.name" />
                <input type="text" id="slug" name="slug" v-model="form.slug" />
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</template>

Have a look at the above code and see how simple the syntax is for the form integration with Inertia's useForm helper. We make a constant called form and make it equal to useForm then we give a name to our form and define the data. then we make const for our submission and give it the Laravel route name and that's it!

Now create another file in the same directory and name it Product.vue and paste the below code.

<script setup>
import { Head } from "@inertiajs/inertia-vue3";
</script>

<template>
    <Head title="Product" />

    <div
        class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"
    >
        <h1 class="text-6xl font-bold text-black">Hi, I'm product</h1>
    </div>
</template>

Now you're ready to test your project 😎

register a new user and head to the homepage, fill the form and click on submit. You will find yourself magically redirected to the product.show route without page reloads or any kind of delay.

I hope that this quick tutorial was useful. Despite my current hectic schedule, I continue to do my best to give back to the community. Please post any questions you may have in the comments section, and I will get back to you as soon as I can 👋

Create Custom Laravel Validation Rule for Total Uploaded Files Size 🚫✅

Mostafa Said — Sun, 10 Jul 2022 11:06:55 +0000

I'm currently working on a major side project that takes up practically all of my free time. In this project, I had to check an array of submitted files to ensure that the total size was less than 10mb. I couldn't find anything in Laravel's validation docs that could accomplish that for me, so I decided I'd have to write my own custom validation rule.

I was looking for the best possible way to validate array of uploaded files, and I found big part of the solution on StackOverFlow but the problem was that this solution is almost 5 years old. so I decided to spend few minutes writing a quick tutorial on how I achieved my goal and created my own custom validation rule influenced by the solution I found on StackOverFlow.

Let's get started 🚀

Table of Content
1- Input
2- Routes
3- Validation
4- Custom validation

1- Input:

This is a simple HTML input tag that supports specific picture formats as well as multiple file uploads. The input is wrapped with a form that POST the files to the 'images/upload route.'

    <form action="images/upload" method="POST">
        <input
            type="file"
            id="thumbnail"
            name="thumbnail"
            class="h-full w-full z-50 opacity-0 cursor-pointer"
            accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
            multiple
            required
        />
    </form>

2- Routes:

In routes/web.php file, we're using the ImageUploadController@store to handle post requests to this route.

Route::post('images/upload', [ImageUploadController::class, 'store'])->name('images.upload');

3- Validation:

I usually don't ever do any validation within my controller, I follow the documentation to create a new request with php artisan make:request StoreImagesRequest and then Add my validation as showing below.

    public function rules()
    {
        return [

            'images' => ['bail', 'required'],
            'images.*' => ['bail', 'image', 'mimes:jpeg,jpg,png,gif,webp']
        ];
    }

It really won't matter if you do your validation inside the controller store method, my solution will work either ways.

4- Custom validation:

Following the documentation, next this step should be running the following command php artisan make:rule Maxsize --invokable and head to app/Rules/Maxsize file.

A rule object contains a single method: __invoke. This method receives the attribute name, its value, and a callback that should be invoked on failure with the validation error message.

<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\InvokableRule;

class Maxsize implements InvokableRule
{
    /**
     * Run the validation rule.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @param  \Closure  $fail
     * @return void
     */
    public function __invoke($attribute, $value, $fail)
    {
        // Logic goes here
    }
}

The above code shows an empty rule that receives Attribute, Value, and Fail. All we need to do is code our validation logic in the invoked function and deliver a response if it fails. If you did not specify an attribute, like in our case, disregard the '$attribute' variable. Your input data will be stored in the '$value' variable, and we can define a response if our validation fails by assigning a string response to the '$fail' variable.

Now, let's get back to our goal. What we want to do here is loop over an array of files, compute the total file size of each file, and then send a failure response if the result is greater than 10.000 kilobytes.

For that, we're going to use array_reduce php function.

array_reduce — Iteratively reduce the array to a single value using a callback function

    public function __invoke($attribute, $value, $fail)
    {
        $total_size = array_reduce($value, function ($sum, $item) {
            // each item is UploadedFile Object
            $sum += filesize($item->path());
            return $sum;
        });

        if ($total_size > 10000 * 1000) {
            $fail('Total images size should be maximum 10 Megabytes');
        }
    }

In this code, we're returning a single value out of the array by calculating the total file size. To calculate each file size we're using PHP's function filesize and passing to it the file path using Laravel's helper function path()

And then checking if the total size is over than 10mb then returning the $fail variable value.

Now we can use our Validation rule by importing it to whatever place we're using for validation, in my case StoreImagesRequest.php

<?php

namespace App\Http\Requests;

use App\Rules\Maxsize;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rule;

class StoreImagesRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules()
    {
        return [

            'images' => ['bail', 'required', new Maxsize],
            'images.*' => ['bail', 'image', 'mimes:jpeg,jpg,png,gif,webp']
        ];
    }
}

I hope this was a clear explanation and please let me know in the comments if you have any questions 👋

Do You Create UML Diagrams For New Projects?

Mostafa Said — Tue, 14 Jun 2022 16:13:57 +0000

Hey awesome developers! 👋

I'm currently working on backend for a complex project that will require many tables and relationships. I was advised to create UML Diagram and UML use case before I start building anything in the project.

I usually start building, improvise and hope it works 😄

So I'm wondering, do you guys usually create UML diagrams before building new projects? Or are you like me?

Appwrite & Vue E-Commerce (P1): Install Appwrite and Authentication

Mostafa Said — Fri, 27 May 2022 18:08:54 +0000

In the previous part of this series, I introduced Appwrite and explained multiple definitions and logic. In case you didn't read the previous article and you don't know what is BaaS or Appwrite, make sure to check it out to have a better understanding.

In this series, we're going to code and utilize amazing Appwrite features to build a complete E-Commerce website. Every part of the series will cover one or more parts of our website.

🚨 Prerequisites:

Do you like looking directly at source code? Here is the source code for this tutorial:

MooseSaeed / vue-appwrite-e-commerce

Appwrite E-Commerce Tutorial

I have created Github branches for each section in case you would like to look at the source code for this specific section only.

We're building this Appwrite E-Commerce website with VueJS and Tailwind CSS. A prior knowledge of these technologies will definitely help you understand this tutorial better. If you don't have any background in regards to Tailwind or Vue, don't worry about it and just follow along and try to keep you mind open.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

View on GitHub

I have created Github branches for each section in case you would like to look at the source code for this specific section only.

We're building this Appwrite E-Commerce website with VueJS and TailwindCSS. A prior knowledge of these technologies will definitely help you understand this tutorial better. If you don't have any background in regards to Tailwind or Vue, don't worry about it, just follow along and try to keep you mind open.
My main focus during this tutorial is Appwrite integration and features utilization.

1- E-Commerce Frontend Skeleton:

I have grabbed multiple components online into VueJS 3 project to have my tailwind frontend ready with what I need. Mainly the design is fetched from a free E-Commerce Tailwind product on Gumbroad by Halit Güvenilir.

This will give me the kick start I need to use Appwrite and work with its APIs. I have done modifications to the original design to fit my tutorial, if you would like to have a copy of the final skeleton, Just head to the tutorial repo on Github and fork the master branch.

Keep in mind that I might do several changes to the design as we go through our tutorial, this depends on what exactly we're trying to accomplish.

Feel free to explore the repo as I already set up few routes for the authentication page, product view page, admin overview page, add new product page and cart page:

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Homepage from "../components/main/Homepage.vue";
import Productview from "../components/main/Productview.vue";
import Authpage from "../components/main/Authpage.vue";
import Adminpanel from "../components/main/Adminpanel.vue";
import Newproduct from "../components/main/Newproduct.vue";
import Mycart from "../components/main/Mycart.vue";

const routes = [
  {
    path: "/",
    name: "Homepage",
    component: Homepage,
  },
  {
    path: "/products/example",
    name: "Productview",
    component: Productview,
  },
  {
    path: "/auth",
    name: "Authpage",
    component: Authpage,
  },
  {
    path: "/admin",
    name: "Adminpanel",
    component: Adminpanel,
  },
  {
    path: "/newproduct",
    name: "Newproduct",
    component: Newproduct,
  },
  {
    path: "/mycart",
    name: "Mycart",
    component: Mycart,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      top: 0,
      behavior: "smooth",
    };
  },
});

export default router;

2- Install Appwrite with VueJS:

After we finally have our frontend Tailwind sekelton, now it's time to install Appwrite in our project.

As mentioned in the previous article, Appwrite Installation Docs is very descriptive and has plenty of options, but if You would like another source of information you can check out this article by @lohanidamodar

I simply installed Docker (I'm working on Windows 10) and in the project folder.

I ran the below PowerShell command to install Appwrite according to the documentation:

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:0.14.2

After PowerShell command is done, It will ask you about the server HTTP port and other things. I will just stick with the defaults without changing anything. This eventually will allow you to open Appwrite's console on port 80 by default (localhost:80).
Enter in the browser localhost:80 and signup to Appwrite's console. Press on create project and choose a name and ID for your project. In my case I named it appwrite-ecom.
Following the documentation to install Web SDK, I hit the below command in the project folder.

npm install appwrite

I created .js file to import Appwrite Web SDK in order to be able to use it in my VueJS components.

src/utils.js

import { Appwrite } from "appwrite";

const appwrite = new Appwrite();

appwrite
  .setEndpoint("http://localhost/v1") // Your API Endpoint
  .setProject("appwrite-ecom"); // Your project ID

export { appwrite };

If you would like to start coding with me from here, simply head to the Github repo and fork the appwrite-installed branch to have your own copy of this project with appwrite installed.

3- Authentication:

Now, It's time to start working on our E-Commerce website. The first thing to do is to set up authentication for website's users. Appwrite made this task extremely easy for developers with their Web SDK.

Let's head to src/components/main/Authpage.vue, You will find that it's only a VueJS component where the template includes some code to show signin/signup forms.

Authpage.vue

 <template>
  <div>
    <Login v-if="!pageSwitch">
      <div>
        <p>
          {{ pageSwitch ? "Got an account?" : "Haven't got an account?" }}
          <span
            class="cursor-pointer"
            @click="() => (this.pageSwitch = !this.pageSwitch)"
            >{{ pageSwitch ? "Login" : "Sign Up" }}</span
          >
        </p>
      </div>
    </Login>
    <Signup v-if="pageSwitch">
      <div>
        <p>
          {{ pageSwitch ? "Got an account?" : "Haven't got an account?" }}
          <span
            class="cursor-pointer"
            @click="() => (this.pageSwitch = !this.pageSwitch)"
            >{{ pageSwitch ? "Login" : "Sign Up" }}</span
          >
        </p>
      </div>
    </Signup>
  </div>
</template>

In the above code, we're using a Vue click event to show and hide the forms upon the user click. If the user clicked on 'Sign Up' show the sign up form, and if the user clicked on 'Sign In' show the sign in form.

Script tags only contains the components we're using and setting pageSwitch to false to show the Sign in form by default.

<script>
import Login from "../Login.vue";
import Signup from "../Signup.vue";
export default {
  name: "Authpage",
  components: {
    Login,
    Signup,
  },
  data: () => {
    return {
      pageSwitch: false,
    };
  },
};
</script>

We need now to add few methods using Appwrite's Web SDK to allow users to login and signup. We have this parent component Authpage.vue that will include all the methods while the other child components Login.vue and Signup.vue will only pass the required data from the forms to the parent component to trigger it's methods.

First thing, let's create a method to check if the user already logged in or not as soon as they open the page. This will help us provide a response once the user login or signup. In our case, we want to save the logged in user details in order to fetch them whenever we want and take the user back to the page they were on before logging in.

We need to create src/store.js file to store the user details in as a shared information across all components in case we needed it in any of them.

store.js

import { reactive } from "vue";

export const store = reactive({
  userprofile: false,
});

Let's import Appwrite from src/utils.js in our Authpage.vue file:

Authpage.vue

import appwrite from "../../utils";

Now we're going to use appwrite's method Get Account to check if the user is logged in, if yes then save it to store.js and take the user back to the page they were browsing before, if no let me know the error in the console.

To trigger this checkLogin method that we're creating, I have used Vue lifecycle mounted hook.

The script now will look like this:

Authpage.vue

<script>
import Login from "../Login.vue";
import Signup from "../Signup.vue";
import { appwrite } from "../../utils";
import { store } from "../../store.js";
export default {
  name: "Authpage",
  components: {
    Login,
    Signup,
  },
  data: () => {
    return {
      pageSwitch: false,
    };
  },
  mounted: function () {
    this.checkLogin();
  },
  methods: {
    async checkLogin() {
      try {
        // Getting the currently logged in account
        const response = await appwrite.account.get();
        // If there is a response, save it to store.js
        store.userprofile = response;
        // Once action done, get the user back to the previous page.
        this.$router.go(-1);
      } catch (err) {
        if (err == "Error: Unauthorized") return;
        console.error(err);
      }
    },
  },
};
</script>

Now if you head in your browser to /auth which is a route already set in router/index.js you will see the below appwrite response error in the console because there isn't any logged in user to check:

User (role: guest) missing scope (account)
    at Appwrite.eval

let's create the first method for signing up. According to Appwrite documentation, we need to create an account and we're able to pass userId, email, password and name. In my case, Instead of passing a userId I will allow users to insert a username in the signup form and I will use this username as a userId.

Also we need to create a session for this logged in user.

Let's create our method and get it ready to receive the information we need to pass to Appwrite:

Authpage.vue

    async signup(username, nameOfUser, password, email) {
      try {
        await appwrite.account.create(username, email, password, nameOfUser);
        await appwrite.account.createSession(email, password);
        this.checkLogin();
      } catch (error) {
        console.error(error);
        return false;
      }
    },

Now let's continue to have all of our methods ready the same way we did with signup method, eventually we will have this result:

Authpage.vue

<template>
  <div>
    <div v-if="!store.userprofile">
      <Login v-if="!pageSwitch">
        <div>
          <p>
            {{ pageSwitch ? "Got an account?" : "Haven't got an account?" }}
            <span
              class="cursor-pointer"
              @click="() => (this.pageSwitch = !this.pageSwitch)"
              >{{ pageSwitch ? "Login" : "Sign Up" }}</span
            >
          </p>
        </div>
      </Login>
      <Signup v-if="pageSwitch">
        <div>
          <p>
            {{ pageSwitch ? "Got an account?" : "Haven't got an account?" }}
            <span
              class="cursor-pointer"
              @click="() => (this.pageSwitch = !this.pageSwitch)"
              >{{ pageSwitch ? "Login" : "Sign Up" }}</span
            >
          </p>
        </div>
      </Signup>
    </div>
  </div>
</template>

<script>
import { appwrite } from "../../utils";
import { store } from "../../store.js";
import Login from "../Login.vue";
import Signup from "../Signup.vue";
export default {
  name: "Authpage",
  components: {
    Login,
    Signup,
  },
  data: () => {
    return {
      pageSwitch: false,
      store,
    };
  },
  mounted: function () {
    this.checkLogin();
  },
  methods: {
    // Logout the current logged in user in store.js
    async logout() {
      store.userprofile = false;
      appwrite.account.deleteSession("current");
    },
    async login() {
      try {
        await appwrite.account.createSession(
          event.target.email.value,
          event.target.password.value
        );
        this.checkLogin();
        return true;
      } catch (error) {
        console.error(error);
        return false;
      }
    },
    async signup(username, nameOfUser, password, email) {
      try {
        await appwrite.account.create(username, email, password, nameOfUser);
        await appwrite.account.createSession(email, password);
        this.checkLogin();
      } catch (error) {
        console.error(error);
        return false;
      }
    },
    // Using username to have a dynamic routes for user profiles
    async updateUsername(username) {
      try {
        await appwrite.account.updatePrefs({
          username: username,
        });
      } catch (error) {
        console.error(error);
        return false;
      }
    },
    async checkLogin() {
      try {
        const response = await appwrite.account.get();
        store.userprofile = response;
        // Once action done, get the user back to the previous page.
        this.$router.go(-1);
      } catch (err) {
        if (err == "Error: Unauthorized") return;
        console.error(err);
      }
    },
  },
};
</script>

Now in the src/components/Login.vue file, We're going to trigger the parent's login method and inject it with the required data from the form.

Login.vue

<template>
  <main class="relative">
    <div class="px-4 py-10 mx-auto sm:px-6 lg:px-8">
      <div class="max-w-lg mx-auto">
        <h1 class="text-2xl font-bold text-center dark:text-white sm:text-3xl">
          Login
        </h1>
        <p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
        <form
          @submit="processLogin"
          action=""
          class="p-8 mt-6 mb-0 space-y-4 rounded-xl shadow-2xl dark:bg-gray-700/50 backdrop-blur-md bg-none dark:text-white"
        >
          <p class="text-lg font-medium">Login to your account</p>

          <div>
            <label for="email" class="text-sm font-medium">Email</label>

            <div class="relative mt-1">
              <input
                v-model="email"
                type="email"
                id="email"
                required
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
                placeholder="Enter email"
              />
            </div>
          </div>

          <div>
            <label for="password" class="text-sm font-medium">Password</label>

            <div class="relative mt-1">
              <input
                v-model="password"
                type="password"
                id="password"
                required
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
                placeholder="Enter password"
              />
            </div>
          </div>

          <button
            class="px-4 py-2 text-center w-full inline-block text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
            type="submit"
          >
            Sign in
          </button>

          <slot />
        </form>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: "Login",
  data: () => {
    return {
      email: "",
      password: "",
      error: false,
    };
  },
  methods: {
    async processLogin(e) {
      e.preventDefault();
      this.error = false;
      // Validation
      if (!(this.password.length >= 6 && this.password.length <= 32)) {
        this.error = "Error: Password must be between 6 and 32 characters.";
        return;
      }
      if ((await this.$parent.login()) === false) {
        this.error = "Incorrect Credentials!";
      }
    },
  },
};
</script>

We'll do the same for src/components/Signup.vue :

Signup.vue

<template>
  <main class="relative">
    <div class="max-w-screen-xl px-4 py-10 mx-auto sm:px-6 lg:px-8">
      <div class="max-w-lg mx-auto">
        <h1 class="text-2xl font-bold text-center text-black sm:text-3xl">
          Sign up
        </h1>

        <p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
        <form
          @submit="processRegister"
          action=""
          class="p-8 mt-6 mb-0 space-y-4 rounded-lg shadow-2xl dark:bg-gray-700/50 backdrop-blur-md bg-none dark:text-white"
        >
          <p class="text-lg font-medium">Sign up new account</p>

          <div>
            <label for="nameOfUser" class="text-sm font-medium">Username</label>

            <div class="relative mt-1">
              <input
                v-model="username"
                type="text"
                id="username"
                required
                placeholder="Enter username"
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
              />
            </div>
          </div>
          <div>
            <label for="nameOfUser" class="text-sm font-medium"
              >Your Name</label
            >

            <div class="relative mt-1">
              <input
                v-model="nameOfUser"
                type="text"
                id="nameOfUser"
                required
                placeholder="Enter your name"
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
              />
            </div>
          </div>
          <div>
            <label for="email" class="text-sm font-medium">Email</label>

            <div class="relative mt-1">
              <input
                v-model="email"
                type="email"
                id="email"
                required
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
                placeholder="Enter email"
              />
            </div>
          </div>

          <div>
            <label for="password" class="text-sm font-medium">Password</label>

            <div class="relative mt-1">
              <input
                v-model="password"
                type="password"
                id="password"
                required
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
                placeholder="Enter password"
              />
            </div>
          </div>
          <div>
            <label for="confirmPassword" class="text-sm font-medium"
              >Confirm Password</label
            >

            <div class="relative mt-1">
              <input
                v-model="confirmPassword"
                type="password"
                id="confirmPassword"
                required
                placeholder="Confirm Password"
                class="appearance-none border border-gray-200 bg-gray-100 rounded-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400 w-full"
              />
            </div>
          </div>

          <button
            class="px-4 py-2 text-center w-full inline-block text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
            type="submit"
          >
            Sign up
          </button>

          <slot />
        </form>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: "Signup",
  data: () => {
    return {
      username: "",
      nameOfUser: "",
      email: "",
      password: "",
      confirmPassword: "",
      loading: "",
      error: false,
    };
  },
  methods: {
    async processRegister(e) {
      e.preventDefault();
      // Validation
      if (this.loading) {
        return;
      }
      // Password confirmation
      if (this.password !== this.confirmPassword) {
        this.error = "Error: Passwords must be matching.";
        return;
      }
      // Length Validation
      if (!(this.password.length >= 6 && this.password.length <= 32)) {
        this.error = "Error: Password must be between 6 and 32 characters.";
        return;
      }
      if (this.nameOfUser.length >= 100) {
        this.error = "Error: Name can not exceed 100 characters";
        return;
      }
      if (this.username.length >= 50) {
        this.error = "Error: username can not exceed 50 characters";
        return;
      }
      this.loading = true;

      //I need a username here to make dynamic users routes

      let username = this.username;
      username = username.replace(/\s+/g, "").toLowerCase();

      if (
        (await this.$parent.signup(
          username,
          this.nameOfUser,
          this.password,
          this.email
        )) === false
      ) {
        this.error =
          "Something went wrong while registering, Check console for more details.";
      } else {
        setTimeout(() => {
          this.$parent.updateUsername(username);
        }, 300);
      }
    },
  },
};
</script>

Now our authentication system is working perfectly fine, you can text this by heading to /auth and click on signup then insert whatever details you want and Voilà! You're logged in 🥳

Now we need to head to src/components/Header.vue and show My Cart button in the header only if the user is logged in and hide Sign In as well.

Header.vue

<template>
  <header class="bg-white py-3">
    <div class="container max-w-screen-xl mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <!-- Brand -->
        <div class="flex-shrink-0 mr-5 font-bold text-xl text-blue-700">
          <a href="/"> E-Commerce </a>
        </div>
        <!-- Brand .//end -->

        <!-- Search -->
        <div
          class="flex flex-nowrap items-center w-full order-last md:order-none mt-5 md:mt-0 md:w-2/4 lg:w-2/4"
        >
          <input
            class="flex-grow appearance-none border border-gray-200 bg-gray-100 rounded-tl-md rounded-bl-md py-2 px-3 hover:border-gray-400 focus:outline-none focus:border-gray-400"
            type="text"
            placeholder="Search"
          />
          <button
            type="button"
            class="px-4 py-2 inline-block text-blue-600 border border-gray-200 bg-gray-100 rounded-tr-md rounded-br-md hover:bg-blue-100"
          >
            <i class="fa fa-search"></i>
          </button>
        </div>
        <!-- Search .//end -->

        <!-- Actions -->
        <div class="flex items-center space-x-2 ml-auto">
          <a
            v-if="store.userprofile"
            class="px-3 py-2 inline-block text-center text-gray-700 bg-white shadow-sm border border-gray-200 rounded-md hover:bg-gray-100 hover:border-gray-300"
            href="/mycart"
          >
            <i class="text-gray-400 w-5 fa fa-shopping-cart"></i>
            <span class="hidden lg:inline ml-1">My cart</span>
          </a>
          <a
            v-if="!store.userprofile"
            class="px-3 py-2 inline-block text-center text-gray-700 bg-white shadow-sm border border-gray-200 rounded-md hover:bg-gray-100 hover:border-gray-300"
            href="/auth"
          >
            <i class="text-gray-400 w-5 fa fa-user"></i>
            <span class="hidden lg:inline ml-1">Sign in</span>
          </a>
          <a
            class="px-3 py-2 inline-block text-center text-gray-700 bg-white shadow-sm border border-gray-200 rounded-md hover:bg-gray-100 hover:border-gray-300"
            href="/admin"
          >
            <i class="text-gray-400 w-5 fa fa-user"></i>
            <span class="hidden lg:inline ml-1">Admin</span>
          </a>
          <button
            v-if="store.userprofile"
            @click="logout"
            class="px-3 py-2 inline-block text-center text-gray-700 bg-white shadow-sm border border-gray-200 rounded-md hover:bg-gray-100 hover:border-gray-300"
          >
            <i class="text-gray-400 w-5 fa fa-user"></i>
            <span class="hidden lg:inline ml-1">logout</span>
          </button>
        </div>
        <!-- Actions .//end -->

        <!-- mobile-only -->
        <div class="lg:hidden ml-2">
          <button
            type="button"
            class="bg-white p-3 inline-flex items-center rounded-md text-black hover:bg-gray-200 hover:text-gray-800 border border-transparent"
          >
            <span class="sr-only">Open menu</span>
            <i class="fa fa-bars fa-lg"></i>
          </button>
        </div>
        <!-- mobile-only //end  -->
      </div>
      <!-- flex grid //end -->
    </div>
    <!-- container //end -->
  </header>
</template>

<script>
import { appwrite } from "../utils";
import { store } from "../store";
export default {
  data() {
    return {
      store,
    };
  },
  mounted() {
    this.checkLogin();
  },
  methods: {
    async checkLogin() {
      try {
        const response = await appwrite.account.get();
        store.userprofile = response;
      } catch (err) {
        if (err == "Error: Unauthorized") return;
      }
    },
    async logout() {
      store.userprofile = false;
      appwrite.account.deleteSession("current");
      this.$router.push("/");
    },
  },
};
</script>

<style></style>

Now You can logout by pressing on the logout button and once you're logged out, you will see Sign in button again.

With that, we've finished our authentication system in our E-Commerce website and we're ready to start working on the shop, cart, products and admin panel and that's exactly what we're going to do in the next part of this series.

Let me know in the comments if you have any questions and I hope this was helpful for you :)

What Do You Know About W-BEN Form?

Mostafa Said — Tue, 17 May 2022 19:44:24 +0000

Hello Dev Community,

I recently was asked to fill W-BEN Form. This is the first time for me to hear about it, but I asked around and found out that it's common in freelancing world.

What do you know about this form? Are all fields mandatory? How to fill tax related fields?

How to Build Dynamic Website with APIs, Without Backend Coding! 😮

Mostafa Said — Mon, 16 May 2022 07:26:16 +0000

For those who doesn't know, Dev Community announced a hackathon for Appwrite in the past month. I wasn't really familiar with Appwrite and when I looked it up online, I found that it's a BaaS (Backend as a service) platform. I'm not going to lie, I didn't quite understand the real meaning of 'Backend as a service'. I mean, what would it do for me? How would it create my APIs for me? Is it even a thing to have a backend working without a backend code? Is it bad to count on a BaaS platform in my project?

After searching the internet and reading the docs, I knew for a fact that this technology is meant to do GREAT things and help both, backend developers and frontend developers.

I was planning to do a small project for Appwrite hackathon but I ended up challenging myself to make something big. I have built an awesome project with sort of a complex backend structure. Also I made sure to see how can I accomplish database relationships, comments, admin controls, dynamic user profiles, dynamic URLs, images storing and fetching and how to integrate different APIs and more. Appwrite really made it pretty enjoyable for me to accomplish all of that.

In this article, I'm going to tell you how to start, create and grow with BaaS, and why is it the best choice to help you start the project you have in mind immediately without wasting your time worrying about the backend.

But first, If you're curious about what I have created. Checkout my project and see for yourself 👉 Tailwinder Project

Tip: Video demo at the end of the submission post in the above link ↖️

Table of Content
Definitions
Installation
The Console
Getting Started
Authentication
Database
Storage
Avatar
Conclusion

Before we get into action, There are few important things you need to know about Appwrite. I'm going to explain things to you as if you were five, only because that's how I would like to be treated when I'm learning something new 🤔

Definitions:

What is BaaS (Backend As A Service)?

In simple English, bunch of great backend developers gathered around and created a platform and crafted the most common APIs that most websites might need. It's a way to make your life easier, your backend code shorter and start your projects faster.

What is Appwrite?

It's a BaaS platform but It's the simplest one and most elegant I have seen till now. They built those APIs keeping in their minds flexibility and all customization that you might need in order to to make those APIs useful and customized to your website. Appwrite has variety of SDKs for Web, Flutter, Android, Apple and Node.

What are SDKs?

A software development kit (SDK) is a set of tools created by developers to make the communication between the frontend and APIs as easy as it gets. Instead of writing so many code in different ways, SDKs unified and simplified the way you can communicate with APIs.

What Is Docker?

Appwrite is packaged as a set of Docker containers. You can install and run Appwrite on any operating system that can run a Docker CLI. so yeah! You need to know what is Docker.

Imagine that you're trying to start a business, let's say this business is an educational center. You already have teachers, secretary, screens and computers. Yet, all of that is useless if you don't have a place that is well prepared exactly for your needs to run your business. You would need a place that is easy to reach, with multiple rooms, many electrical sockets ..etc

And that is exactly what Docker is, it's allowing developers to package applications into docker containers.

It's a place to contain your package that is well prepared and equipped with what you need to make your application run in any environment.

Therefore, Appwrite is using Docker to contain their packages and dependencies to spare you from installing all that.

Sounds a bit too much? Don't worry! You don't have to learn docker in order to use Appwrite, for now 😉

Now, We will discover together what is Appwrite capable of and how can BaaS help you as a developer. You would need first to install Docker on your machine and then Appwrite in your project, I will not go through the installation process as there are plenty of resources out there explaining this part.

Installation:

The Appwrite Installation Docs is very descriptive and has plenty of options, but if You would like another source of information you can check out this article by @lohanidamodar

Also if you would like to see how I connected Appwrite to my project, checkout how I did it noting that you should always hide your appwrite key, I only didn't because It's a local project for now.

1- Web SDK
2- Node SDK

The Console :

After successful installation and linking Appwrite to your project. You will have access to Appwrite's console page. this is your command control, where you have full view over everything that it's going on in your application. The above screenshot is my console page for Tailwinder project.

Getting Started:

I'm going to use Tailwinder Project as a case study while explaining. I believe that explaining on a real life example project is the best way to show you how it all works. My area of focus will be on Appwrite features and BaaS in general, not the actual project.

Here is the Github repo:

MooseSaeed / Tailwinder

An open-source community website dedicated to Tailwind CSS enthusiasts, powered by the amazing Appwrite platform.

Welcome to Tailwinder 👋

An open source community for tailwind fans - powered by Appwrite

This project was built for Appwrite hackathon on Dev Community

✨ Demo

Appwrite Node SDK API Location

HERE

⚙️ Built With

Used Stack
Appwrite
Appwrite Node SDK
TailwindCSS
VueJS
Vue Router
SwiperJS
AnimateCSS

More Info

Content Table (Tailwinder Structure):
1- Homepage
1-a- Dynamic Profile Picture (Appwrite Feature)
1-b- Dynamic Dark/Bright Theme Toggle (Appwrite Feature)
1-c- Fading Navbar
1-d- Cool Tailwinder Logo view
2- Signup/Signin
2-a- Dynamic User URL (Appwrite Feature)
2-b- User Login/Logout (Appwrite Feature)
3- User Profile
3-a- Dynamic Profile Picture (Appwrite Feature)
3-b- Dynamic User Information (Appwrite Feature)
3-c- User Information Update (Appwrite Feature)
3-d- Dynamic User Contributions (Appwrite Feature)
4- Components
4-a- Dynamic Components Fetching (Appwrite Feature)
4-b- Add New Component (Appwrite Feature)
4-c- Component View (Appwrite Feature)
5- Tailwinder Academy
5-a- Dynamic Resources Fetching (Appwrite Feature)
5-b- Add / View Academy

…

View on GitHub

Authentication:

Appwrite has a huge set of APIs to help you manage your project users. You no longer have to write many lines of backend code to create user, create magic URL, update user info ..etc

If you have a look at Appwrite's DOCs, You will find that the first two sections in their REST API are Account and User.

At first, I found it confusing to understand the difference between the 2 APIs but then it became clear.

1- Account API:

Account API is all about the currently logged-in user. You have access to all kind of methods but all of them relates to the user who is currently logged-in. So mostly you will use Web SDK as it relates to the client side.

2- User API:

While User API is dealing with all users accross your project. Think of it as it's the admin scoped API for all users. This REST API you can integrate using serve side integration with Node SDK.

Example:

👉Github Source Code for User Profile Page👈

In Tailwinder project, when a user is updating his own personal information on their profile page, I'm using Account API to accomplish that, because I need only the currently logged-in user to update his info. But when it comes to viewing those information on the user's profile page, I had to use User API to make those information visable to everyone. If I used Account API to view the user information, It won't work because It can only fetch the information for the currently logged in user, That's why User API was used.

Database:

Imagine a world where you don't have to worry about your database or form validation, a world without having to make so many APIs to communicate with your database, query and filter lists of rows or entries. That is exactly what a BaaS would do for you, and here we'll be talking about Appwrite.

If you have a little bit of experience with working with databases, understand it like this:

Appwrite allows you to store your documents into what they call 'collections'. Those collections can be considered as containers for whatever documents you would like to save in them. Each collection can have many attributes, those attributes are your way to say 'This collection should only accept those entries under these conditions'.

To simplify it more, think of it this way:

Appwrite Term	Normal Database Term
Collections	Tables
Attributes	Columns
Documents	Rows

Example:

Here I'm allowing the user to:

1- See every tailwind component submitted by users.
2- Submit a new component.
3- View the selected component details.

To accomplish this I had to:

1- Create a collection for the component type.

2- Set attributes for the collection to restrict and validate the entries.

And that's it! Can you believe that? You can use the console to accomplish that if you prefer not writing code at all or just use Web and Server SDKs for the same exact outcome.

Then of course here is the source code logic to:

1- View List of All Components.
2- Add New Component.
3- View Component Details.

Storage:

Storage is similar to appwrite's database, but in storage the containers are called 'buckets' and they are used to contain your files. It allows you to manage your project files. Storage API is a great way to store, upload, view, download, and query all your project files.

Example:

If you have a look here, you'll see that when a component is being created, the user is able to store sample images of the component to the application. And After the component is submitted, anyone is able to preview those images in the component view page.

This is being done by a logic to create new bucket using storage API, store the selected files in that bucket and get a preview of the images inside that bucket.

You can find how I have done it Here.

Avatar:

They even have an API to provide you with a temporary avatar for your users. Let's say a new user signs up to your application. This user should have a default profile picture, In most cases it's a grayish human shape that means this is a ghost user. Instead, Appwrite will provide you with a default profile picture with the first letter of the user's first and last name.

Example:

Here the logic is simple, I'm checking if the user has a bucket with their name (Has a profile picture stored), If not then display Appwrite's avatar.

Check the source code Here.

Conclusion:

Appwrite is a technology that helps you start your project faster. But Appwrite is one of the BaaS providers out there, there are many platforms that are doing similar job to Appwrite, but I find Appwrite is the best for me until now.

You don't have an excuse anymore for delaying the amazing projects you have in mind, backend development has never been easier. There are still so many things to discover in Appwrite and BaaS in general, but I believe this is enough for one article. I may write another one with more information on how to start a project from scratch and scale it to a complete live project.

Now that you formed a decent knowledge and awareness about Appwrite and BaaS, what do you think about them? Let me know in the comments :)

Introducing Tailwinder - Home for Tailwind Fans - Powered with Appwrite 🚀

Mostafa Said — Thu, 12 May 2022 16:56:30 +0000

Overview of My Submission

I would like to start this by saying that complex backend development is not a pain anymore! As a Laravel developer, I really had no idea that Appwrite could do all these amazing stuff and save hours of coding for me.

When this hackathon was announced, I didn't know what is Appwrite or how to use it. After reading the DOCs and asking many questions in the Help Thread , Twitter and anywhere I could find information, It became clear to me that I can make something unique using this magnificent technology.

I didn't want to recreate something that already exists or to make a clone of anything. What I really wanted to do is to think of a complex structured website that solves an issue or adding value to the community. And one the things I love the most since I started coding is TailwindCSS for my CSS work. It makes our lives much easier and it's pretty simple even for backend developers. So I thought why not creating a COMPLETE community for Tailwind users where they can create, share, learn, comment and update. Using appwrite's Web SDK and Node SDK, that became possible.

From that 👆 I created Tailwinder 🚀 :

At first, I just thought of creating TailwindCSS online tools. But after awhile of discovering Appwrite, I figured that it can be much more than what I have ever had in mind for this project. It has dynamic URLs, pictures, buttons and dynamic everything! 😍

Tailwinder is an open source community for creative Tailwind lovers. It has everything you need to get inspired or to inspire others by adding your own content.

Let's have a look at Tailwinder features and how I utilized Appwrite to create the perfect backend of the community.

If you are interested more to watch a quick demo video of the project, I have what you need 👉Right here👈 I tried to make it as quick as I could but the project has so many details.

Content Table (Tailwinder Structure):
1- Homepage
1-a- Dynamic Profile Picture (Appwrite Feature)
1-b- Dynamic Dark/Bright Theme Toggle (Appwrite Feature)
1-c- Fading Navbar
1-d- Cool Tailwinder Logo view
2- Signup/Signin
2-a- Dynamic User URL (Appwrite Feature)
2-b- User Login/Logout (Appwrite Feature)
3- User Profile
3-a- Dynamic Profile Picture (Appwrite Feature)
3-b- Dynamic User Information (Appwrite Feature)
3-c- User Information Update (Appwrite Feature)
3-d- Dynamic User Contributions (Appwrite Feature)
4- Components
4-a- Dynamic Components Fetching (Appwrite Feature)
4-b- Add New Component (Appwrite Feature)
4-c- Component View (Appwrite Feature)
5- Tailwinder Academy
5-a- Dynamic Resources Fetching (Appwrite Feature)
5-b- Add / View Academy Resources (Appwrite Feature)
6- Tailwinder Community
Development Stack Used
Appwrite Utilization

1- Homepage:

Dynamic Profile Picture (Appwrite Feature)

The profile picture in the Navbar is dynamic, Appwrite fetches the picture for this specific user and display it in the Navbar across the website.
It also detects if the user doesn't have a profile picture and display an Avatar with the first letter of the user's first and last name. We will see that in action when we get to Userprofiles section.

Utilized from Appwrite:
Get File Preview Web SDK.
Get User Initials Web SDK.

Dynamic Dark/Bright Theme Toggle (Appwrite Feature)

The dark/bright theme toggle isn't just changing the theme in general, It registers the the user's choice to the user preferences with Appwrite to automatically change the theme when this specific user is logged in 🌞🌙.

Utilized from Appwrite:
Update Account Preferences Web SDK.
Get Account Prefrences Web SDK.

Fading Navbar

The Navbar fades out while scrolling down but appears again on scroll up. It includes the logo, important links and user dropdown.

Cool Tailwinder Logo view

This is an opensource component by Claire Larsen created in October 21, 2015 and the codepen is available. I have added few adjustments to make it a VueJS component and change few things to fit the theme.

2- Signup/Signin:

Dynamic User URL (Appwrite Feature)

The user is able to insert username which will be used to create a dynamic unique URL for this specific user. The code catches the username and saves it as a user preference and then fetches the username for the URL.

User Login/Logout (Appwrite Feature)

Simple auth to login and logout the user using appwrite.

Utilized from Appwrite:
Create Account Web SDK.
Create Account Session Web SDK.
Update Account Preferences Web SDK.
Get Account Web SDK.
Delete Account Session Web SDK.

3- User Profile:

Dynamic Profile Picture (Appwrite Feature)

The user profile again, is dynamic. Fetched by Appwrite for this specific user same as the profile picture in the user dropdown Navbar. It detects if the user didn't add a picture then it adds an Avatar instead.

Utilized from Appwrite:
Get File Preview Web SDK.
Get User Initials Web SDK.
Update Account Preferences Web SDK.

Dynamic User Information (Appwrite Feature)

As you can see, every user has the ability to update their info and it's being displayed in their profile with Appwrite Node-SDK. Of course I could come up for a better design for the way it's displayed but I think that's okay.

Utilized from Appwrite:
Get User Preferences Node SDK.

User Information Update (Appwrite Feature)

In the above video, you can notice that I'm changing the user's profile picture, name, email and preferences.

The code checks if the user already has a profile picture, if not it displays an avatar.

The User can:

update a new profile picture, the code checks if there is already one, if yes then Appwrite deletes the previous bucket that contains the profile picture, create new bucket, create new file and display it. If the user didn't add a profile picture, it just updates it for the user.
The can update their name.
The user can update email, if the user made any changes in the email input, a new input for password will be displayed. -The user can update prefrences.

This is being done with Appwrite Node-SDK as it displays the already existing information and allows the user to update them.

Utilized from Appwrite:
List Users Node SDK.
Get User Node SDK.
Delete Bucket Node SDK.
Create bucket Node SDK.
Create File Web SDK.
List Files Node SDK.
Get File Preview Web SDK.
Get User Initials Web SDK.
Update Account Name Web SDK.
Update Account Email Web SDK.
Update Account Preferences Web SDK.
Get User Preferences Node SDK.

Dynamic User Contributions (Appwrite Feature)

The above GIF demonstrates how Appwrite can fetch the user's contributions and categories and display them with dynamic URL that leads to the actual contribution. The code gets all collections and files and loop over them filtering only the ones created by the user and provides a dynamic URL.

Utilized from Appwrite:
List Collections Node SDK.
List Documents Web SDK.

4- Components:

Dynamic Components Fetching (Appwrite Feature)

As you can see in the above GIF, appwrite is dynamically fetching all submitted components by users, and every component has a unique identified URL and every user has a unique URL as explained before. Also component thumbnails are being fetched from their buckets and displayed to the user.

Components category are being identified and displayed as well dynamically with appwrite.

Components submitters user's profile picture is being dynamically fetched as well.

Utilized from Appwrite:
List Collections Node SDK.
List Documents Web SDK.
List Files Node SDK.
Get File Preview Web SDK.
Get User Initials Web SDK.
Get File Preview Web SDK.

Add New Component (Appwrite Feature)

The user is able to add new components to the community. Every component has category, sample pictures, name, description and component code.

The code is catching the component name and transform it into a slug to be used as a dynamic URL for the component.

Appwrite creates new bucket and then add the pictures to this specific bucket with ID same as the component slug.

Then appwrite creates new document with collection name, id, name of component, name of user, id of user, component code and description.

The code automatically and dynamically redirects the user to the submitted component and shows a flash message of success.

Utilized from Appwrite:
Create bucket Node SDK.
Create File Web SDK.
Create Document Web SDK.

Component View (Appwrite Feature)

As explained above, I have created a unique slug for the component URL along with the users as well. Appwrite fetches the component details and dynamically inject them in the URL. Vue Router is being used for this piece of action.

I also used Swiper JS with Appwrite to display the component sample pictures.

The user is able to view the component sample pictures, name, description, component submitter's details and also is able to copy the code and test it in TailwindCSS Playground.

Comments are available on the table too, and will be displayed to all users who visits this specific component. The user who created the comment is able to delete the component as well.

Utilized from Appwrite:
Get Document Web SDK.
Get User Preferences Node SDK.
List Documents Web SDK.
List Files Node SDK.
Delete Document Node SDK.
Get User Initials Web SDK.

5- Tailwinder Academy:

Dynamic Resources Fetching (Appwrite Feature)

This section is my favorite. It's where users are able to share learning resources with the community. My code uses almost the same structure as Components ,So there is no point of repeating the same here again.

Add New Resources to The Academy (Appwrite Feature)
View Resources(Appwrite Feature)

Combining Youtube API with Appwrite turned out to be super fun! The user is able to add new learning resources and others can view them, leave a comment and learn something new. The structure is almost the same so there is no need to repeat it here.

6- Tailwinder Community:

This can be considered as a blog for Tailwinders. The user is able to view posts submitted by others or add his own.

The design structure is the same but I added Deepgram touch to it by allowing the user to write articles with their voice.

Submission Category:

Web2 Wizards

Link to Code

MooseSaeed / Tailwinder

An open-source community website dedicated to Tailwind CSS enthusiasts, powered by the amazing Appwrite platform.

Welcome to Tailwinder 👋

An open source community for tailwind fans - powered by Appwrite

This project was built for Appwrite hackathon on Dev Community

✨ Demo

Appwrite Node SDK API Location

HERE

⚙️ Built With

Used Stack
Appwrite
Appwrite Node SDK
TailwindCSS
VueJS
Vue Router
SwiperJS
AnimateCSS

More Info

Content Table (Tailwinder Structure):
1- Homepage
1-a- Dynamic Profile Picture (Appwrite Feature)
1-b- Dynamic Dark/Bright Theme Toggle (Appwrite Feature)
1-c- Fading Navbar
1-d- Cool Tailwinder Logo view
2- Signup/Signin
2-a- Dynamic User URL (Appwrite Feature)
2-b- User Login/Logout (Appwrite Feature)
3- User Profile
3-a- Dynamic Profile Picture (Appwrite Feature)
3-b- Dynamic User Information (Appwrite Feature)
3-c- User Information Update (Appwrite Feature)
3-d- Dynamic User Contributions (Appwrite Feature)
4- Components
4-a- Dynamic Components Fetching (Appwrite Feature)
4-b- Add New Component (Appwrite Feature)
4-c- Component View (Appwrite Feature)
5- Tailwinder Academy
5-a- Dynamic Resources Fetching (Appwrite Feature)
5-b- Add / View Academy

…

View on GitHub

Additional Resources / Info

Demo Video:

Used Stack
Appwrite
Appwrite Node SDK
TailwindCSS
VueJS
Vue Router
SwiperJS
AnimateCSS

Appwrite Utilization	SDK
Get File Preview	Web SDK
Get User Initials	Web SDK
Update Account Preferences	Web SDK
Get Account Prefrences	Web SDK
Create Account	Web SDK
Create Account Session	Web SDK
Delete Account Session	Web SDK
Get Account	Web SDK
List Documents	Web SDK
Create Document	Web SDK
Get Document	Web SDK
Create File	Web SDK
Update Account Name	Web SDK
Get User Preferences	Node SDK
List Users	Node SDK
Get User	Node SDK
Delete Bucket	Node SDK
Create bucket	Node SDK
List Files	Node SDK
Update Account Email	Web SDK
List Collections	Node SDK
Delete Document	Node SDK

I hope I didn't miss anything here 😅 I'm really proud of this one and every effort was put to learn Appwrite was absolutely worth it ❤️ Thank you for checking this out and please let me know what you think.

Text Editor with Text to Speech and Speech to Text!!!

Mostafa Said — Mon, 11 Apr 2022 22:45:27 +0000

Hello everyone 👋,

Few hours left for the hachathon to be over and I'm still thinking of ways to improve my projects, So allow me to introduce you to some new features in Wordleit Markdown Editor.

What's new?

1- Added AI TTS (Text to Speech) article reader.

It stops on (click, refresh session and on complete).
It doesn't read the markdown symbols, only the text.

2- Upload Mp3 and convert to text.

More about the new features

So now you can make your device read back to you whatever you wrote. this will help you review your articles without having to read it over and over again to spot mistakes.

Also you can upload any mp3 file to Wordleit and receive your mp3 file as a text in the Markdown Editor! This allowing you to transform any audio, course or tutorial you like into an article of your own.

I was going to add Youtube to MP3 api so that you can convert any youtube into mp3 and then upload it to Wordleit but unfortunately I don't have time. But it's definitely an option, there are so many online youtube to mp3 convertors out there.

Submission category:

Well, Wordleit has a Markdown Text Editor, Video Streamer and AI bot. It's really hard to tell which category :D But I tried to submit each project in the one that made sense to me

Have a look at this demo

Try it out yourself:

Head to Wordleit homepage and select Wordleit Editor 🚀

https://wordleit.herokuapp.com

Link to Code on GitHub:

MooseSaeed / wordleit

Wordleit is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition.

Welcome To My Wordleit 👋

Wordleit Editor is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition. Text to speech - Speech to text - Mp3 to Text.

Wordleit Streamer is a free open source video streamer and online transcriptor tool.

Wordleit Grammy AI Bot AI speaking Bot created to serve your purposes.

🏠 Homepage

✨ Editor Demo

✨ Streamer Demo

✨ Grammy Demo

Hackathon Submissions:

Wordleit Editor

1- https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k

2- https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99

3- https://dev.to/moose_said/text-editor-with-text-to-speech-and-speech-to-text-4l37

Wordleit Streamer:

https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein

Wordleit Grammy

https://dev.to/moose_said/add-ai-robot-to-your-portfolio-or-company-website-3045

Author

👤 Mostafa Said

Website: https://twitter.com/Moose_Said
Twitter: @Moose_Said
Github: @MooseSaeed
LinkedIn: @moosesaid

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

⚙️ Built with:

Visual Studio Code

        <ul dir="auto">
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://avatars.githubusercontent.com/u/17422641?s=200"><img src="https://avatars.githubusercontent.com/u/17422641?s=200" alt="deepgram" width="40" height="40" style="max-width: 100%;"></a>
                    <a href="https://deepgram.com/" rel="nofollow">Deepgram</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png"><img src="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png" alt="plyr" height="20" style="max-width: 100%;"></a>
                    <a href="https://github.com/redxtech/vue-plyr">Plyr Vue</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667" alt="deepgram" width="40" height="40" data-canonical-src="https://marked.js.org/img/logo-black.svg" style="max-width: 100%;"></a>
                    <a href="https://marked.js.org/" rel="nofollow">MarkedJS</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67" alt="animatecss" width="40" height="40" data-canonical-src="https://i.ibb.co/SKVJRns/animatecss.png" style="max-width: 100%;"></a>
                    <a href="https://animate.style/" rel="nofollow">AnimateCSS</a>
                </div>
            </li>
        </ul>

Show your support

Give a ⭐️ if this project helped you!

…

View on GitHub

Add AI Robot 🤖 To Your Portfolio or Company Website

Mostafa Said — Mon, 11 Apr 2022 10:42:45 +0000

Overview of My Submission

Deepgram is offering an amazing AI speech recognition service for multiple languages which can take the user's audio and transform it into text. So why don't we use this to get the user's request and send it back to our system and according to specific keywords with the right algorithm, the system will be able to identify the user's request and immediately provide back the information they want in audio. It's like speaking to your TV, Air-conditioner or even your light system but this time, you will be speaking with a robot.

Meet Grammy! You can actually use this robot the way you want. You can use it to have a conversation with you visitors and present the data they requested as a response or you can just use it to tell jokes and have fun. The robot is as simple as VueJS components that you can copy and paste and it has ZERO dependencies.

In this demo, I only included generic and basic usage of Grammy but possibilities are unlimited. You can customize this robot and it's responses the way you like. You can make him funny, deep or even a sad and miserable robot, after all you're in charge. You can also set key words such as (price ,cost ..etc) and set the response to the prices of your products along with a pop up asking if the user would like to be redirected to prices and packages page.

This is my fourth project and fifth submission in this Hachathon. I have combined all projects in Wordleit Homepage so that you have access to them at all times.

Table of Content
Built with
How to use
Submission Category
Link to Code on GitHub
Link to the tool live demo
Additional Resources and Tutorial

Built with:

How to use:

If you would like to have a copy of the bot, all you have to do is to head to the Github repo and fetch two components:
1- resources/js/components/grambot/ Userside.vue

In this component we're using recording toggle and initiating transcription websocket with Deepgram.

2- resources/js/components/grambot/ Botside.vue

In this component we're defining arrays of keys for different situation and customize our responses. Follow the comments in the component for the best use.

3- resources/js/components/main/ Grammybot.vue

You don't have to copy this file but if you want a peak on how to combine and use the above two components have a look at this one.

Future improvements:

There are a lot of things that can be improved but today is the last day in the hachathon :( But here is what I have in mind:

Improvements to the code readability.
Dynamic moving robot.
Response algorithm improvements.
Find a way to make it sound less robotic.
Small toggle for Grammy widget.
Remove recording button and replace with keyword such as (Grammy, do this) and it will trigger the action.

Submission Category:

Wacky Wildcards.

Link to Code on GitHub::

MooseSaeed / wordleit

Wordleit is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition.

Welcome To My Wordleit 👋

Wordleit Editor is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition. Text to speech - Speech to text - Mp3 to Text.

Wordleit Streamer is a free open source video streamer and online transcriptor tool.

Wordleit Grammy AI Bot AI speaking Bot created to serve your purposes.

🏠 Homepage

✨ Editor Demo

✨ Streamer Demo

✨ Grammy Demo

Hackathon Submissions:

Wordleit Editor

1- https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k

2- https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99

3- https://dev.to/moose_said/text-editor-with-text-to-speech-and-speech-to-text-4l37

Wordleit Streamer:

https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein

Wordleit Grammy

https://dev.to/moose_said/add-ai-robot-to-your-portfolio-or-company-website-3045

Author

👤 Mostafa Said

Website: https://twitter.com/Moose_Said
Twitter: @Moose_Said
Github: @MooseSaeed
LinkedIn: @moosesaid

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

⚙️ Built with:

Visual Studio Code

Show your support

Give a ⭐️ if this project helped you!

…

View on GitHub

Link to the tool live demo:

https://wordleit.herokuapp.com/

In this demo you can:

Greet.
Ask about how it feels.
Ask who it is.
Ask about it's creator.
Ask about it's name.
Ask about it's age.
Say compliments.
Say that you love or like it.
Say some insults.
Explain your feelings.
Ask for a story or a joke.
Refuse and agree.
Talk about food.

Additional Resources / Info:

Small demo to show you how it works:

As I mentioned, this demo is for basic usage and my own customized responses. You can set yours and make it all about your business, prices and way of contact.

This is my last project in the last day of this amazing Hachathon! I learnt so much and I really enjoyed my time working with Deepgram and their super helpful team ❤️ I'm going to miss this, it may sound a bit sentimental but after all I spent the whole month building interesting stuff with Deepgram and interacting with great people here in Dev Community 🥰

Thank you for checking this out and feel free to check out my other submissions for this Hachathon: 🔥

Projects
BeReadable - Online Multilingual Audio Transcription and Recorder
Write Articles With AI Speech Recognition and Live Preview!
Use Vocal Commands to Apply Markdown to Your Article!
Watch Youtube, Vimeo and Local Videos With Immediate Audio Transcription
Add AI Bot On Your Website and Have a Conversation With Your Visitors

Add AI Bot On Your Website and Have a Conversation With Your Visitors

Mostafa Said — Thu, 07 Apr 2022 16:21:14 +0000

Introduction

We as humans, we love communicating in general and for those of us who aren't social enough to communicate with people, they get impressed by Interactive technology and AI and how can a machine respond back with a human-like response. Maybe that's why chatbots are everywhere now on the internet! I mean who wouldn't like to communicate with something and gets an immediate, smart and human-like response?

Interactive technology allows for a two-way flow of information through an interface between the user and the technology, combine this with AI and you have the perfect way to communicate with your users. What's more human-like than being able to speak to a machine or a system and find it able to understand your words regardless the language you speak and hear the information your requested with your own ears? It's like speaking to your TV, Air-conditioner or even your light system.

My Deepgram Use-Case

Imagine visiting a portfolio or a company's website and you just want to skip all the introductory stuff and speak with the person responsible. If it was a portfolio, maybe you want to ask questions like "What experience do you have?" or "What would I choose to work with you?" and you want to ask these questions without having to wait for the owner to reply back or having to read all your way to this point of information. This is where the idea popped into my mind.

Chatbots are cool for a reason, they help all kind of businesses to achieve their goals with very little effort. You can see the huge success by looking into modern analysis about chatbots or AI customer support on this Article from thrivemyway.com.

Being able to speak with a bot in your language is much more fun and efficient than texting. Adding AI bot to your website will definitely increase interactivity, and even if the visitor is not interested in your business they would just love to play around with your bot 🤖

Dive into Details

I'm planning to use Deepgram voice recognition services to create AI bot which can understand audio and respond with the requested information also in audio.

This will eventually become an NPM package where you can install it in your project and use it for whatever reason you want. It will be very helpful especially in portfolios.

This is how it will go:

The user will speak out what they want.
The audio will be handled by Deepgram to transform it into text.
The text will be translated into English.
The translation will run through the logic or algorithm to pick up specific keywords to identify the user's needs.
The response will be in text previously inserted by the owner.
The text response will be translated to the language which the user selected.
Eventually, the user will hear the response with their preferred language and with the information they asked for.

Conclusion

I'm working on the implementation of this project but I highly doubt I can complete it before the Hachathon ends. This will be my fourth project in this amazing Hackathon and I really enjoyed working with Deepgram and combining it with so many technologies like Laravel, VueJS, LameJS, Sound Visualization, MarkedJS and so many more.

Thank you for checking this out and please let me know what do you think and what can make it better. Also you can check out my other submissions from here 👇:

Projects
BeReadable - Online Multilingual Audio Transcription and Recorder
Write Articles With AI Speech Recognition and Live Preview!
Use Vocal Commands to Apply Markdown to Your Article!
Watch Youtube, Vimeo and Local Videos With Immediate Audio Transcription

Use Vocal Commands to Apply Markdown to Your Article!

Mostafa Said — Mon, 04 Apr 2022 11:34:05 +0000

Hello everyone 👋

This is a second release for a project I previously submitted. But if you're not going to check out the first submission then you should just know that Wordleit Editor is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. And also it's supported with Deepgram AI Speech Recognition service.

What's new?

1- Fixed "Stop Recording" button to make it close Deepgram connection and stop listening to the mic.
2- Some improvements for the UI.
3- Markdown improvements.
4- MAGIC KEYS!!

"Magic Keys" 🎩?

Magic keys are keywords you can use while recording in order to apply a specific markdown action. I tried to include as many as I could and make things as smooth as possible at the same time.

This is all VueJS and Deepgram magic 🚀

Show me 👀!

This is a quick video I recorded to demonstrate the new feature and show you how it can be used.

Try it out yourself:

https://wordleit.herokuapp.com

Link to Code on GitHub:

MooseSaeed / wordleit

Wordleit is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition.

Welcome To My Wordleit 👋

Wordleit Editor is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition. Text to speech - Speech to text - Mp3 to Text.

Wordleit Streamer is a free open source video streamer and online transcriptor tool.

Wordleit Grammy AI Bot AI speaking Bot created to serve your purposes.

🏠 Homepage

✨ Editor Demo

✨ Streamer Demo

✨ Grammy Demo

Hackathon Submissions:

Wordleit Editor

1- https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k

2- https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99

3- https://dev.to/moose_said/text-editor-with-text-to-speech-and-speech-to-text-4l37

Wordleit Streamer:

https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein

Wordleit Grammy

https://dev.to/moose_said/add-ai-robot-to-your-portfolio-or-company-website-3045

Author

👤 Mostafa Said

Website: https://twitter.com/Moose_Said
Twitter: @Moose_Said
Github: @MooseSaeed
LinkedIn: @moosesaid

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

⚙️ Built with:

Visual Studio Code

        <ul dir="auto">
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://avatars.githubusercontent.com/u/17422641?s=200"><img src="https://avatars.githubusercontent.com/u/17422641?s=200" alt="deepgram" width="40" height="40" style="max-width: 100%;"></a>
                    <a href="https://deepgram.com/" rel="nofollow">Deepgram</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png"><img src="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png" alt="plyr" height="20" style="max-width: 100%;"></a>
                    <a href="https://github.com/redxtech/vue-plyr">Plyr Vue</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667" alt="deepgram" width="40" height="40" data-canonical-src="https://marked.js.org/img/logo-black.svg" style="max-width: 100%;"></a>
                    <a href="https://marked.js.org/" rel="nofollow">MarkedJS</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67" alt="animatecss" width="40" height="40" data-canonical-src="https://i.ibb.co/SKVJRns/animatecss.png" style="max-width: 100%;"></a>
                    <a href="https://animate.style/" rel="nofollow">AnimateCSS</a>
                </div>
            </li>
        </ul>

Show your support

Give a ⭐️ if this project helped you!

…

View on GitHub

Possible improvements:

There is still a big room of improvement to the UI and to the code but there is something that I would like to add in the next update which is a new feature to check your article positive vibes after finishing. Mainly track positive and negative keywords and then gives you a score.

Thank you for checking this out and please let me know if you think it's cool 🤘