DEV Community: Christopher Coffee

FlutterFlow Stepper Form with Firebase Firestore

Christopher Coffee — Mon, 02 Oct 2023 12:00:00 +0000

Introduction

I will show you how to create a custom widget in FlutterFlow to show a Stepper widget with form fields. We will submit the data to Firestore. This code is also reusable in non FlutterFlow generated apps.

You may copy and paste the code, but I want to walk through the thought process of how I would implement this for educational purposes. We will create an app saves the user’s grocery list.

Creating the Form Field

First, we will use the FlutterFlow UI builder to create a TextFormField. You may also write the code yourself. In the blank home page of your project. Drag and drop a form field and style it how you want. I will also add the hint text.

Creating the Firestore Collection

Now let’s create the Firestore Collection in FlutterFlow. I am assuming you have already followed FlutterFlow documentation on connecting your firebase project.

Click on the Firestore tab, then click Create Collection. It will ask if you want to use a template, and you can choose the product template. I have deleted some fields.

Creating the Custom Widget

Now let’s create the custom form widget. Click the Custom Function tab on the left, then click the Custom Widget tab within that screen. Click the purple Create button. You should now see this screen. Name the widget and click View Boilerplate Code.

This will show another popup. Click Copy to Editor.

Click Save.

Go back to the TextField you created. Right-click on the TextField from the Widget Tree **and click **Copy Widget Code.

Go back to the custom widget you created and click the edit button (pencil icon). Above the build function, we will create another function that returns our form.

 @override
 Widget build(BuildContext context) {

Create a function that takes a textController and hint text. Type return, then copy and paste the code you copied earlier. The decoration code may be different depending on how you styled your code.

 Widget getTextFormWidget(
      TextEditingController textController, String customHintText) {
    return TextFormField(
      controller: textController,
      autofocus: true,
      obscureText: false,
      decoration: InputDecoration(
        hintText: customHintText,
        hintStyle: FlutterFlowTheme.of(context).bodyText2,
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Color(0x00000000),
            width: 1,
          ),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(4.0),
            topRight: Radius.circular(4.0),
          ),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Color(0x00000000),
            width: 1,
          ),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(4.0),
            topRight: Radius.circular(4.0),
          ),
        ),
        errorBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Color(0x00000000),
            width: 1,
          ),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(4.0),
            topRight: Radius.circular(4.0),
          ),
        ),
        focusedErrorBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Color(0x00000000),
            width: 1,
          ),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(4.0),
            topRight: Radius.circular(4.0),
          ),
        ),
      ),
      style: FlutterFlowTheme.of(context).bodyText1,
    );
  }

Above this function copy these three lines of code. We will use the TextControllers to get the text from the TextField before submitting the form.

final nameController = TextEditingController();
final priceController = TextEditingController();
final quantityController = TextEditingController();

Now let’s create a Stepper Widget. Let’s get the code from Flutter’s official Stepper Widget documentation.
Stepper class - material library - Dart API

Replace your build method with the code from the documentation. At this point, you may want to save the code, then click edit again.

int _index = 0;

@override
  Widget build(BuildContext context) {
    return Stepper(
      currentStep: _index,
      onStepCancel: () {
        if (_index > 0) {
          setState(() {
            _index -= 1;
          });
        }
      },
      onStepContinue: () {
        if (_index <= 0) {
          setState(() {
            _index += 1;
          });
        }
      },
      onStepTapped: (int index) {
        setState(() {
          _index = index;
        });
      },
      steps: <Step>[
        Step(
          title: const Text('Step 1 title'),
          content: Container(
              alignment: Alignment.centerLeft,
              child: const Text('Content for Step 1')),
        ),
        const Step(
          title: Text('Step 2 title'),
          content: Text('Content for Step 2'),
        ),
      ],
    );
  }

We will replace the steps with our custom text fields.

We also copied the index variable, so that we may change Steps.

Replace the steps with the following code. In the first Step widget, we will have only one text field, which is the name field. Notice we are passing the nameController and the hint text.

In the second Step widget we have a column that holds the price text field, quantity text field and the save button. The save button calls a function called submit form, which we haven’t defined yet. We could also wrap the Stepper widget with a column and add the button at the bottom. For simplicity, we will keep it like this.

Step(
   title: const Text('Product Name'),
   content: getTextFormWidget(nameController, 'Enter The Product Name'),
),
Step(
    title: const Text('Product Name'),
    content: Column(
        children: [
            getTextFormWidget(priceController, 'Enter The Product Price'),
            getTextFormWidget(quantityController, 'Enter The Product Quantity'),
            ElevatedButton(
              onPressed: submitForm,
               child: const Text('Save'),
            ),
        ],
     ),
),

Save to Firebase

Above the build function, create another function named submitForm.

 void submitForm() async {

 }

In FlutterFlow’s UI builder, when creating an action to save the data, it has methods it generates that are exposed through backend.dart. It would generate code like this to save data. Although this will work if you download the code, it will not compile on the FlutterFlow platform.

final groceryRequestCreateData = 
    createGroceryItemRecordData( 
        name: nameController.text,
        price: double.parse(priceController.text),
        quantity: int.parse(quantityController.text),
    );
    await GroceryItemRecord.collection
    .doc()
    .set(emergencyRequestCreateData);

So let’s use the FlutterFire documentation to save this data to Firestore.
Cloud Firestore | FlutterFire

The following code shows the solution to submit the code to firebase.

First, we will put the reference to the GroceryItem collection. We are creating a random id using the grocery collection reference.
Can i generate Doc id from flutter to firebase without the method add?

Next, we are using setting the data using the textControllers. We have to parse price and quantity controllers to their respective data types.

CollectionReference groceryItemRef =
      FirebaseFirestore.instance.collection('GroceryItem');

 void submitForm() async {
    try {
      var randomId = groceryItemRef.doc().id;
      await groceryItemRef.doc(randomId).set({
        'name': nameController.text,
        'price': double.parse(priceController.text),
        'quantity': int.parse(quantityController.text)
      });
    } catch (e) {
      print('Error saving grocery item: $e');
    }
  }

Format and Save your code. Click edit again, then click Compile and Preview. You should see a preview of your form.

Test your custom StepperForm widget

Now let’s go back to the UI builder in FlutterFlow. Remove the text field you created and replace it with the custom StepperForm widget.

You can now use Test Mode to test it out.

After you click the Save button, go to Firestore in the Firebase console. You should see the data from your form. You could use a dialog to show the success of the submission.

Here is the complete code:

Resources

Stepper class - material library - Dart API
Cloud Firestore | FlutterFire
TextFormField class - material library - Dart API
Can i generate Doc id from flutter to firebase without the method add?

AWS Fundamentals: IAM, GitHub, and AWS CLI

Christopher Coffee — Sun, 01 Oct 2023 12:00:00 +0000

Introduction

In this article, we will create an Admin user in AWS. We will also install the AWS CLI to create AWS Billing Alarms and Budgets.

You can do many things with the AWS CLI, but I want to start with something to get a simple understanding of it.

We will use gitpod to install the AWS CLI to make it accessible for everyone following along.

Create a new Admin user

Create a new user in the IAM Users Console by searching IAM or going to https://us-east-1.console.aws.amazon.com/iamv2/home?region=us-east-1#/users

Click Add users

In step 1, Enable AWS Management Console access, choose I want to create an IAM user, choose your password preferences, then click Next.

Step 2 is used to set the user’s permissions. We want to add the user to an Administrator group.

If you don’t have a group, create one by clicking Create group.

Give the group a name, such as Admin and check AdministratorAccess

Click Create user group at the bottom.

Check the Admin group you want to add the user to.

Click Next, then Create User.

Create IAM User Access Key

Click the user name of the IAM user, then click the Security Credentials tab.

Now click Create Access Key.

Choose Command Line Interface (CLI) then click Next.

Click Create access key

This will give you an access key and a secret access key. Keep these in a safe place.

Create a GitHub Account

We will use GitHub to store our code. Visit GitHub to create a new account.
GitHub: Let's build from here

At the top right, click the plus icon. Then click New Repository

Give the repository a name and set the visibility

Click Create Repository

Create a Gitpod account

Gitpod gives you an online dev environment. You will run our code here. You can also follow along on your personal computer as well just skip this part.

It may ask you what editor you want to use if you haven’t chosen a default. We will be using Visual Studio Code.

Download the chrome extension for Gitpod.
Gitpod - Always ready to code

Go back to your Github repository and reload the page. You should now see a green Gitpod button.

Click **Gitpod **and you should see the following screen

Click Continue with Github

It may ask you what editor you want to use if you haven’t chosen a default. We will be using Visual Studio Code.

You should now have an environment with VS Code similar to the following.

Install the AWS CLI

We will use the Linux instructions for installing the CLI, but you may refer to your operating system’s instructions in the AWS CLI documentation.
Installing or updating the latest version of the AWS CLI

Download the AWS CLI

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

Unzip the CLI tool

unzip awscliv2.zip

Install the AWS CLI.

sudo ./aws/install

Check the AWS version installed

aws --version

Set AWS environment variables

Now we can use the keys we created earlier and set them to environment variables so that we may work with the AWS CLI.

gp env AWS_ACCESS_KEY_ID="AKIAIOSFODNN7EXAMPLE"
gp env AWS_SECRET_ACCESS_KEY="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
gp env AWS_DEFAULT_REGION=us-east-1

You can verify that env are saved within gitpod by going here: https://gitpod.io/user/variables

Check that we are getting the expected user with the following command:

aws sts get-caller-identity

We can also save our AWS account id to the gitpod environment variables

gp env AWS_ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)

Create a Billing Alarm (via the CLI)

Refer to the AWS CLI docs to create a SNS Topic by running this command in the terminal

aws sns create-topic --name example-billing-alarm

create-topic - AWS CLI 1.27.79 Command Reference

This will give you a topic arn to use in the next command

Refer to the AWS CLI docs to subscribe to a topic using the topic arn from the previous command’s output.

aws sns subscribe \
    --topic-arn arn:aws:sns:us-east-2:123456789012:example-billing-alarm \
    --protocol email \
    --notification-endpoint my-email@example.com

subscribe - AWS CLI 2.10.3 Command Reference

Verify the alarm was created in the AWS Console:

https://us-east-1.console.aws.amazon.com/cloudwatch/home?region=us-east-1#alarmsV2

It may take a few minutes before the alarm is created.

Create an AWS budget (via the CLI)

Create folders aws and json, and go to the json folder using the following command in the terminal

mkdir -p aws/json && cd aws/json

Go to the AWS CLI create budget documentation: https://awscli.amazonaws.com/v2/documentation/api/latest/reference/budgets/create-budget.html#examples

Copy the budget.json and notifications-with-subscribers.json examples into the json folder.

To create a new file you may click the New File… button.

Run this command in your terminal to create the budget

aws budgets create-budget \
    --account-id $AWS_ACCOUNT_ID \
    --budget file://aws/json/budget.json \
    --notifications-with-subscribers file://aws/json/notifications-with-subscribers.json

Verify your budget was created in the AWS console:

https://us-east-1.console.aws.amazon.com/billing/home#/budgets/overview

Congratulations on creating a new IAM user, Github, and Gitpod account. You are now familiar with the AWS CLI, which we will use more in the future.

Leetcode: Single Number (Kotlin)

Christopher Coffee — Sat, 30 Sep 2023 10:00:00 +0000

Single Number is an easy question on Leetcode. I will discuss the problem and my solution below.
Single Number - LeetCode

Problem Statement

Examples

Constraints

Brainstorm

The solution I thought of is pretty straightforward.

They give us an array of integers, so we can use a map that will store each number as the key and the count of that number as the value.
We iterate through the array to set each number’s count in the map.
We will then iterate through the array again, but this time we will check each number’s count in the map and return the number with the count of one

They guarantee a number with a count of one is in the given array, so you could technically return any number at the end because it should never get to that point. I use Int.MIN_VALUE.

Solution

Monitor Android’s filesystem with fsmon to detect insecure storage

Christopher Coffee — Fri, 29 Sep 2023 13:00:00 +0000

I’m diving deeper into security and wanted to document my process along the way. First I am going over the process of monitoring an Android device’s filesystem.

Download Android Studio or Android command line tools

You have two options to get the Android developer tools.

If you want to just use Android command line tools, you will also need to install Java.

Alternatively, you can also install Android Studio, which will install everything for you.

Download both below
Download Android Studio & App Tools - Android Developers

Add platform tools to your PATH (optional)

You will also need to add the Android platform-tools to your PATH

export PATH=$PATH:/Users/<computerName>/Library/Android/sdk/platform-tools

The main command we will use is adb. Type adb in your terminal and it should give you the list of commands your path is configured correctly.

You can also go directly to the platform-tools directory and run the command there as a temporary solution. You can also run the following command each time

/Users/<computerName>/Library/Android/sdk/platform-tools/adb

You can also add this to your shell’s configuration so that it does this automatically. By default, Mac uses zsh, so you can create a file named .zshrc and add the command to the file. Then close and open a new terminal or run the following command if you choose to use the same terminal.

source .zshrc

What should/shouldn't go in .zshenv, .zshrc, .zlogin, .zprofile, .zlogout?

Set up a virtual rooted Android Device

You need a rooted device, luckily emulators have root access by default, so there is no need to root your personal device.

If you installed Android Studio, you can use the AVD manager to create an emulator.
Create and manage virtual devices | Android Studio | Android Developers

If you downloaded the command-line tools you can create an emulator by following the avdmanager Android docs
avdmanager | Android Studio | Android Developers

Another popular alternative is Genymotion.
Android Emulator on the Cloud and cross-platform - Genymotion

Make sure to note the architecture used. Android Studio should show you when you’re creating the device, of course you specify it when using the avdmanager command, but I’m not currently sure on Genymotion.

Download fsmon

Let’s start by downloading fsmon. There are specific versions for Android. Download the one that matches your emulator architecture
Releases · nowsecure/fsmon

Download the Insecure Shop apk

I plan to use this app quite often to demonstrate different vulnerabilities on Android. You can download the APK here:
GitHub - hax0rgb/InsecureShop: An Intentionally designed Vulnerable Android Application built in…

Using ADB

We are only going to use a few adb commands in this article.

Install the Insecure shop apk with the following command

adb install InsecureShop.apk
1. Get root Access
adb root
1. Push the fsmon to our Android device
adb push fsmon-and-x86_64 /data/local/tmp
Files in /data/local/tmp!?
1. Get shell access to the Android device
adb shell

Data for Android apps are stored at the following location: /data/data/

We want to monitor /data/data/com.insecureshop

Lets go to /data/local/tmp

cd /data/local/tmp

Now let’s monitor the directory

./fsmon-and-x86_64 /data/data/com.insecureshop/

I haven’t opened the app yet, so I see the following

Now let’s open the app and you will see that it creates the shared preferences directory.

Read more about shared preferences
Save simple data with SharedPreferences | Android Developers

You will see that it has modified a lot of data in the directory

Open another terminal and gain shell access to the device again

adb shell

Now let’s go to /data/data/com.insecureshop and inspect the shared preferences file.

cat /data/data/com.insecureshop/shared_prefs/Prefs.xml

You can see that they are saving the password and user name to the file.

Also, note that Google is recommending moving from shared prefs to data store. This file will also be available in the /data/data/ directory of the device.
App Architecture: Data Layer - DataStore - Android Developers

It is best practice to never store sensitive info, even encrypted. Also refer to the **OWASP MASTG ( Mobile Application Security Testing Guide ) **for other best practices.
Android Data Storage - OWASP Mobile Application Security

How To Set Up a Free Business Email Using Your Domain

Christopher Coffee — Thu, 28 Sep 2023 13:00:00 +0000

Setting up a professional email will help you stand out with your career and business. So instead of chris@gmail.com, I can use chris@mycompanyname.com. I personally have a professional email that I use on my portfolio site and LinkedIn. This also helps keep my personal email separate and a little safer.

I’ll show you how to create a professional email using Zoho. They are a well-known company with a suite of business applications. They give you 5 free emails starting out and you just pay $1 per extra email after that.

Setting Up Your Domain With Zoho Mail

Of course, if you don’t have a domain, you will need one to get started. I purchase my domains using https://namecheap.com. Zoho also allows you to purchase a domain after signing up.

Click the link below to get started using Zoho:
Email Sign up - Create a new email account with Zoho Mail

You will need to fill out this form and use your phone number or email to verify your account.

Next, verify your account:

You will get a welcome screen after verifying. You can click on the “Add Now” button if you already have a domain or “Buy Now” to buy one. I’ll assume you have bought one so click Add Now.

Click the Proceed to domain verification button.

Zoho can usually detect where your domain is hosted. I have my domain pointed to Digital Ocean, so it tries to help me out. Either way, the steps are the same across the board.

You can visit this link for specific instructions on where to find where to copy these values here:
Domain Verification - Email Hosting with Zoho

I’ll walk through Digital Ocean, but it will be the same thing to copy and paste across the board.

I’ve found on Digital Ocean where I need to create records. I chose the TXT tab to add a TXT record and added the value I copied. For the hostname using “@” (without quotes of course).

I will click “Create Record” to create my TXT record. Now we need to go back to Zoho and click the “Verify TXT record” button.

You will now choose your administrator email. You can use your name, “info”, “support”, etc.

Click the “Create” button. You can add more users if you would like. Let’s go to DNS Mapping by clicking next on the “Setup Users” and “Setup Groups” pages.

You see we need to add 3 MX records, and 2 TXT Records. Let’s work from the bottom up.

We need to add a TXT record. First copy :

zmail_domainkey

Now set this as the host in Digital Ocean. You will set the value in the Value field.

Now let’s copy:

v=spf1 include:zoho.com ~all

This is the last TXT Record to add. Set the host name as “@” (without quotes”).

Now let’s add all three MX records. In Digital Ocean we can click on the MX tab.

Now you can click “Verify All Records”. Depending on the TTL you set when adding the records, it may take a while to verify some of them. I usually keep the defaults when using Digital Ocean.

You also do not have to wait to verify the records. The emails will work without staying on this page. They may also ask you to verify on the desktop when you log in, but not necessary.

If you do choose to wait for verification, you will get this message.

Congratulations, you have set up your first professional email!

Flutter Flow: Carousel Menu

Christopher Coffee — Wed, 27 Sep 2023 13:00:00 +0000

I am going to discuss how to make a simple carousel menu in the Flutter Flow platform. I will provide the full source code as well.

We are going to use the following package to help us achieve this:
carousel_slider | Flutter Package

Custom Widget

First, let’s create our custom widget. Click the custom functions tab on the left-hand side of the flutter flow platform

Now click Add > Widget

Give your new widget a name such as CarouselMenu

We will need to pass JSON as a parameter to build our menu items. I will discuss this more later. Create a parameter called jsonMenuItems of type JSON.

Click the green View Boilerplate Code button.

It should show this screen.

Click Copy to Editor

Now click Save at the top right of the screen

Adding Carousel Slider dependency

Under the parameters add the carousel_slider dependency.

Click Save again. Then click Compile.

Adding JSON menu items to local state

For this example, we are going to store our menu items in Flutter Flow local state. You could also retrieve the JSON from an API.

Click on the Local State tab.

Now click Add State Variable.

Add a JSON field. You can name it the same as the parameter we created earlier.

Menu Item Example JSON

You can use this example JSON array to populate your menu carousel. This is a JSON Array containing three JSON Objects. Each object is a menu item and contains a title, route, and imageUrl.

If you look at the Flutter Flow source code you will see they use named routes to navigate in the app using the go router dependency. The route will be each screen’s Scaffold name. You will see this later.

Copy this JSON as the default value for the state variable we just created.

Save this using Ctrl-S/CMD-S.

Writing the custom carousel menu code

Go back to our custom widget so that we may implement the carousel menu.

First, add the import for the carousel_slider dependency.

Create a class called CarouselItem and put it under _CarouselMenuState. This class will hold each menu item from the JSON.

Create a list variable of CarouselItem’s.

Under the carousel item list, let’s override initState. This method get’s called once when the widget first gets created.
initState method - State class - widgets library - Dart API

Under initState, create a method to build our carousel widgets. This method doing 3 things.

Iterating through each JSON Object in the JSON array.
Creating a CarouselItem object with the current object’s value.
Adding this object to the carouselItems list.

Let’s change our build method to return the carousel_slider.

Notice that I have context.pushNamed(route); commented out. This is the code FlutterFlow uses, but in the online editor, it will give you errors when compiling but will work when downloading the project.

There are some workarounds to get it to run on the Flutter Flow platform. Essentially, after you launch the app in test mode, uncomment the code, save it, and click instant reload.

Save and compile what we have so far.

Setting up screens to run our custom widget

Next, go to the Widget Tree tab to create our screens.

Create four screens. One that has our custom widget and three others that the carousel items will navigate to. These are the names that you will use as the route in the custom JSON state.

On the page/screen you want your custom widget, go to the UI Builder and drag and drop the custom widget.

Here are my settings for the custom widget.

Notice I set the JSON variable from our local state JSON variable.

Save the project and click the run in test mode button on the top right.

To test clicking the menu items, go back to the custom code and uncomment it. Save and then compile it. Go back to Test Mode and click instant reload. This will work fine when you download the code.

Here is the full source code:

AWS Fundamentals: Create an Account, Billing Alarm, and Budgets

Christopher Coffee — Tue, 26 Sep 2023 13:00:00 +0000

AWS Fundamentals: Create an Account, Billing Alarm, and Budgets

Introduction

I am creating a series of articles on my AWS learning journey. I will create a full-stack project to keep me interested in learning and use those skills to get certified. I also plan to do the same thing on Azure, and Google Cloud in the future.

In this first article, I will discuss setting up an AWS account, billing alarm, and AWS budget to ensure you never spend anything if you follow along. I also believe AWS gives you additional free credits beyond their free tier for the first year.

Create an AWS account

Let’s start by creating an AWS account. Click on the link below.
Cloud Computing Services - Amazon Web Services (AWS)

Currently, you will see an orange Create Account button at the top right of the page. Click this button to create an account.

Enable Billing Alerts

You can use AWS Cloudwatch to monitor your AWS usage and get alerts when you exceed your intended budget. You can use Billing Alarms and AWS Budgets to notify you once you have exceeded your budget.

First, you need to enable billing alerts in your billing preferences.

Search for Billing or go to the AWS billing page. https://console.aws.amazon.com/billing/home?#/

On the left menu, under Preferences, choose Billing Preferences.

Check Receive Billing Alerts **and Click **Save preferences.

Here is also the documentation for enabling this in case it changes.
Creating a billing alarm to monitor your estimated AWS charges

Create a Billing Alarm

Now let’s create an AWS Billing Alarm. We must do this under AWS Cloudwatch.

Search for Cloudwatch or go to https://console.aws.amazon.com/cloudwatch/ . You may also star the service when searching to make it a bookmark.

On the top right, directly left of your name, make sure the region is N. Virginia, because billing metric data is only stored in this region.

Click All Alarms on the left-hand menu.

Click Create Alarm

The button above only shows when you haven’t created any alarms.

There is also an orange Create alarm button that you will use when creating additional alarms. This button is at the top right of the screen.

Click Select Metric

Click Billing

Click Total Estimated Charge

Check the EstimatedCharges metric.

Click Select metric

From here, in Step 1, you can adjust the metric name and condition for the alert.

By default, the Threshold Type is Static, and the condition is Greater than. You should give a threshold value such as 0, so the alarm will trigger when you get billed anything over the free tier. Now click next.

In step 2, the Notification page, the default Alarm state trigger is In Alarm. We can keep this value. We must also select or create an SNS(Simple Notifications Service) topic that will receive the notification.

If you create a new SNS topic, give it a name and the email where you want the notification to be received. Now click create Create Topic and wait for it to be created.

Make sure to use a valid email because you will need to confirm the SNS subscription.

Click Next.

In step 3, give the alarm a name and description.

Click Next.

In step 4, preview your alarm settings and ensure they are correct.

Now click **Create alarm **at the bottom right. It will take a couple of minutes to finish.

I’ve linked the documentation below for reference.
Creating a billing alarm to monitor your estimated AWS charges

Creating an AWS Budget

Note: Currently, you get 2 budgets for free.

Search and go to **Billing **or go to the AWS billing page. https://console.aws.amazon.com/billing/home?#/

Under Cost Management click Budgets.

Click the orange Create Budget button.

By default, a template is selected. We can use this version for now. You have multiple template options, but we will keep the default, Zero spend budget.

Give the budget a name, amount, and email recipients.

Click Create budget.

Congratulations, you have created an AWS account and set up your AWS budget and Billing alarms.

In the following article, I will show you how to create an AWS IAM user and install the AWS CLI. We will use the AWS CLI to create an AWS Budget and Billing alarm.

Leetcode: Linked List Cycle (Kotlin)

Christopher Coffee — Tue, 26 Sep 2023 01:30:00 +0000

This is an easy Leetcode LinkedList question. I will go over my thought process for solving this. For this, we will use Floyd’s Cycle Detection algorithm.
Linked List Cycle - LeetCode

Brainstorm

Define two pointers — slow and fast. Initialize both of them to the head of the linked list.
Move the slow pointer one step at a time and the fast pointer two steps at a time.
At each step, check if slow and fast pointers are equal. If they are equal at some point, then a cycle exists in the linked list.
If the fast pointer reaches the end of the list (i.e., it becomes null), then there is no cycle in the list.

Solution

/**
 * Example:
 * var li = ListNode(5)
 * var v = li.`val`
 * Definition for singly-linked list.
 * class ListNode(var `val`: Int) {
 *     var next: ListNode? = null
 * }
 */

class Solution {
    fun hasCycle(head: ListNode?): Boolean {
       var slow = head
       var fast = head

       while(fast != null && fast.next != null){
           slow = slow?.next
           fast = fast?.next?.next

           if(slow == fast){
               return true
           }
       }

       return false
    }
}

Adding Google Maps to the Keith Lee food app (React.js)

Christopher Coffee — Sun, 02 Apr 2023 02:03:55 +0000

In the previous article, I wrote about creating a Keith Lee food app using React.js and Firebase.
Creating a Keith Lee Food App w/ React.js & ChatGPT

In this article, I will show you how I used the Google Maps Javascript SDK to display the list of restaurants on a map.
Google Maps Platform Documentation | Maps JavaScript API | Google Developers

I have discontinued using Firebase and moved to Netlify for hosting and Supabase for the backend. I will create an article on my steps to migrate away from Firebase to Supabase.
Develop and deploy websites and apps in record time | Netlify
The Open Source Firebase Alternative | Supabase

Enabling the Google Maps Javascript SDK

We are going to follow along with the documentation from Google.
Set up your Google Cloud project | Maps JavaScript API | Google Developers

Create a Google Project. Click on the blue Create new project button.

Fill out the form and click Create.

Now we need to enable Google Maps for our project. Go to the following link and click Enable the Maps Javascript API
Set up your Google Cloud project | Maps JavaScript API | Google Developers

The button below will initially state Enable. Click it then it will say Manage. **Now click **Manage

Click Credentials on the left hand side.

You will see your Google Maps API key. We will need this soon. You may also restrict the API key to localhost:3000. When you get a domain, you may add it to the list.

We will first need to load the Javascript API in our React project. Go to the following link. We will follow along with this documentation.
Load the Maps JavaScript API | Google Developers

I am going to use the recommended Dynamic Library Import. Add the following Javascript code before the closing body tag in index.html

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src='https://maps.${c}apis.com/maps/api/js?'+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY_HERE",
    v: "weekly",
    libraries: ["marker", "maps"]
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

Notice we are adding the marker and maps libraries. Make sure to add your API key here.

Now let’s create a new React functional component. We can also copy the firebase code from the previous article.

    import {Box} from "@mui/material";


    const config = {
      // Your Firebase project's config object goes here
    };

    firebase.initializeApp(config);
    const db = firebase.firestore();

    const RestaurantMap = () => {




        return <Box
            sx={{
                height: '100vh',
                width: '100%'
            }}
            id="map"
        >

        </Box>


    }

    export default RestaurantMap;

You can run the code and it will show a blank Google map.

We will then load the markers on the google map. Add this right above the return. Note I have comments of numbers. I will detail those steps under the code.

Also, we are querying firebase again. We could use redux-toolkit to load and save the data only when needed. For now, we will load it again. In the future, I may add redux-toolkit. It would only take a few mins to implement.
Quick Start | Redux Toolkit

    useEffect(() => {
        // Get data from the 'tiktoks' collection in Firestore
       const google = window.google; // 1
       const {Map} = await google.maps.importLibrary("maps"); // 2
       const map = new Map(document.getElementById("map"), {  
                        center: {lat: 36.188110, lng: -115.176468},
                        zoom: 12,
                   });
       db.collection('tiktoks').get() // 3
          .then(snapshot => {
                const data = snapshot.docs.map(doc => doc.data()); // Each item in firebase

                const position = {lat: place.lat, lng: place.lng};


                const marker = new google.maps.Marker({ // 4
                     map: map,
                     position: position,
                     title: place.name,
                });

                // ...Retrieve variables below depending on what you want to do 

                const information = new google.maps.InfoWindow({ // 5
                    content: '
                             <h4>${place.name}</h4>
                             <div>
                                 ${address}
                             </div>
                             ${dir}
                             ${callDiv}
                             <hr>
                             <div>
                                 <a href="${shareHref}" target="_blank"/>Share</a>
                             </div>
                             <hr>
                              <div>
                                 <a href="${tiktokUrl}" target="_blank"/>Watch Review</a>
                             </div>
                             ${orderUrl}
                             '
                });

                marker.addListener('click', function () { // 6
                    information.open(map, marker);
                });



          })
          .catch(error => {
            console.log(error);
          });
      }, []);

Add the google library
Import the maps library from google and create Map object. I have this centered in Las Vegas, since this is where most of the food reviews happen.
Get the list of items from firebase
Add the Google Marker for the current item
Add the InfoWindow to the Google Marker. This is the popup that shows when you click the Google Marker.
Add a click listener to the marker to make the InfoWindow popup when you show it.

You can refer to the documentation for further customization:
Add a Google Map with a Marker to Your Website | Maps JavaScript API | Google Developers

A few days after creating this map with the list of items, I found someone created a Google MyMaps on reddit.

I liked it so much, I decided to add it to the web app on a separate page

Thanks for reading. Let me know if any clarification is needed. You can find the Keith Lee food app at the following link:
Keith Lee Food Reviews

Creating a Keith Lee Food App w/ React.js & ChatGPT

Christopher Coffee — Sun, 02 Apr 2023 01:55:29 +0000

Creating a Keith Lee Food App w/ React.js & ChatGPT

This personal project was inspired by watching Keith Lee and wanting to try the family-owned restaurants he reviewed on his platforms. I was initially using a spreadsheet to keep track of the names and addresses of the places.

Here are his socials for reference:
@keith_lee125 | Twitter, Instagram, TikTok | Linktree

For the weekend, I decided to hack together two simple React.js web apps to improve this process.

UPDATE: Recently added maps and the ability to order food.

Note: I have moved away from firebase, but the following steps will work. I have moved to Supabase for the backend and Netlify for hosting. These platforms are more cost-efficient. I will have articles detailing how to do this soon.

Set up Firebase Firestore

I wanted to store this in a remote database. I chose to use Firebase so I could quickly put this together.

You can create a new project by going to the firebase console.

https://console.firebase.google.com/

Once your project is created. Click on Add app. It’s under your project name at the top center of the page.

Next, choose the web platform.

Give your web app a name and click Register app

Now it will give you instructions on how to install firebase.

We will follow these instructions soon, but first, we need to create a react app. Keep this tab open. We will refer to it soon. Specifically, we will need the firebase config

I also wanted ChatGPT to generate the boilerplate code. So let’s do that first.

ChatGPT

I used ChatGPT to try to make this process easier. It gave a few incorrect code snippets, but this is also maybe because I’m using the latest versions of everything, and ChatGPT was only trained up to a certain time period.

I only wanted to store the information from Keith Lee’s TikTok videos. So this includes the id used on the TikTok web app, the description used in the video, and embedding the TikTok video.

This tool did help improve the process. Here was my first prompt:

Can you create a react frontend that reads data from firebase firestore. example code

It then replied with this code:

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  // Your Firebase project's config object goes here
};

firebase.initializeApp(config);
const db = firebase.firestore();

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Get data from the 'users' collection in Firestore
    db.collection('users').get()
      .then(snapshot => {
        const data = snapshot.docs.map(doc => doc.data());
        setData(data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Notice the comment // Your Firebase project’s config object goes here. This is the **const firebaseObject code. **The screenshot cuts off the rest of the code, but here is an example:

const firebaseConfig = {
  apiKey: "yourApiKey",
  authDomain: "projectid.firebaseapp.com",
  projectId: "projectid",
  storageBucket: "projectid.appspot.com",
  messagingSenderId: "77777777777",
  appId: "1:777777777777:web:ab7ag7v7a7",
  measurementId: "G-MEASUREMENTID"
};

Create a new React App

To use this code, we need to create a new react project. I created a new app using the following command

npx create-react-app keith-lee-food

After the react project is created, I installed the firebase SDK using the following command

npm install --save firebase

firebase

I want to note that I installed the latest firebase version using npm, so the code in the useEffect won’t work.

We can follow the documentation to update this code. We could have also asked ChatGPT, and it may have known. Not sure how new this latest version of firebase is.
Get started with Cloud Firestore | Firebase

So the updated will look something like this:

import { collection, getDocs } from "firebase/firestore"; 

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log('${doc.id} => ${doc.data()}');
});

Of course, we don’t have any data in the database, so it won’t return anything. We also will have a different collection name.

This is the next prompt I gave ChatGPT:

can you change the query to read an id and description and show a tiktok embed widget using the id. also show the description under that

This is the code it replied with

 import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  // Your Firebase project's config object goes here
};

firebase.initializeApp(config);
const db = firebase.firestore();

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Get data from the 'tiktoks' collection in Firestore
    db.collection('tiktoks').get()
      .then(snapshot => {
        const data = snapshot.docs.map(doc => doc.data());
        setData(data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {data.map(tiktok => (
        <div key={tiktok.id}>
          <h1>{tiktok.description}</h1>
          <iframe 
            src={'https://www.tiktok.com/embed/${tiktok.id}'}
            frameBorder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
            allowFullScreen 
          />
        </div>
      ))}
    </div>
  );
}

export default App;

It still gives the code we can’t use in the useEffect. We can give ChatGPT our code, but I just replaced it with the code mentioned earlier in the documentation.

I took off the iframe because it loaded every video, leading to bad performance. It also auto-plays every time you scroll. autoplay option for allow doesn’t cause this.

Setting up Firebase Firestore with React

Now we need to set enable Firestore on the Firebase console. Go back to the Firebase console and click Continue to console.

Click the Build menu option on the left. Click Firestore Database

On the next screen, click Create database.

Now a popup will show asking us what mode we would like to start in. Keep it at Start in production mode. Click Next.

Next will ask where we want the data stored. I kept it at this region and clicked enable.

Now we can add data through the console to quickly test our application. On this screen, click Start collection.

Give a collection id. I will use the id ChatGPT generated, tiktoks. Click Next.

Now we can create a document. If you are unfamiliar with Firestore, this is a record in our collection.

Using the TikTok website, we can figure out what information we need to save. For now, I will just save the id and description.

Observe the following URL: https://www.tiktok.com/@keith_lee125/video/7186098325475839278

The Document ID and id field will be the long number at the end of the URL.

If you go to the URL, it will go to one of Keith Lee’s videos. I copied the description from there. Click **Save **after adding your data.

Now we need to update the code ChatGPT gave to include the config and web 9 version of firebase. Here is an example:

import React, { useState, useEffect } from 'react';
import { collection, getDocs } from "firebase/firestore"; 
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'

const config = {
  apiKey: "yourApiKey",
  authDomain: "projectid.firebaseapp.com",
  projectId: "projectid",
  storageBucket: "projectid.appspot.com",
  messagingSenderId: "77777777777",
  appId: "1:777777777777:web:ab7ag7v7a7",
  measurementId: "G-MEASUREMENTID"
};


const firebaseApp = initializeApp(config);
const db = getFirestore(firebaseApp);

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Get data from the 'tiktoks' collection in Firestore
      const querySnapshot = await getDocs(collection(db, "tiktoks"));
      querySnapshot.forEach((doc) => {
          setData(doc.data());
      });
  }, []);

  return (
    <div>
      {data.map(tiktok => (
        <div key={tiktok.id}>
          <h4>{tiktok.description}</h4>
          <iframe 
            src={'https://www.tiktok.com/embed/${tiktok.id}'}
            frameBorder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
            allowFullScreen 
          />
        </div>
      ))}
    </div>
  );
}

export default App;

I left the code for the iframe in here, but you can leave it if you want. I also changed the h1 to h4.

In the root directory of this project, run this in the terminal to start your application.

npm start

I then wanted to show a button to get directions. For this, I wanted to add latitude and longitude in the database.

I gave another request to ChatGPT as follows:

can you give example if we had longitude and latitude from firebase as well and show a button to get directions. can you show example code.

It replied :

Sure, here is an example of how you can modify the code to read longitude and latitude from Firestore, and show a button that, when clicked, opens the default maps application with the location pre-populated as the destination:

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  // Your Firebase project's config object goes here
};

firebase.initializeApp(config);
const db = firebase.firestore();

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Get data from the 'locations' collection in Firestore
    db.collection('tiktok').get()
      .then(snapshot => {
        const data = snapshot.docs.map(doc => doc.data());
        setData(data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {data.map(tiktok => (
        <div key={tiktok.id}>
          <h1>{location.name}</h1>
          <button onClick={() => {
            window.open('https://www.google.com/maps/dir/?api=1&destination=${tiktok.latitude},${tiktok.longitude}');
          }}>Get Directions</button>
        </div>
      ))}
    </div>
  );
}

export default App;

This will open Google Maps website on desktop and iPhone devices. It will open the Google Maps app on Android Devices.

I wanted it to open Apple Maps app on iOS devices. I then asked ChatGPT to do this.

can you change the html to consider if the user is on an apple device. can you show example code

ChatGPT replied with this code:

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  // Your Firebase project's config object goes here
};

firebase.initializeApp(config);
const db = firebase.firestore();

function App() {
  const [data, setData] = useState([]);
  const [isApple, setIsApple] = useState(false);

  useEffect(() => {
    // Get data from the 'locations' collection in Firestore
    db.collection('tiktoks').get()
      .then(snapshot => {
        const data = snapshot.docs.map(doc => doc.data());
        setData(data);
      })
      .catch(error => {
        console.log(error);
      });

    // Check if the user is on an Apple device
    const isAppleDevice = /iPad|iPhone|iPod/.test(navigator.userAgent);
    setIsApple(isAppleDevice);
  }, []);

  return (
    <div>
      {data.map(tiktok => (
        <div key={tiktok.id}>
          <h1>{tiktok.name}</h1>
          {isApple ? (
            <a href={'maps://?q=${tiktok.latitude},${tiktok.longitude}'}>Get Directions</a>
          ) : (
            <button onClick={() => {
              window.open('https://www.google.com/maps/dir/?api=1&destination=${tiktok.latitude},${tiktok.longitude}');
            }}>Get Directions</button>
          )}
        </div>
      ))}
    </div>
  );
}

export default App;

I wanted to move this location logic to a function.

This is my updated html:

{
    place.lat === undefined ? <div></div> :
    <button onClick={() => goToMap(tiktok)}>Get Directions</button>
}

I’m using a ternary operator to check if lat (latitude) is set. If it is not set, I will show an empty div element. If we have lat it will show the button. The button now calls a function that passes the tiktok object.

Here is the goToMap function.

 const goToMap = (tiktok) => {
        if (isApple) {
            window.open('maps://?q=${tiktok.lat},${tiktok.lng}');
        } else {
            window.open('https://www.google.com/maps/dir/?api=1&destination=${tiktok.lat},${tiktok.lng}');
        }
 }

Now let’s add latitude and longitude fields to the firestore document we created earlier. I found the latitude and longitude using google maps. Click Add field, and add the following lat and lng fields.

lat: 36.11337630000001

lng: -115.3094725

Re-run or refresh the web apps page, and you should now be able to get directions to the location.

Since the embedded TikTok wasn’t going to be a good solution, I wanted to add a button to go to the video to watch the review again and get ideas of the kinds of food they have.

I copied and created a new button above the first button for this.

 <button onClick={() => watchVideo(tiktok.id)}>
     Watch Video
 </button>

Then watchVideo function will look like this:

const watchVideo = (id) => {
    window.open('https://www.tiktok.com/@keith_lee125/video/${id}', '_blank', 'noreferrer');
}

I’m basically recreating the url we based all of the data off of. Re-run the app to get an idea of how it works.

When clicking this button on the desktop, it will go to the videos page on the TikTok website. On iOS and Android devices, it will deep link to the TikTok app if you have it installed.

A couple of more things to note. For the design, I used the react Material UI package. I won’t go over the steps how, but I may in a future post.
MUI: The React component library you always wanted

I also created an admin react app to easily create and edit info.

I won’t go over this in this article but may create another one detailing those steps. For now, I’ll give a high-level overview of how I achieved this.

Create a new react app and copy the files from this project.
Installed react-router to go to the edit and create new page. https://reactrouter.com/en/main
Go to the Google Developers Console and enable the Google Places API for this project, which was created by firebase. Also, get the API key. https://console.developers.google.com/
Used code from here to implement the Google Places API. https://github.com/Gapur/google-place-autocomplete
Once we get a place object from the autocomplete component, we can easily get info such as latitude, longitude, address, etc.

My current version of the Keith Lee Food web app can be found at https://keithleefood.com. Would you try it? Rate it 1–10!

Leetcode: Symmetric Tree (Kotlin)

Christopher Coffee — Fri, 25 Mar 2022 02:16:34 +0000

Symmetric Tree is an “Easy” tagged Leetcode problem. The problem states “Given the root of a binary tree, check whether it is a mirror of itself (i.e., symmetric around its center).”

They give us two examples:

Brainstorming:

We can have a queue to check if the root’s left and right children are identical.

These are the steps we can take to arrive at our solution:
Create a queue and add the root twice to the queue.

As long as there is a TreeNodes in the queue, we will take two TreeNodes.
If they are both null, we have arrived at null leaf nodes, so continue.
Next, if either node is null, we will return false since we already are checking if both are null beforehand. This is similar to the given Example 2.
Lastly, we also need to check if the values are the same. Of course, if the values are not the same, they are not symmetric.
We will add each of the two current nodes opposite nodes to the queue.

Code:

Codelab version of this solution:
https://cmcoffeedev.com/codelabs/leetcode-symmetric-tree/index.html#0

Video Solution:

Leetcode — Kth Smallest Element in a BST (Kotlin)

Christopher Coffee — Fri, 25 Mar 2022 02:01:30 +0000

This is a medium Leetcode problem that wants you to find the kth smallest value (1-indexed) of every value in the Binary Search Tree. I will show you two approaches I took to solve this.

https://leetcode.com/problems/kth-smallest-element-in-a-bst/

First I will show you the problem statement, examples and constraints given.

Since this is a Binary Search Tree we can do an in-order traversal to get the values sorted.

Recursive Inorder Traversal
For the recursive inorder solution we can create an ArrayList of Int and pass it to our inorderTraversal function. We can add the values to the list at each recursive call.

Create an ArrayList of Int and pass it to our inorderTraversal function.
For the inorderTraversal function, we will have a base case that returns if the tree node passed is null.
Add the values to the list at each recursive call.
Return list[k-1] as our answer. They mention “k” starts at 1 indexed.

Iterative Inorder Traversal

Create a stack of nullable TreeNode
root and k are immutable so we need to create mutable copies.
We can create a variable called temp or current as a copy for the root TreeNode. We can use indexToFind as a copy for k.
We will have nested while loops. The outer most while-loop will check if temp is null or the stack is empty.
The inner while loop will traverse all of temps left children and push them to the stack.
After traversing the left children we will eventually hit a null node. We can then pop from the stack and set that node as temp, which will be the last leaf node we touched.
We can pre decrement the indexToFind variable each time we get to this point. When the value is 0, we have found the index we are looking for so we can return the value. Set temp to temp’s right child.

Alternatively we can add the values to a list and return list[k-1] as we did in the recursive traversal.

Codelab version of this solution: https://cmcoffeedev.com/codelabs/leetcode-kth-smallest/index.html?index=..%2F..index#0

Video Solution:

DEV Community: Christopher Coffee

FlutterFlow Stepper Form with Firebase Firestore

Introduction

Creating the Form Field

Creating the Firestore Collection

Creating the Custom Widget

Save to Firebase

Test your custom StepperForm widget

Resources

AWS Fundamentals: IAM, GitHub, and AWS CLI

Introduction

Create a new Admin user

Create IAM User Access Key

Create a GitHub Account

Create a Gitpod account

Install the AWS CLI

Set AWS environment variables

Create a Billing Alarm (via the CLI)

Create an AWS budget (via the CLI)

Leetcode: Single Number (Kotlin)

Problem Statement

Examples

Constraints

Brainstorm

Solution

Monitor Android’s filesystem with fsmon to detect insecure storage

Download Android Studio or Android command line tools

Add platform tools to your PATH (optional)

Set up a virtual rooted Android Device

Download fsmon

Download the Insecure Shop apk

Using ADB

How To Set Up a Free Business Email Using Your Domain

Setting Up Your Domain With Zoho Mail

Flutter Flow: Carousel Menu

Custom Widget

Adding Carousel Slider dependency

Adding JSON menu items to local state

Menu Item Example JSON

Writing the custom carousel menu code

Setting up screens to run our custom widget

AWS Fundamentals: Create an Account, Billing Alarm, and Budgets

Table of Contents

Introduction

Create an AWS account

Enable Billing Alerts

Create a Billing Alarm

Creating an AWS Budget

Leetcode: Linked List Cycle (Kotlin)

Brainstorm

Solution

Adding Google Maps to the Keith Lee food app (React.js)

Enabling the Google Maps Javascript SDK

Creating a Keith Lee Food App w/ React.js & ChatGPT

Creating a Keith Lee Food App w/ React.js & ChatGPT

Set up Firebase Firestore

ChatGPT

Create a new React App

Setting up Firebase Firestore with React

Leetcode: Symmetric Tree (Kotlin)

Leetcode — Kth Smallest Element in a BST (Kotlin)