DEV Community: Arjay

Launched a SaaS Starter Kit on Product Hunt

Arjay — Thu, 03 Mar 2022 15:41:52 +0000

Hi Devs! 👋

I recently launched Nextacular over at Product Hunt: https://www.producthunt.com/posts/nextacular

I'm very excited to share Nextacular🌙.

It has been in development since January this year and I've been gathering feedback on what are the basic SaaS features that founders should not sweat about to help them focus on building the core of their solutions. The feedback gathered resulted in Nextacular, which is a SaaS starter-kit built on top of modern technologies.

Also, in our startup, our team didn't have a standard way of building our applications, so I thought of spending some time crafting this Workspace-based multi-tenant SaaS starter kit to be deployed on Vercel. This is an open-source initiative to contribute to the development community.

More details about the app in the website and in the Product Hunt Listing.

Please let me know your feedback! I appreciate all comments and inputs, and I'll constantly improve Nextacular to deliver an open-source alternative to building your next SaaS. 💬❤️

Project Repository can be found here: https://github.com/arjayosma/nextacular

Appreciate your support!

Set Up Firebase Phone Authentication in Expo (SDK 37) without Ejecting

Arjay — Mon, 03 Aug 2020 11:14:53 +0000

Set Up Firebase Phone Authentication in Expo (SDK 37) without Ejecting

I am so excited about a lot of things for the release of SDK 37. One of which is that Expo made it fairly easy to implement Firebase Phone Number Authentication. We just have to set up a few things first before we can actually use phone authentication in our projects.

Photo by Dan Nelson on Unsplash

Prerequisites

An Expo managed workflow project. If you don’t have one, follow the instructions here.
A Firebase project. If you don’t have one, just go to your Firebase Console and set it up. Make sure to register a Firebase web app.

Install Dependencies

We need to install the dependencies identified below to make our authentication work:

$ expo install expo-firebase-recaptcha react-native-webview firebase

By installing the expo-firebase-recaptcha dependency, we now have the components for creating the reCAPTCHA verifier to be used for our phone authentication workflow.

NOTE: expo-firebase-recaptcha requires react-native-webview to be installed as well. This is because the reCAPTCHA verifier will be shown inside a WebView modal.

Getting Started

Firebase Settings

First things first make sure that the Phone sign-in method is enabled.

Enabled Phone Sign-In Method

Let’s grab a copy of our Firebase configuration inside our console from one of our Firebase web apps. Just replace the XXXXXX values with your own configuration values.

Create a file firebase.js from within our project and import our Firebase dependency

    import * as firebase from 'firebase';
    import '@firebase/auth';

    const firebaseConfig = {
        apiKey: "AIzaXXXXXX",
        authDomain: "expo-firebase-phone-auth-XXXXXXX.firebaseapp.com",
        databaseURL: "https://expo-firebase-phone-auth-XXXXXXX.firebaseio.com",
        projectId: "expo-firebase-phone-auth-XXXXXXX",
        storageBucket: "expo-firebase-phone-auth-XXXXXXX.appspot.com",
        messagingSenderId: "XXXXXX",
        appId: "1:XXXXXXX:web:a1XXXXXXX",
        measurementId: "G-XXXXXXX"
    };
    firebase.initializeApp(firebaseConfig);

    export default firebase;

Optional: You can save this configuration inside your app.json file as an extra field. If you do this approach, make sure to install expo-constants dependency to access these values at runtime.

App Set-Up

For the purpose of this article, let’s just play around a single screen application. The gists below are from a single source file but are broken down into different sections for simplicity and ease.

This app will have two input boxes: (1) for the phone number; and (2) for the verification code. Each with designated buttons that will execute our verification process.

We’ll also add the reCAPTCHA modal, which will help us validate if our user is a robot or not.

Let’s now implement the sendVerification and confirmCode functions.

That’s it! We’re now ready to test our application.

Seeing it in Action

Let’s add our mobile number in the first input field. Let’s also add the country code so that we can definitely receive the SMS. Press the Send Verification button.

Optional: There’s also an option in firebase that we can add test numbers to avoid sending spam messages to the correct number.

Our application screen

After pressing the Send Verification button, in a few seconds, we will receive an SMS from “Phone Code” containing a 6-digit code. We’ll copy that code and add that into our second input field, which is the verification code field. After putting the verification code, press the Send Confirmation button.

A sample SMS message with a verification code

Once done, inside our Firebase console, we will be able to see a newly added user (phone number) into our Users tab.

Newly added user

Congratulations! We were able to implement Firebase phone authentication into our managed Expo project.

Conclusion

Phone authentication is one of the many ways we can verify our users. Implemented properly, it’s also one of the secure ways to validate if our users are not robots. With the release of Expo’s SDK 37, they made it very easy to implement this method of authenticating our users without ejecting.

If you wish to take a look at an example, I prepared a small project and you can access it here: https://github.com/arjayosma/expo-firebase-phone-authentication

If you liked this article and wish to receive more articles like this, read my blog at https://arjayosma.com or follow me here and on Twitter.

Thank you and I hope you enjoyed the article! Let me know your thoughts on how we can enhance this further.

You may wish to discuss different tech and business stuff, drop an email to arjay.osma@gmail.com.

How To Simplify React Forms State Handlers

Arjay — Thu, 14 May 2020 14:00:00 +0000

Recently posted this article about a React Design Pattern on my blog and wanted to share it here in Dev.to as well.

Web application forms are essential for data processing and display of information. We’ve had our fair share of using them for the reasons identified above. They’re an inevitable part of web development.

While learning React, you must’ve encountered constructs such as the example below from various tutorials. A piece of small code snippet that shows you how to use controlled components in render functions and how to assign them into different state variables.

Hook Example (> v16.8) - Functional Component

In this example, let’s assume we have three input fields that need to be stored inside our component’s state.

import React, { useState } from "react"

const MyForm = () => {
  // Form states
  const [firstName, setFirstName] = useState("")
  const [lastName, setLastName] = useState("")
  const [email, setEmail] = useState("")

  // Form handlers
  const handleFirstNameChange = event => {
    setFirstName(event.target.value)
  }
  const handleLastNameChange = event => {
    setLastName(event.target.value)
  }
  const handleEmailChange = event => {
    setEmail(event.target.value)
  }

  // Render components
  return (
    <>
      <input onChange={handleFirstNameChange} type="text" value={firstName} />
      <input onChange={handleLastNameChange} type="text" value={lastName} />
      <input onChange={handleEmailChange} type="text" value={email} />
    </>
  )
}

Notice that we have three different onChange handlers for each of our input fields. That’s a lot and will be a lot more if we add another input field.

Problem

Our example above will definitely work. However, when we encounter a requirement that will demand us to add another input field for our form, we will be forced to add another state handler.

This may pose as a threat to the maintainability and readability of our dear code.

Solution

Fortunately, we have a simple pattern that we can use for us to retain the maintainability and readability of our source codes.

We can create a custom React hook that we can use across our codebase repetitively without confusing our future selves. The solution will look something like the custom hook below.

/**
 * src/hooks/form.js
 */
import { useState } from "react"

export const useInputState = initialValue => {
  // Initialize state holder and value setter
  const [value, setValue] = useState(initialValue)
  // On value change handler
  const onChange = event => setValue(event.target.value)
  // Reset the current state
  const clear = () => setValue(initialValue)
  return [value, onChange, clear]
}

This custom hook works by handling the state value internally. It will return the value , change handler , and the setter of the state respectively, which will be used by the calling function.

Usage

To use the hook we recently created, see the example below that modifies our first example above.

import React from "react"
import { useInputState } from "hooks/form"

const MyForm = () => {
  // Form states and change handlers
  const [firstName, handleFirstNameChange] = useInputState("")
  const [lastName, handleLastNameChange] = useInputState("")
  const [email, handleEmailChange] = useInputState("")

  // Render components
  return (
    <>
      <input onChange={handleFirstNameChange} type="text" value={firstName} />
      <input onChange={handleLastNameChange} type="text" value={lastName} />
      <input onChange={handleEmailChange} type="text" value={email} />
    </>
  )
}

We minimized the number of lines in our original code by using the custom hook that we just created. We called on the useInputState hook and initialized it with the default value. Then we destructure the array returned by the hook with value data and the onChange function. In the modified code, we renamed the destructured values accordingly.

Different Flavors

This is not the only way to create and use this hook.

While updating my source codes, I did not use the hook above. Instead, I used a different approach wherein the returned value of the hook is not an array but an object. Check out the code below.

// Declaration
export const useInputState = initialValue => {
  const [value, setValue] = useState(initialValue)
  const onChange = event => setValue(event.target.value)
  return {
    value,
    setValue,
    attributes: {
      value,
      onChange,
    },
  }
}

/* ------------------------------------------------------ */

// Usage
const MyForm = () => {
  const { value: firstName, attributes } = useInputState("")
  // ...
  return (
    <>
      <input type="text" {...attributes} />
      {/* ... */}
    </>
  )
}

As usual, you can play around this setup and take into consideration how you’re going to use this on your end.

Benefits

These are the benefits of using this hook:

Simple and clean code.
Fewer lines to maintain.
Readable code and easy to digest.

For sure, there’s a lot more than what was identified.

Conclusion

The introduction of React hooks allows you to always use functions instead of having to juggle the existing concepts of React such as functions, classes, and Higher-Order Components. This makes our codebases lean and simple to maintain.

We are also adding a new concept in our arsenal of Design Patterns that we can apply to our codebases, which can definitely make our development lives easier.

Before we go, always remember to stay awesome!

How To Conditionally Wrap A React Component

Arjay — Tue, 05 May 2020 00:00:00 +0000

Recently posted this article about a React Design Pattern on my blog and wanted to share it here in Dev.to as well.

While working on your React project, you’ve probably encountered a scenario where you want to conditionally place a component inside a parent component.

Maybe you’ve found yourself using this format in one of your codes:

{
  condition ? (
    <ProtectedLayout>
      <p>This is a short message.</p>
    </ProtectedLayout>
  ) : (
    <UnprotectedLayout>
      <p>This is a short message.</p>
    </UnprotectedLayout>
  )
}

Yes! We’ve been there and it is working. Nothing’s wrong. Convincing ourselves that if it works when the browser is refreshed, then it is already good for us.

Problem

If you take a good look, there is a problem with this setup, and the problem is that we’re duplicating the code.

How and why? In the example above, as mentioned, we’re writing the code above twice. Imagine if we have more than that as our child component, that alone will increase the number of lines we have to code and maintain.

Solution

For us to solve this issue, let’s create a function that will wrap our child component if it satisfies the condition.

const Wrapper = ({ children, condition, wrapper }) =>
  condition ? wrapper(children) : children

This wrapping component works by passing a condition and a wrapping function as props and encloses the child component via the function. Easy, right?

Just 2 lines of code and let’s break it down, API style!

Props	Definition
`children`	The component we want to wrap with the `wrapper` function
`condition`	The condition that will identify if the child component should be wrapped
`wrapper`	A function that will accept the `children` component and will return the already `wrapped` component

Usage

To use this component, see the example below.

<Wrapper
  condition={shouldWrap}
  wrapper={children => <ProtectedLayout>{children}</ProtectedLayout>}
>
  <p>This is a short message.</p>
</Wrapper>

We enclose the <p> child component inside the <Wrapper> component passing the different props needed.

The wrapper prop should receive the <p> child component as the function parameter and inside the wrapping function, we define how our <p> child will look like once the condition prop is satisfied.

Different Flavors

Of course, this is not the only flavor we can do to wrap our components. We also have alternative ways of doing this, but I’ll leave it up to you to find it out by playing around with the base function or wrapper component.

Take into consideration how you’re going to use this wrapping component for your codebase.

Possible Use Cases and Examples

Here are possible use cases that I believe will require us to wrap our component(s) this way:

If you want to wrap your components into different wrappers.
If you want OR not want to enclose your component.

My Use Cases

Most of my React projects require authentication, and given that setup, I receive features that demand distinct layouts for authenticated and unauthenticated users respectively. Hence the example above.

Take a look at this code for example:

// The main component that uses the `wrapper` function
export default () => {
  return (
    <BrowserRouter>
      <Switch>
        {/* Iterate through the list of routes */}
        {routes.map((item, index) => {
          // Destructuring the individual route items
          const { component: Component, path, protectedPath } = item

          // The route component for the
          return (
            <Route
              key={index}
              {/* Conditionally wrapping the child component */}
              component={() => (
                <Wrapper
                  condition={protectedPath}
                  wrapper={children => <AdminLayout>{children}</AdminLayout>}
                >
                  <Component />
                </Wrapper>
              )}
              exact
              path={path}
            />
          )
        })}
      </Switch>
    </BrowserRouter>
  )
}

Benefits

These are the benefits of using this approach:

You get to have a clean code. Who wouldn’t want this, right?
You will be able to practice the DRY and KISS principles.
By practicing the two principles above, you can reuse this abstracted component again and again. Fewer lines to code and maintain.

Conclusion

It may not be every day that we encounter these kinds of problems while coding. It’s also great to think twice if what we’re coding is going to be maintainable. You know, lesser headaches for our future selves.

What we just did is an example of a Design Pattern that we can apply to our codebases.

As developers, we should aim to find these recurring problems and find patterns that can be abstracted into a simple solution to make our lives easier.

Finally, always remember to stay awesome!

Our First Published App

Arjay — Thu, 25 Apr 2019 01:26:25 +0000

Fridge - Reduce Wastes in Your Kitchen

We recently launched our very first app. My partner and I have been working on this idea for the past few weeks and we're excited to announce that our very first app has been released into the wild.
Feel free to download the application.

Google Play Store: http://bit.ly/FridgeGooglePlay
ProductHunt: http://bit.ly/FridgeProductHunt
Facebook Page: http://bit.ly/FridgeMobile

About Fridge

Fridge is a mobile application that helps you repurpose unused ingredients to reduce kitchen wastes. The app will require you to provide your ingredients and it will output awesome recipes for your reference.

Development

The app has been developed using the managed workflow of Expo. It has been a breeze developing the application using this platform.

Features

Here are the features of the app:

Ingredients search
Recipe search (based on ingredients selected)
Viewing of recipes
Sharing to different platforms

It's not rich in features yet, but we're positive we can deliver more features for the app moving forward.

Future

We're considering into deploying the application into the App Store also to cater to our iOS users.

🙏 Let us know what you think and feel free to message us if you have any questions!

If you have development-related questions, please feel free to comment down below.