Extending UI

Wherever possible extend the UI, margins paddings to exisitng components with responsive code. We used Tamagui to build our app and it was super easy to extend the UI components to web, just by adding sm, lg, gt props to pass in styles responsive to various screen sizes.

Used Platform extensions

For platform specific resolution of certain components and behavior. It is best to colocate the files, give same names and import the code, component and metro will resolve the respective platform files. Layout and access varies distinctly from mobile to web, so writing platform specific module is a great practice we adopt. Creating filename.web.ts, wherever there is a web specific implementation needed for that feature.

Push Notification and Web Push Subscription

Building Push notification feature is straight-forward with Expo push notifications, but to add support for a push notifications on web, that needs a service worker setup to create subscription for that browser. I have created this gist to refer and implement the push notifications on expo-web.

The problem with push notifications on web is it can only be implemented in a service worker.

The IndexedDB and Cache Storage APIs are accessible in service workers. However, Local Storage and Session Storage are not.

So, we wrote every function mapping the utility to our persistent storage solution of mobile, i.e., MMKV storage, which use localstorage on web.

LocalStorage is also not reactive and to handle the variables that need to run callbacks and reactivity, added all the hooks to refer the values and user data in indexedDB.

React Navigation v7 upgrade

To build the sidebar on web, and chat interface as a common component across all tabs, we upgraded the app to v7 of react navigation making use of `tabBarPosition` to render sidebar for web platform, and end up passing the custom UI for sidebar.
We make use of layout prop of the navigators and screen to render shared components across the navigators and screens. It made features like our Chat very easy to implement as most of the heavy lifting is done by the library.
Later, we wrote the aliases against every navigator and screens, for better url structures, while implementing universal linking and deep links in the hybrid app.

Common workarounds

From writing platform based React context for auth, we use Auth0, to writing conditonal Provider wrappers.
Defining and blocking the resolution of certain components that simply does not work on web in Metro and ignoring certain parts of code for one platform and adding extra code for another. Expo 52, tree shakes the codebase and optimising the build anyways. Using Atlas is a great practice to pick and kill unused packages.

Deployment

Deployment configuration installs serve, copies the app’s source code, builds the app for the web, and sets up a service worker. It exposes port 8081 and serves the app from the /dist folder on that port.
We setup a dockerfile to host the frontend for our app on EC2, It is working alright for now. If something occurs, Expo community is always ready to help.

Backend

While building the new clients with expo-web we used the same legacy structured Postgres DB and wrote the type APIs over it.
Our backend stack is apollo server, with Graphql APIs. We are using prisma to write typed queries, mutations and resolvers and managing our database schema effortlessly. Some AI powered features and server driven UI configurations for certain apps. Usage of Graphql-shield to manage admin roles on the app. It is a great product catering 4 types of user with varying accesses, namely, Clients, VAs, Admin roles and Client’s team members.

With this, I am really looking forward to learn more about the rich apps built with expo-web. please hit me up with your implementations at X

Thanks for reading!

• email+ password

• apple sign in (iOS native)

• google signin (android native)

I wanted to have all these methods available to me on all the targeted platforms (android, iOS and web) for our react-native app. I knew a lot of auth libraries for web, and a lot of libraries for mobile only, and I've been following Supabase's launch week, for quite a while.

when the decision to move on with web build support for the app came in, I dived right in supabase-auth and ended up with a working product that supported native social logins on respective native platforms and browser based logins on web, for our react native application.

Supabase auth is more than an auth service, it provides you dashboard to manage users and implement Row Level Security for it's users. Auth hooks are an added feature to implement custom behavior on user creation. Check more here:
https://supabase.com/docs/guides/auth/auth-hooks

How to setup auth in an Expo app

We are using Tamagui(ui lib) in the app, so make sure to install it.
yarn add @tamagui

Let me just share the code snippets and a walkthrough tutorial of how you can achieve the same set of authentication, which to me sounds ideal.

Install the following packages to setup supabase client, storage and secure store for cross-platform expo app.

yarn add @supabase/supabase-js expo-crypto expo-secure-store react-native-mmkv

Create a storage.ts and supabase.ts under /utils folder

import { createClient } from '@supabase/supabase-js';
import { AppState } from 'react-native';
import 'react-native-url-polyfill/auto';
import * as SessionStorage from './storage';
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: SessionStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});
export { type AuthError, type Session } from '@supabase/supabase-js';

/**
 * Tells Supabase to autorefresh the session while the application
 * is in the foreground. (Docs: https://supabase.com/docs/reference/javascript/auth-startautorefresh)
 */
AppState.addEventListener('change', (nextAppState) => {
  if (nextAppState === 'active') {
    supabase.auth.startAutoRefresh();
  } else {
    supabase.auth.stopAutoRefresh();
  }
});

import * as Crypto from 'expo-crypto';
import * as SecureStore from 'expo-secure-store';
import { MMKV } from 'react-native-mmkv';
import { isWeb } from 'tamagui';

const fetchOrGenerateEncryptionKey = (): string => {
  const encryptionKey = SecureStore.getItem('session-encryption-key');

  if (encryptionKey) {
    return encryptionKey;
  } else {
    const uuid = Crypto.randomUUID();
    SecureStore.setItem('session-encryption-key', uuid);
    return uuid;
  }
};

export const storage = new MMKV({
  id: 'session',
  encryptionKey: !isWeb ? fetchOrGenerateEncryptionKey() : undefined,
});

// TODO: Remove this workaround for encryption: https://github.com/mrousavy/react-native-mmkv/issues/665
storage.set('workaround', true);

/**
 * A simple wrapper around MMKV that provides a base API
 * that matches AsyncStorage for use with Supabase.
 */

/**
 * Get an item from storage by key
 *
 * @param {string} key of the item to fetch
 * @returns {Promise<string | null>} value for the key as a string or null if not found
 */
export async function getItem(key: string): Promise<string | null> {
  try {
    return storage.getString(key) ?? null;
  } catch {
    console.warn(`Failed to get key "${key}" from secure storage`);
    return null;
  }
}

/**
 * Sets an item in storage by key
 *
 * @param {string} key of the item to store
 * @param {string} value of the item to store
 */
export async function setItem(key: string, value: string): Promise<void> {
  try {
    storage.set(key, value);
  } catch {
    console.warn(`Failed to set key "${key}" in secure storage`);
  }
}
/**
 * Removes a single item from storage by key
 *
 * @param {string} key of the item to remove
 */
export async function removeItem(key: string): Promise<void> {
  try {
    storage.delete(key);
  } catch {
    console.warn(`Failed to remove key "${key}" from secure storage`);
  }
}

Then create an Auth Component that has conditional, native first segregation of auth providers, via supabase.

Install the following packages yarn add expo-auth-session expo-web-browser

//Auth.tsx

import { makeRedirectUri } from 'expo-auth-session';
import * as QueryParams from 'expo-auth-session/build/QueryParams';
import * as WebBrowser from 'expo-web-browser';
import { useState } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { useMMKVObject, useMMKVString } from 'react-native-mmkv';
import { captureSentryException } from 'sentry_telemetry/sentryLogger';
import { Stack, XStack, YStack } from 'tamagui';
import MyInput from '~/components/basic/TextInput';
import { colors } from '~/constants/color';
import { fontSize } from '~/constants/fontSize';
import { supabase } from '~/utils/supabase';
import DottedLine from '../DottedLine';
import Text from '../basic/Text';
import { Button } from '../button';
import Icon from '../icon/Icon';
import WebBasedGoogleLogin from './WebBasedGoogleLogin';

WebBrowser.maybeCompleteAuthSession(); // required for web only
const redirectTo = makeRedirectUri({});

const createSessionFromUrl = async (url: string) => {
  const { params, errorCode } = QueryParams.getQueryParams(url);

  if (errorCode) throw new Error(errorCode);
  const { access_token, refresh_token } = params;

  if (!access_token) return;

  const { data, error } = await supabase.auth.setSession({
    access_token,
    refresh_token,
  });
  if (error) throw error;
  return data.session;
};

type AuthProps = {
  isAndroid: boolean;
  isWeb: boolean;
  isIos: boolean;
};
export default function Auth({ isAndroid, isIos, isWeb }: AuthProps) {
  const toast = useToastController();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [loginOrSignup, setLoginOrSignup] = useState<'Login' | 'SignUp'>('Login');
  const [accessToken, setAccessToken] = useMMKVString('access_token');
  const [refreshToken, setRefreshToken] = useMMKVString('refresh_token');
  console.log('accessToken value:', accessToken);
  const [mmkvUser, setMMKVUser] = useMMKVObject<Employee>('mmkv_user');

  const [upsertUser] = useUpsertUserMutation();

  async function signInWithEmail() {
    setLoading(true);
    try {
      const {
        error,
        data: { user, session },
      } = await supabase.auth.signInWithPassword({
        email: email,
        password: password,
      });

      if (error) {
        throw new Error(error.message);
      }

      if (session?.access_token) {
        upsertUser({
          fetchPolicy: 'network-only',

          refetchQueries: [{ query: GetLoggedInUserDocument }],
          onCompleted(data) {
            setMMKVUser(data?.register);
            setAccessToken(session.access_token);

            // TODO: Handle successful user upsert
          },
          onError(error) {
            console.log('error', error);
            captureSentryException('Error in creating new user', error as any);
          },
        });
      }
    } catch (error) {
      // TODO: Handle error in sign-in with email
    } finally {
      setLoading(false);
    }
  }

  const performOAuthGoogle = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: redirectTo,
        skipBrowserRedirect: true,
        queryParams: {
          access_type: 'offline',
          prompt: 'consent',
        },
        scopes: '',
      },
    });
    console.log('OauthGoolge', data);
    if (error) throw error;
    console.log('OauthGoolg', data?.url, redirectTo);
    const res = await WebBrowser.openAuthSessionAsync(data?.url ?? '', redirectTo);

    if (res.type === 'success') {
      const { url } = res;
      console.log(url);
      const credential = await createSessionFromUrl(url);
      console.log('after successful token generation', credential);
      setAccessToken(credential?.access_token);
      setRefreshToken(credential?.refresh_token);
      // handleSignInWithGoogle(credential);
    }
  };
  const performOAuthApple = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'apple',
      options: {
        redirectTo,
        skipBrowserRedirect: true,
      },
    });
    console.log(data?.url);
    if (error) throw error;
    console.log(error);
    const res = await WebBrowser.openAuthSessionAsync(data?.url ?? '', redirectTo);

    if (res.type === 'success') {
      const { url } = res;
      console.log(url);
      const credential = await createSessionFromUrl(url);
      console.log(credential?.access_token);
      setAccessToken(credential?.access_token);
      setRefreshToken(credential?.refresh_token);
      // handleSignInWithGoogle(credential);
    }
  };
  // async function handleSignInWithGoogle(session: Session) {
  //   const { data, error } = await supabase.auth.signInWithIdToken({
  //     provider: 'google',
  //     token: response.credential,
  //     nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
  //   });
  // }
  async function signUpWithEmail() {
    setLoading(true);
    try {
      const {
        data: { session },
        error,
      } = await supabase.auth.signUp({
        email: email,
        password: password,
      });

      if (error) {
        throw new Error(error.message);
      }

      console.log(session?.user);
      if (!session) {
        // TODO: Show email verification prompt
      }
    } catch (error) {
      // TODO: Handle error in sign-up with email
    } finally {
      setLoading(false);
    }
  }

  return (
    <Stack w={'80%'} alignSelf="center">
      <YStack w={'90%'} gap={10} alignSelf="center">
        <MyInput
          label="Email"
          // leftIcon={{ type: 'font-awesome', name: 'envelope' }}
          onChangeText={(text) => setEmail(text)}
          value={email}
          placeholder="Email"
          autoCapitalize={'none'}
        />

        <MyInput
          label="Password"
          // leftIcon={{ type: 'font-awesome', name: 'lock' }}
          onChangeText={(text) => setPassword(text)}
          value={password}
          secureTextEntry={true}
          placeholder="Password"
          autoCapitalize={'none'}
        />
        {loginOrSignup === 'Login' ? (
          <View style={[styles.verticallySpaced, styles.mt20]}>
            <Button
              backgroundColor={!email || !password ? '$background' : '$primary'}
              disabled={!email || !password}
              onPress={() => signInWithEmail()}>
              {loading ? (
                <ActivityIndicator color={colors.primary} />
              ) : (
                <Text variant="semi-bold" color={!email || !password ? 'black' : 'white'}>
                  Log in
                </Text>
              )}
            </Button>
          </View>
        ) : (
          <View style={styles.verticallySpaced}>
            <Button
              backgroundColor={!email || !password ? '$background' : '$primary'}
              disabled={!email || !password}
              onPress={() => signUpWithEmail()}>
              {loading ? (
                <ActivityIndicator color={colors.primary} />
              ) : (
                <Text variant="semi-bold" color={!email || !password ? 'black' : 'white'}>
                  Register
                </Text>
              )}
            </Button>
          </View>
        )}
      </YStack>

      {isIos && !isAndroid ? (
        <WebBasedGoogleLogin />
      ) : (
        <View style={styles.verticallySpaced}>
          <Button
            w={'70%'}
            onPress={performOAuthGoogle}
            alignSelf="center"
            style={styles.googleBtn}>
            <Text color={'white'} variant="bold">
              Sign in With Google
            </Text>
          </Button>
        </View>
      )}

      {isWeb && (
        <View style={styles.verticallySpaced}>
          <Button w={'70%'} alignSelf="center" onPress={performOAuthApple} style={styles.appleBtn}>
            <Text color={'white'} variant="semi-bold">
              Sign in With Apple
            </Text>
          </Button>
        </View>
      )}
      <DottedLine />

      <XStack gap={4} alignSelf="center">
        <Text
          onPress={() => setLoginOrSignup(loginOrSignup === 'Login' ? 'SignUp' : 'Login')}
          style={{
            textAlign: 'center',
            color: colors.primary,
            fontSize: fontSize.lg,
            fontWeight: '500',
          }}>
          {loginOrSignup === 'Login' ? 'Sign Up' : 'Log in'}
        </Text>
      </XStack>
    </Stack>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  emailInput: {
    marginBottom: 10,
  },
  verticallySpaced: {
    paddingTop: 4,
    paddingBottom: 4,
    alignSelf: 'stretch',
  },
  mt20: {
    marginTop: 20,
  },
  appleBtn: {
    backgroundColor: colors.black,
    borderRadius: 100,
    height: 50,
  },
  googleBtn: {
    backgroundColor: colors.orange,
    borderRadius: 100,
    height: 50,
  },
});

Now create respective, NativeAppleSignIn.tsx and NativeGoogleSignIn.tsx. Install the required packages by running yarn add expo-apple-authentication @react-native-google-signin/google-signin

//NativeGoogleSignIn.tsx
import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-google-signin/google-signin';
import 'core-js/stable/atob';
import {
  Employee,
  GetLoggedInUserDocument,
  useRegisterUserMutation,
} from 'generated/hooks_and_more';
import jwtDecode from 'jwt-decode';
import { Platform } from 'react-native';
import { useMMKVObject, useMMKVString } from 'react-native-mmkv';
import { captureSentryException } from 'sentry_telemetry/sentryLogger';
import { supabase } from '~/utils/supabase';

export default function GoogleSignIn() {
  const [accessToken, setAccessToken] = useMMKVString('access_token');
  const [refreshToken, setRefreshToken] = useMMKVString('refresh_token');
  const [mmkvUser, setMMKVUser] = useMMKVObject<Employee>('mmkv_user');
  const [registerUser, { data: userResponse, loading: registerLoading }] =
    useRegisterUserMutation();

  GoogleSignin.configure({
    iosClientId: process.env.EXPO_PUBLIC_IOS_GOOGLE_CLIENT_ID,
    webClientId: process.env.EXPO_PUBLIC_WEB_GOOGLE_CLIENT_ID,
    offlineAccess: true,
    scopes: ['profile', 'email'],
  });
async function onPress(){
          try {
            await GoogleSignin.hasPlayServices();
            const userInfo = await GoogleSignin.signIn();
            const decodedToken = jwtDecode(userInfo.idToken);
            const nonceFromToken = decodedToken.nonce;
            console.log(nonceFromToken);
            if (userInfo.idToken) {
              const { data, error } = await supabase.auth.signInWithIdToken({
                provider: 'google',
                token: userInfo.idToken,
              });

              console.log('google native', error, data);
              setAccessToken(data?.session?.access_token || '');
              setRefreshToken(data?.session?.refresh_token || '');
              registerUser({
                refetchQueries: [{ query: GetLoggedInUserDocument }],
                onCompleted(data, clientOptions) {
                  setMMKVUser(data?.register);
                  // TODO: Handle successful user registration
                },
                onError(error, clientOptions) {
                  console.log('error', error);
                  captureSentryException(
                    'Error in creating new user[Native Google SignIn]',
                    error as any
                  );
                },
              });
            } else {
              throw new Error('no ID token present!');
            }
          } catch (error: any) {
            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
              console.log('user cancelled the sign in', error);
            } else if (error.code === statusCodes.IN_PROGRESS) {
              console.log('user cancelled the login flow', error);
            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
              console.log('play services not available or outdated', error);
            } else {
              console.log('some other error happened', error);
            }
          }
        }}
  if (Platform.OS === 'android') {
    return (
      <GoogleSigninButton
        size={GoogleSigninButton.Size.Standard}
        color={GoogleSigninButton.Color.Dark}
        onPress={onPress}
      />
    );
  }
  return null;
}

//NativeAppleSignIn.tsx
import * as AppleAuthentication from 'expo-apple-authentication';
import {
  Employee,
  GetLoggedInUserDocument,
  useRegisterUserMutation,
} from 'generated/hooks_and_more';
import { Platform } from 'react-native';
import { useMMKVObject, useMMKVString } from 'react-native-mmkv';
import { captureSentryException } from 'sentry_telemetry/sentryLogger';
import { supabase } from '~/utils/supabase';

export default function AppleSignIn() {
  const [accessToken, setAccessToken] = useMMKVString('access_token');
  const [refreshToken, setRefreshToken] = useMMKVString('refresh_token');
  const [mmkvUser, setMMKVUser] = useMMKVObject<Employee>('mmkv_user');
  const [registerUser, { data: userResponse, loading: registerLoading }] =
    useRegisterUserMutation();

  const handleAppleSignIn = async () => {
    try {
      const credential = await AppleAuthentication.signInAsync({
        requestedScopes: [
          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
          AppleAuthentication.AppleAuthenticationScope.EMAIL,
        ],
      });
      console.log(credential);
      if (credential.identityToken) {
        const {
          error,
          data: { user, session },
        } = await supabase.auth.signInWithIdToken({
          provider: 'apple',
          token: credential.identityToken,
        });
        console.log(JSON.stringify({ error, user }, null, 2));
        if (!error) {
          setAccessToken(session?.access_token || '');
          setRefreshToken(session?.refresh_token || '');
          registerUser({
            refetchQueries: [{ query: GetLoggedInUserDocument }],
            onCompleted(data, clientOptions) {
              setMMKVUser(data?.register);
              console.log('on registered in Native Apple Login', accessToken);
            },
            onError(error, clientOptions) {
              console.log('error', error);
              captureSentryException('Error in creating new user', error as any);
            },
          });
        }
      } else {
        throw new Error('No identityToken.');
      }
    } catch (e) {
      if (e.code === 'ERR_REQUEST_CANCELED') {
        // handle that the user canceled the sign-in flow
      } else {
        // handle other errors
      }
    }
  };

  if (Platform.OS === 'ios') {
    return (
      <AppleAuthentication.AppleAuthenticationButton
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
        cornerRadius={5}
        style={{ width: 200, height: 64 }}
        onPress={handleAppleSignIn}
      />
    );
  }
  return <>{/* Implement Android Auth options. */}</>;
}

There was an issue that I face with native Google sign in on iOS for quite long and chose to drop it for a while and use an alternative that supports cross-platform auth.
For that, create a WebBasedGoogleLogin.tsx file and use it in the Auth component universally. Add the packages by running

//WebBasedGoogleLogin.tsx
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import {
  Employee,
  GetLoggedInUserDocument,
  useRegisterUserMutation,
} from 'generated/hooks_and_more';
import { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import { useMMKVObject, useMMKVString } from 'react-native-mmkv';
import { captureSentryException } from 'sentry_telemetry/sentryLogger';
import { setRefreshToken } from '~/hooks/storage/token';
import { supabase } from '~/utils/supabase';
import Text from '../basic/Text';
import { Button } from '../button';

WebBrowser.maybeCompleteAuthSession();
export default function WebBasedGoogleLogin() {
  const [userInfo, setUserInfo] = useState();
  const [mmkvUser, setMMKVUser] = useMMKVObject('mmkv_user');
  const [accessToken, setAccessToken] = useMMKVString('access_token');
  const [registerUser, { data: userResponse, loading: registerLoading }] =
    useRegisterUserMutation();
  const [request, response, promptAsync] = Google.useAuthRequest({
    androidClientId: process.env.EXPO_PUBLIC_ANDROID_GOOGLE_CLIENT_ID,
    webClientId: process.env.EXPO_PUBLIC_WEB_GOOGLE_CLIENT_ID,
    iosClientId: process.env.EXPO_PUBLIC_IOS_GOOGLE_CLIENT_ID,
  });

  useEffect(() => {
    // setAccessToken('');

    handleSignInWithGoogle();
  }, [response]);

  async function handleSignInWithGoogle() {
    if (!mmkvUser) {
      if (response?.type === 'success') {
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: response?.authentication?.idToken,
        });

        setAccessToken(data?.session?.access_token);
        setRefreshToken(data?.session?.refresh_token);
        setMMKVUser(data?.session?.user);
      }
    } else {
      setMMKVUser('');

      //error message
    }
  }

  const getUserInfo = async (token) => {
    if (!token) return;
    try {
      const res = await fetch('https://www.googleapis.com/userinfo/v2/me', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      const user = await res.json();
      console.log(user);
     //db upsert user
      registerUser({
        refetchQueries: [{ query: GetLoggedInUserDocument }],
        onCompleted(data, clientOptions) {
          setMMKVUser(data?.register);
          setUserInfo(data?.register);
          // user && getAccessToken() && navigation.replace('SetupYourOrganization');
        },
        onError(error, clientOptions) {
          console.log('error', error);
          captureSentryException('Error in creating new user', error as any);
        },
      });
    } catch (error) {}
  };

  return (
    <>
      <Text>{JSON.stringify(userInfo)}</Text>
      <Button w={'70%'} alignSelf="center" onPress={() => promptAsync()} style={styles.googleBtn}>
        <Text variant="semi-bold" color={'white'}>
          Sign in with Google
        </Text>
      </Button>
    </>
  );
}

const styles = StyleSheet.create({
  googleBtn: {
    backgroundColor: '#4285F4', // Google's brand color
    borderRadius: 4,
    paddingVertical: 12,
    paddingHorizontal: 16,
    elevation: 3,
  },
});

All of these components only work, if I pass the accessToken in the headers of my fetcher function, and to do secure API calls, add this to your fetcher headers,

const JWT_TOKEN = (await supabase.auth.getSession()).data.session?.access_token;

Make sure to add the following environment variables

//.env
EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_ANON_KEY=
EXPO_PUBLIC_IOS_GOOGLE_CLIENT_ID= 
EXPO_PUBLIC_WEB_GOOGLE_CLIENT_ID=
EXPO_PUBLIC_ANDROID_GOOGLE_CLIENT_ID=
EXPO_PUBLIC_SUPABASE_REDIRECT_URI=

I've followed the guides available on various platforms and github issues, to be able to work on this. Supabase-Auth is a marvelous library, it has every major auth provider of the internet, Supabase auth client is written in go, please do give it a ⭐ on github.

• https://supabase.com/docs/guides/auth/social-login/auth-apple?queryGroups=platform&platform=react-native

• https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=platform&platform=react-native

• https://ignitecookbook.com/docs/recipes/Authentication/

Thanks for reading this tutorial, If you found it useful. Let me know. If you have any doubts, do reach out to me on twitter @Agrit Tiwari
Cheers!

Most of the time, the focus is on the data and its relationships, which then generates more data. The rest, like creating a great user experience, builds on top of that. Every product is essentially a game played with data, even the really complex ones.

To turn your ideas into reality, everyone involved – UI designers, UX designers, and developers – needs to understand the data and how it's connected. This understanding is especially crucial for building complex applications dealing with a lot of data. Graphs become handy tools for creating a mental map of how your data is related, leading to better user design and experiences.

GraphQL Schema is like a common language that helps everyone on the team be productive and clear right from the beginning. There's a whole ecosystem supporting your journey in modeling data. GraphQL Schema acts as this shared tool that guides the development of features from the initial idea to the final product, making sure everyone is on the same page. Let's explore the world of Schema-driven development together.

Schema:

You can start writing your schema/data model in just as fast as you would describe data structure in English language. The key aspects is to define the data by naming them with context of actually what it represents. We start by defining a node like User;

type User{
id:ID!
name:String
email:String
friends:[User]
isEighteenYearsOld:Boolean
}

and you can define relationships across entities, which actually is the business logic.

Example:

Consider a basic Expense Share Tracker app, that tracks share of expense among friends, what you would want is to track every expense, who paid for it ,how much and who were part of that transaction. So this boils down to this schema of any transaction

type Transaction{
id:ID!
description:String
amount:Number
sharedInto:[User]
paidBy:User
}

Using a codegen tooling

You can generate a graphql API, with codegen tooling, be it codegen tools by the-guild.dev or a complete backend solution like Hasura or dGraph.

You can have the API up and running very quickly that matches each and every requirement of your app, like this one.

generate API: all the basic queries and mutations

---------
getUser ( id ID! ) User
ADD QUERY
queryUser ( filter UserFilter, order UserOrder, first Int, offset Int ) [User]
ADD QUERY
aggregateUser ( filter UserFilter ) UserAggregateResult
ADD QUERY
getTransaction ( id ID! ) Transaction
ADD QUERY
queryTransaction ( filter TransactionFilter, order TransactionOrder, first Int, offset Int ) [Transaction]
ADD QUERY
aggregateTransaction ( filter TransactionFilter ) TransactionAggregateResult
----------
addUser ( input [AddUserInput!]! ) AddUserPayload
ADD QUERY
updateUser ( input UpdateUserInput! ) UpdateUserPayload
ADD QUERY
deleteUser ( filter UserFilter! ) DeleteUserPayload
ADD QUERY
addTransaction ( input [AddTransactionInput!]! ) AddTransactionPayload
ADD QUERY
updateTransaction ( input UpdateTransactionInput! ) UpdateTransactionPayload
ADD QUERY
deleteTransaction ( filter TransactionFilter! ) DeleteTransactionPayload

Iteration cycle: Design Drives Schema

Product development cycles thrive when there's a swift iteration process, translating requirements and clarity into a schema promptly.

There's a delay in frontend development, but diving deep into detailed discussions about requirements during the design iteration phase can be incredibly beneficial. This process involves translating those requirements into a schema. The payoff is worth it! Building the user interface becomes a breeze when you use a typed GraphQL schema and generate corresponding APIs. Naming variables becomes more meaningful in context, and the entire development experience becomes solidly end-to-end typed, providing a fantastic experience for developers.

Do share relevant blogs in the comments if you have some different processes followed in your product cycle. Thanks

Although my GraphQL blogs are still lingering in the drafts, the allure of coding GraphQL APIs in projects is something I can't resist any day. Enter Hashnode, presenting a golden opportunity by unveiling its API to the public.

As for Raycast, I first heard about it during its X launch. Admittedly, I wasn't part of the Mac ecosystem then, missing out on understanding the unique problems it solves for Mac users.

Now, imagine bringing all these elements together into a delightful smoothie. Enter the Raycast extension for Hashnode – a potential game-changer. With the public API at your fingertips, imagine the possibilities and the seamless user experience it could offer. Don't miss out on this innovative way of publishing technical blogs; it might just be the missing piece you've been waiting for!

Requisite:

User would need hashnode username and PAT (Personal Access Token) 👆

Features

Profile Section to share articles and look up personal articles quickly

Publish Command to publish articles to your publications right from your dock.

Search Command to search blogs from subscribed publications

Future Scope of the extension

As the hashnode API evolves, and it adds more power to customize search and filter, the scope of the extension if mainly going to be focused on improving user experience.

• Introducing Oauth with hashnode.

• Better Insights on profile page about blog analytics.

• More configurable form elements to publish media rich blogs right from your dock.

• Draft first approach for your blogs.

• Powerful Search based on tags and fuzzy Search over title, author and publication

Try out the extension today on Raycast : 👆

Send some feedback to me on Hashnode or Github: https://github.com/agrittiwari/hashnode-search-and-publish ⭐

Install Raycast Extension : https://www.raycast.com/agrittiwari/hashnode-search-and-publish

Thank you ✨

Web developers often find themselves going between the realms of the client-side and server-side. And both are quite complex and abstracted as the usecases have grown with the ecosystem and community.

There's also mobile development that shoots off from the client-side library React – an open source, cross-platform framework called React Native. This is the frontend of cross-platform mobile development with various APIs to support smooth cross-platform development.

The developer experience has changed and has moved closer to the Web with React Native. It has a React-based UI and component-based rendering, though it has its own React Native elements for its UI. The UI development and state management is based on React hooks as well.

Its whole integration to back ends and third party APIs is well-supported in JavaScript, which is the core language of web development.

React Native Uses JavaScript 🎉

via GIPHY

And there is no web without JS – so if you're a web developer, you already have a solid foundation of developing in Javascript. React adds a layer of component architecture, and with that you can start building apps in React Native.

Bundler 🍬

As a web developer, it is obvious to use a javascript bundler as your codebase grows into large number of modules. A fantastic feature of a bundler is that it generates a dependency graph as it traverses your first code files. This implies that beginning with the entry point you specified, the module bundler keeps track of both your source files’ dependencies and third-party dependencies. This dependency graph guarantees that all source and associated code files are kept up to date and error-free.

There are many bundlers known to web developers like Webpack, Parcel, Rollup, Vite.js etc., which basically promotes Asset optimization, developer productivity, fastness and framework agnostism

The JavaScript bundler for React Native is called 🚇 Metro It is the default bundler for React Native which was the part of reactnative codebase but later separated and open-sourced dor community driven growth. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies. Just like web bundlers

Metro has three separate stages in its bundling process: Resolution, Transformation, and Serialization

There is another lightweight bundler called Repack in reactnative ecosystem.

Storage System 🌐💾

Browser based apps and React Native apps have a similar storage system to store information for the app runtime and globally for various usecase like session for authenticated user, Long form data over multiple pages, low network response, store accessTokens or cookies, etc.

Local/Session storage for Web Developers Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. Read more here

Async Storage and MMKV for React Native Developers. AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. Read more here MMKV is an efficient, small mobile key-value storage framework developed by WeChat. Read more here

Databases 🗃️

There are enormous variety of databases these days and it is very confusing to choose a database in web development already. Many Famous and effective dbs are MySQL, MongoDB, Oracle, Airtable and Firebase.

React Native has a good support with MySQL and Realm by MongoDB. There are two new cloud databases Supabase and PlanetScale, which you can try with your react native apps.

Backend

The backend of a react native app is well supported by NodeJS and PHP. NodeJS is a Javascript based backend and it has super compatibility with React based frontend. PHP is a scripting backend language, commonly used with Laravel framework. Both Node and PHP are well know backends to web developers.

Navigation/ Routing

Web developers are well acquainted with url based navigation. To put it simply, when you to navigate to a different page on a web app, there is a definite route for that page on the web. For example, LOGIN page has /www.example.com/login url and SIGNUP page has /www.example.com/signup url.

But in React Native, there is no url bar, so the architecture that React Native follows is of Screens navigational flow. There are Stacks, Drawers and Tab based Navigation that is followed in React Native, a standard set by React Navigation

via GIPHY

Expo team is trying to introduce, what we call, File based routing inside React Native and this will advance the world towards truly cross-platform development. You can follow up on that here

The new Architecture 📐

The current Architecture of React Native is released officially with rn --v 0.69 and it has JSI mechanism which allows a JavaScript object to hold a reference to a C++ and vice-versa. Several advantages of the new Architecture can be read here

Runtime engine 🏎️

Web developers are well aware about the V8 engine that takes our javascript and execute it in the browser and node js. It provides the runtime environment in which javascript executes. The DOM, and the other Web Platform APIs are provided by the browser. And in case of mobile development with reactnative, there is this Hermes engine, which is a JavaScript engine optimized for fast start-up of React Native apps. It features ahead-of-time static optimization and compact bytecode. what happens is it bundles the overall code of reactnative apps with whatever native modules are used in the code are compiled ahead of the time because of present JSI structure architecture. As there is no lag that was there in sending and getting message across the bridge. This results in faster initial load-up of reactnative apps. Image Ref

Renderer🖌️🎨

A renderer teaches React to talk to a specific host environment and manage its host instances. You learn more upon it here

Fabric Renderer

The Fabric Renderer exists in JavaScript and targets interfaces made available by C++ code. I see Fabric as an effort aimed to modernize the rendering layer of React Native. Fabric relies on some new strategies, such as:

• Using C++ for cross-platform "shadow" layer;
• Immutable data structures (Shadow Trees, Props, Events);
• Shared memory ownership (between JS and native);
• JSI as an interop layer between JavaScript and native;
• Type-safe data structures;
• Opt-in synchronous execution where it benefits performance, the UI responsiveness and simplifying inherently-synchronous interop APIs.
• Fabric is all about modern, easy-to-interop and performant UI

Resource: https://github.com/react-native-community/discussions-and-proposals/issues/4

JSI ↔️

Architecture inspired from web , as in web the modules are native to OS you are developing upon, we just access them wth javascript from browsers

JSI is not a part of React Native, it's a unified lightweight general purpose API for (theoretically) any JavaScript virtual machine. Now there is only one implementation of that - for JavaScriptCore VM.

JSI has/allows:

• Expose some native objects as JS objects and vice-versa;

• Expose API for synchronous calling on this object in both directions.

• Everything else should be built on top of that.

Resource:https://github.com/react-native-community/discussions-and-proposals/issues/4#issue-346233667

Turbo Modules

Advanced native modules accessible to non native language that is javascipt, because of the JSI architecture are now easy to hookup with new variations and manipulate with the common shadow tree generated in react native that resemble different native modules of android and iOS written in different languages like Java and Swift respectively

Over on twitter, @ericlewis published a sample repo with @chrfalch to showcase how to use directly C++ in a RN app (thanks to the JSI): https://github.com/ericlewis/react-native-hostobject-demo on https://github.com/react-native-community/discussions-and-proposals/issues/91

codeGen

JSI establishes interaction between JS and C++, but javascript is a dynamically typed language and C++ is a statically typed language, so codegen will auto-generate a statically typed boilerplate, incase anyone write native code with typescript.

There’s a background process in the JavaScript engine that is called garbage collector. It monitors all objects and removes those that have become unreachable or inaccessible. https://javascript.info/garbage-collection

DevTools🛠️

Web developers use Chrome Developer Tools while developing web apps to debug their application. React Native also lets developers debug with the same Chrome Dev Tools, with an option of Debug JS Remotely and integrated Inspector from developer menu of the app. You can read more about debugging in react native here

Package Culture

Web Developers are well aware and suited with the use of node modules and a marketplace for modules is npmjs.com . React Native Developers broadly uses
packages and modules from that same marketplace. These packages are built natively using JSI in C++ or Java (native code) . You can watch this video for better clarity.

Documentation updated [https://reactnative.dev/docs/native-components-android] (https://reactnative.dev/docs/native-components-android)

From here: 🌼

The web developers can easily switch/shift to mobile development. Hope this guide helps them understand the subtle differences. You can get started with React Native easily.

References:

• https://reactnative.dev/docs
• Github Issue Comments

Newsletter 🌟

If you like the following blog, consider signing up for my newsletter, where I monthly share nuggets and my learnings about React Native and Next.js World for the community

https://www.getrevue.co/profile/agrit_tiwari

via GIPHY

The world is already full of news and chaos and we rarely found joyful news, then it is better to reflect back on the joyful and funny memories and experience. What is better than sharing the funny incidents and laughter with the world and make this a better place to live in. Read and share your funny incidents, and experiences on funny-incidents⛷️⛷️⛷️

You can checkout this app and contribute fun and joy to the world or just enjoy some entries. HostedLink and RepoLink

With the growing popularity of PlanetScale database, and my love for NextJS and Next-Auth.js, I am more than motivated to build a full fledged appplication starter project with planetscale DB and nextauth as my tech stack.

🎯Focus

We are focusing to building a starter project with nextAuth integration to Planetscale database. We added the concept of funny incidents as an example of what can be made out of this starter. Now this starter takes care of Auth with smooth developer experience we had with Planetscale db. The standard aspects of any project is covered with this starter stack , i.e. NextJS, NextAuth and Planetscale DB

via GIPHY

💎Usage

You can for the repo and make your full fledged applications

🎒 Pre-requisites

It is an advance tutorial and expect you to have basic knowledge about some concepts, launguage and tech stack, like;

• Javascript
• CSS
• NodeJS ( install)
• NextJS
• PlanetScale (install from here)
• SQL database
• Basics of authZ and authN

🛠️ Setup

To begin setting up the project, open a folder to directory you like in the editor and console. Write the following command to setup the project

npx create-next-app projectName

After moving to project directory cd projectName , install these packages via CLI

npm install next-auth @prisma/client @next-auth/prisma-adapter
npm install -g prisma

Setting up NextAuth 👤and PlanetScale with Prisma

PlanetScale🧰

As I am a windows user and wanted to experience Planetscale CLI, I had to install scoop to run planetscale cli. Follow here.

• Set up the PlanetScale Account🧰 and can create a new database from PlanetScale Dashboard

Follow up on PlanetScale CLI usage here

Generate a connection string

via GIPHY

Copy the DATABASE_URL string from the .env tab and paste it into your own .envfile. The structure will look like this:

DATABASE_URL='mysql://<USERNAME>:<PASSWORD>@<HOST>/<DATABASE_NAME>?ssl={"rejectUnauthorized":true}'

NextAuth is an open-source library that provides authentication authorisation support. It provides various providers like google,facebook, apple, discord, etc for auth and many adapters are integrated like Firebase,MongoDB,FaunaDB,DynamoDB,Prisma,etc.

NextAuth provides hooks like useSession to be used at component and page level. It is very simple to integrate functionality like login and logout as NextAuth takes care all of the functionality related to jwt, refreshToken and accessToken.

NextAuth 🔐

To be able to use useSession first you'll need to expose the session context, <SessionProvider />, at the top level of your application:

pages/_app.js
----------
import '../styles/globals.css';

import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Create a file called [...nextauth].js in pages/api/auth. And write the following code:

import NextAuth from "next-auth"
import GoogleProvider from 'next-auth/providers/google'
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import prisma from '../../../lib/prisma'

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_cLIENT_SECRET,
    }),
    // ...add more providers here
  ],
})

As you can clearly see, the provider used is Google, so you need CLIENT_ID and CLIENT_SECRET, which you can retreive from here. You can follow this guide to obtain credentials and paste them in /.env file under root project directory.

Connecting Prisma to PlanetScale and designing Schema for NextAuth

via GIPHY

Create a file prisma.js under /lib folder in root directory and paste the following code:

import { PrismaClient } from '@prisma/client';

let prisma;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

Referenced from official docs : Frameworks like Next.js support hot reloading of changed files, which enables you to see changes to your application without restarting. However, if the framework refreshes the module responsible for exporting PrismaClient, this can result in additional, unwanted instances of PrismaClient in a development environment.

As a workaround, you can store PrismaClient as a global variable in development environments only, as global variables are not reloaded:

Now, invoke prisma in your application;

npx prisma init

This command does two things: (referenced from here)

• creates a new directory called prisma that contains a file called schema.prisma, which contains the Prisma schema with your database connection variable and schema models

• creates the .env file in the root directory of the project, which is used for defining environment variables (such as your database connection)

Paste the following code in file schema.Prisma

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider             = "mysql"
  url                  = env("PLANETSCALE_PRISMA_DATABASE_URL")
  referentialIntegrity = "prisma"
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String     @id @default(cuid())
  name          String?
  email         String?    @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  incidents     Incident[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

model Incident {
  id        Int      @id @default(autoincrement())
  event     String   @db.Text()
  createdAt DateTime @default(now())
  yearsAgo  Int
  country   String
  user      User?    @relation(fields: [authorId], references: [id])
  authorId  String?

  @@index([authorId])
}

Run the following command to generate prisma client and re-run whenever your model changes in schema.prisma file

prisma generate

You can see the prisma client generation graphically from this image, taken from official docs

💡 Debug type errors for your failing model in schema.prisma file. You can check and update your types mapped to Prisma with respect to MySql here

Populate the Planescale Database with updated Schema

With the database connected, you have to push the schema to your PlanetScale Database to perform read/write operation with Prisma client. Execute the following command:

npx prisma db push

prisma db push uses the same engine as Prisma Migrate to synchronize your Prisma schema with your database schema. The db push command:

Introspects the database to infer and executes the changes required to make your database schema reflect the state of your Prisma schema.

By default, after changes have been applied to the database schema, generators are triggered (for example, Prisma Client). You do not need to manually invoke prisma generate. from official docs

Dashboard will be like this:

Use Prisma Client to send queries to your PlanetScale database

Prisma client is used on the server side not browser side, so the following code takes care of GET and POST requests method on the file /api/addIncident/index.js

import prisma from "../../../lib/prisma";

export default async function handler(req, res) {
  if (req.method === "POST") {
    try {
      return await addIncident(req, res);
    } catch (err) {
      console.error(err);
      return res.status(500).json({ msg: "Something went wrong" });
    }
  } else if (req.method === "GET") {
    try {
      return await getIncident(req, res);
    } catch (err) {
      console.error(err);
      return res.status(500).json({ msg: "Something went wrong" });
    }
  } else {
    return res.status(405).json({ msg: "Method not allowed" });
  }
}

//-------GET THE INCIDENTS DATA FROM DB-------//
const getIncident = async (req, res) => {
  try {
    const incidents = await prisma.incident.findMany({
      include: {
        user: true,
      },
    });
    return res
      .status(200)
      .json({ incidents, success: "Successfully get the data" });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ msg: "Something went wrong" });
  }
};

//--------ADD DATA TO TH DB OF INCIDENTS DETAILS--------//
const addIncident = async (req, res) => {
  try {
    const { event, yearsAgo, country, authorId } = req.body;
    const incident = await prisma.incident.create({
      data: {
        event,
        yearsAgo,
        country,
        authorId,
      },
    });
    return res
      .status(200)
      .json({ incident, msg: "Incident added succesfully" });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ msg: "Something went wrong" });
  }
};

Why PlanetScale💻

I didn't knew MySQL database prior to this hackathon, but Planetscale has the best learning dashboard for a cloud db

• Smooth Developer experience
• Room for error and debugging with it branching capabilities
• Console at dashboard, I wrote many queries there and it's smooth
• Schema UI , simply awesome. I am very interested in learning and building apps with relational database, because of Planetscale DB.🥳🥳

  via GIPHY

Important Links

UI code

You can trace the UI code from the following link and visualise the UI as well:

• Github Link
• Funny-incidents/Planetscale-nextauth-starter

🧑‍🚀Deployment to Vercel

To put the app in production, there are few thngs to take care of, these are:

Do add all the domains from your vercel dashboards on https://console.cloud.google.com/ to use nextAuth in production with Google as provider.

Add the environment variables

Add the following environvent variables, NEXTAUTH_SECRET,GOOGLE_CLIENT_SECRET,GOOGLE_CLIENT_ID, and PLANETSCALE_PRISMA_DATABASE_URL on the Vercel project Dashboard

🌼 Conclusion

This project can act as a starter for nextAuth and Planetscale integration. The project itself is a happy place. Thank you for your time.

via GIPHY

Migrating a large codebase is an opportunity to learn about a lot of useful libraries and even refreshing the fundamentals of operation once again.

So, the migration is happening all over the globe, you know, to the new architecture. We at my internship, were also inclined to migrate. And I, hereby wanted to note the migration journey for the community.

Build Fails

Build failed for the

Task :app:checkDebugAarMetadata FAILED ``` Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. updated the compiledSdkVersion and targetSdkVersion to 31 and also updated API version of virtual device to 31.

React native adoption to JSI brought the C++/ Java interface close to javascript UI developer. Going to directory android/ app /build.gradle . Seeing the flag enableHermes = false as a default setting, it dawned on me to update the flag enableHermes: true // clean and rebuild if changing

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-screens:compileDebugKotlin'.
> Compilation error. See log for more details

Solution

Installing Gradle on windows machine with manual latest version released on July 14, 2022

Welcome to Gradle 7.5!

Here are the highlights of this release:
 - Support for Java 18
 - Support for building with Groovy 4
 - Much more responsive continuous builds
 - Improved diagnostics for dependency resolution

Following the official react native docs, The --distribution-type=all tag is in difference with --distribution-type=bin tag on gradle official docs for installation.

*What Went wrong

Could not resolve all files for configuration ':classpath'. Could not download tink-1.3.0-rc2.jar (com.google.crypto.tink:tink:1.3.0-rc2) Could not get resource 'https://jcenter.bintray.com/com/google/crypto/tink/tink/1.3.0-rc2/tink-1.3.0-rc2.jar'. java.io.IOException: Data error (cyclic redundancy check)

BUILD FAILED in 12s

    at makeError (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:174:9)
    at E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
 at async Command.handleAction (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli\build\index.js:192:9)

Solution: Added mavenlocal in the top-level build.gradle file ref

 repositories {
        mavenCentral() //added this line to solve classPath bug 
        google()
        jcenter()
    }

But this lead to another bug

* What went wrong:
A problem occurred configuring root project 'xyz.
> Failed to create MD5 hash for file content.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 14s

    at makeError (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:174:9)
    at E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli\build\index.js:192:9)
info Run CLI with --verbose flag for more details.

Solution: I uninstalled reactnative cli package which was installed globally( no idea about its impact)

https://github.com/invertase/react-native-gradle-plugin

Can look into this to confirm

With respect to Android

• Installed Codegen with yarn add --dev react-native-codegen

"The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets

• and bundleReleaseJsAndAssets" This react.gradle file is replaced by the react-native-gradle-plugin

* Added `react-native-gradle-plugin' with `yarn add --dev react-native-gradle-plugin`
Updated the setting.gradle file with

includeBuild('../node_modules/react-native-gradle-plugin')

include(":ReactAndroid") project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')

This [ReactAndroid](https://github.com/facebook/react-native/blob/main/ReactAndroid/DevExperience.md) project is the new build of reactnative for android, it uses react-native-gradle-plugin for all the java and kotlin logic that lived inside the react.gradle This helps React Native to build and compile native code/ C++ in the CMake.Android.mk files

* Added ```     // Add those lines
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:4.1.2")

in the android/build.gradle directory in dependencies obejct to provide the link to reactnative -gradle-plugin so that it can use it during build process.

• Added apply plugin: "com.facebook.react" // Add those lines as well react { reactRoot = rootProject.file("../node_modules/react-native/") codegenDir = rootProject.file("../node_modules/react-native-codegen/") } int he module level build.gradle file and Finally added implementation project(":ReactAndroid") under dependencies so that react-native uses source code from the ReactAndroid project. Read here

• Install the new Gradle plugin for new Architecture

Ran the following command

npx react-native run-android

Packages Out of Date

• Evidently, React Native version 69 has 18.0.0 as mininmum version of react. The react 18.0.0 version has introduced many revolutionary changes and advanced support methods and hooks for better UI development access.

• Following react, it was obvious for react-test-rendererto break. Updating the architecture, I came to know alot about the code and portion of code I haven't worked upon.

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or jsdom.( definition copied from docs)

• React Query for React Native is limited evolved as it is for react-web. Whatever be the reason, it broke with version 3.34.1 and now upgraded to version 3.39.2

It is a library that simplifies the way we fetch, cache and synchronize data from a server. Basic react library is insufficient when requirements like caching, retries and deduping comes into picture.

• The wonderful library react-native-async-storage/async-storage@"^1.15.11" also breaks support for the new architecture. This package has latest release [version@"1.17.7"]

• After seeing the breaking version compatibility of almost every package, I moved on to upgrade the all packages with npm update

  
  "dependencies": {
    "@azure/msal-browser": "^2.19.0",
    "@microsoft/microsoft-graph-client": "^3.0.1",
    "@react-native-async-storage/async-storage": "^1.17.7",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^7.1.7",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-firebase/app": "^14.5.1",
    "@react-native-google-signin/google-signin": "^6.0.1",
    "@react-native-picker/picker": "^2.2.0",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "axios": "^0.21.4",
    "buffer": "^6.0.3",
    "d3-scale": "^4.0.2",
    "email-validator": "^2.0.4",
    "install": "^0.13.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "npm": "^7.24.2",
    "password-validator": "^5.2.1",
    "react": "18.0.0",
    "react-native": "0.69",
    "react-native-animatable": "^1.3.3",
    "react-native-app-auth": "^6.4.0",
    "react-native-calendars": "^1.1268.0",
    "react-native-contacts": "^7.0.2",
    "react-native-countdown-component": "^2.7.1",
    "react-native-date-picker": "^4.1.1",
    "react-native-dropdown-picker": "^5.2.3",
    "react-native-email-link": "^1.12.2",
    "react-native-geocoder": "^0.5.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-network-info": "^5.2.1",
    "react-native-numeric-input": "^1.9.0",
    "react-native-pager-view": "^5.4.9",
    "react-native-picker-scrollview": "^1.0.1",
    "react-native-popup-menu": "^0.15.11",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-native-select-dropdown": "^2.0.4",
  
    "react-native-svg": "^12.1.1",
    "react-native-svg-charts": "^5.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-webview": "^11.15.0",
    "react-native-wheel-scroll-picker": "^0.2.4",
    "react-native-wheel-scrollview-picker": "^1.2.2",
    "react-query": "^3.39.2"
  },
  "devDependencies": {
    "@babel/core": "7.15.0",
    "@babel/runtime": "7.15.3",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "18.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
  }
  

• The command failed with error on react-native-picker/picker package

  npm ERR! Could not resolve dependency:
  npm ERR! peer react@"16 || 17" from @react-native-picker/picker@2.4.2
  

This error shows that certain packages are lacking compatibiltiy with reactnative version 0.69 .

• Package react-native-numeric-input just shown a dependency error of another package react-native-vector-icons@"^8.1.0".

• So, after updating the react-native-vector-icons to version 9.2.0 and removing the wro packages from codebase. command npm i ran without an error.

• Launching my app with usual react-native android command for starting after building. react-native-google-signin/google-signin package throws a warning for invalid configuration

  "dependency.platforms.ios.project" is not allowed.
  

  Again my package was outdated. Upgrade it to 8.0.0 version

• Found another package react-native-svg which was to be updated from 12.1.1 to 12.4.0 but another package react-native-svg-charts dependent on lower versions of svg is out of date with new version of react-native-svg. Maintainers have not released a new version from last 2 years

Goal ⛰️🚵

In this blog, we will build a full stack application using nextJS and mongoDB. Here is the product of our effort https://goals-of-our-generation.vercel.app/. 👈

This is the first blog of the series with minimal features. As the app evolves in further tutorials, there will be new functionalities and added complexity. We will explore many important functionalities of web ecosystem and there will a finished- working application with every blog.

Pre-requisites ✋

There are fair amount of pre-requisites to understand how this project is working, like:

• Understanding of Javascript
• Basics of React and state management
• Basic knowledge of mongoDB, the understanding of mongoDB will improve as project evolves
• Node.js installed. Node.js will help us run NPM commands to install any necessary dependencies that will help us build our Next.js application.
• Since we are using NextJS, prior experience/exposure to this framework will be helpful

Tech Stack 🔧⚙️

NextJS by Vercel has changed the way of developing web.

As we are going to use mongoDB, we can use template provided by Vercel as --with -mongodb or we can begin with npx create-next-app. Example templates provide little boost in development, plus they are up-to-date with the methods/code used in setting up the connection with xyz(mongodb, in our case)

Setting up MongoDB Atlas Cluster

To work with the template, we must have the uri string required to establish connection between our application and mongoDB atlas cluster. MongoDB Atlas is a cloud database service for MongoDB. This means that you get to store and access your data from a remote computer. This eliminates the process of setting up MongoDB locally on your computer.

To use MongoDB Atlas, you need to have an account. If you don’t have one, create a free account. If already you have one, login from here.

Get the uri string

Once you create an account, a project will be created and assigned a free MO Sandbox with a Shared cluster. Create user and password and add your device IP to access the cluster.

Copy that connection String

Setting up project

To begin with, NextJS provide a command to build the scaffold of application and start development via starter templates and as we are using template for mongoDB integration. Create folder and change your directory to it and run this command

npx create-next-app --example with-mongodb nextjs-mongodb-v1

nextjs-mongodb-v1 is the < projectName >. This will create the basic template. Now go to the directory by cd nextjs-mongodb-v1.

Now add that connection string that you copied from mongo atlas dashboard in the env.local file by assigning it to variable MONGODB_URI and replace the with your password

and run npm run dev. This will start your development server in your local at port 3000 and if you can see this screen ⬇️, we are good to go.

Styling via Tailwind and custom CSS🕴️

We need to provide styling, of course, to the application and Tailwind CSS works just fine along with nextJS. We can install tailwind in many ways, but using tailwind css CDN link works just fine for now. Copy the CDN link and paste it inside of index.js.

Created a styles.css at the root folder to import it inside the _app.js file. This _app.js file is created to pass down basic styling to all the components. This is _app.js file.

import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

📝Form Component

To perform CRUD operation, it is obvious that you need a form. Here is the code for the Form Component inside the directory /Components/Form/index.js

import { useState } from "react"
import { SuccessAlert, ErrorAlert} from "../Alert";

 export const GoalForm = () =>
{ const [error, setError] = useState('');
const [message, setMessage] = useState('');

const [name, setName] = useState('');
const [age, setAge] = useState('')
const [description, setDescription] = useState('')

const postGoal = async (e) =>
{
    e.preventDefault()

    setError('')
    setMessage('')

    if(!name || !age || !description) return setError('All Fields are necessary!')
    let goal = {
        name,
        age,
       description,
        date:new Date(),


}
    console.log(JSON.stringify(goal))
    console.log(goal)
    //console.log(JSON.parse(details))
    try {
        const response = await fetch('/api/goals', {
            method: 'POST',
            body: JSON.stringify(goal)
        })

            //get the data

            let data = await response.json()
    console.log( `this is from goal component ${data.message}`)
            if (data.success) {
                 // reset the fields
                 setName('');
                setAge('');
                setDescription('')
                 // set the message
                return setMessage(data.message)
            } else {
                return setError(data.message)
            }


    } catch (err) {
        console.error('error happened here', err)
    }

}
    return (
        <div className="m-60 p-10 mt-20 px-70 border-1  bg-blue-200  flex flex-col shadow-2xl rounded-lg w-11/12 inset-5">



                     {error ? <ErrorAlert error={error} /> : null}

                {message ? <SuccessAlert msg={message}/>: null}

        <strong className="underline ">Imagination is a powerful tool</strong>


        <form onSubmit={postGoal} className="form my-2 flex flex-col">

        <label className="p-2 decoration-solid    ">Your Life/Current Goal</label>
        <input className="form-input border border-gray-400 p-2 rounded-lg appearance-none focus:border-gray-500 focus:outline-none mb-2" name="description" value={description} onChange={(e)=>setDescription(e.target.value)} type="text" placeholder="Your Goal" />

                    <label className="p-2 decoration-solid    " >Name</label>
                    <input className="form-input border border-gray-400 p-2  rounded-lg appearance-none focus:border-gray-500 mb-2 focus:outline-none" name="name" value={name} onChange={(e)=>setName(e.target.value)}   type="text" placeholder="Your name" />         

                    <label className="p-2 decoration-solid">Your Age <i className="fa fa-twitter" aria-hidden="true"></i></label>
                    <input type="number" className="form-input border border-gray-400 p-2 mb-4 rounded-lg appearance-none mb-2 focus:border-gray-500 focus:outline-none" name="age" value={age} onChange={(e) =>setAge(e.target.value)}  placeholder="Your Age (years old)" />



            <button type="submit" className="rounded-full bg-blue-600  p-1 border border-gray-600">Submit</button>

    </form>

      </div>
)   
}

Alert Components

The components used to display the status of API call are stored in directory `/Components/Alert/index.js

import AlertStyle from './Alerts.module.css'
export const SuccessAlert = ({msg }) =>
{
    return (
        <div className={AlertStyle.successDiv}>
            ✅  {msg}
        </div>
    )
}
export const ErrorAlert = ({error }) =>
{
    return (
        <div className={AlertStyle.errorDiv}>❗❗   {error}</div>
    )
}

styling for alertComponents is in Alerts.module.css

.successDiv{
background-color: rgb(21, 177, 21);
color:white;
font-size: 14px;
padding:10px;
margin-bottom: 10px;
border-radius: .25rem;
}
.errorDiv{
background-color: rgb(223, 65, 60);
color:white;
font-size: 14px;
padding:10px;
margin-bottom: 10px;
border-radius: .25rem;

}

Little cheating with mongoDB

To make this work, we are doing a brute force, hard document generation in the mongodb collection 'goals' using atlas cluster UI.

🌐 /pages/api/goals

This is the api endpoint, where we will handle all the requests made to db via certain events. The GET method is used in the /goals age to render all the goals, for which, UI code is down below.

import clientPromise from '../../../lib/mongodb'


export default async function handler(req, res){

    switch(req.method){
        case 'POST':
            return addGoal(req, res)
        case 'GET' :
            return getGoals(req,res)
    }
}


async function getGoals(req, res){
    try {
        //connect to database
        console.log('hitting api')
 const client = await clientPromise;
 const db = client.db()
 const goal= await db.collection('goals').find()
 const response =await goal.next()
 const goalsArray = response.goalsArray
 console.log(`this is ${response}`)
console.log(response.goalsArray)
        return res.json({goalsArray})
    } catch (error) {
         // return an error
         return res.json({
            message: new Error(error).message,
            success: false,
        })
    }
}


async function addGoal (req, res){


    try {
        let goal = JSON.parse(req.body);
       // console.log(goal)

        let{ name, age, description} =goal

        if(!name || !age || !description){
            throw new Error("Invalid Request");
        }
        //connect to database
 const client = await clientPromise;
 const db = client.db()


//POST request
const response = await db.collection('goals').updateOne({}, { $push: { "goalsArray": goal } })
 console.log(response)

//return a message
return res.json({
    message: 'Details updated successfully',
    success: response
})
    } catch (error) {
        // return an error
        return res.json({
            message: new Error(error).message,
            success: false,
        })
    }
}

📈 📈UI so far

/pages/goals 🔆🔆

This page renders the list of goals. There are two components built to deliver the UI of this page.

import Head from 'next/head'
import GoalsList from '../Components/Goals/GoalsList'
import Link from 'next/link'
const Goals=()=>{
    return (
    <div className="container">
<Head>
        <title>All Goals</title>
        <link rel="icon" href="/favicon.ico" />
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossOrigin="anonymous"></link>

      </Head>

      <main className=' box-content  items-center px-10 py-4'>
        <h1 className="title box-content pt-4 ">Goals of our Generation 👀👀</h1>
        <strong >
            <img src="/pointer.png" alt="pointer icon" className="icon float-right" />
            <Link href='/goals' className="subtitle pt-2 float-right">
            You can add your goal to this list, here</Link>
            </strong>
        </main>
         <GoalsList/>
         <footer > 
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel 
        </a>
<strong> Made with ❣️</strong>
        <a href="https://www.twitter.com/agrit_tiwari"> @agrit_tiwari </a>
      </footer>
    </div>)
}

export default Goals

GoalsList Component

TO render the goals in such a fashion that latest added goal is rendered at the top, we must blend custom css along with tailwind in example. Custom CSS also gives more freedom with developer tools as well. The components directory is like this:

/Components/Goals/GoalsList.jsx

import React, { useEffect,useState } from 'react'
import GoalCard from './GoalCard'
import styles from './Goals.module.css'

const GoalsList = () => {
    const [data, setData] = useState([])
    const [isLoading, setLoading] = useState(false)

useEffect(()=>{
    setLoading(true)
    fetch('api/goals')
      .then((res) => res.json())
      .then((data) => {
        setData(data.goalsArray)
        setLoading(false)
      })
},[])

if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
//console.log(data)
    return (
    <div className={` ${styles.list}`}>
{data.map(( goal,index)=>(<GoalCard key={index} goal={goal}/>))}    
    </div>
  )
}

export default GoalsList

/Components/Goals/GoalCard.jsx

import React from 'react'
import styles from './Goals.module.css'
const GoalCard = ({goal}) => {
  return (
    <div className={` ${styles.card}`}>
      <div className={`${styles.cardDiv1}`}>
        {console.log(goal)}
        <p>👉 {goal.description}</p>
        <span>{goal.date.slice(4, 15)}</span>, <span>{goal.date.slice(16, 21)} IST</span>
      </div>
      <div className={`${styles.cardDiv2}`}>
        <strong>🗣️{goal.name}</strong>
        <p>{goal.age} years old</p>
      </div>
    </div>
  )
}

export default GoalCard

/Components/Goals/Goals.module.css

.list{

    width:550px;
    list-style-type: none;
    display: flex; 
    flex-direction: column-reverse; 
    vertical-align: top;
    padding: 20px;
background-color: rgb(221, 148, 70);


}

.card{
background-color: rgb(172, 175, 177);
border-radius:20px;
padding:10px 4px 8px 4px;

margin: 4px;
}

.cardDiv1{
    margin:5px;;
    width: 98%;
    background-color: rgb(209, 206, 208);
    border-radius: 20px;
    padding: 6px;

}
.cardDiv1 > p{
    font-size: 20px;
   padding-bottom: 0%;
    border-radius: 10%;
    /* border: 1px solid rgb(46, 46, 46);  */
    text-decoration-color: rgba(0, 0, 0, 0.603);
    text-decoration: solid;
    text-shadow: darkblue;
    text-align: center;

}
.cardDiv1 > span{
    text-align: right;
}
.timezone{
    font-size: smaller;
}
.cardDiv2{
   margin: 7px;
   width: 98%;
    background-color: rgb(209, 206, 208);
    border-radius: 20px;
    padding: 2px;
    display: flex;
    padding: 6px;
}

.cardDiv2 > p{

    font-size: 14px;
    flex: 1;
    text-align: end;
    margin-right:2px ;
}

/pages/index.js

import Head from 'next/head'
import { GoalForm } from '../Components/Form'
import clientPromise from '../lib/mongodb'
import Link from 'next/link'


export default function Home({ isConnected }) {
  return (
    <div className="container ">
      <Head>
        <title>Write your Life Goal</title>
        <link rel="icon" href="/favicon.ico" />
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossOrigin="anonymous"></link>

      </Head>

      <main className='box-content  items-center px-10'>
        <h1 className="title box-content  pt-4 ">
          Write about your life Goal 🥇💭
        </h1>

        {isConnected ? (<div className="flow-root">
          <strong >
            <img src="/pointer.png" alt="pointer icon" className="icon float-right" />
            <Link href='/goals' className="subtitle pt-2 float-right">
            See the List of all wonderful Goals people are working on </Link>
            </strong>
        </div>

        ) : (
          <h2 className="subtitle box-content  ">
          There is no access to Dreamland
          </h2>
        )}
</main>
      <div>
        <GoalForm/>
      </div>
      <footer > 
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel 
        </a>
<strong> Made with ❣️</strong>
        <a href="https://www.twitter.com/agrit_tiwari"> @agrit_tiwari </a>
      </footer>
    </div>
  )
}

export async function getServerSideProps(context) {
  try {
    await clientPromise
    // `await clientPromise` will use the default database passed in the MONGODB_URI
    // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the folloing code:
    //
    // `const client = await clientPromise`
    // `const db = client.db("myDatabase")`
    //
    // Then you can execute queries against your database like so:
    // db.find({}) or any of the MongoDB Node Driver commands

    return {
      props: { isConnected: true },
    }
  } catch (e) {
    console.error(e)
    return {
      props: { isConnected: false },
    }
  }
}

UI 🎴🎴/pages/goals.js

The UI of the following code is like this:

Deployed on Vercel🌐

This is the link for version-1 towards building full fledged app on nextJS + mongodb.

nextjs-mongodb-v1.vercel.app or https://goals-of-our-generation.vercel.app/

🌼🌼Thanks for following along.

Thanks JC Smile for reviewing.

This blog is written to demonstrate various approaches of rendering on web and discussing the pros and cons of each way. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.

Web performance is itself a large field, but with the advent of NextJS. It becomes easy to demonstrate the effect of different rendering approaches under its umbrella.

👉 Follow this project

Do open network tab in chrome devtools .

• Client SIde Rendering
• Server Side Rendering
• Static Side Generation

Client Side Rendering

Client-side rendering (CSR) means rendering pages directly in the browser using JavaScript. All logic, data fetching, templating and routing are handled on the client rather than the server.

• Server renders the page without any dynamic data
• Client Immediately shows the page (without any dynamic data)
• Page displays a loading state (for missing dynamic data)
• NextJS makes all of the API calls (to fetch dynamic data)
• NextJS renders the missing dynamic data on the client side

👉 Check that there is no data like neighbouring countries in the source code of the /csr route of the project

This diagram can be verified in the network tab of chrome dev tools. In this project, take note of TTFB (Time to First Byte) and compare.

Server Side Rendering

Server-side Rendering or SSR generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.

This diagram can be verified in the network tab of chrome dev tools. In this project, take note of TTFB (Time to First Byte) and compare.

👉 In this project as well, you can see there is no loading state as it were in the csr route. The content is prerendered on the server and sent to client. It does increase the TTFB.

👉What NextJS does fantastically well is it provides <Link/> tag that supports prefetch of the content and NextJS sents an API reques to the server and server runs the getserversideprops, server returns json as a response NextJS uses the JSON to render the page and provides wonderful experience for the heavy server side rendered pages so that first interaction gets quicker on client side page request.

Static Rendering or Static Site Generation

Static Rendering happens at build time, the pages are pregenerated with static content and markup and has very low client side javascript. Static renders can be deployed to multiple CDNs to take advantage of edge-caching. This gives the ability to load the static content in a fastest manner, the only time it takes is during bundling and build of the code. Each page is part of the build and thus there is increased bundle size, but it is fair with the usecase.

👉In this project, you can experience the loading speed of statically generated page on /ssg route. You can also checkout my portfolio at www.agrittiwari.com which has articles section as demonstration of SSG.

👉Do check the source code of /ssg page as it will have all of the content in it which was absent in the /csr.

👉 You can read about Incremental Static Regeneration here which is a wonderful add-on on Static Site Generation here

Conclusion 🧐

So, the web rendering is subjected to the use case and business requirement as it has been classified and developed based on its merits and demerits. I hope you learnt something from the article and you can refer to the repository of this project I built for a talk in a community (devKode).

Feel free to star ⭐️ the project if you found useful - github.com/agrittiwari/devkode-novembertalks-nextjs

Buy me a book 📚

Thank you 😇👋

Errors

1. Syntax Error

This is the most common Error and it happens when you use wrong syntax in comparison to predefined syntax. For example -

let name = 'agrittiwari':

2. Reference Error

Reference Error is thrown when we want to refer a variable that does not exist, it means the variable is not declared. For example -

let name = 'agrittiwari';
console.log(age);

3.Range Error

RangeError is thrown to indicate that a passed function argument does not fall within the valid set or range of acceptable values. For example -

let arr = new Array(50000000000);

The maximum number of elements that you can set for an array is ( 2^32 -1 )

4.Type Error

The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.

A TypeError may be thrown when:

an operand or argument passed to a function is incompatible with the type expected by that operator or function; or when attempting to modify a value that cannot be changed; or when attempting to use a value in an inappropriate way

For example -

let number = 5;
number.split("");

5. URI Error

URI - Uniform Resource Identifier URI in javascript has the functions such as decodeURI(), decodeURIComponent(), Etc., ANd the URIError is thrown whenever a wrong character(s) is used in URI function. For example -

decodeURIComponent("%")

6. Eval Error

The Eval Error just simply indicates an error regarding the global eval() method.

This is no longer thrown by the current javascript engine or EcmaScript Specification. However, it still exists for backward compatibility.

7. Internal Error

This error occurs internally in the JS engine, especially when it has too much data to handle and the stack grows way over its critical limit.

This also occurs when the JS engine is overwhelmed by too many recursions, Switch cases, etc.

Debugging errors is the skill of a pro programmer and it can only be sharpen by resolving as much errors as you can from your codebase. It is a great way to strengthen your core concepts about the language.

Thank you for reading!!

Starting as a GitHub Contributor

Just get started with your project by setting up the project locally cloning the main repo, using HTTPS method git clone <repo_url>.git or Github CLI.

In case you are restarting your work as Contributor on a project, make a pull request to the main branch to make your local version up-to date with remote main.

git pull main

Before you start working

Before you start working on your local machine, it is better to checkout to a new branch to change you current branch so as to have a local main to go back in case of endless loop or unorganisable state of code and prevent any unwanted future push.

git checkout -b <new_branchname>

You can switch back to main or any other branch you created locally by simply git switch <branchname>

When its time to commit your contributions

When you've added changes and made your contributions to the new branch you created, you want to give meaning to that contribution by pushing it to remote main. But, never ever directly push to main branch, it is best to follow this flow to commit your changes,

git add .
git commit -m  "<meaningful comment about changes you made or features you added>"

then you need to push these change to your remote branch that you created locally, It gives a certain confidence and a good second eye check on your code before actually pushing it to main.

Very Important git push origin <branchname>

Your commits will reflect on the remote repository on your branch and an option to create a pull request. While creating a pull request, take a look at changes and provide a little explanation about the feature or changes you added with respect to main branch in the comment section.

Don't use your ability to merge all the time

As a contributor, you got access to merge any pull request to the main, but do not excessively merge the requests to main. It may breakdown the workflow for other and then they need to update their local version more randomly. Alert rest of the contributors about the pending merges and announce about it before/after merge, so they don't have to work on the out-of date version of the product. This boosts your credibility and trust. Read more here

Keep your local setup up-to-date

Its clear to you about the changes you made, but to be reassured about the version you are currently working is up-to-date. Make sure to fetch the latest version of remote main and merge it with your local setup and reiterate the steps form step 2.

git fetch origin
git merge origin/main

This basic flow of doing contributions may prove to be helpful to boost your effectiveness as a Github Contributor. Till then, keep coding and keep contributing. You can read more here

#contribution #github #community

Focus on your Tech stack strengths

Do not forget that this collaboration is initiated for the building of a project. Put focus on your tech stack strengths and take responsibilities to build certain parts and functionalities of the project. Do not wait for someone to direct you in some direction and follow along the development journey of the project. If your stack strengths are already taken by someone else, do not hesitate to learn a new stack either. And continuously give your feedback and contributions that you wanted to take responsibility of.

Live coding and debugging

Connect on a zoom call and live share your code, do talk about what you are coding or debugging in that call. It maintains flow of information fluent. Do not engage in other task while you are live sharing session is still on, it reflects your busyness. Ask them to schedule sessions in your free time. Dedicated multiple coders in meeting counts to numerous eyes and as they say, "second eye is always a good debugger" . So it will boost productivty and boost your project development.

Ask Questions

Do ask away any question that bugs your understanding of the code. It is the reason to collaborate with high skilled teammates, that you learn to ask good questions and grow your skills. Honing your skills comes from great question and great question arises from in-depth code-reviewing. Do read other player's code as it will help you to understand the overall flow of your project from scratch. And knowing the actual reason of something that happens in code is the real learning you should seek in a collaboration.

Learn how to use github effectively as a Contributor!

Learning how to use github for collaboration on a project while working remotely is very crucial because it is the platform that provides you the traction from the friction of localhood. Learning how to contribute on github repo without disturbing the main branch of project is an important skill to learn. And only way to learn is by doing. Do as much as possible of github contribution to inculcate the habit of creating pull request for contribution to main branch.

Communication is the key

Interact clearly as much as possible with your teammates. Declare your intentions and ideas openly without any hesitation. Do not preconceive any judgement or comment from your respective teammates. Talk to them with respect and apologise on events when communication is flawed or intent is misinterpreted or your actions caused some error in the Software/Application development life cycle. It will all happen, but you neeed to learn to explain your intent and apologise for the mistake and learn from it.

#collaboration #communication #mintbean #remote #remotework

" Web accessibility is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages "

Its about making or solving for everyone Making your website responsive

What is officially Accessibilty?

-> Access the web in better ability, enabling keyboard navigation, voice-to-text feature, enabling mouse scroll events; overall better User Experience

How to make accessibility rich web-apps?

-> With web, generally we follow Web Content Accessibility Guideine (WCGA)

• Perceivable part : adding attributes to semantic HTML, alt tag to element, making form accessible through keyboard, enabling navigation through keyboard, adding lang attribute in HTML, etc.

• Robust: use standardised semantic element like <article/> because it helps screen reader users to navigate, key board first approach for operable part

Different level of Accessibilty

• Level A -> Aria level
• Level AA -> allows yout to hear captions
• Level AAA -> sign language implementation (extreme level)

AI and machine learning algorithms are leading way to increase power of browser.

• In web, tab order, tab index

Native mobile Accessibilty

Android and iOS have different specification for WCGA

• Android has talk-back and iOS has voice-Over , these are screen readers to provide focus on some elements. Read more on this here.

• There are different defaults, no possible one-to-one mapping when we consider android and iOS separately

How we can enable accessibility in React?

• Use component from multiple libraries like Modals to avoid edge cases; Libraries like material-ui and unstyle are good options as mostly they cover accessibiility roles well, like focus trapping, tab-index; Just go with which comes with less styling baggage.

React aria and React Spectrum

• The way Adobe team decoupled accessibility via hooks into JSX is supercool. Keyboard, mouse and tab accessible.

-Another library downshift

(Reactnative aria](https://react-native-aria.geekyants.com/)

• Platform agnostic (agnostic means something that is generalized so that it is interoperable among various systems) -Accessibility labels, content-description attributes; which abstracts via hooks into JSX. -Like for pressible elements to make a checkbox in RN, you need to pass correct accessible label and state which returns react-native api which passed back into props. -Like to split/abstract out the behavior via hooks to improve accessibility. This library help us to build component with high accessibility.

Write once for everywhere is the future

• Reactnative provide WAI-ARIA roles. How it can be mapped back to web via reactnative-web
• In RN web, there is much missing, but highe chances to boost accessibility on the web.
• RN web has alternative ways to provide web semantic via APIs like and do DOM things better
• Reactnative web is better approach to take react everywhere.
• React has done agreat job. Universal/monorepo is the way to go.
• The trend these days is app should look same on every platform; UI is more likely to go universal.

Work in this direction

• GAAD (Global Accessibility Awareness Day) its a pledge to make products accessible.
• NextJS and Typescript is pushing towards building more accessible apps.
• Have easy and right defaults.

Tools to check accessibility level

• Lighthouse
• Manual testing is irreplacable
• Accessibility scanner app

Future of Accessibility

• *Don't read it as feature,take it as ego.
• Industry is showing inclination towards it.
• Universal is the way to go, we need universal debuggers, like Flipper by Facebook
• We need devtools focused on Accessibility.

Follow me on twitter to know more about technology and development. A bit of philosophy too.

inspired from a Twitter space hosted by @GeekyAnts

You can learn to code and develop a full-fledged application within the realm of your javascript syntax. The solution is the MERN stack which comprises MongoDB ( a NoSQL database), Express (a backend server framework), React (a frontend javascript framework), and Node ( a javascript runtime environment out of browser).

We are using MongoDB atlas -a cloud database

After building your MERN stack application, seeing it running locally on your machine at localhost://3000 certainly good, but to make it employer-ready, you should host it. I will show you how to deploy it on Heroku (container-based cloud Platform as a Service (PaaS) used to deploy, manage, and scale modern apps). Make your account.

• Folder Structure You should follow the same folder structure to run scripts effectively.

Your backend files and modules should be in the root folder directory (:/project_folder/) and your frontend in a folder in your root folder (:/project_folder/client_folder) Client folder is react frontend folder in the above image.

• Scripts for starting, building, and deploying your project

   "scripts": {
        "start": "node server.js",
        "server": "nodemon server.js",
        "client": "cd client && npm start ",
        "dev": "concurrently -n 'server,client' -c 'red,green' \"npm run server\" \"npm run client\"",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
    }
  

• Edit the server.js to deploy only in production environment mode

  if(process.env.NODE_ENV === 'production'){
  //set static folder
  app.use(express.static('client/build'));
  app.get('*',(req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')));
  }
  

  • Install the Heroku CLI Check installation success with heroku -v in the command line. It will show you the version.
• Go to your project directory and heroku login. This will invoke login in your browser.
• Run heroku create. It will create a domain name for your project to get hosted.

• Git repository You should make a local git repository for your project initialized in the root folder. Learn git here. Your changes should be up to date with the repository. To make sure,

  git init
  git add .
  git commit -m "Preparing to Deploy
  

• Now you need to add Heroku as a remote repository. Go to your Heroku dashboard and open your project with the same domain name. Go to the deploy section and you will see a command like

  heroku git remote -a  {heroku-project-name}
  

• After adding Heroku as remote repository, you can push your project to Heroku by

  git push heroku master
  

  It will run that post-build script that's going to build our react static assets and create the build folder and our backend will load that index.html file and our application will deploy. You can see your deployed application by heroku open. To deploy the updated features, you must follow the same.

• So, first, a Component will mount and the constructor() where the class instance gets created and the state gets instantiated. And it renders, basically put UI to the page.
• And whenever setState() gets called or new props are received, it needs to re-render, it will update UI. This part of the lifecycle updates and re-renders with some lifecycle methods.
• And when there comes time for a component to disappear or when you need to clear something that you created in the mount stage, it is removed in Unmount stage.

You can follow this diagram to visualize the lifecycle of a component.

Let's see what it means in Practice

Mount

Use Slider to see the code

• Constructor(props)
  • initialize state or other class properties (e.g , bound methods)
• render()
  • the meat of a component
  • return a node
• componentDidMount()
  • Do anything that isn't needed for UI (async actions, timers, etc.)
  • setting state here will cause a re-render before updating the UI

Update

Just like in the Mounting cycle, a bunch of lifecycle hooks are called in the update cycle, every single time we want to re-render.

• componentWillReceiveProps(nextProps)
  • update any state fields that rely on props. -shouldComponentUpdate(nextProps, nextState)
  • compare changed values,before rendering. return true id the component should re-render
  • if returned false, update cycle will terminate.
  • Almost always a premature condition.
• render()
• componentDidUpdate(prevProps, prevState)
  • Do anything that isn't needed for UI (network requests, api call etc).

In update cycle, firstly shouldComponentUpdate() is invoked, then render() and only then componentDidUpdate().

Unmount

This is an important stage of the component lifecycle. It is where cleanup is performed after the component is unmounted. The reason to clean up after unmounting any timers, background calls is to optimize the application for the user's intended experience. An application must compute the result with full memory usage designated to the task at hand, not lag due to past actions. Pending requests must get eliminated as soon as the interaction with the specific component is over.

If we do not unmount the component, background calls, functioning will keep on running and stacking up the memory. See thi example. Check the console and press the toggle button. %[]

To solve the problem we must register an unmount stage after the use of the component is done. As it will clear the space and will optimize the whole application

• ComponentWillUnmount()
  • clean up ~ Remove event Listeners ~ Invalidate Network Requests ~ Clear timeouts/intervals

Error Handling: Here You can continue learning about lifecycle hooks for functional Component

You can visualize components by following this diagram.

• All React components must act like pure functions with respect to their props

• Two types: 1.Class-based Component 2.Functional Component

Class-based Component

(We also call it React.Component) Just like in Javascript, there is a class that has only one method render() which simply returns the react element (JSX).

class MyName extends React.Component{
render(){
return(
<h1>Hello, My name is Agrit Tiwari</h1>
)
}}

In this above example, We can also pass data from outside the component. It will remove the barrier of hard code. We now know props come from above. You can read more about props here

class MyName extends React.Component{
render(){
return(
<h1>Hello, My name is {this.props.name}</h1>
)}}

const knowMe = <MyName name="Agrit Tiwari" />

• An abstract class that can be extended to behave however you want. -These have additional features that SFC don't have:

• Have instances *Maintain their own state

• Have lifeCycle methods( similar to hooks and event listeners) that are automatically invoked.
• Rendering is a function of props and class properties

In class Components, we update the UI by updating the state within the component by using Lifecycle methods. Learn about Lifecycle methods

import React from 'react'

class TaskToDo extends React.Component{
constructor(props){
super(props)
this.state ={
numOfTasks = 0
}
}
incTasks(){
this.setstate({ numoFTasks :this.state.numOfTasks +1})
}
decTasks(){
this.setstate({numOFTasks: this.state.numOfTasks -1})
}
render(){
return(
<div>
<h1>Tasks to do</h1>
<p>Tasks : {this.state.numOfTasks}</p>
<button onClick=(() => this.incTasks())>+</button>
<button onClick=(() => this.decTasks())>-</button>
</div>

)}
}

-this.state() is a class property on the component instance. -setState calls are batched and run asynchronously. -Changes in the state also cause re-renders.

Functional Component

Functional Component in React also returns a node for the discrete piece of UI. They are classified into types based on their work and usage. 1.Stateless Functional Component: The simplest component, we use them when we don't need a state in our application. This simply takes a prop and returns a node. Any change in props will cause the function to re-render. The function should be pure(It should not have any side effects like setting values, updating arrays, etc)

import React from 'react'
const Emplyoee = (props) => {
return(
<div>
<h1>Hello, My name is {props.name}</h1>
<p>I work at {props.company}</p>
</div>
)
}

This will only return the props attribute which is passed from another component.

2.Stateful Functional Component: A stateful component can contain the state object and event handling function, user actions as well. This is the advancement of stateless components in order to do the manipulation of the data that needs to re-render. Stateful components make the UI interactive and made possible updation of state by virtue of React hooks. Learn about hooks here

import React from 'react'
import { useState } from 'react'

const Item = (props) => {
const [worth, setworth ] =useState(0)

return(
<div>
<h1>Hello, My name is {details.name}</h1>
<p>I work at {details.company}</p>
<button onClick=(()=> setWorth(worth + props.profit ) >Set your Profit</button>
</div>
)
}

const ItemDetails = <Item details = {item} profit/>
const item ={
name: "Bicycle",
company: "Atlas Cycles Ltd.",
Location: "India"
}

I hope this gives a clear understanding of the difference between the Class component and the Functional Component.

1. React Native is a cross-platform, single codebase stack for both native iOS and Android apps.
2. Uses React Javascript.
3. 100% access to native APIs via Javascript and reuse of packages from NPM.
4. Backed by Facebook. isn't it enough?

Hey, It's most easy to set up and start development quickly. I'll be providing 3 major ways in which you can complete your setup and begin your development journey in react native.

Snack

If you'd like to try out React Native directly in your web browser before installing any tools, you can try out Snack. It's the easiest way to work on react native with low system configurations and requirements. This platform is highly beneficial for learning and teaching purposes as well. And another advantage that you can build and host small react native projects on the Snack. It is much easier to share your project and get quick feedback from mentors. It's like Codepen for React Native.

Expo Cli

As you are getting started with React native, it is the most friendly choice, easy to begin with, and above all, supports live rendering of your code on your physical device. Seeing your code working on your physical device is quite a feeling of achievement. As I started development, I followed a lot of tutorials that were deprecated till that time, so I had to struggle a lot. And expo CLI has helped me set up my learning journey of react-native. To begin with, Assuming that you have NODE installed, use your command line to install expo CLI

npm install -g expo-cli

Then create a new React Native project using

expo init <Project Name>
cd <Project Name> 
expo start

This will start a development server for you. And it will show a QR code that can be scanned by Expo Go Client. Expo app can be downloaded from your native app store on physical devices. This is a marvel to debug your app with live rendering and zero delay reloads.

React Native CLI

React Native CLI is a little bit complex set up to begin the react-native developer journey and most appropriate for high complexity apps. The amount of work required in the setup is quite a lot and demands high-performance machine specification as it will require you to install an Android or an iOS simulator for live rendering on your screen. I'll be rolling out tutorials on react native CLI as I prosper.

I highly suggest following the documentation for React Native along with whatever course, tutorial, or Bootcamp. As I have been myself a victim of learning deprecated stuff, and I do not wish the same upon you.