DEV Community: Ashik Chapagain

Create your own Alternative to GitHub CodeSpaces

Ashik Chapagain — Sat, 02 Jul 2022 06:37:34 +0000

It's already been a while, since the GitHub have launched CodeSpaces, it is an remote dev environment configured with lot's of preinstalled programs like Node.js, Yarn, PHP, Composer and lot's more.

In this tutorial, we're also going to create a similar type of thing.

Spoiler Alert, You can create your own codespace with a couple of commands.

And we'll get following programs installed in our codespaces.

Latest Stable Release of Node.js with NVM.
Yarn, PNPM
PHP
Composer
Deno
Docker
GitHub CLI
Heroku CLI

We'll configure it to use with VSCode.

via GIPHY

But before all these, let's discuss about it

Introduction

I think many of you are known about GitHub CodeSpace and you guys may have applied for it's preview too. I had also done so and I have even built some programs only using GitHub CodeSpace.

GItHub CodeSpace define it as "Blazing fast cloud developer environments"

And it also provide VS Code preconfigured in the CodeSpace, so we can use VS Code on browser.

Good News, we can also make so, by using code-server. (which won't be mentioned in this article).

So, today we are also creating a similar stuff like GitHub Codespace, but on our own server.

Let's start

Create a ubuntu server/instance

In this step, you'll need to create a ubuntu instance, you can find guide for creating a ubuntu instance for your respective cloud provider with a simple search in Google. Go ahead, and create a instance.

Note: Create a instance with atleast 2 core CPU and 4 Gigs of Memory.

Once, you have create a ubuntu instance, now let's configure VS Code.

Configuring VS Code

Now, you have open VS Code (I am assuming that VS Code is already installed in your local machine), and install a extension named "Remote - SSH".

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Once, you install install, you have to click on "Remote Explorer" in VS Code and click on '+' sign.

Now, add the ssh detail in the input.

ssh -i [PATH_TO_PRIVATE_KEY_FILE] [username]@[IP_ADDRESS]

This will not work, if you're using Ubuntu / Pop OS in your local machine, first of all you need to change the key file permission to 600 to make this work.

chmod 600 [PATH_TO_PRIVATE_KEY_FILE]

Then, VS Code will ask to Select SSH Configuration file. Select any from the given options in your VS Code.

Now the host has been added to your VS Code, now you can click little plus icon on the side of the IP in SSH Targets section.

Now, the new VS Code window will open.

For first time, you'll get the dialog like below, in this you have to click Continue.

Then it, will download and install VS Code Server in your Ubuntu Instance. Now, you're ready to use your instance from VS Code. Now, let's install all the required programs mentioned in above.

Now, open the terminal in your VS Code.

Now, run the following command to download the script and run it.

wget https://raw.githubusercontent.com/projectashik/codespaces-alternative-script/main/script.py
python3 script.py

After running the above command, it will ask for your GitHub Email and Your name.

Now, press enter after every answer and then let it install all the program. But you might have to press enter once again, in between the installation when it ask for.

At last, you'll get this message.

Now, it's done.

Well done, you have created your own alternative to VS Code.

If your are a Web Developer then you will need to preview the site. For that you can forward the ports through the VS Code. Sometimes, VS Code will automatically forward the port. But if it doesn't then you can simply click on Ports at the side of Terminal and add the required PORT in which your app is served.

Once you're connected to your server, you can click on open folder and select folder and start building your project or clone the repo.

Tip: You can create a new folder using mkdir command in the terminal.

mkdir [FOLDER_NAME]

via GIPHY

Conclusion

Please share your experience of creating custom codespace.

If you got into any problem, feel free to ask in the comment section.

Stripe Checkout With Next.js - The Complete Guide

Ashik Chapagain — Wed, 22 Sep 2021 05:44:58 +0000

Hello world

My name is Ashik Chapagain.

A full-stack web developer
Content Creator
College student
Nepalese

I'll walk you through the entire process of using Stripe Checkout with Next.js in this article.

Index

Introduction
Demo
Let's Build
- Installation
- Cleaning
- Making UI
- Creating the Backend
- Redirecting to Stripe Checkout Page
- Displaying Success and Cancel Message
Files
Conclusion

Introduction

Let's see the brief introduction of Stripe and Stripe Checkout.

Stripe: Stripe is an online payment processing and credit card processing platform for businesses.

Stripe Checkout: Stripe Checkout is prebuilt, hosted payment page optimized for conversion.

Demo

Live Preview: https://stripe-checkout-next-js-demo.vercel.app/

Github: https://github.com/projectashik/stripe-checkout-next-js-demo

Let's Build

Installation

As mentioned in the title, we'll be using Next.js for building this.

For Next.js to work, we need to have Node.js and npm installed.

So, first, install Node.js if you haven't yet.
You can follow the following guides to install Node.js.

Optional:
If you want to use yarn, install it using npm.



npm install --global yarn

Now, create a new Next.js app.



npx create-next-app stripe-checkout

yarn create next-app stripe-checkout

I have used tailwindcss for styling the components. So, let's install tailwindcss too.



yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Then run the following command to create tailwindcss config file and postcss config file.



npx tailwindcss init -p

Now open the project in your favorite text editor or IDE (Integrated Development Environment).

For me, it's Visual Studio Code .



# Run the following command to open the project in VS Code.
code .

Now, open tailwind.config.js and update purge option and add mode: 'jit'.



// tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  mode: 'jit',
  ...
};

Then, open styles/globals.css and remove all the content and add the following content.



@tailwind base;
@tailwind utilities;
@tailwind components;

*Short Method: *
If you want to use the short process.
Just run the following command.



npx create-next-app -e with-tailwindcss stripe-checkout
yarn create next-app -e with-tailwindcss stripe-checkout

Now, start the dev server and start coding.



yarn dev
npm run dev

Cleaning

Remove the main and footer tags from pages/index.js.

If you want to edit the title and description in the <Head> tag. Then you can.



// pages/index.js
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Stripe Checkout with Next.js</title>
        <meta name='description' content='Complete Step By Step Tutorial for integrating Stripe Checkout with Next.js' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
    </div>
  );
}

And remove all the styles except for .container in styles/Home.module.css.



/* styles/Home.module.css */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Making UI

First, we'll build an index page in which we'll have one item that users can purchase.

Let's add details of an item to an object.



// pages/index.js

const [item, setItem] = useState({
    name: 'Apple AirPods',
    description: 'Latest Apple AirPods.',
    image:
      'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
    quantity: 0,
    price: 999,
  });

Don't forget to import the useState hook.



import { useState } from 'react';

Since we're using Unsplash for images, so we need to configure images.unsplash.com under the images section in next.config.js.



module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['images.unsplash.com'],
  },
};

Now, let's display the following details in the UI and add buttons to increase and decrease the quantity users want to purchase.

In, pages/index.js



...
<main>
  <div className='shadow-lg border rounded p-2 '>
    <Image src={item.image} width={300} height={150} alt={item.name} />
    <h2 className='text-2xl'>$ {item.price}</h2>
    <h3 className='text-xl'>{item.name}</h3>
    <p className='text-gray-500'>{item.description}</p>
    <p className='text-sm text-gray-600 mt-1'>Quantity:</p>
    <div className='border rounded'>
      <button
        className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
      >
        -
      </button>
      <input
        type='number'
        className='p-2'
        defaultValue={item.quantity}
      />
      <button
        className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
      >
        +
      </button>
    </div>
    <p>Total: ${item.quantity * item.price}</p>
    <button
      disabled={item.quantity === 0}
      className='bg-blue-500 hover:bg-blue-600 text-white block w-full py-2 rounded mt-2 disabled:cursor-not-allowed disabled:bg-blue-100'
    >
      Buy
    </button>
  </div>
</main>
...

Now your page should look like this.

Now, let's make the button to increase and decrease the quantity working.

Now, we'll create the onQuantityPlus and onQuantityMinus functions to increase and decrease the item quantity on button clicks.



const changeQuantity = (value: number) => {
  // Don't allow the quantity less than 0, if the quantity is greater than value entered by user then the user entered quantity is used, else 0
  setItem({ ...item, quantity: Math.max(0, value) });
};

const onQuantityPlus = () => {
  changeQuantity(item.quantity + 1);
};

const onQuantityMinus = () => {
  changeQuantity(item.quantity - 1);
};

Now, add this function in the onClick event of the respective buttons.



...
<button
  onClick={onQuantityMinus}
  className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
>
  -
</button>
...
<button
  onClick={onQuantityPlus}
  className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
>
  +
</button>
...

Now, let's add the onChange event on the input field to update the value of the item quantity and also don't forget to change defaultValue to value.



...
<input
  type='number'
  className='p-2'
  onChange={onInputChange}
  value={item.quantity}
/>
...

Now, let's create onInputChange function.



...
//
const onInputChange = (e) => {
    changeQuantity(parseInt(e.target.value));
};
...

Creating the Backend

First, we'll start by installing the stripe library.



yarn add stripe
npm install stripe

Now, let's add the required environment variables.
Create a new file .env.local in the root directory with the following data.



NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=YOUR_STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY

You can get these credentials from Dashboard -> Developers -> API Keys.

Now, we need to build an API to get the session id that is required for redirecting the user to the checkout page.

Create a new file in api/create-stripe-session.js. And add the following.



const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

export default async (req, res) => {
  const { item } = req.body;
};

Here, we are getting item details via a post method that we will call on the front end.

Creating the shape for the item needed by Stripe.

There is a particular type of object which Stripe expects to get, this is the object. You should use your local currency instead of "usd" if you want.



const transformedItem = {
    price_data: {
      currency: 'usd',
      product_data: {
        images: [item.image],
        name: item.name,
      },
      unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
  };

*Creating Stripe Session in the backend: *

You will need to create a stripe session object where you need to define some data.



const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [transformedItem],
  mode: 'payment',
  success_url: redirectURL + '?status=success',
  cancel_url: redirectURL + '?status=cancel',
  metadata: {
    images: item.image,
  },
});

res.json({ id: session.id });

payment_method_type: In this, we add the payment methods to pay the price of the product. Click here to know more payment methods.
success_url: In success_url, you define where the user will go after the payment is successful.
cancel_url: In the cancel_url, you define where the user will go if the user clicks the back button. It can be a cancel page or the checkout page as well.
metadata: In metadata, we will add images of the product, if you want you can add other options too.

For other options, click here to know.

Now, the final create-stripe-session.js file should look like this.



const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

async function CreateStripeSession(req, res) {
  const { item } = req.body;

  const redirectURL =
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      : 'https://stripe-checkout-next-js-demo.vercel.app';

  const transformedItem = {
    price_data: {
      currency: 'usd',
      product_data: {
        images: [item.image],
        name: item.name,
      },
      unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
  };

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [transformedItem],
    mode: 'payment',
    success_url: redirectURL + '?status=success',
    cancel_url: redirectURL + '?status=cancel',
    metadata: {
      images: item.image,
    },
  });

  res.json({ id: session.id });
}

export default CreateStripeSession;

Now, our backend is ready, now we have to send a POST request to API to get the session.

Redirecting to Stripe Checkout Page

For redirecting to Stripe Checkout Page. We have to install the following libraries.



yarn add @stripe/stripe-js axios
npm install @stripe/stripe-js axios

First, we'll first create a stripePromise variable.



const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
const stripePromise = loadStripe(publishableKey);

Now, we'll create createCheckoutSession function to get the Stripe Session for the checkout.



const createCheckOutSession = async () => {
  const stripe = await stripePromise;
  const checkoutSession = await axios.post('/api/create-stripe-session', {
    item: item,
  });
  const result = await stripe.redirectToCheckout({
    sessionId: checkoutSession.data.id,
  });
  if (result.error) {
    alert(result.error.message);
  }
};

Don't forget to import loadStripe and axios.



import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';

Now, we have to call this function while the user clicks the Buy button.
And onClick={createCheckoutSession}



<button
  disabled={item.quantity === 0}
  onClick={createCheckOutSession}
  className='bg-blue-500 hover:bg-blue-600 text-white block w-full py-2 rounded mt-2 disabled:cursor-not-allowed disabled:bg-blue-100'
>
  Buy
</button>

Now, let's test the checkout.

Since we have updated next.config.js and added the .env.local file, so restart the dev server.



yarn dev
npm run dev

Now, the result should look like this.

Displaying Success and Cancel Message

If you guys remember, then we have used ?status= query parameter in success_url and cancel_url.



// pages/api/create-stripe-session.js
...
const session = await stripe.checkout.sessions.create({
    ...
    success_url: redirectURL + '?status=success',
    cancel_url: redirectURL + '?status=cancel',
    ...
  });

...

So, with this query parameter, we'll know, whether the payment is successful or canceled. And show the respective message.

First, let's fetch the status.



// pages/index.js

import { useRouter } from 'next/router';

...
const router = useRouter();
const { status } = router.query;

Now, add the following below the starting main tag, to display the message.



// pages/index.js

{status && status === 'success' && (
  <div className='bg-green-100 text-green-700 p-2 rounded border mb-2 border-green-700'>
    Payment Successful
  </div>
)}
{status && status === 'cancel' && (
  <div className='bg-red-100 text-red-700 p-2 rounded border mb-2 border-red-700'>
    Payment Unsuccessful
  </div>
)}

Now, the result should be like this.

Our app took some time to assign a stripe session. So, during that time, let's display Processing... instead of Buy inside the button as shown in the demo.

For that,
Create a new state named loading with default value false.



const [loading, setLoading] = useState(false);

Then, update loading value to true, while creating Stripe Session. and again update loading value to false when the stripe session is created.



const createCheckOutSession = async () => {
  setLoading(true);
  ...
  setLoading(false);
};

And now, update the Buy Button.



<button
  disabled={item.quantity === 0 || loading}
  onClick={createCheckOutSession}
  className='bg-blue-500 hover:bg-blue-600 text-white block w-full py-2 rounded mt-2 disabled:cursor-not-allowed disabled:bg-blue-100'
>
  {loading ? 'Processing...' : 'Buy'}
</button>

Here, we're disabling the button while loading and displaying Processing... while loading.

Now, the result should be following:

All done.

Files

At last, your pages/index.js file should look like below:



import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  const { status } = router.query;

  const [loading, setLoading] = useState(false);

  const [item, setItem] = useState({
    name: 'Apple AirPods',
    description: 'Latest Apple AirPods.',
    image:
      'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
    quantity: 0,
    price: 999,
  });

  const changeQuantity = (value) => {
    // Don't allow the quantity less than 0, if the quantity is greater than value entered by user then the user entered quantity is used, else 0
    setItem({ ...item, quantity: Math.max(0, value) });
  };

  const onInputChange = (e) => {
    changeQuantity(parseInt(e.target.value));
  };

  const onQuantityPlus = () => {
    changeQuantity(item.quantity + 1);
  };

  const onQuantityMinus = () => {
    changeQuantity(item.quantity - 1);
  };

  const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
  const stripePromise = loadStripe(publishableKey);
  const createCheckOutSession = async () => {
    setLoading(true);
    const stripe = await stripePromise;
    const checkoutSession = await axios.post('/api/create-stripe-session', {
      item: item,
    });
    const result = await stripe.redirectToCheckout({
      sessionId: checkoutSession.data.id,
    });
    if (result.error) {
      alert(result.error.message);
    }
    setLoading(false);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Stripe Checkout with Next.js</title>
        <meta
          name='description'
          content='Complete Step By Step Tutorial for integrating Stripe Checkout with Next.js'
        />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main>
        {status && status === 'success' && (
          <div className='bg-green-100 text-green-700 p-2 rounded border mb-2 border-green-700'>
            Payment Successful
          </div>
        )}
        {status && status === 'cancel' && (
          <div className='bg-red-100 text-red-700 p-2 rounded border mb-2 border-red-700'>
            Payment Unsuccessful
          </div>
        )}
        <div className='shadow-lg border rounded p-2 '>
          <Image src={item.image} width={300} height={150} alt={item.name} />
          <h2 className='text-2xl'>$ {item.price}</h2>
          <h3 className='text-xl'>{item.name}</h3>
          <p className='text-gray-500'>{item.description}</p>
          <p className='text-sm text-gray-600 mt-1'>Quantity:</p>
          <div className='border rounded'>
            <button
              onClick={onQuantityMinus}
              className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
            >
              -
            </button>
            <input
              type='number'
              className='p-2'
              onChange={onInputChange}
              value={item.quantity}
            />
            <button
              onClick={onQuantityPlus}
              className='bg-blue-500 py-2 px-4 text-white rounded hover:bg-blue-600'
            >
              +
            </button>
          </div>
          <p>Total: ${item.quantity * item.price}</p>
          <button
            disabled={item.quantity === 0 || loading}
            onClick={createCheckOutSession}
            className='bg-blue-500 hover:bg-blue-600 text-white block w-full py-2 rounded mt-2 disabled:cursor-not-allowed disabled:bg-blue-100'
          >
            {loading ? 'Processing...' : 'Buy'}
          </button>
        </div>
      </main>
    </div>
  );
}

And pages/api/create-stripe-sessoin.js should look like this.



const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

async function CreateStripeSession(req, res) {

  const { item } = req.body;

const redirectURL =

    process.env.NODE_ENV === 'development'

      ? 'http://localhost:3000'

      : 'https://stripe-checkout-next-js-demo.vercel.app';

const transformedItem = {

    price_data: {

      currency: 'usd',

      product_data: {

        images: [item.image],

        name: item.name,

      },

      unit_amount: item.price * 100,

    },

    description: item.description,

    quantity: item.quantity,

  };

const session = await stripe.checkout.sessions.create({

    payment_method_types: ['card'],

    line_items: [transformedItem],

    mode: 'payment',

    success_url: redirectURL + '?status=success',

    cancel_url: redirectURL + '?status=cancel',

    metadata: {

      images: item.image,

    },

  });

res.json({ id: session.id });

}

export default CreateStripeSession;

Conclusion

So, we have came to end. Hope you like this article. Please consider giving feedback on my writing.

Important Links

Credits

Fireship Stripe Course
@Avneesh Agarwal Next.js Payment Article -https://blog.avneesh.tech/payments-in-next

Connect with me:

How to get GitHub Notifications in Discord Server?

Ashik Chapagain — Mon, 06 Sep 2021 17:32:02 +0000

Are you interested in receiving all of your GitHub notifications on your Discord server?

Here's how to do that.

We will go over how to get GitHub notifications in Discord Server in this article. Now, let's begin.

To begin, I'm assuming you have a Discord and GitHub account.

Index

Creating Discord Server
Creating GitHub Repo
Receiving Notifications
Testing
Conclusion

Let's start by creating a Discord Server.

Creating Discord Server

In the bottom left corner, click on the + icon.
Once you've done that, click on Create My Own.
Choose For me and my friends
Now, give your server a name. After that, select Create.

Now, the discord server is ready, if you want to get Github Notification notices delivered to a separate text channel, you may create a new one.

Now, let's create a GitHub repo.

Creating GitHub Repo

Click here to create a new GitHub repo.
Give your repo a name and click Create Repository.

Now, our GitHub repo is also ready, now, it's time to setup our Discord server to receive GitHub notifications.

Receiving Notifications

Click on the ⚙️ icon just right of the text channel where you want to receive notifications.
Next, click on Integrations and then click on Create Webhook.
Now, a new webhook is created, if you want to change it's name, you can do so. But I'll leave it as it is.
Then click on Copy Webhook URL.

Once the Webhook URL is copied,

Go to your GitHub repo and click on settings.
Then click on Webhooks.
Next, click on Add webhook. Then you might need to confirm your password.
Now add the web hook URL with /github on the end in Payload URL.
Now, set the content type to application/json.
In the Which events would you like to trigger this webhook? section, select Send me everything. to receive every GitHub notification.
Now click on Add Webhook, and now, you can receive all GitHub notifications in your discord server .🥳🥳🥳

If everything was set up perfectly, then you should see the green tick on the webhook.

Testing

For testing, let's clone the clone and push a commit.

Clone the repo

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git

Create a new random file, I will create README.md with following content.

# Testing

Run the following commands

git add .
git commit -m "Added readme.md"
git branch -M main
git push -u origin main

Now, go to your discord server and you should see something like this.

Conclusion

This was a short article on how to receive GitHub notification to your Discord Server. Hope you like this article. If you got any problem or have any feedback or suggestion for me, comment it.

Connect with me:

Here's how you can send messages to your phone with Next.js and Twilio ?

Ashik Chapagain — Wed, 01 Sep 2021 18:37:02 +0000

Do you want to integrate Twilio with Next.js to send text messages? Then you're at the perfect place.

In this article, I'll walk you through the way to integrate Twilio with Next.js for sending text messages.

Index

What is Twilio? 🤔
Demo
Creating Next.js Project 🚀
Creating Form 🔤
Setup Twilio
Building API Route
Conclusion

For those who don't know what Twilio is.

What is Twilio? 🤔

Twilio's web service APIs allow software developers to make and receive phone calls, send and receive text messages, and conduct other communication activities programmatically.

Today, we'll only use the Twilio Messaging API and Next.js to deliver text messages. So, let's get this party started:

Demo

Next.js + Twilio - Watch Video

Creating Next.js Project 🚀

I'll be using the TypeScript programming language for this project. Of course, I'll talk about things that are only necessary for JS code if you're using JavaScript instead of TypeScript.

For TypeScript:

yarn create next-app twilio-nextjs --typescript # yarn users

npx create-next-app twilio-nextjs --typescript # npm users

For JavaScript:

yarn create next-app twilio-nextjs # yarn users

npx create-next-app twilio-nextjs # npm users

Creating Form 🔤

Now we'll make a form with input fields for the message receiver's phone number and the message to send.

// pages/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { BaseSyntheticEvent, useState } from 'react';

const Home: NextPage = () => {
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(false);

  const sendMessage = async (e: BaseSyntheticEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(false);
    setSuccess(false);
    const res = await fetch('/api/sendMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone: phone, message: message }),
    });
    const apiResponse = await res.json();

    if (apiResponse.success) {
      setSuccess(true);
    } else {
      setError(true);
    }
    setLoading(false);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js + Twilio</title>
      </Head>

      <form className={styles.form} onSubmit={sendMessage}>
        <h1 className={styles.title}>Send message using Next.js and Twilio</h1>
        <div className={styles.formGroup}>
          <label htmlFor='phone'>Phone Number</label>
          <input
            onChange={(e) => setPhone(e.target.value)}
            placeholder='Phone Number'
            className={styles.input}
            required
          />
        </div>
        <div className={styles.formGroup}>
          <label htmlFor='message'>Message</label>
          <textarea
            onChange={(e) => setMessage(e.target.value)}
            id='message'
            required
            placeholder='Message'
            className={styles.textarea}
          ></textarea>
        </div>
        <button disabled={loading} type='submit' className={styles.button}>
          Send Message
        </button>
        {success && (
          <p className={styles.success}>Message sent successfully.</p>
        )}
        {error && (
          <p className={styles.error}>
            Something went wrong. Please check the number.
          </p>
        )}
      </form>
    </div>
  );
};

export default Home;

Add this to pages/index.tsx or pages/index.js.

If you are using VS Code or any IDE then it'll show errors, when you paste the above code in the JS file. Then, you have to remove BaseSyntheticEvent and NextPage from the pages/index.js file and those errors will get removed.

If you are familiar with Next.js then, you will understand the above code. And if you see there their I have sent a post request to /api/sendMessage endpoint.

...
const res = await fetch('/api/sendMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone: phone, message: message }),
    });
    const apiResponse = await res.json();

    if (apiResponse.success) {
      setSuccess(true);
    } else {
      setError(true);
    }
...

This code will send a post request to the /api/sendMessage endpoint with the receiver's phone number and message to be sent. Later we'll create this API endpoint to send messages using Twilio.

Now, for decent styling, paste the following code in styles/Home.module.css.

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  width: 500px;
  padding: 20px;
  border-radius: 5px;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.title {
  line-height: 1.15;
  font-size: 1.3rem;
}

.input,
.textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid;
}

.button {
  display: block;
  width: 100%;
  padding: 10px 0;
}

.button:disabled {
  cursor: progress;
}

.success {
  color: green;
}

.error {
  color: red;
}

Now, run the following command to run the server.

yarn dev # yarn users

npm run dev # npm users

Now, you should see something like this:

Setup Twilio

Go to https://twilio.com/ and login with your account else click here(You and me both will get $10 after you upgrade if you use this link) to sign up. Once you create your account then verify your email and your phone number. You'll get redirected to Twilio Dashboard.

For trial you will get $15.50.

Now, in order to send the message we need to have one number to do so. So, let's but one phone number.

From there, you have to click on Phone Number -> Manage -> Buy a number and from there you can search for a phone number, that you wish to have.

While purchasing the phone numbers, check whether the SMS capability is in that number or not.

Actually, I live in Nepal, but we need to request Nepali numbers to use in the Twilio. So, for now, I will be using a US number.

Click on Buy on the number you want to buy. And the money to buy this number will be deducted from $15.50 which was given by Twilio for Trial.

After you click on Buy. You have to click on Buy YOUR_NUMBER.

Now, that number is yours.

In a trial account, you can't purchase more than one number.

Now, the Twilio setup is complete.

Let's build a Next.js API route to send messages.

Building API Route

Now we'll build an API route to send a message from Twilio. But before that, we have to add Twilio required credentials to .env.local.

So, create a new .env.local file in the root directory of the project. And the following content with your own credentials which you can get from Twilio Dashboard.

TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN

Here we're not adding a phone number in the .env file, I don't know why but using a phone number from env doesn't work. So we have to pass it directly which we'll do just now.

Now, create a new file named sendMessage.ts for typescript users and sendMessage.js for javascript users inside pages/api and add the following content for typescript.

import { NextApiRequest, NextApiResponse } from 'next';
import twilio from 'twilio';

export default function sendMessage(req: NextApiRequest, res: NextApiResponse) {
  const accountSid = <string>process.env.TWILIO_ACCOUNT_SID;
  const token = <string>process.env.TWILIO_AUTH_TOKEN;
  const client = twilio(accountSid, token);
  const { phone, message } = req.body;
  // console.log(phone, message);
  client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })
    .then((message) =>
      res.json({
        success: true,
      })
    )
    .catch((error) => {
      console.log(error);
      res.json({
        success: false,
      });
    });
}

and for javascript paste the following code.

import twilio from 'twilio';

export default function sendMessage(req, res) {
  const accountSid = process.env.TWILIO_ACCOUNT_SID;
  const token = process.env.TWILIO_AUTH_TOKEN;
  const client = twilio(accountSid, token);
  const { phone, message } = req.body;
  // console.log(phone, message);
  client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })
    .then((message) =>
      res.json({
        success: true,
      })
    )
    .catch((error) => {
      console.log(error);
      res.json({
        success: false,
      });
    });
}

In the above codes, the code that sends the message is here:

client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })

In the API, we have sent {success: true} response if the message was sent and {success: false} response if the message wasn't sent.

Now, this should work.

Trial account can only send messages to verified phone numbers, so you can only send the messages to the number that you used while verifying the Twilio account and if you want to send messages to other numbers, then either you have to upgrade your account or add that number to Verified Caller IDs.

Protip: If you're a student, then you can apply for Github Student Pack and it will provide $50 credits to your Twilio account.

Conclusion

This is all about, how you can send text messages using Next.js with Twilio.
Hope you like this article. If you got any problems, share them in the comment section.

Github Link: Click Here

Connect with me:

Introducing Feedlr. - the ultimate tool for feedback collection.

Ashik Chapagain — Mon, 30 Aug 2021 09:26:37 +0000

Hey Developers 👋

I'm @chapagainashik , a web developer with a full-stack approach. Today, I'm really happy to introduce Feedlr, my first truly excellent product. Feedlr is my submission for Auth0 x Hashnode hackathon. Thanks, Auth0 and Hashnode for conducting this hackathon.

Index

Introduction 🤔
Features
- Easy to implement
- Easy to customize
- Dark Mode
- Device, OS, and Browser
- Easy to use dashboard
- Filter Responses By Date Range, Reaction, Device, OS, and Browser
- Customize the Feedback question and Thankyou message
- Use your own custom form
💡 How to use Feedlr. (For web projects)?
💡 How to use Feedlr. in React Native?
💡 How to use Feedlr. in Flutter?
How to use Feedlr by creating a custom form?
⚙️ How to customize the Feedlr. widget (For web)?
- From Dashboard
- Using script tag
👨‍💻 Build with:
🔰 How did I get started?
☁️ Deploying
🛣️ Roadmap
🤝 Contributing
💬 Feedback
Let's connect

Introduction 🤔

Feedlr. is the best tool for gathering consumer feedback. It includes a widget that allows consumers to submit feedback with or without an email address and without requiring a login. After your consumers give feedback, you may access the Feedlr. dashboard to view the feedback, the device information from which it was submitted, the time it was submitted, and the URL from which it was sent. Additionally, you may filter feedback by date range, reaction, operating system, browser, and device, as well as search for responses based on feedback and URL.

Use can use Feedlr. in React Native and Flutter too

You can use your custom form and send post request to our server

Github Repo / Live Preview

Features

### Easy to implement Simply paste the given script tag from the Installations section to add the Feedlr widget to the head section of your site.

<script src="https://feedlr.vercel.app/init.js"></script>

Easy to customize

Feedlr. provide the customization from the dashboard and the script tag both. In the Feedlr. dashboard , you may go to the Settings menu and under the UI area, you can change the appearance of the Widget. There are only a few choices now, but eventually, they will all be configurable. And head to the Installation section for available options of customization from the script tag.
Dark Mode

Both web pages and the widget have a dark mode. For the dark mode in a widget, you must supply data-mode="dark" to the script tag.
Device, OS, and Browser

Know from which device, OS, and browser the feedback was submitted.
Easy to use dashboard

Feedlr. provides easy to use dashboard for managing the feedback from your customers.
Filter Responses By Date Range, Reaction, Device, OS, and Browser

You can filter the feedback by date range, reaction, device, os, and browser from which that feedback was submitted.
Customize the Feedback question and Thankyou message

You can easily customize the feedback question and thank you message using the Feedlr dashboard.
Use your own custom form

Feedlr also allows you to use your own custom form. The only thing you have to do is to send the post request to the Feedlr api.

💡 How to use Feedlr. (For web projects)?

Using the Feedlr. is too much easy. Here are the steps to use:

Register to Feedlr.
Create a project using the site URL and site name.
Then add the script provided by Feedlr. to the head tag of your site.
Now, reload your website.

See the installation guide, for using the Feedlr.

You'll see the feedback button in the bottom corner of your site.

Here's a video of how to use Feedlr.

%[https://www.youtube.com/watch?v=C3Sp4r9G-DY]

💡 How to use Feedlr. in React Native?

The widget of Feedlr. is currently not available in react native. But soon will be, until then, if you want to integrate Feedlr. in React Native Project. You have to send the post request with email(optional), feedback, emoji(disappointed|hate|natural|good|excellent)(optional), and your projectId to https://feedlr.vercel.app/api/responses.

const makeRequest = async () => {
      let request = await axios({
           method: "post",
               url: "https://feedlr.vercel.app/api/responses",
               data: {
                   email,
                   feedback,
                   emoji,
                   projectId: YOUR_PROJECT_ID
               },
      });
      if (request.data.success) {
          alert("reponse saved");
       } else {
           alert("some error have occured");
        }
};

This is how you can integrate Feedlr. in your react native.

💡 How to use Feedlr. in Flutter?

The widget of Feedlr. is currently not available in Flutter. But soon will be, until then, if you want to integrate Feedlr. in Flutter Project. You have to send the post request with email(optional), feedback, emoji(disappointed|hate|natural|good|excellent)(optional), and your projectId to https://feedlr.vercel.app/api/responses.


              Future<http.Response> createAlbum(String title) {
                return http.post(
                  Uri.parse('https://feedlr.vercel.app/api/responses'),
                  headers: <String, String>{
                    'Content-Type': 'application/json; charset=UTF-8',
                  },
                  body: jsonEncode(<String, String>{
                    'email': email,
                    'feedback': feedback,
                    'emoji': emoji,
                    'projectId': 3c7e4d59-f478-4dce-bdc0-7a879cac61c1
                  }),
                );
              }

This is how you can integrate Feedlr. in your Flutter.

How to use Feedlr by creating a custom form?

For the custom form too. you need to send your request to our api.

<form action="https://feedlr.vercel.app/api/responses" method="post">

<label for="disappointed">
    Disappointed
    <input type="radio" name="emoji" value="disappointed">
</label>
<label for="hate">
    hate
    <input type="radio" name="emoji" value="hate">
</label>
<label for="natural">
    natural
    <input type="radio" name="emoji" value="natural">
</label>
<label for="good">
    good
    <input type="radio" name="emoji" value="good">
</label>
<label for="excellent">
    excellent
    <input type="radio" name="emoji" value="excellent">
</label>

<input type="email" placeholder="Email">
<input type="text" placeholder="Feedback" name="feedback" required>
<input type="hidden" name="projectId" value="YOUR_PROJECT_ID">
<input type="submit" value="Submit">

</form>

⚙️ How to customize the Feedlr. widget (For web)?

From Dashboard

You can customize the widget view from the dashboard. Just head to the settings of the project and check the UI section. From there you can change the colors of text, buttons, and background of the widget for dark and light mode.

Using script tag

Yes, you can customize the look of the widget from the script tag itself.

Options	Description	Usage
`data-mode`	Enable Dark Mode In the widget	`<script data-mode='dark' src='https://feedlr.vercel.app/init.js'></script>`
`data-position-right`	How much you want to move widget from right.	`<script data-position-right='20' src='https://feedlr.vercel.app/init.js'></script>`
`data-position-bottom`	How much you want to move widget from bottom.	`<script data-position-bottom='20' src='https://feedlr.vercel.app/init.js'></script>`
`data-input-style`	Change the default style of email and feedback field.	`<script data-input-styele='border-radius:10%' src='https://feedlr.vercel.app/init.js'></script>`
`data-toggler-style`	Override the default style of toggler button.	`<script data-position-right='20' src='https://feedlr.vercel.app/init.js'></script>`
`data-submit-style`	Change the look of submit button as you want	`<script data-submit-style='border-radius:50%;' src='https://feedlr.vercel.app/init.js'></script>`

You can add all these options in a single script tag.

👨‍💻 Build with:

TypeScript: Programming Language
Next.JS: Production-ready react framework
Auth0: Complete user authentication
Supbase: Postgres Database
Prisma: Typescript ORM
react-icons: For icons
nextjs-progressbar: Progress Bar
headless-ui: For components
Radix UI: For components
TailwindCSS: For styling
Tippy.JS: For Tooltip
next-themes: For dark theme
next-useragent: For parsing user agent
react-hot-toast: For notification toast
react-loading-skeleton: For skeleton loading
swr: For data fetching

🔰 How did I get started?

The first few days were challenging for me since I was trying to come up with a concept for this hackathon. Then, when I got the idea of this project. I began gathering the necessary materials right after that. Once I've finished my research, I know exactly how it should look. To begin, I created a new project with Next.js and TypeScript.

yarn create next-app feedlr --typescript

Then, I implemented Auth0 in this project. Auth0 was very easy to implement. Just added the nextjs-auth0 package by following the command.

yarn install @auth0/nextjs-auth0

and wrapped the <Component/> with <UserProvider> in pages/_app.tsx.

import { UserProvider } from '@auth0/nextjs-auth0';
...
 <UserProvider>
           <Component {...pageProps} />
</UserProvider>
...

and created [...auth0].ts file inside api/auth folder and added the following code.

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

Then added the AUTH0 configurations in .env.local.

AUTH0_SECRET= YOUR_AUTH0_SECRET
AUTH0_BASE_URL= YOUR_AUTH0_BASE_URL
AUTH0_ISSUER_BASE_URL= YOUR_AUTH0_ISSUER_BASE_URL
AUTH0_CLIENT_ID= YOUR_AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET= YOUR_AUTH0_CLIENT_SECRET

Wow, the authentication is completed. Now, users can log in from http://localhost:3000/api/auth/login and log out from http://localhost:3000/api/auth/logout.

This is how I got started on my project.

☁️ Deploying

As always, Vercel was my friend for hosting this site too. I started a new project in Vercel and connected GitHub repo with that Vercel project and all done.

Now, you can use it from https://feedlr.vercel.app.

🛣️ Roadmap

Feedlr. is the hardest project of my life because I have gained a tremendous amount of knowledge in a field in which I had no prior expertise. I am planning to take Feedlr. to another level by adding other more features in the future (I'm currently working on some of them).

Here's a rundown of upcoming Feedlr. features that will be available soon:

Receive a weekly overview of feedback in an email
Be alerted on the Discord server when feedback is received
Inline widgets
Capture a snapshot of the webpage
Documentation Site

There are many more on the list that will soon be accessible in Feedlr.

🤝 Contributing

Please contribute using GitHub Flow . Create a branch, add commits, and open a pull request.

License under MIT

💬 Feedback

Feedback is the best way to improve projects. This is why Feedlr. was born. So, you can also give your feedback in the comment section or from our site. On our site, there is a feedback button on the bottom corner, from there you can send us feedback. Feedlr. has integrated its own feedback widget for taking feedback. So, you can see, how's the widget.

Let's connect

Hey, Developers

Today morning, I was surfing the internet and was trying to get some ideas to write an article today. Then, I found some of the videos which were worth sharing. And I thought of sharing about those videos in an article, so, here it is.

Let's see what are those videos, that you must watch as a developer and blogger.

1. NUMBER ONE Trait of a Senior Developer - Do you have it?

In this video, James has explained how you can get a tag of "Senior Developer" and he has shared the things, that you'll need to be a senior developer and many other cool stuffs that you will need in your programming career.

From, his video the second video came here on the list.

2. FiveThings Junior Developers Need to Know

In this video, Burke and Aimee sit down to talk about 5 things that Jr. Developers should know about.

3. Hackathon! What? Why? Top tips

In this video, Eddie Jaoude has explained many things about Hackathons like why you need to join Hackathons, what are Hackathons and he has given some tips that you will require in every hackathon ever to get more from it.

4. Text Editor VS IDE - know the difference (PLEASE! 🙏🏻)

In 4th number, I have listed a video by Ania Kubow, where she has gone through:

Pros of Text Editors
Cons of Text Editors
Pros of IDEs
Cons of IDEs And also explained why, IDE and Text Editors can't be compared.

5. How to make money while blogging | Competition!

This video was uploaded by Adrian Twarog, where he had told how technical writers or bloggers can make money by blogging.

6. How to use APIs

Another video on the list by Ania Kubow, where see has gone through:

What is an API?
Using a RestFul API - explaining GET, POST, PUT, and DELETE
Making Requests
Status Codes
Working with Authorization
REST vs SOAP vs RPC

This is a list of 6 videos, that you must watch on Youtube.

Generating Awesome User Avatars is Easy

Ashik Chapagain — Wed, 25 Aug 2021 14:40:07 +0000

Hey Developers

Whenever user signups, we as a developer either ask them to upload an avatar or add a simple avatar placeholder that looks too boring.

So, today I'll be sharing, how you guys can create an amazing avatar for your users.

Let's Start

There's a tool name DiceBear Avatars which will help you create an amazing avatar using the user's name. And this is too easy to use. This will generate different avatars based on your options.

<img src="https://avatars.dicebear.com/api/male/Ashik%20Chapagain.svg"/>

This is what you'll get.

This is just of one type. DiceBear Avatars provides you 10 types of avatars.

Let's look at them.

Avatars Types

Male

<img src="https://avatars.dicebear.com/api/male/Lalit%20Kishore.svg"/>

This is what you'll get.

Female

<img src="https://avatars.dicebear.com/api/female/Some Girl Name.svg"/>

You'll get something like this.

Human

<img src="https://avatars.dicebear.com/api/human/Some Person Name.svg"/>

Result:

Avataaars

<img src="https://avatars.dicebear.com/api/avataaars/Some Person Name.svg"/>

Bottts

<img src="https://avatars.dicebear.com/api/bottts/Some Person Name.svg"/>

Micah

<img src="https://avatars.dicebear.com/api/micah/Some Person Name.svg"/>

Initials

<img src="https://avatars.dicebear.com/api/initials/Some Person Name.svg"/>

Identicon

<img src="https://avatars.dicebear.com/api/identicon/Ashik Chapagain.svg"/>

Jdenticon

<img src="https://avatars.dicebear.com/api/jdenticon/Ashik Chapagain.svg"/>

Gridy

<img src="https://avatars.dicebear.com/api/gridy/Ashik Chapagain.svg"/>

That's it for today guys.

Deploy Blitz.js App to Vercel

Ashik Chapagain — Tue, 24 Aug 2021 08:30:11 +0000

Hey, Developers

Welcome back to the new article on Blitz.js Series. In this article, we'll learn to deploy our Blitz.js application to Vercel.

So, let's start.

Build App

In this tutorial, we'll deploy the blitz.js app that we've already built. In the previous articles of blitz.js. You can read those articles from here.

For deploying, we have to create a production build of our Blitz app and test whether some errors occur or not. For this run the following command.

yarn build

If you guys are following me along, then you guys will get the following error.

To get rid of this error, you can add {/* @ts-ignore */} just above the line where this error occurred.

// app/pages/projects/[projectId]/tasks/index.tsx
...
        {tasks.map((task) => (
          <li key={task.id}>
            {/* @ts-ignore */}
            <CustomLink href={Routes.ShowTaskPage({ projectId, taskId: task.id })}>
              <a>{task.name}</a>
            </CustomLink>
          </li>
        ))}
...

Once again run yarn build, now, you'll get another error.

For this, you have to add // @ts-ignore just above the line where this error occurred.

// app/pages/projects/[projectId]/edit.tsx
        <ProjectForm
          submitText="Update Project"
          // TODO use a zod schema for form validation
          //  - Tip: extract mutation's schema into a shared `validations.ts` file and
          //         then import and use it here
          // schema={UpdateProject}
          initialValues={project}
          onSubmit={async (values) => {
            try {
              const updated = await updateProjectMutation({
                id: project.id,
                ...values,
              })
              // @ts-ignore
              await setQueryData(updated)
              router.push(Routes.ShowProjectPage({ projectId: updated.id }))
            } catch (error) {
              console.error(error)
              return {
                [FORM_ERROR]: error.toString(),
              }
            }
          }}
        />

Now, all the errors have been resolved, now you can run yarn build. Now, it'll work. Then you can write the command yarn start to serve the production build in localhost.

Database

Since Vercel is a serverless platform, it doesn't provide a database to the user. So, we have to host our database separately.

For this project, I'll be using the Supabase Postgres database.

To use the Supabase Postgres database, go to https://supabase.io and create your account.

Then in the Supabase Dashboard create a new organization and create a new project.

%[https://youtu.be/dBOSUER_5T4?list=TLGGNnD3VLhx5_MyNDA4MjAyMQ]

While creating a project, select a nearby location to Washington DC because, by default, Vercel apps are deployed to the Washington DC server.

After your Supabase Project is ready, Go to Settings -> Database and copy the connection string. And add open .env.local and .env.test.local and replace DB_URL value with Connection string, replace [YOUR-PASSWORD] with a password, you added while creating a project.

And replace provider = "sqlite" with provider = "postgres" in db/schema.prisma.

// .env.local

DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.ntmdsyxmousbonsypexq.supabase.co:5432/postgres"

// db/schema.prisma

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}

Once you have added this, now delete the migrations. `db/migrations.

And run:
blitz prisma migrate dev

With this command, we have also created tables in the database.

Now, if you go to app.supabase.io and click on your project and click on Table Editor. Now you can see that tables have been created.

Now, once again run yarn build and yarn start and test whether your app works fine or not.

If it is working, then let's get to another step.

Push to GitHub

We're going to push our code to the GitHub Repo, because when deploying to Vercel, if we connect our GitHub repo, then Vercel will automatically deploy our code, whenever we push a new commit.

But before, creating a repo and pushing it, we have to make a few changes. Whenever we push a commit, blitz run tests (using husky). Since we're not working with tests in this tutorial, so, we have to tell husky not to run tests before pushing.

For that, go to .husky/pre-push and comment npm run test
`

!/bin/sh

. "$(dirname "$0")/_/husky.sh"

npx tsc
npm run lint

npm run test

Go to https://github.com and log in to your account and create a new repo.

After the repo is created follow the instructions given by GitHub to push our local repo to GitHub.
or run the following command in the root folder of your project.
git add . git commit -m "Created Blitz.js app" git branch -M main git remote add origin [YOUR_REPO_URL] git push -u origin main

Now, our code is on GitHub.

GitHub Link: https://github.com/projectashik/blitzjs-projectmanagement

Deploy to Vercel

I am assuming that you already have a Vercel account.

To deploy to Vercel, go to https://vercel.com and click on New project.

Click import in your recently pushed Repo. (You might have to connect your Github account first)

If you guys have a team or want to create a team, you can do so, for now, I'll skip.

Then in the Configure Project section, give a name for your project.

And add DATABASE_URL and set the SESSION_SECRET_KEY variable to a random string of 32 characters in `Environment Variables.

Protip: You can create random 32 characters string by the following command:

node -e "console.log(crypto.randomBytes(32).toString('hex'))"

Then click on deploy.

Now it'll deploy our application.

Now, our application is live:
https://blitzjs-projectmanagement.vercel.app/

This is much for these guys, Hope you like this article. Please, comment down your feedback for my work, and also if you faced any problem, comment down.

Blitz.js: The Fullstack React Framework - Part 3

Ashik Chapagain — Mon, 23 Aug 2021 18:40:01 +0000

👋 Welcome Back,

Hey Developers, welcome back to part 3 of the series "Learn by Building - Blitz.js". Today we'll create the UI for projects and tasks models. And also add the functionalities in the UI to CRUD from the database.

Index

Recap of the previous part
Today's objectives 🎯
Layout
- Header
Index page
Project
- Create Page
- Index Page
- Single Page
- Edit
Tasks
- Create and Update
- Index
Conclusion

Recap of the previous part

In the previous part of this series, we updated the database schema and updated and understand the logic for the CRUD operation of projects and tasks. And also build the UI for the authentication pages.

By looking at the above line, it looks like that the previous article doesn't include much information, but it crosses more than 2900 words. 🤯

Today's objectives 🎯

In today's articles, we'll create the UI for the CRUD operations of projects and tasks model and connect the UI with the logic. And we'll also learn to add the search functionalities for both projects and tasks.

Today, we'll start by editing the Layout Component. We used AuthLayout for the authentication pages, and now we'll use Layout Component for other pages.

Layout

Open app/core/layouts/layout.tsx and add the <Header/> tag after <Head/> tag like below and also wrap {children} with div of class container mx-auto px-4:

// app/core/layouts/layout.tsx

import { Header } from "../components/Header"
...
      </Head>
      <Header />
      <div className="container mx-auto px-4">{children}</div>
...

In the <Layout /> component, we have used the <Header /> component, so let's build it.

Header

Create a new file at app/core/components/Header.tsx and add the following code.

// app/core/components/Header.tsx
import logout from "app/auth/mutations/logout"
import { Link, Routes, useMutation } from "blitz"
import { Suspense } from "react"
import { useCurrentUser } from "../hooks/useCurrentUser"
import { Button } from "./Button"

const NavLink = ({ href, children }) => {
  return (
    <Link href={href}>
      <a className="bg-purple-600 text-white py-2 px-3 rounded hover:bg-purple-800 block">
        {children}
      </a>
    </Link>
  )
}

const Nav = () => {
  const currentUser = useCurrentUser()
  const [logoutMutation] = useMutation(logout)

  return (
    <nav>
      {!currentUser ? (
        <ul className="flex gap-8">
          <li>
            <NavLink href={Routes.LoginPage()}>Login</NavLink>
          </li>
          <li>
            <NavLink href={Routes.SignupPage()}>Register</NavLink>
          </li>
        </ul>
      ) : (
        <ul className="">
          <li>
            <Button
              onClick={async () => {
                await logoutMutation()
              }}
            >
              Logout
            </Button>
          </li>
        </ul>
      )}
    </nav>
  )
}

export const Header = () => {
  return (
    <header className="flex sticky top-0 z-30 bg-white justify-end h-20 items-center px-6 border-b">
      <Suspense fallback="Loading...">
        <Nav />
      </Suspense>
    </header>
  )
}

With this, you'll get the header like as shown below:

When a user is not logged in,

When a user is authenticated,

In the header component, there are some lines that you might not understand. So, let's know what they really do.

<Suspense>...</Suspense>: component that lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while we’re waiting. ( React Docs)
useCurrentUser(): It is a react hook that returns a authenticated session of a user. (Blitz.js Dccs)
useMutation(logout): Logout task is a mutation and to run the mutation we use the powerful hook useMutation provided by Blitz.js.( Blitz.js Docs )

If you look over the onClick event listener in the Logout button. There we are using async/await, because mutations return promises.

Now, let's display the User Email on the index page and add a link to go to the projects index page.

Index page

If you guys, remembered we have removed the content from the index.tsx page. Now, we'll display the email of the authenticated user and make that page accessible only by the logged-in user.

To work with the index page, first, go to the signup page and create an account. And then you will get redirected to the index page.

Now, replace everything in app/pages/index.tsxwith the given content.

// app/pages/index.tsx

import { Suspense } from "react"
import { Image, Link, BlitzPage, useMutation, Routes } from "blitz"
import Layout from "app/core/layouts/Layout"
import { useCurrentUser } from "app/core/hooks/useCurrentUser"
import logout from "app/auth/mutations/logout"
import logo from "public/logo.png"
import { CustomLink } from "app/core/components/CustomLink"

/*
 * This file is just for a pleasant getting started page for your new app.
 * You can delete everything in here and start from scratch if you like.
 */

const UserInfo = () => {
  const user = useCurrentUser()
  return (
    <div className="flex justify-center my-4">{user && <div>Logged in as {user.email}.</div>}</div>
  )
}

const Home: BlitzPage = () => {
  return (
    <>
      <Suspense fallback="Loading User Info...">
        <UserInfo />
      </Suspense>
      <div className="flex justify-center">
        <CustomLink href="/projects">Manage Projects</CustomLink>
      </div>
    </>
  )
}

Home.suppressFirstRenderFlicker = true
Home.getLayout = (page) => <Layout title="Home">{page}</Layout>
Home.authenticate = true

export default Home

If you see the third last line in the code, Home.authenticate = true, this means, this page requires a user to be authenticated to access this page.

Now, the index page should look like this:

Click on the Manage projects to see how the projects index page looks like.

Now, let's customize the project creation page. We are not editing the index page, first because we need to show the data on the index page.

Project

Create Page

If you go to /projects/new, currently it should look like this.

Now, let's customize this page.

In our schema, we have a description field for the projects model. So, let's add the text area for the description field.

We also need a text area for the task model too. So, we'll create a new component for the text area. For this I have created a new file /app/core/components/LabeledTextAreaField.tsx and copied the content of LabeledTextField and customized it for textarea.

// app/core/components/LabeledTextAreaField

import { forwardRef, PropsWithoutRef } from "react"
import { Field, useField } from "react-final-form"

export interface LabeledTextFieldProps extends PropsWithoutRef<JSX.IntrinsicElements["input"]> {
  /** Field name. */
  name: string
  /** Field label. */
  label: string
  /** Field type. Doesn't include radio buttons and checkboxes */
  type?: "text" | "password" | "email" | "number"
  outerProps?: PropsWithoutRef<JSX.IntrinsicElements["div"]>
}

export const LabeledTextAreaField = forwardRef<HTMLInputElement, LabeledTextFieldProps>(
  ({ name, label, outerProps, ...props }, ref) => {
    const {
      input,
      meta: { touched, error, submitError, submitting },
    } = useField(name, {
      parse: props.type === "number" ? Number : undefined,
    })

    const normalizedError = Array.isArray(error) ? error.join(", ") : error || submitError

    return (
      <div {...outerProps}>
        <label className="flex flex-col items-start">
          {label}
          <Field
            component={"textarea"}
            className="px-1 py-2 border rounded focus:ring focus:outline-none ring-purple-200 block w-full my-2"
            {...props}
            {...input}
            disabled={submitting}
          ></Field>
        </label>

        {touched && normalizedError && (
          <div role="alert" className="text-sm" style={{ color: "red" }}>
            {normalizedError}
          </div>
        )}
      </div>
    )
  }
)

export default LabeledTextAreaField

After doing this, now you can use it in the /app/projects/components/ProjectForm.tsx.

// app/projects/components/ProjectForm.tsx

import { Form, FormProps } from "app/core/components/Form"
import { LabeledTextField } from "app/core/components/LabeledTextField"
import { LabeledTextAreaField } from "app/core/components/LabeledTextAreaField"
import { z } from "zod"
export { FORM_ERROR } from "app/core/components/Form"

export function ProjectForm<S extends z.ZodType<any, any>>(props: FormProps<S>) {
  return (
    <Form<S> {...props}>
      <LabeledTextField name="name" label="Name" placeholder="Name" />
      <LabeledTextAreaField name="description" label="Description" placeholder="Description" />
    </Form>
  )
}

Now /projects/new page should look like.

Now, you can use that form to create a project.

But, there is still many thing to customize in this page.

// app/pages/projects/new

import { Link, useRouter, useMutation, BlitzPage, Routes } from "blitz"
import Layout from "app/core/layouts/Layout"
import createProject from "app/projects/mutations/createProject"
import { ProjectForm, FORM_ERROR } from "app/projects/components/ProjectForm"
import { CustomLink } from "app/core/components/CustomLink"

const NewProjectPage: BlitzPage = () => {
  const router = useRouter()
  const [createProjectMutation] = useMutation(createProject)

  return (
    <div className="mt-4"> 
      <h1 className="text-xl mb-4">Create New Project</h1>

      <ProjectForm
        ....
      />

      <p className="mt-4">

        <CustomLink href={Routes.ProjectsPage()}>
          <a>Projects</a>
        </CustomLink>

      </p>
    </div>
  )
}

NewProjectPage.authenticate = true
NewProjectPage.getLayout = (page) => <Layout title={"Create New Project"}>{page}</Layout>

export default NewProjectPage

Here, I have added some class in h1 and divs and replace Link tag with our CustomLink component.

After this, the page will look like this.

Now, let's style the index page ' /projects '.

Index Page

Before styling the index page, add some of the projects to play with.

After adding them. You'll get redirected to single project page. Go to /projects.

This is what your page will look like.

Now, paste the following content in app/pages/projects/index.tsx.

// app/pages/projects/index.tsx

import { Suspense } from "react"
import { Head, Link, usePaginatedQuery, useRouter, BlitzPage, Routes } from "blitz"
import Layout from "app/core/layouts/Layout"
import getProjects from "app/projects/queries/getProjects"
import { CustomLink } from "app/core/components/CustomLink"
import { Button } from "app/core/components/Button"

const ITEMS_PER_PAGE = 100

export const ProjectsList = () => {
  const router = useRouter()
  const page = Number(router.query.page) || 0
  const [{ projects, hasMore }] = usePaginatedQuery(getProjects, {
    orderBy: { id: "asc" },
    skip: ITEMS_PER_PAGE * page,
    take: ITEMS_PER_PAGE,
  })

  const goToPreviousPage = () => router.push({ query: { page: page - 1 } })
  const goToNextPage = () => router.push({ query: { page: page + 1 } })

  return (
    <div className="mt-4">
      <h2>Your projects</h2>
      <ul className="mb-4 mt-3 flex flex-col gap-4">
        {projects.map((project) => (
          <li key={project.id}>
            <CustomLink href={Routes.ShowProjectPage({ projectId: project.id })}>
              <a>{project.name}</a>
            </CustomLink>
          </li>
        ))}
      </ul>

      <div className="flex gap-2">
        <Button disabled={page === 0} onClick={goToPreviousPage}>
          Previous
        </Button>
        <Button disabled={!hasMore} onClick={goToNextPage}>
          Next
        </Button>
      </div>
    </div>
  )
}

const ProjectsPage: BlitzPage = () => {
  return (
    <>
      <Head>
        <title>Projects</title>
      </Head>

      <div>
        <p>
          <CustomLink href={Routes.NewProjectPage()}>Create Project</CustomLink>
        </p>

        <Suspense fallback={<div>Loading...</div>}>
          <ProjectsList />
        </Suspense>
      </div>
    </>
  )
}

ProjectsPage.authenticate = true
ProjectsPage.getLayout = (page) => <Layout>{page}</Layout>

export default ProjectsPage

And let's make the Button component looks unclickable when it is disabled.

For that, you can add disabled:bg-purple-400 disabled:cursor-not-allowed class in Button component.

// app/core/components/Button.tsx

export const Button = ({ children, ...props }) => {
  return (
    <button
      className="... disabled:bg-purple-400 disabled:cursor-not-allowed"
    >
      {children}
    </button>
  )
}

Now, projects index page should look like:

Single Page

Before editing, project single page looks like.

Now, replace the code of app/pages/projects/[projectId].tsx with following.

// app/pages/projects/[projectId].tsx

import { Suspense } from "react"
import { Head, Link, useRouter, useQuery, useParam, BlitzPage, useMutation, Routes } from "blitz"
import Layout from "app/core/layouts/Layout"
import getProject from "app/projects/queries/getProject"
import deleteProject from "app/projects/mutations/deleteProject"
import { CustomLink } from "app/core/components/CustomLink"
import { Button } from "app/core/components/Button"

export const Project = () => {
  const router = useRouter()
  const projectId = useParam("projectId", "number")
  const [deleteProjectMutation] = useMutation(deleteProject)
  const [project] = useQuery(getProject, { id: projectId })

  return (
    <>
      <Head>
        <title>Project {project.id}</title>
      </Head>

      <div>
        <h1>Project {project.id}</h1>
        <pre>{JSON.stringify(project, null, 2)}</pre>

        <CustomLink href={Routes.EditProjectPage({ projectId: project.id })}>Edit</CustomLink>

        <Button
          type="button"
          onClick={async () => {
            if (window.confirm("This will be deleted")) {
              await deleteProjectMutation({ id: project.id })
              router.push(Routes.ProjectsPage())
            }
          }}
          style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
        >
          Delete
        </Button>
        <CustomLink href={Routes.TasksPage({ projectId: project.id })}>Tasks</CustomLink>
      </div>
    </>
  )
}

const ShowProjectPage: BlitzPage = () => {
  return (
    <div className="mt-2">
      <p className="mb-2">
        <CustomLink href={Routes.ProjectsPage()}>Projects</CustomLink>
      </p>

      <Suspense fallback={<div>Loading...</div>}>
        <Project />
      </Suspense>
    </div>
  )
}

ShowProjectPage.authenticate = true
ShowProjectPage.getLayout = (page) => <Layout>{page}</Layout>

export default ShowProjectPage

Now the page should look like.

Edit

We'll do a decent style on the edit page. We'll just replace <Link> tag with <CustomLink> component and add text-lg class to h1.

// From
<Link href={Routes.ProjectsPage()}>
          <a>Projects</a>
</Link>

// To
<CustomLink href={Routes.ProjectsPage()}>
         Projects
</CustomLink>

// From
<h1>Edit Project {project.id}</h1>

// To
<h1 className="text-lg">Edit Project {project.id}</h1>

Now, it's time to edit the Tasks pages.

Tasks

Create and Update

We have added description field in the schema, so let's add textarea for description in the form.
Both create and update use the same form, we don't have to customize them seperately.

// app/tasks/components/TaskForm.tsx

import { Form, FormProps } from "app/core/components/Form"
import LabeledTextAreaField from "app/core/components/LabeledTextAreaField"
import { LabeledTextField } from "app/core/components/LabeledTextField"
import { z } from "zod"
export { FORM_ERROR } from "app/core/components/Form"

export function TaskForm<S extends z.ZodType<any, any>>(props: FormProps<S>) {
  return (
    <Form<S> {...props}>
      <LabeledTextField name="name" label="Name" placeholder="Name" />
      <LabeledTextAreaField name="description" label="Description" placeholder="Description" />
    </Form>
  )
}

I have already written on how to customize the pages for projects so, you can follow the same to customize tasks pages. So, now I'll not style any pages.

Index

In the index page, you need to add projectId in query param.

...
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Link href={Routes.ShowTaskPage({ projectId, taskId: task.id })}>
              <a>{task.name}</a>
            </Link>
          </li>
        ))}
      </ul>

...

Conclusion

Now, all the functionalities works fine. So this much for today guys, In next article. We'll see how to deploy this app. In that I will show you the complete guide to deploy in multiple platform.

Blitz.js: The Fullstack React Framework Part 2

Ashik Chapagain — Sun, 22 Aug 2021 18:16:14 +0000

Welcome Back 👋

Hey, Developers, welcome back to the second part of the Blitz.js: The Fullstack React Framework series.

Check part one if you haven't already: https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-2kag

In the previous part, we have completed setting up a fresh blitz.js project, added Tailwind CSS to it using a recipe, created a database model, and generated the files required for this project.

Today, we'll start by updating the schema file.

So, let's start.

Index

Update Database Schema
Understanding and updating Logics
- Logics for Project
- Logics for Tasks
Building UI
- SignUp Page Component
- Login Page
- Forgot Password page
- Reset Password page
Recap

Update Database Schema

In the previous article, we finished up creating the relationship between project and tasks table, but there we haven't created the field for storing task name and task description. So, first, let's update the scheme.prisma file with required fields.

// file: db/schema.prisma
...

model Project {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  name        String
  description String
  tasks       Task[]
}

model Task {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  project     Project  @relation(fields: [projectId], references: [id])
  projectId   Int
  // Add the following new fields
  name        String
  description String?
}

If you haven't noticed what we have changed, check the Task model, where we have added the name field of String type and description of String with nullable ?.

That's it for the schema.

Now run the command blitz prisma migrate dev. And give any name for migration, but since we have updated the tasks table by adding two new fields so, I'll name it update_tasks_table. If you open the Prisma studio using blitz prisma studio, you will see two new fields in the tasks table.

Let's build the logic.

Understanding and updating Logics

We'll understand mutations and queries to alter the data in the database and fetch the data from the database which are generated by code scaffolding from our previous part but since we have added the new field we have to update mutations and logics too.

Logics for Project

First, let's create the CRUD operation for the project.

Open app/projects/mutations/createProject.ts and add the following.

// app/projects/mutations/createProject.ts
import { resolver } from "blitz"
import db from "db"
import { z } from "zod"

const CreateProject = z.object({
  name: z.string(),
  description: z.string(),
})

export default resolver.pipe(
  resolver.zod(CreateProject), // This is a handly utility for using Zod, an awesome input validation library. It takes a zod schema and runs schema.parse on the input data.
  resolver.authorize(), // Require Authentication
  async (input) => {
    // Create the project
    const project = await db.project.create({ data: input })
    // Return created project
    return project
  }
)

Let's split the code and understand each line.

import { resolver } from "blitz": Blitz exports a resolver object which contains a few utilities. "Resolver" as used here and for queries and mutations refers to a function that takes some input and "resolves" that into some output or side effect. Click here to know more
import db from "db": Here db is a Prisma client enhanced by blitz.
import { z } from "zod": Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object. Click here to know more
const CreateProject: CreateProject is an object schema that validates if the given input contains the name field of string type and description field of 'string' type.
resolver.pipe: This is a functional pipe that makes it easier and cleaner to write complex resolvers. A pipe automatically pipes the output of one function into the next function. ( Blitz.js Docs )
resolver.zod(CreateProject): This is a handy utility for using Zod, an awesome input validation library. It takes a zod schema and runs schema.parse on the input data. ( Blitz.js Docs )
resolver.authorize(): Using resolver.authorize in resolver.pipe is a simple way to check whether the user has the authorization to call the query or mutation or not. ( Blitz.js Docs )
async (input) => {}: This async function is a callback.
db.project.create: Create a new project in the database.
return project: Returns the created data.

Now, we have built the logic to create a project.

Let's build the logic to get projects.

// file: app/projects/queries/getProjects.ts
import { paginate, resolver } from "blitz"
import db, { Prisma } from "db"

interface GetProjectsInput
  extends Pick<Prisma.ProjectFindManyArgs, "where" | "orderBy" | "skip" | "take"> {}

export default resolver.pipe(
  resolver.authorize(),
  async ({ where, orderBy, skip = 0, take = 100 }: GetProjectsInput) => {
    // TODO: in multi-tenant app, you must add validation to ensure correct tenant
    const {
      items: projects,
      hasMore,
      nextPage,
      count,
    } = await paginate({
      skip,
      take,
      count: () => db.project.count({ where }),
      query: (paginateArgs) =>
        db.project.findMany({ ...paginateArgs, where, orderBy, include: { tasks: true } }),
    })

    return {
      projects,
      nextPage,
      hasMore,
      count,
    }
  }
)

In this file, made a single change and that is I have added the include option in db.project.findMany().

What this will do is, includes all the tasks that belong to the respective project.

Now let's understand each line of this code. I'll not repeat the one that I have already written while building the create project logic. I'll also skip the imports.

interface GetProjectsInput extends Pick<Prisma.ProjectFindManyArgs, "where" | "orderBy" | "skip" | "take"> {}: What this will do is, create a interface by picking the set of properties (where, orderBy, skip, take) from Prisma.ProjectFindManyArgs. ( TS Docs )
Prisma.ProjectFindManyArgs: Prisma generates the types for the model and the arguments. Here we are using ProjectFindManyArgs` which was generated by Prisma.
paginate: This is a handy utility for query pagination. ( Blitz.js Docs ).
db.project.count({where}): Returns the number of data from the database that follows the conditions we passed in where argument.( Prisma Docs )
db.project.findMany(): Get all the data from the projects table. If you compare this with the originally generated one, then we'll know that we have added the include option in this. From with we will get all the tasks that belong to this table.

Now let's look at how to get a single project.
`
// app/projects/queries/getProject.ts
import { resolver, NotFoundError } from "blitz"
import db from "db"
import { z } from "zod"

const GetProject = z.object({
// This accepts type of undefined, but is required at runtime
id: z.number().optional().refine(Boolean, "Required"),
})

export default resolver.pipe(resolver.zod(GetProject), resolver.authorize(), async ({ id }) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const project = await db.project.findFirst({ where: { id }, include: { tasks: true } })

if (!project) throw new NotFoundError()

return project
})
`

.refine(): (ZOD Docs)
db.project.findFirst(): Return the first data that satisfies the given condition. (Prisma Docs)
throw new NotFoundError(): Throw 404 error.

Now, let's see the logic to update the project.

`
// app/projects/mutations/updateProject.ts
import { resolver } from "blitz"
import db from "db"
import { z } from "zod"

const UpdateProject = z.object({
id: z.number(),
name: z.string(),
description: z.string(),
})

export default resolver.pipe(
resolver.zod(UpdateProject),
resolver.authorize(),
async ({ id, ...data }) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const project = await db.project.update({ where: { id }, data })

return project

}
)

db.project.update(): Update the data with the given data in the project row with the given id. (Prisma Docs)

Finally, it's time for the logic to delete the project.

`
// app/projects/mutations/deleteProject.ts

import { resolver } from "blitz"
import db from "db"
import { z } from "zod"

const DeleteProject = z.object({
id: z.number(),
})

export default resolver.pipe(resolver.zod(DeleteProject), resolver.authorize(), async ({ id }) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const tasks = await db.task.deleteMany({ where: { projectId: id } })
const project = await db.project.deleteMany({ where: { id } })

return project
})

`
If you look there, I have added a new line const tasks = = await db.task.deleteMany({ where: { projectId: id } }). This will first delete all the tasks that belong to that project and only then the actual project got removed.

db.project.deleteMany: This will delete the rows from the table which satisfy the given criteria.

Now, The CRUD for the project has been completed, now it's time for CRUD operation of tasks.

Logics for Tasks

Let's update the tasks logic for creating a new task.
`
// app/tasks/mutations/createTask.ts

import { resolver } from "blitz"
import db from "db"
import { z } from "zod"

const CreateTask = z.object({
name: z.string(),
projectId: z.number(),
// This is what we have added
description: z.string().optional(),
})

export default resolver.pipe(resolver.zod(CreateTask), resolver.authorize(), async (input) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const task = await db.task.create({ data: input })

return task
})
`

Everything looks familiar, Nah. We have already discussed the syntax used up here before.

After we created tasks, we need to retrieve the tasks, so let getAll the tasks.

`
// app/tasks/queries/getTasks.ts

import { paginate, resolver } from "blitz"
import db, { Prisma } from "db"

interface GetTasksInput
extends Pick {}

export default resolver.pipe(
resolver.authorize(),
async ({ where, orderBy, skip = 0, take = 100 }: GetTasksInput) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const {
items: tasks,
hasMore,
nextPage,
count,
} = await paginate({
skip,
take,
count: () => db.task.count({ where }),
query: (paginateArgs) => db.task.findMany({ ...paginateArgs, where, orderBy }),
})

return {
  tasks,
  nextPage,
  hasMore,
  count,
}

}
)

Everything is the same up here as generated.

Let's see the mutation to update the task.

`js
// app/tasks/mutations/updateTask.ts

import { resolver } from "blitz"
import db from "db"
import { z } from "zod"

const UpdateTask = z.object({
id: z.number(),
name: z.string(),
// The only thing we have added
description: z.string().optional(),
})

export default resolver.pipe(
resolver.zod(UpdateTask),
resolver.authorize(),
async ({ id, ...data }) => {
// TODO: in multi-tenant app, you must add validation to ensure correct tenant
const task = await db.task.update({ where: { id }, data })

return task

}
)

For the getTask query and delete mutation, leave it as it is.

Now we're done for Logics.

Building UI

We have already installed Tailwind CSS with the blitz recipe in the previous part. ( Read it here ). So, we'll be using the Tailwind CSS library for this project. And we'll create a simple UI using TailwindCSS.

SignUp Page Component

Link: /signup

Open app/auth/pages/signup.tsx. There you will see that they are using the custom component SignupForm for the form. So, open it from app/auth/components/SignupForm.tsx. Then there you will see that they are using the custom Form Component and LabeledTextField components.

So our first work will be to customize Form and LabeledTextFieldComponent.

Open app/core/Form.tsx and add p-5 border rounded classes in the form tag and add text-sm class in alert.

`jsx
// app/core/components/Form.tsx

{submitError && (

{submitError}

)}
...

...
`

Now, let's customize LabeledTextFieldComponent.

For this, first, we will create a custom component for input with tailwind style classes.

Go to app/core/components and open a file LabeledTextField.tsx and update it with the following code.
`jsx
// app/core/components/LabeledTextField.tsx

import { forwardRef, PropsWithoutRef } from "react"
import { useField } from "react-final-form"

export interface LabeledTextFieldProps extends PropsWithoutRef {
/** Field name. /
name: string
/* Field label. /
label: string
/* Field type. Doesn't include radio buttons and checkboxes */
type?: "text" | "password" | "email" | "number"
outerProps?: PropsWithoutRef
}

export const LabeledTextField = forwardRef(
({ name, label, outerProps, ...props }, ref) => {
const {
input,
meta: { touched, error, submitError, submitting },
} = useField(name, {
parse: props.type === "number" ? Number : undefined,
})

const normalizedError = Array.isArray(error) ? error.join(", ") : error || submitError

return (
  <div {...outerProps}>
    <label className="flex flex-col items-start">
      {label}
      <input
        {...input}
        className="px-1 py-2 border rounded focus:ring focus:outline-none ring-purple-200 block w-full my-2"
        disabled={submitting}
        {...props}
        ref={ref}
      />
    </label>

    {touched && normalizedError && (
      <div role="alert" className="text-sm" style={{ color: "red" }}>
        {normalizedError}
      </div>
    )}
  </div>
)

}
)

export default LabeledTextField

Always remember that the components that are required for a specific model, we have to create that inside the components folder in that model, for example. if we want a form to create a project then we add that form component inside app/project/components. But if that component is not model specific, then we create those components inside app/core/components.

Let's create a new core Button component to use everywhere on the site.

`jsx
// app/core/components/Button.tsx

export const Button = ({ children, ...props }) => {
return (

{children}

)
}
`
Now let's use this new Button component in Form.tsx.

In app/core/components/Form.tsx replace
{submitText && ( <button type="submit" disabled={submitting}> {submitText} </button> )}
with
{submitText && ( <Button type="submit" disabled={submitting}> {submitText} </Button> )}
And don't forget to import the Button.
import { Button } from "./Button"
Now, you should have something like this.

Let's customize this page more.

We'll use a separate layout for the authentication pages. So, go to app/core/layouts and create a new file named AuthLayout.tsx and add the following contents.

`
// app/core/layouts/AuthLayout.tsx

import { ReactNode } from "react"
import { Head } from "blitz"

type LayoutProps = {
title?: string
heading: string
children: ReactNode
}

const AuthLayout = ({ title, heading, children }: LayoutProps) => {
return (
<>

{title || "ProjectManagement"}

  <div className="flex justify-center">
    <div className="w-full md:w-2/3 lg:max-w-2xl mt-5">
      <h2 className="text-xl mb-2">{heading}</h2>
      <div>{children}</div>
    </div>
  </div>
</>

)
}

export default AuthLayout

Now go to the SignupForm component and remove the h1 tag. After removing <h1>Create an Account</h1> the file should look like.

`
import { useMutation } from "blitz"
import { LabeledTextField } from "app/core/components/LabeledTextField"
import { Form, FORM_ERROR } from "app/core/components/Form"
import signup from "app/auth/mutations/signup"
import { Signup } from "app/auth/validations"

type SignupFormProps = {
onSuccess?: () => void
}

export const SignupForm = (props: SignupFormProps) => {
const [signupMutation] = useMutation(signup)

return (

  <Form
    submitText="Create Account"
    schema={Signup}
    initialValues={{ email: "", password: "" }}
    onSubmit={async (values) => {
      try {
        await signupMutation(values)
        props.onSuccess?.()
      } catch (error) {
        if (error.code === "P2002" && error.meta?.target?.includes("email")) {
          // This error comes from Prisma
          return { email: "This email is already being used" }
        } else {
          return { [FORM_ERROR]: error.toString() }
        }
      }
    }}
  >
    <LabeledTextField name="email" label="Email" placeholder="Email" />
    <LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
  </Form>
</div>

)
}

export default SignupForm
`

Now, we have to tell signup page to use AuthLayout as layout.

For that, go to app/auth/pages/signup.tsx and change the folowing line:
SignupPage.getLayout = (page) => <Layout title="Sign Up">{page}</Layout>
to
SignupPage.getLayout = (page) => <AuthLayout heading="Create an account" title="Sign Up">{page}</AuthLayout>
and import AuthLayout.
import AuthLayout from "app/core/layouts/AuthLayout"
Now, your signup page should look like this.

⚠️ Ignore that LastPass sign in the input field.

Let's include a link to go to the login page in the signup page.

For this, we'll create our own custom Link component with tailwind style.

Go to /app/core/components and create a new file CustomLink.tsx and add the following.
`
// app/core/components/CustomLink.tsx

import { Link } from "blitz"

export const CustomLink = ({ children, href }: any) => {
return (

{children}

)
}
`

Now, to include the go-to login link you have to add the following line after the Form tag.

`
...

 Already have account? Login

After all this, your signup page should look like this.

Now, since we have already styled many components in the SignUp UI section now, for other pages we won't have to do too much work for other pages.

Login Page

Link : '/login'

For the login page customization replace the following line in login.tsx:
`
// app/auth/pages/login

LoginPage.getLayout = (page) => {page}
`

LoginPage.getLayout = (page) => ( <AuthLayout heading="Welcome back, login here" title="Log In"> {page} </AuthLayout> )
and import AuthLayout.
import AuthLayout from "app/core/layouts/AuthLayout"
After doing this, your login page should look like this.

Now, remove <h1>Login</h1> from app/auth/components/LoginForm.tsx.

and also replace the following lines from LoginForm.tsx:
`
// from

Forgot your password?

// to

Forgot your password?

`

and
`
// from
Sign Up

// to
Sign Up
`

After getting up to this, your login page should look like.

Forgot Password page

Link : '/forgot-password'

As before, change the layout to AuthLayout.

`
// app/auth/pages/forgot-password.tsx

import AuthLayout from "app/core/layouts/AuthLayout"
...

ForgotPasswordPage.getLayout = (page) => (

{page}

)
`

and remove <h1>Forgot your password?</h1> from app/auth/pages/forgot-password.tsx.

Now, the forgot password page is done and it should look like.

Now, Finally the final page of authentication.

Reset Password page

Link: '/reset-password'

As before, change the layout to AuthLayout.

`
// app/auth/pages/reset-password.tsx

import AuthLayout from "app/core/layouts/AuthLayout"

...

ResetPasswordPage.getLayout = (page) => (

{page}

)
`

and remove <h1>Set a New Password</h1> and it should look like this.

This much for today guys.

Recap

Updated the schema
Edited UI for authentication pages using Tailwindcss
Created custom components
Created AuthLayout and used it

Top 6 blogging lessons from Mahabharata

Ashik Chapagain — Fri, 20 Aug 2021 19:06:55 +0000

Welcome back!

Recently I was watching the Mahabharata series and from there I learned many life lessons and some of those lessons are also applicable in the blogging sector. And they were worth sharing. So, here I am with those important lessons, which can help you get successful in Blogging. I have shortlisted only 6 of the lessons but there are many more.

Introduction

For those who don't know, what Mahabharata is?

Mahabharata is one of two major Sanskrit epics of Hinduism which contains the story of the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pandava princes and their successors.

Actually, Mahabharata is a holy book containing many helpful life lessons that helps the people of Kaliyug to live a prosperous life.

Lessons

Quality Over Quantity
Learning is a lifelong process
Half knowledge is dangerous
Dedication is always greater than capability
Passion always find success
Motivation is a key to success

Quality Over Quantity

In Mahabharata, before the war, both the Pandavas and Kauravas head to Dwarka to seek help from Yadavas(People from Krishna's state). Krishna clearly mentioned that he will not use any weapons (Krishna had one of the most powerful divine weapons called Sudharshan Chakra.) in this war and he asked them to choose between him (weaponless) and his powerful Narayani Sena who were undefeatable. After Kauravas (Duryodhan) heard this, they chose Narayani Sena over Krishna but Pandavas(Arjun) chose Krishna. And at last, Pandavas won the war.

So, always focus on the quality of the content, not the quantity. If you have quality content, then only people would like to spend more time reading your article.

Learning is a lifelong process

As mentioned in the Mahabharat, after the Kauravas and Pandavas finished their formal education from Guru Dronacharya, Kauravas hardly learned anything else. They were busy enjoying and spending time in unproductive tasks. But at the same time, Pandavas continued to learn new things and improve their skills. Arjuna worshipped Lord Shiva and learned to use Pashupatastra(one of the most powerful divine weapons of Lord Shiva). He even got the divine weapons and their knowledge from Lord Indra. Bheema also worshipped Lord Hanuman and explored new ways to improve his strength and learned other important lessons from Lord Hanuman.

As for Pandavas, we all also should keep on learning new technologies, trends, features, and many more. You need to be up-to-date with the current trends of the programming field if you are a technical writer.

Half knowledge is dangerous

Abhimanyu (son of Arjun) is the best example for this lesson. In Mahabharta. Abhimanyu was of only 14 years when he fought in the war. Kauravas were very adamant to kill Arjun's son, so they for Chakravyuh(an invincible army formation that is deadly enough to finish the war in one day). In that war, Arjun was the only person who knows how to tackle that vyuh from the side of Pandavas. But he was not present there in the field. Abhimanyu had the knowledge to enter inside the chakravyuh but not of how to get outside of that Chakravyuh. But he enters inside the chakravyuh and got died. He was brave and courageous which shows his great character but half knowledge cost him his life.

So, always remember that whenever you learn something new. Try knowing all the important things about the topic.

Dedication is always greater than capability

In the above lesson, I point out how the half-knowledge of Abhimanyu leads him to death. But he was too dedicated to that war, in spite of his capability, he fought very bravely until he died.

So, everyone should be dedicated to what they are doing.

Passion always find success

In Mahabharata, Karna being passionate about learning archery skills taught us that if you are passionate to do something, you will always find a way to succeed. From his birth, he faced many difficulties, but his passion for archery made him successful. His passion to learn led him to Lord Parshurama, from where he learns archery and other divine skills. He was equivalent or even more powerful than Arjuna.

The story of Karna inspires us to work towards our goals no matter how difficult situations we come across in our life. If we are passionate about our goal, we will conquer all the difficulties.

Motivation is a key to success

In Mahabharata, Arjun denied killing Bheeshma, Guru Dron, and other relatives. He asked Krishna if he was committing any sin by slaying his dear ones. At that time, Lord Krishna stood up and motivated him. At that time Lord Krishna told him that, we should only perform our duty and should be entitled to the fruits of action. It was the strong motivation provided by Krishna which led to the Pandavas victory.

Motivation helps a person to get success. Everyone has their own reasons and ways to get motivated. So, always motivate yourself and dedicate yourself to your goal.

These are the top 6 lessons that you can learn from Mahabharata as a blogger.

Thanks for reading up to here. What do you think of these lessons? Comment down.

Blitz.js: The Fullstack React Framework

Ashik Chapagain — Fri, 20 Aug 2021 05:10:10 +0000

Hey Developers

Currently, Blitz.js is on rising because of its unique features. Likewise, Typescript is the superset of Javascript; Blitz.js is also like the superset of Next.js. Almost every feature of Next.js works in Blitz.js too.

Index

Introduction
Features
Installation
Routing in Blitz.js
Building Project Management Application
- Tailwind CSS (Recipe)
- Clean Up
- Creating files (Code Scaffolding)
- Database(Prisma)
What we learned today?

Introduction

According to the Blitz.js team, Blitz is a batteries-included framework inspired by Ruby on Rails, is built on Next.js, and features a "Zero-API" 🤯 data layer abstraction that eliminates the need for REST/GraphQL.

Blitz.js is a framework built on top of Next.js, which comes with all the boring stuff already set up for you! Like ESLint, Prettier, Jest, user sign up, log in, and password reset.

Blitz.js provides helpful defaults and conventions for routing, file structure, and authentication while being extremely flexible.

Features

FullStack & monolithic:
Blitz.js comes with a database to frontend all preconfigured in a single app to help you build full-stack apps in record time, which you can easily store in server or serverless like Netlify or Vercel.
API Not Required:
Instead of fetching data from the backend, you import your server code directly into your components. At build time, that function import is swapped out with an auto-generated HTTP API.
The generated API can also be used by apps & third parties.
Loose Opinions:
In Blitz.js, you are free to plug anything that you can use. Blitz.js doesn't mandate you to use the specific library only. For example, by default, Blits.js comes with Prisma preconfigured as ORM, but you can use others if you feel comfortable on others.
Convention over Configuration:
Blits.js does all the boring setup and configuration by default for you. The common project structure and architectural patterns move from one Blitz app to another and immediately feel at home.
Easy to Start, Easy to Scale:
It's easy to use and easy to migrate your next.js application to a blitz.js app.
Easy to scale in all forms: lines of code, number of people working in the codebase, and code execution.
Recipes:
Recipes are one of the beautiful features of the blitz.js. By using recipes, you can easily set up third-party libraries with a single line of command.
E.g.: blitz install tailwind will set up tailwind for you.
Testing:
Testing is preconfigured in Blitz.js. Blitz.js uses jest for testing.
First Class TypeScript Support:
Blitz.js is fully built with Typescript, and the Blitz data layer is fully end-to-end typesafe. All types are completely static without needing a separate type generation process!

Installation

Blitz.js has its own powerful CLI for creating a new blitz app, code scaffolding, and many more.

To start working with Blitz.js, you must have Node.js version 12 or newer installed on your PC. If you don't have Node.js installed, go to Node.js official documentation to install it in your system.

Run the following command to install the blitz CLI globally.

yarn global add blitz # yarn

npm install -g blitz --legacy-peer-deps # npm

While installing Blitz CLI with npm --legacy-peer-deps is needed because npm totally change the behavior of peer dependencies, and some dependencies haven't caught up

Well done, you have installed Blitz CLI on your machine. Now you can check it by running a blitz -v command.

You should get something like this. But the system option, binaries path, and blitz versions might be different.

➜ blitz -v
Linux 5.11 | linux-x64 | Node: v14.17.3

blitz: 0.39.0 (global)
blitz: 0.39.0 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.11 Pop!_OS 20.04 LTS
    CPU: (4) x64 Intel(R) Core(TM) i3-5005U CPU @ 2.00GHz
    Memory: 146.59 MB / 3.76 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.3/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: Not Found
    blitz: ^0.39.0 => 0.39.0 
    prisma: Not Found
    react: Not Found
    react-dom: Not Found
    typescript: Not Found

If you got any error, you can mention that in the comment section, I'll surely try to solve it.

After the blitz cli is installed, let's create a new blitz app.

You can create a new blitz app by using a blitz CLI.

blitz new your-amazing-app-name

Protip: If you don't want to install blitz CLI locally, you can even use it with the following command.

npx blitz new your-amazing-app-name

Blitz uses the alpha version of React, so you can use the features of the alpha release like <Suspense>.

Now, you can run the following command to run the blitz application.

yarn dev # yarn

npm run dev # npm

You should see something like this in your browser when you open http://localhost:3000.

You can try signing up and log in in to check the blitz.js default authentication setup.

Now let's learn it by building a simple Project Management application.

Routing in Blitz.js

Since Blitz.js is built on top of Next.js, it also uses the same file-based routing as Next.js.

See Blitz.js Routing docs for more info.

Building Project Management Application

We'll be using many cool features of blitz.js while building this application. We'll be using Tailwind CSS for styling, SQLite for the database (preconfigured with Prisma by default), and a default authentication system.

Tailwind CSS

For this tutorial, we'll be using Tailwind CSS for styling and I'm using Tailwind CSS in this project to show you how to install Tailwind CSS in blitz using the Recipe.

Run the following command in your project folder and see the magic of Blitz Recipe.

blitz install tailwind

When tailwind setup is completed you should see something like this.

And if you see your project folder, then you will find some new files postcss.config.js, tailwind.config.js, and app/core/styles/index.css.

tailwind.config.js includes the tailwind configurations. Blitz by default use jit mode in tailwind css.
postcss.config.js includes the postcss configurations.
app/core/styles/index.css contains the tailwind styles.

/* index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .hero {
    @apply w-full text-[#333];
  }
}

.title {
  @apply m-0 w-full pt-20;
  font-size: 48px;
}

.title,
.description {
  @apply text-center;
}

Tailwind setup is completed with just a single command. That's a magic of Blitz recipe.

Clean Up (let's clean up blitz application)

To clean up, you have to remove the

app/pages/index.tsx file.
app/api -> Because we're not creating any API routes in this project
app/pages/projects folder
app/projects folder

You might get a question when we're building a Project Management application then why the heck we are removing the projects folder too.
The reason is, I want to show you the code scaffolding feature by blitz.js.

Creating files for this project

Creating a app/pages/index.tsx file with following contents.

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
/*
 * This file is just for a pleasant getting started page for your new app.
 * You can delete everything in here and start from scratch if you like.
 */
const Home: BlitzPage = () => {
  return <></>
}

Home.suppressFirstRenderFlicker = true
Home.getLayout = (page) => <Layout title="Home">{page}</Layout>

export default Home

Later we'll use other components to show the data on the index page.

Our project is all about project management. In this, the user will be able to create projects, get projects created by the authenticated user, update projects, delete them and also manages the tasks related to those projects. We'll cover all CRUD operations.

Now we need to create the required files for all these operations, for this Blitz provides code scaffolding from its CLI.

Run the following command to see the magic.

blitz generate all project

What it will do?
It will generate pages, queries, mutations, and Prisma models for project.

It will generate the following files.

app/pages/projects/[projectId]/edit.tsx
app/pages/projects/[projectId].tsx
app/pages/projects/index.tsx
app/pages/projects/new.tsx

app/projects/components/ProjectForm.tsx

app/projects/queries/getProject.ts
app/projects/queries/getProjects.ts
app/projects/mutations/createProject.ts
app/projects/mutations/deleteProject.ts
app/projects/mutations/updateProject.ts

And update Prisma schema.

Now, you can access the project related pages by heading to:

/projects/some-id/edit
/projects/some-id
/projects/index
/projects/new

Pages for the project related task are situated in the apps/pages/projects folder, its components lie in apps/projects/components, and its backend logics lie in app/projects/queries and app/projects/mutations.

It will ask you, whether to run prisma migrate dev or not. Currently, we'll type no. Because we have to edit our schema.prisma file.

prisma migrate dev will update your database with the schema blitz generated.

As mentioned above, we'll also need the files for managing the tasks, so let's create those files.

For that, run the following command.

blitz generate all task --parent project

What this command will do?

This command will generate some of the files:

app/pages/projects/[projectId]/tasks/[taskId].tsx
app/pages/projects/[projectId]/tasks/[taskId]/edit.tsx
app/pages/projects/[projectId]/tasks/index.tsx
app/pages/projects/[projectId]/tasks/new.tsx

app/tasks/components/TaskForm.tsx

app/tasks/queries/getTask.ts
app/tasks/queries/getTasks.ts
app/tasks/mutations/createTask.ts
app/tasks/mutations/deleteTask.ts
app/tasks/mutations/updateTask.ts

The project and tasks will have a one-to-many relationship, so every task is related to a project. So, we have created the tasks with the parent of project.

Database

Since the blitz.js comes with Prisma and SQLite preconfigured, we'll use them.
Open your db/schema.prisma file and replace the Project and Task model with the following.


model Project {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  name        String
  description String
  tasks       Task[]
}

model Task {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  project   Project  @relation(fields: [projectId], references: [id])
  projectId Int
}

Install Prisma Vs code extension for syntax highlighting, formating, auto-completion, jump-to-definition and linting for .prisma files.

Now run the following command to update your database.

blitz prisma migrate dev

Now, you have give a name for this migration. You can write anything. I'll type create_project_tasks_table.

Protip: You can view the GUI for managing the database by the command blitz prisma studio.

From here you can select the model.

This much for today guys, tomorrow, I'll come with a next article in which we'll build a complete application.

What we learned today?

Installation of Blitz.js
Using recipes
Using Database
Code Scaffolding

Thanks for reading up to here.

DEV Community: Ashik Chapagain

Create your own Alternative to GitHub CodeSpaces

Introduction

Let's start

Create a ubuntu server/instance

Configuring VS Code

Conclusion

Stripe Checkout With Next.js - The Complete Guide

Hello world

Index

Introduction

Demo

Let's Build

Installation

Cleaning

Making UI

Creating the Backend

Redirecting to Stripe Checkout Page

Displaying Success and Cancel Message

Files

Conclusion

Important Links

Credits

How to get GitHub Notifications in Discord Server?

Index

Creating Discord Server

Creating GitHub Repo

Receiving Notifications

Testing

Conclusion

Here's how you can send messages to your phone with Next.js and Twilio ?

Index

What is Twilio? 🤔

Demo

Creating Next.js Project 🚀

Creating Form 🔤

Setup Twilio

Building API Route

Conclusion

Introducing Feedlr. - the ultimate tool for feedback collection.

Hey Developers 👋

Index

Introduction 🤔

Features

Easy to customize

Dark Mode

Device, OS, and Browser

Easy to use dashboard

Filter Responses By Date Range, Reaction, Device, OS, and Browser

Customize the Feedback question and Thankyou message

Use your own custom form

💡 How to use Feedlr. (For web projects)?

💡 How to use Feedlr. in React Native?

💡 How to use Feedlr. in Flutter?

How to use Feedlr by creating a custom form?

⚙️ How to customize the Feedlr. widget (For web)?

From Dashboard

Using script tag

👨‍💻 Build with:

🔰 How did I get started?

☁️ Deploying

🛣️ Roadmap

🤝 Contributing

💬 Feedback

Let's connect

Top Six Youtube Videos, You must watch

Hey, Developers

1. NUMBER ONE Trait of a Senior Developer - Do you have it?

2. FiveThings Junior Developers Need to Know

3. Hackathon! What? Why? Top tips

4. Text Editor VS IDE - know the difference (PLEASE! 🙏🏻)

5. How to make money while blogging | Competition!

6. How to use APIs

Generating Awesome User Avatars is Easy

Hey Developers

Let's Start

Avatars Types

Male

Female

Human