DEV Community: Mayar Deeb

Clerk Auth Full-Stack app (Express.js, tRPC, Expo Nextjs )

Mayar Deeb — Sat, 06 Jan 2024 09:00:00 +0000

- We'll Talk About:

What is Clerk and why?
Next-Auth vs Clerk?
Integrating Clerk with Next/Expo/Express

1. What is Clerk and why?

Auth & user management services that work with multiple frameworks,
It's easy to use, and helpful when you are using it on multiple applications.

2. Next-Auth vs Clerk?

Next-auth is free, Clerk is not.
But Clerk has a very Generous free plan (5000 Active users)
with a lot of nice features like:

Verification emails
Custom domains
Pre-built components
Clerk branding
Community support

Plus, you don't have to deal with multiple consoles for API keys, making your life easier.

Another bonus is that it works with React, Next, and Expo!

About Next-Auth it's good, but I want something that can work on both mobile and web.
It's faster to have everything I need already prepared.

3. Integrating Clerk with Next/Expo/Express

We'll explain a full-stack application featuring:

Clerk for Authentication and User Management.
tRPC fully integrated with Clerk & works with both Express.js and Next.js.
Clerk data synchronized to our backend with webhooks.
T3 turbo repo.

and for sure tRPC middleware, context, credentials & social auth, webhook, database. and so on, all included

clone The following project

git clone https://github.com/mayar4ki/Clerk-auth.git

// or 

git clone git@github.com:mayar4ki/Clerk-auth.git

you'll have there most of what you need

Folder structure

How the integration is done

Note: I won't be able to explain the whole thing because there is too much to talk about. I'll do my best to clarify things, but remember the docs are the best resource. I'm just putting things together.

React-Native(Expo): apps/expo

This Directory will have an expo application that is fully integrated with tRPC & clerk-auth.

This example includes middleware and everything you need for a real-world app

Note: Some code explanations are provided within the comments.

Next.js: apps/nextjs

This Directory will have a Nextjs application that is fully integrated with tRPC & clerk-auth

This example includes middleware and everything you need for a real-world app.

In addition to that, at apps/nextjs/src/pages/api we have two directories

api/trpc: is for tRPC to be used by the Nextjs app or react-native(expo) app
api/user: is for the webhook.
In this application, we have our database that includes our users, so when a new user signs up using Clerk we should create a profile for that user in our db so we can use it for the relations between tables.
To achieve that webhooks should be used.
Clerk uses Svix to send their webhooks.

Using the dashboard you can get everything you need to integrate the webhook

Note: I'll explain more about the webhook in the packages section.

Express.js: apps/express

This project is used to build two APIs

api/trpc: is for tRPC to be used by Nextjs, React, or React-native(expo).
api/webhooks/user: is for the webhook

Note: we can use Nextjs or Expressjs APIs. They are the same.
The goal was to do it in two different ways, but you can use whatever you like.

Now let's start with the packages

tRPC: packages/api

This package contains all of our app logic with contexts, middlewares, routes...

IMPORTANT: The original project used Express for tRPC. Ensure you import the appropriate context.

Prisma: packages/db

This package provides access to the Prisma client and seeds, allowing easy import wherever needed.

svix: packages/webhook

When a user signs up using Clerk, we should create a new user in our db. The Same thing goes for other actions. For example, if the user changes his name or profile pic, we should Sync Clerk data to our backend via webhook.

Clerk-dashboard -> We'll set up a webhook to manage these things and select the actions that should trigger it.

Once configured, your application is production-ready! 🎉🎉 I hope this clarifies things.

Useful Links 🔗

Clerk official example using Nextjs & expo: (no express, webhooks or credential auth)
https://github.com/clerk/t3-turbo-and-clerk

The link to the repo that we are explaining
https://github.com/mayar4ki/Clerk-auth

Baidu Map with react-leaflet

Mayar Deeb — Fri, 20 Jan 2023 13:32:43 +0000

- We'll Talk About:

What is react-leaflet ?
How to add Baidu maps tile ?
How to create custom CRS for Baidu maps ?
Demo Link is in the end

1. What is react-leaflet ?

Leaflet is open-source JavaScript library for mobile-friendly interactive maps, it'll let you do what ever you want like adding markers, popups, shapes, etc...

2. How to add Baidu maps tile

1-create new react app
2- Install the required dependencies

npm i leaflet @types/leaflet react-leaflet proj4 @types/proj4 proj4leaflet @types/proj4leaflet

yarn add leaflet @types/leaflet react-leaflet proj4 @types/proj4 proj4leaflet @types/proj4leaflet

3- open your app in vscode or whatever is convenient and run the project
4- in App.tsx, import leaflet css file and proj4leaflet (IMPORTATNT).

import "leaflet/dist/leaflet.css";
import "proj4leaflet";

5- import MapContainer, TileLayer from react-leaflet.
Your App.tsx should be like this.

import { MapContainer, TileLayer } from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";
import "proj4leaflet";

function App() {
  return (
    <div>
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[31.432026740690574, 120.8439179532812]}
        zoom={8}
      >
        <TileLayer
          // those two url are the same i just add both in case one of them get out of service
          url="https://maponline{s}.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl"
          //url="http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
          subdomains={["0", "1", "2", "3"]}
          maxNativeZoom={18}
          minNativeZoom={3}
          tms
        />
      </MapContainer>
    </div>
  );
}

export default App;

6- the map won't work because you need to pass crs as prop to the MapContainer component

3. How to create custom CRS for Baidu maps

1-create the crs

import { bounds, Proj } from "leaflet";

// create offset incase you want to adjust the map
const offset = { x: 40, y: -210 };

// create custom CRS for Baidu maps
// 💥💥💥 important 💥💥💥 this CRS only work with Baidu map Tile
//  if you have multi Tiles they'll break
const baiduCRS = new Proj.CRS(
  "EPSG:3395",
  `+proj=merc +lon_0=0 +k=1 +x_0=${offset.x} +y_0=${offset.y} +datum=WGS84 +units=m +no_defs`,
  {
    resolutions: [
      262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256,
      128, 64, 32, 16, 8, 4, 2, 1,
    ],
    origin: [0, 0],
    bounds: bounds([20037508.342789244, 0], [0, 20037508.342789244]),
  }
);

2- Pass it to MapContainer as a prop.
The whole code will be like this.

import { MapContainer, TileLayer } from "react-leaflet";
import { bounds, Proj } from "leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";
import "proj4leaflet";

// create offset incase you want to adjust the map
const offset = { x: 40, y: -210 };

// create costume CRS for Baidu maps
// 💥💥💥 important 💥💥💥 this CRS only work with Baidu map Tile
//  if you have multi Tiles they'll break
const baiduCRS = new Proj.CRS(
  "EPSG:3395",
  `+proj=merc +lon_0=0 +k=1 +x_0=${offset.x} +y_0=${offset.y} +datum=WGS84 +units=m +no_defs`,
  {
    resolutions: [
      262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256,
      128, 64, 32, 16, 8, 4, 2, 1,
    ],
    origin: [0, 0],
    bounds: bounds([20037508.342789244, 0], [0, 20037508.342789244]),
  }
);

function App() {
  return (
    <div>
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        // add the CRS here
        crs={baiduCRS}
        center={[31.432026740690574, 120.8439179532812]}
        zoom={8}
      >
        <TileLayer
          // those two url are the same i just add both in case one of them get out of service
          url="https://maponline{s}.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl"
          //url="http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
          subdomains={["0", "1", "2", "3"]}
          maxNativeZoom={18}
          minNativeZoom={3}
          tms
        />
      </MapContainer>
    </div>
  );
}

export default App;

And now congratulations, 🥳🥳 that's it.

In the application that I’m working on, I use Baidu for china and google for other countries by just replacing the tile and removing the crs prop from MapContainer. I explained how to do it in a previous article.

Demo Link 🔗

https://codesandbox.io/s/react-leaflet-baidu-maps-dyfi0j?file=/src/App.tsx

Another Chinese map providers

https://codesandbox.io/s/react-leaflet-chinese-providers-4c8fgx?file=/src/App.tsx

Free Google Maps in React

Mayar Deeb — Fri, 20 Jan 2023 13:32:03 +0000

- We'll Talk About:

What is react-leaflet ?
Why react-leaflet ?
How to add google maps tile ?
How to add multiple map tiles ?
Demo Link is in the end

1. What is react-leaflet ?

Leaflet is open-source JavaScript library for mobile-friendly interactive maps, lets you do whatever you want like adding markers, popups, shapes, etc.

2. Why react-leaflet ?

Easy to use, popular, free and it will save you a lot of time and effort

HOW?

In the application that I’m working on, I use Baidu for China, OSM for Syria, Google for other countries, because Google maps is blocked in China and Syria etc...
So the solution was is to use react-leaflet and change the map tile when ever I want to change the map provider.

3. How to add google maps tile ?

1-create new react app
2- Install the required dependencies

npm i leaflet @types/leaflet react-leaflet

yarn add leaflet @types/leaflet react-leaflet

3- open your app in vscode or whatever is convenient and run the project
4- in App.tsx import leaflet css file (IMPORTATNT)

import "leaflet/dist/leaflet.css";

5- import MapContainer etc... from react-leaflet.
Your App.tsx should be like this.

import {
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[31.432026740690574, 120.8439179532812]}
        zoom={8}
      >
        {/* add google map tile url  */}
        <TileLayer
          attribution="Google Maps"
          url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        />
      </MapContainer>
    </div>
  );
}

export default App;

6-And now congratulations, 🥳🥳 that's it.

I recommend that you check react-leaflet documentation, you'll find anything you want.

3. How to add multiple map tiles

All what you have to do is to import LayerGroup and LayersControl from 'react-leaflet' and use them

import {
  LayerGroup,
  LayersControl,
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>   
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[33.52355922735366, 36.317284883627735]}
        zoom={14}
      >
        <LayersControl>
          <LayersControl.BaseLayer name="Open Street Map">
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map Satellite">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer checked name="Google Map">
            <TileLayer
              attribution="Google Maps"
              url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Google Map Satellite">
            <LayerGroup>
              <TileLayer
                attribution="Google Maps Satellite"
                url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
              />
              <TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
            </LayerGroup>
          </LayersControl.BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

useful links 🔗

Demo Link

https://codesandbox.io/s/react-leaflet-google-maps-free-rwzstu?file=/src/App.tsx
Libraries that we used

https://leafletjs.com/

https://react-leaflet.js.org/
If you want to use Mapbox you'll need to get token from

https://www.mapbox.com/

Note: I'll write an article about maps that you can use in china, so if you are interested check my profile or DM me.

Easy caching with Rxjs

Mayar Deeb — Sun, 22 May 2022 17:36:45 +0000

Caching is one of the most important things to learn in any Framework.

Today, I will explain the best and easiest way I have found to cache API response where ever you want (Local storage, memory, cookies, etc. ) using Rxjs.

This way works with React, Vue, Angular, or any other Framework.

1-Create API service

API services is a great way to contain all of your API calls (if your are using Angular I think you already have one).

In Angular you'll have

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks');
  }


}

For Any other Framework
you need to install the following libraries if you don't have them already installed.

$ npm install axios rxjs axios-observable

and create your API service like this.

Note: If you don't understand, you can chech
my previous article

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks');
        }

}

export const _TaskService=TaskService.Instance;

2-Do the caching

we have many options to choose for caching, At first I'll choose Localstorage then I'll show you how to store it in memory.

1-import the following operators filter, startWith, tap
from rxjs/operators.

2-add them to your API call using pipe() .
For Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { filter, startWith, tap } from "rxjs/operators";

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks')
    .pipe(
                tap(res => localStorage['chash_key'] = JSON.stringify(res)),
                startWith(JSON.parse(localStorage['chash_key'] || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );
  }


}

For Any other Framework

import Axios, { AxiosObservable } from "axios-observable";
import { filter, startWith, tap } from "rxjs/operators";


class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks')
 .pipe(
                tap(res => localStorage['chash_key'] = JSON.stringify(res)),
                startWith(JSON.parse(localStorage['chash_key'] || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );

        }

}

export const _TaskService=TaskService.Instance;

congratulations. that's it 🥳🥳🥳...

The explanation

We use here three operators..

tap
Used when you want to transparently perform actions or side-effects, such as logging.
startWith
Used when you want to emit value before any emissions from the source.
filter
Used when you want to filter emissions from the source.

why do we use them?

we use tap to store the successful API response in Localstorage .

we use startWith to emit the cached value before the emissions arrive from the source, and we add localStorage['chash_key'] || '{}' to emit empty object in case the the cache store is empty.

we use filter to filter the final emissions, so in case the cache store is empty and the startWith operator returns empty object, the filter will block it.

If we don't add filter we might get bugs in the front end.

Note: by the way, if you are getting a raw array from the API like [], you can do startWith(JSON.parse(localStorage['chash_key'] || '[]')) and delete the filter operator.

You can stop here if you want. I'll explain now how to cache in the memory:

To cache in memory you have to do just few changes..

1-declare a private var type any in your class
2-store the API res in that var using tap operator.

your code will be like

For Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { filter, startWith, tap } from "rxjs/operators";

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

  private TasksCache: any;


all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks')
    .pipe(
                tap(res => this.TasksCache = JSON.stringify(res)),
                startWith(JSON.parse(this.TasksCache || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );
  }


}

For Any other Framework

import Axios, { AxiosObservable } from "axios-observable";
import { filter, startWith, tap } from "rxjs/operators";


class TaskService {

    private static _instance: TaskService;
    private TasksCache: any;


    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks')
 .pipe(
                tap(res => this.TasksCache = JSON.stringify(res)),
                startWith(JSON.parse(this.TasksCache || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );

        }

}

export const _TaskService=TaskService.Instance;

The end...

Now, if you try to fetch data for the first time, your successful response will be cached and used for the next fetch you do.

useful links 🔗

https://rxjs.dev/api/operators/tap

https://rxjs.dev/api/operators/filter

https://rxjs.dev/api/operators/startWith

zhaosiyang / axios-observable

Use axios in a rxjs way. use Observable instead of Promise

axios-observable

Observable (as opposed to Promise) based HTTP client for the browser and node.js

Want to use axios in a rxjs (observable) way? There we go!

This API of axios-observable is almost same as API of axios, giving you smooth transition. So the documentation mirrors the one of axios (A few exceptions will be cleared pointed out).

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Observable API
Intercept request and response
Transform request and response data
(NEW in v1.1.0) Cancel requests through unsubscribe
Automatic transforms for JSON data
Client side support for protecting against XSRF

Installing

Using npm: note: axios and rxjs are peer dependencies.

$ npm install axios rxjs axios-observable

Example

Performing a GET request

import Axios from  'axios-observable';
// or const Axios = require('axios-observable').Axios;
// Make a request for a user with a given ID
Axios.get('/user?ID=12345')
  .

…

View on GitHub

Form validation in Angular

Mayar Deeb — Mon, 09 May 2022 11:49:07 +0000

Form validation is one of the most important things to learn in Angular.

Today, I will explain the best way I have found to write validation in Angular; the goal here is to save time and have clean readable code.

1-Add `FormsModule` and `ReactiveFormsModule` to your module.

import FormsModule and ReactiveFormsModule and add them to the imports array.

import {  FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
///.... the rest or your modules
    FormsModule,
     ReactiveFormsModule,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2-Write your code

Our goal is to create the following form,so I'll be using Tailwind here.

1- In form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators,FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent implements OnInit {
  constructor() { }

// you can add initial values if you are updating something 
  formgroup = new FormBuilder().group({
    email: new FormControl('initial value here', [Validators.minLength(2),Validators.required,Validators.email]),
    password: new FormControl('', [Validators.required]),
    checkPassword: new FormControl('', [Validators.required]),
  },  { validator: this.match('password','checkPassword') }
  );

/* 
 This function will return a Boolean value. 
If you want to check whether the input 
 has any error, pass the input name as first parameter.
And
 if it has a specific error, pass the input name as first 
 parameter and the error name as the second parameter 
*/
  hasError(InputName: string,error?:'maxlength'|'minlength'|'required'|'email'|'confirmed'|'max'|'min'|'pattern'):boolean {
if(error){
  return this.formgroup.get(InputName)?.hasError(error) &&
  (this.formgroup.get(InputName)?.dirty || this.formgroup.get(InputName)?.touched)?true:false
}else{
  return this.formgroup.get(InputName)?.invalid &&
  (this.formgroup.get(InputName)?.dirty || this.formgroup.get(InputName)?.touched)?true:false
}
  }

// usually I Put this function in separate ts file
// I create helpers folder in src/helpers then create files for 
//the functions that I use too much in my project

  match(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if (matchingControl.errors && !matchingControl.errors['confirmed']) {
        return;
      }
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ confirmed: true });
      } else {
        matchingControl.setErrors(null);
      }
    };
  }

// this function won't trigger unless the form is valid
// we'll see how in the form.component.html
  onSubmit(input: any): void {
    console.log(input)
  }

  ngOnInit(): void {

  }


}

2- In form.component.html

    <form
      [formGroup]="formgroup"
      (ngSubmit)="onSubmit(formgroup.value)"
      class="w-6/12 mx-auto"
    >
      <p class="mb-4"></p>
      <div class="mb-4">
<!--Add formControlName for each input -->
<!-- If you want to apply different styles on errors all 
 what you need to do is to use the hasError() function -->
        <input
          type="text"
          formControlName="email"
          class="form-control block w-full px-3 py-1.5 text-base font-normal 
          text-gray-700 bg-white bg-clip-padding border border-solid
           rounded m-0 focus:text-gray-700 focus:bg-white focus:outline-none"
          [ngClass]="
            hasError('email')
              ? 'border-red-300 focus:border-red-600'
              : 'border-gray-300 focus:border-blue-600'
          "
          placeholder="email"
        />
<!-- hasError() function takes two parameters the first one is 
formControlName and the second is error type.
you need to know if you don't add the second parameter, it'll
 return if the input has any errors or not. -->
        <div
          class="m-1 text-red-500 capitalize"
          *ngIf="hasError('email', 'required')"
        >
          Please enter email
        </div>
        <div
          class="m-1 text-red-500 capitalize"
          *ngIf="hasError('email', 'email')"
        >
          Please enter valid email
        </div>
      </div>

      <div class="mb-4">
        <input
          type="text"
          formControlName="password"
          class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700
           bg-white bg-clip-padding border border-solid rounded m-0 focus:text-gray-700 
           focus:bg-white focus:outline-none"
          [ngClass]="
            hasError('password')
              ? 'border-red-300 focus:border-red-600'
              : 'border-gray-300 focus:border-blue-600'
          "
          placeholder="password"
        />
        <div
          class="m-1 text-red-500 capitalize"
          *ngIf="hasError('password', 'required')"
        >
          Please enter password
        </div>
      </div>

      <div class="mb-4">
        <input
          type="text"
          formControlName="checkPassword"
          class="form-control block w-full px-3 py-1.5 text-base font-normal 
          text-gray-700 bg-white bg-clip-padding border border-solid 
          rounded m-0 focus:text-gray-700 focus:bg-white focus:outline-none"
          [ngClass]="
            hasError('checkPassword')
              ? 'border-red-300 focus:border-red-600'
              : 'border-gray-300 focus:border-blue-600'
          "
          placeholder="checkPassword"
        />
        <div
          class="m-1 text-red-500 capitalize"
          *ngIf="hasError('checkPassword', 'required')"
        >
          Please enter checkPassword
        </div>
        <div
          class="m-1 text-red-500 capitalize"
          *ngIf="hasError('checkPassword', 'confirmed')"
        >
          The two passwords do not match
        </div>
      </div>

      <div class="text-center pt-1 mb-12 pb-1">
<!-- here we should add [disabled]="formgroup.invalid" 
to make sure that the user won't be able to submit unless 
the form is valid, also it's useful in testing making it easier -->
        <button
          [disabled]="formgroup.invalid"
          class="main-color inline-block px-6 py-2.5 text-white font-medium text-xs leading-tight uppercase
           rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0
            active:shadow-lg transition duration-150 ease-in-out w-full mb-3"
          type="submit"
        >
          Submit
        </button>
      </div>
    </form>

you're page should look like this

Congratulations 🥳🥳🥳 that's it.

How to make reusable State management

Mayar Deeb — Tue, 19 Apr 2022 14:10:50 +0000

Code once

If you are a programmer who likes to work with many frameworks or has to, it'll be amazing to use the same code in any framework you use, and without doing any configuration for it, just copy and paste.

- Topics we'll cover

What are Services in Angular?

why Rxjs ?

How to Create Service that works in any farmework.

How to make state Management using Rxjs.

How to use Service in React component.

1. What are Services in Angular ?

Services are a great way to share information among classes that don't know each other. by using services you'll be able to:

fetch data form any component in your app
use Rxjs operators and others.....
use it as State management ( what we'll do now)
and have a clean and beautiful code

2. why Rxjs

RxJS can be used with any frameworks or Pure Javascript without doing any configuration.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

RxJS offers a huge collection of operators in mathematical, transformation, filtering, utility, conditional, error handling, join categories that make life easy when used with reactive programming.

3. How to Create Service that work in any farmework.

install the following library

$ npm install rxjs 
// or
$ yarn add rxjs

create a folder to contain all of your services, usually I name it services
and create it in src/srvices. It doesn't matter where you create it.
create new .ts or .js file, I'll name it counter.ts (because I'm using typescript here)


class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

/////...code here

}


export const _CounterService=CounterService.Instance;

so here we create singleton class because one object should be used to coordinate actions across the system.

4. How to make state Management using Rxjs.

declar your initial_state and store(BehaviorSubject)

import { BehaviorSubject } from "rxjs";

class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

    private initial_state:number=5;

    private Counter = new BehaviorSubject<number>(this.initial_state);


}


export const _CounterService=CounterService.Instance;

the functions:
1. write a function that returns your Counter as Observable so you can subscribe to it, to observe any changes.
2. write your logic.

import { BehaviorSubject, Observable } from "rxjs";

class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

    private initial_state:number=5;

    private Counter = new BehaviorSubject<number>(this.initial_state);

//step 1
  Counter():Observable<number>{
        return this.Counter.asObservable();
      }

//step 2
increment():void{
this.Counter.next(this.Counter.getValue()+1);
}

decrement():void{
this.Counter.next(this.Counter.getValue()-1);
}

incrementBy(i:number):void{
this.Counter.next(this.Counter.getValue()+i);
}


}


export const _CounterService=CounterService.Instance;

5. How to use Service in React component.

import { useEffect, useState } from "react";
import { Subscription } from "rxjs";
import { _CounterService } from "src/services/Counter.Service";

const Index = () => {

// create Subscription array to push any Subscription we do
  let Subs:Subscription[]=[];

  const [counter, setcounter] = useState<number>();

const increment=()=>_CounterService.increment();

const decrement=()=>_CounterService.decrement();

const incrementBy=(i:number)=>_CounterService.incrementBy(i);


  useEffect(() => {

//push it to Subs to unsubscribe on component destroy 
Subs.push(
_CounterService.Counter()
.subscribe({ next: (res) => counter(res) }));

//to prevent any memory leak 
    return () =>Subs.forEach(e=>e.unsubscribe())
  }, []);

  return (
    <div>
the Counter is {{counter}}

<button onClick={()=>increment()}>increment</button>
<button onClick={()=>decrement()}>decrement</button>
<button onClick={()=>incrementBy(5)}>increment By 5</button>


    </div>
  );
};

export default Index;

How it works

The BehaviorSubject holds one value. When it is subscribed it emits the value immediately and every time this subject gets a new value it emits it too.

note: if you unsubscribe to it you won't get any new values
the end...

you might be wondering 🤔 why Rxjs? why to use this state management and leave Redux or Context or Vuex?

the answer is if you use Rxjs as API service and State management you'll be able to copy this .ts or .js file and paste it in any project you have no matter what framework you use.
No configuration is needed. Indeed you'll have great centralized code (your API calls and your State management all in one file)

useful links 🔗

https://rxjs.dev/guide/subject#behaviorsubject

API services in React or Vue using Rxjs

Mayar Deeb — Tue, 12 Apr 2022 22:10:29 +0000

- Explained About

What is Service in Angular ?
why Rxjs ?
How to Create Service in React or Vue
How to use Service in React component

1. What is Service in Angular ?

Services are a great way to share information among classes that don't know each other. by using services you'll be able to

fetch data form any component in your app
use Rxjs operators and others.....
use it as State management ( using subjects)
and have a clean and beautiful code

why Rxjs

RxJS can be used with any frameworks or Pure Javascripta .
that's mean the following code works on Vue.js or vanilla

RxJS is a library for composing asynchronous and event-based programs by using observable sequences

RxJS offers a huge collection of operators in mathematical, transformation, filtering, utility, conditional, error handling, join categories that makes life easy when used with reactive programming.

3. How to Create Service in React or Vue

install the following library's

$ npm install axios rxjs axios-observable

create a folder to contain all of your api services, usually i name it services
and I also create it in src/srvices, it doesn't matter create it where every you want.
create new .ts or .js file, i'll name it task.ts (because am using typescript here)

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

/////...code here

}


export const _TaskService=TaskService.Instance;

so here we create singleton class so we can use Subjects later also it's better than making an object of the class in each component.

3.write your api calls, I'll write a simple CRUD

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

  indexTask():AxiosObservable<any> {
   return Axios.get<any(`https://example.com/api/index`);
    }

  showTask(id:number):AxiosObservable<any> {
   return Axios.get<any(`https://example.com/api/show/${id}`);
    }

  storeTask(data:any):AxiosObservable<any> {
   return Axios.post<any(`https://example.com/api/store`,data);
    }

  updateTask(id:number,data:any):AxiosObservable<any> {
   return Axios.put<any(`https://example.com/api/update/${id}`,data);
    }

  deleteTask(id:number):AxiosObservable<any> {
   return Axios.delete<any(`https://example.com/api/delete/${id}`);
    }

}




export const _TaskService=TaskService.Instance;

and we are done here.

4. How to use Service in React component

import { useEffect, useState } from "react";
import { _TaskService } from "src/services/Task.Service";

const Tasks = () => {

  const [tasks, settasks] = useState([]);

  useEffect(() => {

    _TaskService.indexTask().subscribe({
      next: (res) => settasks(res.data),
      error: (err) => console.log(err.response),
      complete: () => {},
    });

    return () => {};
  }, []);

  return (
    <div>
      {tasks.map((task: any, index: number) => {
        return <div key={index} > {task.name} </div>;
      })}
    </div>
  );
};

export default Tasks;

the end....

if you are an Angular developer who is switching to React or Vue am sure you'll be happy to find this.

if you are not, then I suggest you to read about Rxjs especially Subjects and Operators.

useful links 🔗

https://rxjs.dev/

zhaosiyang / axios-observable

Use axios in a rxjs way. use Observable instead of Promise

axios-observable

Observable (as opposed to Promise) based HTTP client for the browser and node.js

Want to use axios in a rxjs (observable) way? There we go!

This API of axios-observable is almost same as API of axios, giving you smooth transition. So the documentation mirrors the one of axios (A few exceptions will be cleared pointed out).

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Observable API
Intercept request and response
Transform request and response data
(NEW in v1.1.0) Cancel requests through unsubscribe
Automatic transforms for JSON data
Client side support for protecting against XSRF

Installing

Using npm: note: axios and rxjs are peer dependencies.

$ npm install axios rxjs axios-observable

Example

Performing a GET request

import Axios from  'axios-observable';
// or const Axios = require('axios-observable').Axios;
// Make a request for a user with a given ID
Axios.get('/user?ID=12345')
  .

…

View on GitHub

DEV Community: Mayar Deeb

Clerk Auth Full-Stack app (Express.js, tRPC, Expo Nextjs )

- We'll Talk About:

1. What is Clerk and why?

2. Next-Auth vs Clerk?

3. Integrating Clerk with Next/Expo/Express

React-Native(Expo): apps/expo

Next.js: apps/nextjs

Express.js: apps/express

Now let's start with the packages

tRPC: packages/api

Prisma: packages/db

svix: packages/webhook

Useful Links 🔗

Baidu Map with react-leaflet

- We'll Talk About:

1. What is react-leaflet ?

2. How to add Baidu maps tile

3. How to create custom CRS for Baidu maps

Demo Link 🔗

Another Chinese map providers

Free Google Maps in React

- We'll Talk About:

1. What is react-leaflet ?

2. Why react-leaflet ?

HOW?

3. How to add google maps tile ?

3. How to add multiple map tiles

useful links 🔗

Easy caching with Rxjs

1-Create API service

2-Do the caching

The explanation

why do we use them?

useful links 🔗

zhaosiyang / axios-observable

Use axios in a rxjs way. use Observable instead of Promise

axios-observable

Observable (as opposed to Promise) based HTTP client for the browser and node.js

Features

Installing

Example

Form validation in Angular

1-Add FormsModule and ReactiveFormsModule to your module.

2-Write your code

How to make reusable State management

Code once

- Topics we'll cover

1. What are Services in Angular ?

2. why Rxjs

3. How to Create Service that work in any farmework.

4. How to make state Management using Rxjs.

5. How to use Service in React component.

How it works

useful links 🔗

API services in React or Vue using Rxjs

- Explained About

1. What is Service in Angular ?

why Rxjs

3. How to Create Service in React or Vue

4. How to use Service in React component

useful links 🔗

zhaosiyang / axios-observable

Use axios in a rxjs way. use Observable instead of Promise

axios-observable

Observable (as opposed to Promise) based HTTP client for the browser and node.js

Features

Installing

Example

1-Add `FormsModule` and `ReactiveFormsModule` to your module.