Throughout this handbook, you will learn how to:

• Correctly establish and manage an app's unique identity.

• Understand the roles of different Apple developer certificates and how to create and manage them.

• Differentiate between various types of provisioning profiles and know when to use each one.

This guide is geared towards new developers who want to learn how the code signing process works, but it should also be useful experienced developers who want or need to refresh their memory.

Prerequisites

While there are no hard prerequisites to understanding the certificates, bundles, and provisioning profiles for distributing on Apple platforms, it helps to have an Apple developer account to follow along.

Table of Contents

• App IDs, Bundle IDs – Your App’s Identity

• Understanding Distribution: A Deep Dive into Certificates

• Bridge between everything: Provisioning Profiles

• Device management – Development and Ad Hoc Builds

• Possibilities: Enabling Capabilities and Services

• Conclusion

App IDs, Bundle IDs — Your App’s Identity

The Bundle ID and the corresponding App ID registered with Apple form the basis of an application’s identity. Establishing these correctly from the beginning is very important, as errors or misconfigurations here can lead to significant complications down the line, particularly once you’ve submitted your app to App Store Connect.

Understanding CFBundleIdentifier (Bundle ID)

What is the “Bundle ID”?

Think of the Bundle ID as a unique name or a fingerprint for your app. The CFBundleIdentifier, more commonly known as the Bundle ID, is a string that uniquely identifies your application.

This identifier is not just a name – it serves multiple crucial purposes.

• The operating system relies on it to apply specific preferences and settings to an app.

• This is used to launch the application from other apps etc.

• It plays an essential role in the validation of an app's code signature, ensuring the app's integrity and authenticity.

• The Bundle ID defined in an app's Info.plist file must exactly match the Bundle ID registered for the app in App Store Connect for successful submission and distribution.

The Bundle ID string must adhere to specific character limitations: it can only contain alphanumeric characters A-Z, a-z, 0-9, hyphens -, and periods .. It's important to note that Bundle IDs are treated as case-insensitive by the system.

How to Choose and Format Your Bundle ID (Reverse-DNS and Best Practices)

Apple highly recommends, and it is standard practice, to use a reverse-DNS (Domain Name System) format for Bundle IDs.

A common example would be com.yourcompanyname.appname. This convention leverages the global uniqueness of domain names to help ensure the global uniqueness of Bundle IDs.

If an organization uses its unique domain name (for example, sravan.gg becomes gg.sravan ) as the prefix, and the app name is unique within that organization, the resulting Bundle ID (for example, gg.sravan.mycoolapp ) is highly likely to be unique worldwide.

Sidenote: While Xcode won’t stop you from creating something like com.google.mapping or something like that even if you don’t work at Google, this will most likely get rejected when it goes through the AppStore review process. This is because this implies ownership of that domain. So, while it’s technically possible when starting out, you shouldn’t use domains that don’t belong to you.

The fundamental nature of the Bundle ID as a unique, system-wide identifier – coupled with its immutability after an app is first uploaded to App Store Connect – means that you should treat its selection with the same seriousness as choosing a permanent, unchangeable identifier for a critical entity. A mistake in the Bundle ID after this point can necessitate creating an entirely new app listing on the App Store.

App IDs in the Apple Developer Portal: Explicit vs. Wildcard

Which One Do You Need?

In the Apple Developer Portal, developers register an "App ID." This App ID is a record that links one or more applications from a single development team to specific app services (capabilities) and is used in provisioning profiles. We’ll learn more about this in the following sections.

There are two main types of App IDs:

• Explicit App ID: This type is used for a single application. The Bundle ID specified within an explicit App ID must be an exact match for the CFBundleIdentifier in the app's Info.plist file (for example, com.mycompany.myapp). Explicit App IDs are required for apps that use many of Apple's specific services and capabilities, such as In-App Purchases (which are enabled by default for explicit App IDs), Push Notifications, iCloud, HealthKit, and Sign in with Apple.

• Wildcard App ID: This type can be used for a set of applications that share a common Bundle ID prefix. It contains an asterisk (*) as the last part of its Bundle ID string (for example, com.mycompany.*). This wildcard App ID would match any app whose Bundle ID starts with com.mycompany., such as com.mycompany.app or com.mycompany.utility. But you can’t use wildcard App IDs if the app requires services or capabilities that mandate an explicit App ID.

The choice between an explicit and a wildcard App ID has significant implications. The App ID acts as a central registration point, and the capabilities are "enabled" for this registration – more on capabilities later in this handbook.

You can think of an explicit App ID as a specific key designed to unlock extra "keyholes" (capabilities). A wildcard App ID, being more generic, might not fit these extra keyholes. If you choose a wildcard App ID initially for convenience, but you need a feature requiring an explicit App ID (like Push Notifications) later, you’ll be forced to create a new explicit App ID and reconfigure associated settings and provisioning profiles.

So, make sure you carefully consider your current and future app features when selecting an App ID type. The following table provides a quick comparison**.**

My personal recommendation is always go with explicit App Ids unless you need the flexibility of wildcard app ids.

Step-by-Step: How to Register Your App ID in the Apple Developer Portal

To register an App ID, an you’ll need an Apple Developer Program membership. Also, the actions must be performed by someone with an Account Holder or Admin role.

The process is as follows:

1. Sign in to the Apple Developer Portal and navigate to "Certificates, Identifiers & Profiles," then select "Identifiers" from the sidebar.

2. Click the “Add button (+)” to create a new identifier.

   

3. Select "App IDs" from the list of options and click "Continue."

   

4. Make sure that the "App" type is selected (it usually is by default) and click "Continue."

   

5. Enter a "Description" for the App ID. This is for your reference within the portal (for example, "My very cool App ID").

   

6. Choose the "App ID Type": "Explicit" or "Wildcard."

7. For an "Explicit App ID," enter the exact Bundle ID that will be used in your Xcode project (for example, com.yourcompany.yourapp). For a "Wildcard App ID," enter a Bundle ID suffix ending with an asterisk (for example, com.yourcompany.*).

8. Scroll down to the "Capabilities" section and select the checkboxes for any app services your app will use. Some capabilities might require further configuration at this stage or later. (Again, we’ll cover app capabilities in more detail later on).

9. Click "Continue," review all the details carefully, and then click "Register" to finalize the App ID creation.

   

How to Manage Your Bundle ID: Xcode, App Store Connect, and the Point of No Return

The Bundle ID specified in an Xcode project is critical. To set it:

1. In the Xcode project navigator, select the target for your app.

2. Open the "Signing & Capabilities" tab.

3. Expand the "Signing" section.

4. In the "Bundle Identifier" text field, enter the Bundle ID. This identifier must precisely match the Bundle ID associated with an explicit App ID registered in the Developer Portal, or conform to the pattern of a wildcard App ID if applicable.

It's important to understand the difference between the "Bundle ID" (or CFBundleIdentifier) in the Xcode project and the "App ID" registered in the Developer Portal. The "App ID" in the developer portal is an entity that contains a “Bundle ID” string (either explicit or wildcard). The string in your Xcode project's "Bundle Identifier" field must match this contained string.

When preparing for distribution via TestFlight or the App Store, you’ll need to create an app record in App Store Connect. The Bundle ID you enter during this app record creation must exactly match the Bundle ID in the Xcode project.

A Critical Warning: Immutability After First Upload

This is a point of no return: Once you upload a build of an app to App Store Connect, the Bundle ID for that app record cannot be changed.

In addition, after an upload, you can’t delete the associated explicit App ID registered in the Developer Portal. This immutability highlights the need for careful planning and verification of the Bundle ID before any uploads occur.

If you prefer programmatic management or automation, the App Store Connect API provides resources for managing Bundle IDs. You can read more on that here.

Understanding Distribution: A Deep Dive into Certificates

What are Certificates?

Certificates are digital credentials that verify a developer's identity – that is, you – to Apple and, by extension, to the app users.

They are fundamental to Apple's code signing process, which is mandatory for all apps to ensure they originate from a known source and have not been tampered with since being signed.

What is Code Signing: Ensuring Trust and Integrity

Code signing is you as a developer signing the app with your signature. It is the process of attaching a digital signature to an app's code. This signature assures users of two key things:

1. Authenticity: The app was created by an identified Apple developer (an individual or a team).

2. Integrity: The app's code has not been altered or corrupted since it was signed by the developer.

The process involves using a private key, securely held by the developer (you), to create the signature. The corresponding public key, embedded within the developer's certificate (issued by Apple), is used by the system to verify this signature.

This system of identity verification and integrity checking is crucial. The developer's certificate, issued by Apple as a Certificate Authority (CA), vouches for their identity. The code signing process, using hashing and encryption, ensures that any modification to the code after signing would invalidate the signature.

For app developers, benefits of code signing include removing warnings on macOS for apps distributed outside the Mac App Store, providing a smoother user experience. It is a mandatory requirement for listing applications on any of Apple's App Stores. It also enhances security of the app as it acts as a deterrent against malicious tampering.

Types of Certificates: Development, Distribution, and Developer ID

Apple provides different types of certificates for various stages of development and methods of distribution. Each of them has a distinct role to play throughout the app development process.

1. Development Certificates (for example, "Apple Development"):

• Purpose: Used to sign apps during the development phase, allowing them to be installed and run on a limited number of registered test devices and simulators for debugging and testing.

• Identifies: Typically identifies an individual developer through their developer ID.

• Used with: Development provisioning profiles – more on this later.

2. Distribution Certificates (for example, "Apple Distribution"):

• Purpose: Used to sign apps intended for distribution, either through Ad Hoc methods (to a limited set of registered testers) or for submission to the App Store.

• Identifies: The development team via the team identifier.

• Use Cases:

  1. App Store: For signing the final version of an app that will be uploaded to App Store Connect for TestFlight beta testing or release on the App Store (iOS, macOS, tvOS, watchOS). These are used with App Store provisioning profiles – more on this later.

  2. Ad Hoc: For signing apps that will be distributed to a limited number of registered test devices outside of the App Store or TestFlight. These are used with Ad Hoc provisioning profile. More on this later.

3. Developer ID Certificates (for Mac apps distributed outside the Mac App Store):

• Purpose: Specifically for macOS developers who wish to distribute their applications directly to users (for example, from their own website) rather than through the Mac App Store. Gatekeeper on macOS recognizes apps signed with a Developer ID certificate, assuring users that the app is from a known developer and has not been tampered with.

• Types:

  1. Developer ID Application: Used to sign the Mac application bundle (.app) itself.

  2. Developer ID Installer: Used to sign a Mac Installer Package (.pkg) that contains the signed application.

  3. Limit: Developers can create up to five Developer ID Application certificates and up to five Developer ID Installer certificates.

The following table summarizes these certificate types:

How to Create an Apple Certificate – An Overview

Here’s a general outline of how you create an Apple Certificate:

• Generate a Certificate Signing Request (CSR) on your Mac. (Yes you need a mac.)

• You upload this CSR in AppStoreConnect as a part of creating the certificate.

• Download the certificate from AppStoreConnect once it’s issued.

• Install the certificate into your Keychain.

Now we’ll go through each step in more detail. This part is very important, since we have to save some of the files generated locally or we lose the ability to transfer these certificates. This would mean revoking and re-issuing certificates (I have done this more times than I’d like to admit).

How to Create a Certificate Signing Request (CSR)

A Certificate Signing Request (CSR) is a fancy name for an encrypted block of text containing information about who’s requesting the certificate (like your name and the public key). These are widely used in the cryptography world.

For our purposes, you’ll generate a CSR on your Mac and then submit it to Apple to request a digital certificate. The CSR generation process also creates a new public/private key pair on the Mac – the private key is stored in Keychain Access and is used for the eventual code signing.

To create a CSR using Keychain Access on macOS:

1. Launch Keychain Access (you can find it at /Applications/Utilities/ or use spotlight).

2. From the menu bar, choose Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.... (Here the Certificate Authority would be Apple).

3. In the dialog, enter your email address and a common name for the key (for example, "My Mac Key" or "[Your Name] Dev Key"). This name is primarily for your identification in the Keychain.

4. Leave the "CA Email Address" field empty – we won’t email it to the Certificate Authority (Apple).

5. Select the "Saved to disk" option and click "Continue".

6. Save the file, which will have a .certSigningRequest extension. The corresponding private key is now stored in the login keychain. This private key is irreplaceable by Apple and you must store it yourself.

How to Generate and Download Your Apple Certificates

Once you’ve created a CSR, you can request a certificate from the Apple Developer Portal:

1. Navigate to "Certificates, Identifiers & Profiles" and select "Certificates".

2. Click the add button (+).

3. Choose the desired certificate type

4. Follow the prompts, and when asked, upload the .certSigningRequest file generated earlier.

5. After Apple processes the request, the certificate will be available for download as a .cer file.

   

To install the certificate, double-click the downloaded .cer file. It will be added to the Keychain Access application – usually appearing in the "login" keychain under the "My Certificates" category, where it should be paired with the private key generated during the CSR generation process earlier.

You can see my certificate and private key in the image below for reference.

To recap, the CSR certifies that you generated the request from your mac. The certificate certifies that Apple (in this case, an intermediary like the "Apple Worldwide Developer Relations Certification Authority") confirms that they verified the CSR and that it is indeed you who will sign with the certificate (.cer) file.

This is enforced by only you having access to the private key – if you lose it, you cannot use this certificate anymore.

So, if you use this certificate (and the private key) to sign an app, the app store / operating system knows that it is you for sure since Apple confirmed it.

How to Store Your Keys: What are .p12 Files?

As I mentioned in the previous section, to code sign an app you need your certificate (containing the public key) and the corresponding private key. This is created along with the CSR, and you can find it in the Keychain Access app.

We call the combination of the certificate and the private key a digital identity. This proves your identity when you sign an app with them.

.p12 Files (Personal Information Exchange):

A .p12 file is a password-protected archive format used to bundle a certificate along with its private key. Its primary purposes are:

• Backing up the digital identity in case you lose access to your Mac.

• Transferring the digital identity to another Mac (for example, for another team member or a new development machine).

• Providing the identity to automated build systems or third-party build services.

Historically, I have stored the .p12 file on a shared drive with my team and shared the password to it verbally – you can also store it in a local backup disk.

Great. So how do you create one?

To export a .p12 file from Keychain Access:

1. Open Keychain Access, select the "login" keychain, and go to the "My Certificates" category.

2. Locate the desired certificate. It should have an expandable disclosure triangle indicating an associated private key (look at the image of my certificate above).

3. Select both the certificate and its private key (or right-click the certificate and choose "Export").

4. Right-click and choose "Export [X] items...".

5. In the save dialog, choose the "Personal Information Exchange (.p12)" file format.

6. Assign a strong password to protect the .p12 file. This password will be required when importing the file elsewhere. It is crucial for security.

7. Save the file to a secure location.

   

Bridge Between Everything: Provisioning Profiles

Provisioning profiles are the final link between an App ID, developer certificates, and, in some cases, a list of specific test devices. They act as a permission slip, authorizing an app signed with a particular certificate to be installed and run either on designated devices or to be submitted to the App Store.

What Exactly is a Provisioning Profile?

A provisioning profile is a .mobileprovision (for iOS / VisionOS) or .provisionprofile (for macOS) file that holds several key pieces of information:

• The App ID: Specifies which application (or set of applications, if using a wildcard App ID) the profile applies to.

• Certificates: Contains one or more developer or distribution certificates that can be used to sign the app.

• Device UDIDs (for Development and Ad Hoc): For profiles intended for testing on specific devices, it includes a list of the Unique Device Identifiers (UDIDs) of those authorized devices – more on devices in the next section.

• Entitlements: A list of app services or capabilities (like Push Notifications, iCloud, App Groups) that the app is permitted to use. These are derived from the capabilities enabled for the associated App ID.

You can open the file using vim or any editor to see parts of the content which include the App Id, Operating Systems, Certificates, and so on.

The operating system checks the provisioning profile at app launch to ensure the app is authorized to run on the current device and use the requested services. If the profile is missing, invalid, or doesn't match the app's signature or the device, the app will not launch.

They are difference from certificates, because certificates are tied to you as a developer. But provisioning profiles are to a specific app – with specific capabilities to a specific developer and maybe on specific devices.

If any of these change (let’s say you added a capability or your certificate expired, for example), you’ll need to generate the provisioning profile again. These are the files you will work with the most out of all the above, and any change can cause your profile to become invalid.

Types of Provisioning Profiles: Development, Ad Hoc, App Store, (and Enterprise)

Types of Provisioning Profiles: Development, Ad Hoc, App Store, (and Enterprise)

Just like certificates, we have multiple types of provisioning profiles. Similar to certificates, there can be development and distribution provisioning profiles.

Since we also keep track of the devices a profile is supposed to run, we have several kinds of distribution profiles based on which devices it should run on.

We also have special profiles like “Enterprise” which will add additional capabilities (like main camera access on the Vision Pro) but will restrict your app distribution methods to enterprise only.

We will go over each of these types now. Feel free to skip to the one that you’re looking for.

Development Provisioning Profile:

• Allows an app to be installed and debugged on specific devices registered in the developer's account during the active development phase. More on device registration later.

• Contains an App ID, one or more development certificates, and a list of registered device UDIDs.

• Created manually in the Apple Developer Portal or generated automatically by Xcode if Automatically manage signing is enabled.

Ad Hoc Provisioning Profile:

• Allows distribution of an app to a limited number of registered test devices without requiring Xcode for installation. This is ideal for distributing builds to QA teams, beta testers, or clients for feedback.

• Contains an App ID (often an explicit App ID, or an Xcode-managed one like XC Wildcard or XC), a single distribution certificate, and a list of registered device UDIDs.

• Created manually in the Developer Portal or managed by Xcode's automatic signing.

App Store Connect Provisioning Profile:

• Required to sign an app for submission to App Store Connect. This is the pathway for distributing apps via TestFlight for broader beta testing and for official release on the App Store.

• Contains an explicit App ID (or an App ID that matches the app's bundle ID, including Xcode-managed App IDs), and a single distribution certificate. Device UDIDs are not included in this profile type since this is meant for broader distribution.

• Created manually in the Developer Portal or managed by Xcode's automatic signing.

Enterprise Provisioning Profile:

• Exclusively for members of the Apple Developer Enterprise Program. It allows developers of these orgs to distribute proprietary, in-house applications directly to their employees, bypassing the public App Store.

• Note: This program has stringent enrollment criteria and is strictly for internal distribution within the enrolled organization – these apps cannot be pushed to AppStore.

Developer ID Provisioning Profile:

• Required to utilize certain Apple services or advanced capabilities like Push Notifications, CloudKit, Sign in with Apple, or specific iCloud services.

• Contains an App ID, a Developer ID distribution certificate, the entitlements authorized for the app.

• Created manually in the Developer Portal – will not be added automatically by Xcode’s automatic signing.

How to Create and Manage Provisioning Profiles

Creating and managing provisioning profiles usually requires an Account Holder or Admin role in the Apple Developer Program. You also need a configured App ID, the appropriate certificate(s), and for Development or Ad Hoc profiles, a list of registered device UDIDs.

If you are new developer, my recommendation is to read this article completely, then get back to this section once you have your devices setup.

General steps for manual creation in the Developer Portal:

1. Navigate to "Certificates, Identifiers & Profiles" and select "Profiles".

2. Click the add button (+).

3. Select the type of provisioning profile to create (for example, "iOS App Development," "Ad Hoc," "App Store").

4. Choose the App ID you’re targeting from the dropdown list.

5. Select the certificate(s) to include in the profile. Development profiles can include multiple development certificates – so you can include all the team member certificates here. Ad Hoc and App Store profiles include a single distribution certificate.

6. If creating a Development or Ad Hoc profile, select the registered devices to include.

7. Provide a name for the provisioning profile (this is for identification in the portal and Xcode).

8. Click "Generate" and then "Download" the .mobileprovision or .provisionprofile file.

You need to make downloaded profiles available to Xcode. You can often do this by double-clicking the downloaded file or by refreshing profiles within Xcode's account settings (Preferences > Accounts).

I really like Xcode's "Automatically manage signing" feature and it can simplify profile management by a lot. It creates and updates profiles as needed. But, understanding the manual process is crucial for troubleshooting because when things go wrong, it is straightforward to debug the issue with this knowledge.

Provisioning profiles will become invalid and require regeneration if:

• The capabilities of the associated App ID are changed – let’s say you added a new capability.

• An included certificate expires or is revoked.

• For Development/Ad Hoc profiles, if devices are added or removed from the registered list in a way that affects the profile's device set, or if the profile's own expiration date is reached. When such changes occur, you have to edit the profile (if possible) or delete it and recreate it in the Developer Portal, then re-download it and install it again. While this may seem like a complicated step, it’s straightforward if you do it a couple of times.

Device Management — Development and Ad Hoc Builds

For testing applications on physical Apple hardware outside of Testflight or AppStore, you’ll need to register the Unique Device Identifiers (UDIDs) of your test devices with your Apple Developer account. This registration is a necessary step for creating Development and Ad Hoc provisioning profiles.

Why You Need to Register Test Devices

Development and Ad Hoc provisioning profiles are specifically tied to a list of registered devices. An app signed with this profile can be installed directly without going through App Store process. This means that you need to register devices you intend to develop on. This restricts bad faith actors from releasing apps widely without developer and App Store supervision.

The UUID of a device is like a physical address (think Mac Address). If you don’t include this in the provisioning profile you used to sign an app package, it cannot be installed on that device.

Let’s go over the steps to do that.

How to Find Your Device's UDID (Unique Device Identifier)

A UDID is a unique 40-character hexadecimal string (for older devices) or a 25-character string (format XXXXXXXX-XXXXXXXXXXXXXXXX) that uniquely identifies a specific iPhone, iPad, Apple Watch, Apple TV, Vision Pro or Mac.

There are several ways to find a device's UDID:

• Xcode: Connect the device to a Mac running Xcode. Open Xcode and navigate to Window > Devices and Simulators. Select the connected device from the list on the left. The UDID will be displayed as the "Identifier" in the device information panel.

• Finder (macOS Catalina and later): Connect the iOS or iPadOS device to a Mac. Open Finder and select the device from the sidebar under "Locations." The UDID may be displayed directly, or it might be necessary to click on the line of text beneath the device's name (which shows model, storage, and OS version) to cycle through to display the UDID.

• iTunes (older macOS versions): For Macs running macOS Mojave or earlier, connect the device and open iTunes. Select the device icon when it appears. In the "Summary" tab, click on the "Serial Number" field; this will change to display the UDID.

• Apple Silicon Macs: When registering an Apple Silicon Mac, it's important to look for the "Provisioning UDID," which can be found in System Information under Hardware > Provisioning UDID.

• Other Ways: There are some websites that will install a profile on to your device to get the UUID – so as an absolute last resort, you can do this. But I highly recommend doing it in the one of the official ways to avoid any potential issues.

How to Register Devices in the Apple Developer Portal

Device registration is managed through the "Certificates, Identifiers & Profiles" section of the Apple Developer Portal (developer.apple.com) and typically requires an Account Holder or Admin role.

To manually register a single device:

1. Sign in to the Apple Developer Portal and navigate to "Certificates, Identifiers & Profiles," then select "Devices" from the sidebar.

2. Click the add button (+) to register a new device.

3. Select the correct platform for the device (for example, iOS, macOS, tvOS, watchOS).

4. Enter a descriptive "Device Name" (this is for your reference, for example, "Sravan’s iPhone 11 Pro") and the device's UDID obtained in the previous step.

5. Click "Continue," review the information to make sure everything is correct, and then click "Register".

For registering multiple devices, the portal supports uploading a specially formatted text file (a .txt or a .deviceids file) containing device names and UDIDs.

If "Automatically manage signing" is enabled in Xcode, Xcode can automatically register a connected device when it's selected as a build target. This is the way I managed all of my personal projects and devices. On the other hand, the file upload was really useful at my workplace to keep track of all the devices and add them at once.

Understanding Device Limits and Annual Resets

The Apple Developer Program imposes limits on the number of devices that can be registered for testing:

• Annual Limit: Each membership year, a development team can register up to 100 devices for each product family (iPhone, iPad, Apple Watch, Apple TV, Apple Vision Pro, Mac). If you are a large team, this can potentially bottleneck you. When we ran into this issue, we created a new development team that could be split so that it didn’t have too much interdependence. There is no other way as far as I know, other than asking Apple and appealing them.

• Disabling Devices: While a device can be disabled in the portal during the membership year, doing so does not free up its slot or increase the number of available devices for that year. This part is frustrating but I think this is the only way they can enforce the 100 device limit to avoid people swapping devices. They should just provide a pathway to increase the limit, really. Disabling a device will, however, invalidate any provisioning profiles that include it, requiring those profiles to be regenerated.

• Resetting Device List (Start of New Membership Year): At the beginning of a new membership year, Account Holders, Admins, and App Managers are given a one-time option when they first sign in to "Certificates, Identifiers & Profiles" to remove devices from their list. This allows them to "reset" their available device count back to 100 for each product family. You can choose to remove specific devices or all registered devices. This is your one chance per year to remove unused devices completely and free up slots for new devices.

• Membership Expiration: If a developer program membership is nearing expiration and is not planned for renewal, the Account Holder will have an option, starting 30 days before expiration, to download a copy of their registered device list. They can also opt to have all devices removed from the account immediately upon membership expiration. If no action is taken, devices are typically removed automatically 180 days after membership expiration.

Possibilities: Enabling Capabilities and Services

App Capabilities (or App Services) are features provided by Apple that we (as developers) can integrate into our applications to extend functionality and provide richer user experiences. Examples include iCloud storage, Push Notifications, Sign in with Apple, Apple Pay and HealthKit integration. Enabling these often requires explicit configuration for an app's App ID in the Apple Developer Portal and within the Xcode project.

Why You Should Use Capabilities

Making full use of these App capabilities can set your app apart from other apps in a very noticeable way. You can use Apple Wallet integration if you want users to scan a membership card. You can use journaling suggestions if you want to prompt them to journal something. You can use iCloud Storage to lean further into inter-device synchronization.

When you enable a capability for an App ID, it results in specific entitlements being added to the app's provisioning profile. These entitlements are permissions that the operating system checks at runtime to ensure the app is authorized to use the requested service.

How to Configure Capabilities for Your App ID (Apple Developer Portal)

Enabling and configuring capabilities is typically done by an Account Holder or Admin in the Apple Developer Portal (developer.apple.com).

1. Navigate to "Certificates, Identifiers & Profiles" and select "Identifiers."

2. Choose the App ID for which capabilities need to be configured.

3. In the App ID's settings, there will be a "Capabilities" tab. Select the checkboxes for the capabilities the app requires.

4. Many capabilities require additional configuration steps. For these, a "Configure" or "Edit" button will usually appear next to the capability once selected. Examples include:

• App Groups: Requires creating or selecting an app group identifier to allow data sharing between a main app and its extensions, or between different apps from the same developer.

• Apple Pay: Requires associating one or more Merchant IDs with the App ID.

• iCloud: May require choosing Xcode version compatibility and creating or assigning iCloud containers for Key-Value or Document storage

• Sign in with Apple: May require configuring the App ID as a primary app or grouping it with an existing primary App ID, and optionally providing a server-to-server notification endpoint URL.

5. After configuring all selected capabilities, click "Save." A warning dialog may appear, which needs confirmation to finalize the changes.

Enabling a capability in the Developer Portal is only one part of the process. You’ll also need to add and configure it within the app's target in the Xcode project, under the "Signing & Capabilities" tab.

1. Navigate to the project settings and select “Signing & Capabilities”.

2. Press the “+ Capability” button to select the capability.

3. Once selected, the capability should appear in the pane. Depending on the capability, you might want to configure it further.

This Xcode step integrates the necessary frameworks, adds entitlements files to the project, and adjusts build settings.

How Enabling Capabilities Affects Your Provisioning Profiles

Changes to an App ID's enabled capabilities have a direct and significant impact on its associated provisioning profiles.

• Invalidation: When a capability is enabled, disabled, or its configuration is modified for an App ID, all existing provisioning profiles that use that App ID immediately become invalid.

• Regeneration Required: These invalidated provisioning profiles must be regenerated (either by editing and re-saving them in the Developer Portal or by having Xcode's automatic signing handle it). The regenerated profiles will then include the updated set of entitlements corresponding to the newly configured capabilities.

• Platform Impact: Enabling a capability for an App ID that is used across multiple platforms (for example, an iOS app and its watchOS companion) will affect the provisioning profiles for all eligible platforms that use that App ID.

This is something to keep in mind. Especially when it comes to distribution profiles since those are usually manually managed.

Conclusion

While all of these might seem daunting, Apple’s automatic process should handle most of it. But I highly recommend learning how everything works so that you can debug it in case something goes wrong. I also highly recommend using manually created profiles for distribution.

While signing and handling certificates is not the most exciting part of the App development process, it is a necessary skill to have. In my next article, I will go over distributing an app from start to finish (which includes these processes and more restrictions).

You can follow me at Sravan Karuturi for my other posts.

React Todo applications are generally very basic – in fact, they're a great exercise if you're a React beginner and want to work on building up your skills.

But have you ever built a Todo application where a user can add todos using voice commands? This makes it a bit more complex and exciting.

So that's what we're going to do in this tutorial. And to build this voice-based Todo app, we will be using three main tools:

1. React – for the user interface.
2. Firebase – for the database.
3. Alan AI – for implementing voice commands.

So, let's get started.

How to Create the Todo App UI using React

Let's create our React app first. Simply type in the following command:

npx create-react-app react-todo-alan-firebase

It will initialize and create our React Application like this. Then, we'll navigate into that folder and start the application using npm start.

Now let's create a folder called components. It will contain our main component, called Todo.js. Create the Todo.js file as well.

import React from 'react'

export default function Todo() {
    return (
        <div>

        </div>
    )
}

Give the application a header (or name), something like Voice-based Todo Application, or anything of your choice.

import React from 'react'

export default function Todo() {
    return (
        <div>
            <h2>Voice-based Todo Application</h2>
        </div>
    )
}

Then, import this component into your App.js file.

import './App.css';
import Todo from './components/Todo';

function App() {
  return (
    <div>
      <Todo />
    </div>
  );
}

export default App;

You will see the Header on the output screen.

Let's make the header appear in the center. So, give the h2 a classname of header in the Todo.js component.

import React from 'react'

export default function Todo() {
    return (
        <div>
            <h2 className="header">Voice-based Todo Application</h2>
        </div>
    )
}

And then we'll add some styling in App.css file so the header is centered.

.header{
  text-align: center;
}

You will see the above output on the screen, with the centered header.

Now, let's create a card that will contain our todo items.

import React from 'react'

export default function Todo() {
    return (
        <div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">

            </div>
        </div>
    )
}

Create a div and make the className be todo-card. You will see the main parent div has the className of todo-main. This is because we need everything in the center.

.todo-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  text-align: center;
}

.todo-card {
  border: 1px dashed #1f133d;
  height: 50vh;
  width: 50vh;
  border-radius: 20px;
}

And add the above styles to App.css. It'll look like this now:

Let's add the lists now.

import React from 'react'

export default function Todo() {
    return (
        <div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">
                <div className="todo-list">
                    <h3>
                        Wash the Clothes
                    </h3>
                </div>
                <div className="todo-list">
                    <h3>
                        Cook the Dinner
                    </h3>
                </div>
                <div className="todo-list">
                    <h3>
                        Code some software
                    </h3>
                </div>
            </div>
        </div>
    )
}

So, I have created a div, and it contains the items in h3 tags. These texts are static for now, but we will soon create dynamic texts too, coming from the Firebase Database.

And here are our updated styles:

.todo-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  text-align: center;
}

.todo-card {
  border: 1px dashed #1f133d;
  height: 50vh;
  width: 50vh;
  border-radius: 20px;
}

.todo-list{
  text-align: center;
}

So that's the output now, with three items on our list.

Now, let's add a close icon, that will remove each item after we are done with it.

And to add icons, we need an icon package. So, let's install React Icons with this command:

npm install react-icons --save

After the installation, choose any icon package from the left sidebar.

I am using Feather Icons, so I will import it.

First, let's import that package using this command:

import { FiX } from "react-icons/fi";

Then, call it after the h3 tag.

import React from 'react'
import { FiX } from "react-icons/fi";
export default function Todo() {
    return (
        <div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">
                <div className="todo-list">
                    <h3>
                        Wash the Clothes
                    </h3>
                    <FiX />
                </div>
                <div className="todo-list">
                    <h3>
                        Cook the Dinner
                    </h3>
                    <FiX />
                </div>
                <div className="todo-list">
                    <h3>
                        Code some software
                    </h3>
                    <FiX />
                </div>
            </div>
        </div>
    )
}

Above, this is what our application looks like now. But we want the close icon and the todo item to be in the same row.

Give the Icon a className of close-icon.

 <FiX className="close-icon" />

And in the App.css, add the following styles:

.todo-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  margin-left: 10px;
}

Our Todo.js component will have the following final code up to this point:

import React from 'react'
import { FiX } from "react-icons/fi";
export default function Todo() {
    return (
        <div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">
                <div className="todo-list">
                    <h3>
                        Wash the Clothes
                    </h3>
                    <FiX className="close-icon" />
                </div>
                <div className="todo-list">
                    <h3>
                        Cook the Dinner
                    </h3>
                    <FiX className="close-icon" />
                </div>
                <div className="todo-list">
                    <h3>
                        Code some software
                    </h3>
                    <FiX className="close-icon" />
                </div>
            </div>
        </div>
    )
}

And our App.css looks like this:

.todo-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  text-align: center;
}

.todo-card {
  border: 1px dashed #1f133d;
  height: 50vh;
  width: 50vh;
  border-radius: 20px;
}

.todo-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  margin-left: 10px;
}

Now this is how our UI will look:

How to Add Alan AI to our React Project

Head over to https://alan.app/ and create your account.

After signing in, you can create a project. Just click the plus button.

But before we can use it, we need to install the Alan AI package first. So, head over to https://alan.app/docs/client-api/web/react for the React documentation.

Install Alan Al using the following command:

npm install @alan-ai/alan-sdk-web --save

Now, let's import Alan in our main App.js file.

import alanBtn from "@alan-ai/alan-sdk-web";

Then, we need to create a useEffect Hook. It will start our Alan service whenever our component is mounted or loaded.

useEffect(() => {
    alanBtn({
        key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
        onCommand: (commandData) => {
            if (commandData.command === 'go:back') {
                // Call the client code that will react to the received command
            }
        }
    });
}, []);

This alanBtn requires a key which we'll need to get. So, in the project that you created in Alan, you should see an "Integrations" button in the top bar. Click that button.

And there you will get your key.

Paste that key in your alanBtn in your React app, like this:

import './App.css';
import Todo from './components/Todo';
import alanBtn from "@alan-ai/alan-sdk-web";
import { useEffect } from 'react'
function App() {
  useEffect(() => {
    alanBtn({
      key: '86e866fbe49666abd385ee5c9f9cbf5c2e956eca572e1d8b807a3e2338fdd0dc/stage',
      onCommand: (commandData) => {

      }
    });
  }, []);
  return (
    <div>
      <Todo />
    </div>
  );
}

export default App;

Now, check the output, and you will see a microphone button.

Now, we need to create an Intent in our Alan App. It will start with the Add command, like add Washing Clothes, add Write Some Code, and so on. So, let's write the code for that:

intent('Add $(item* (.*))', (p) => {
    if(p.item.value){
        p.play({ command: 'todoApp', data: p.item.value });
        p.play(`${p.item.value} added`);
    }
    else{
        p.play(`Cannot add Empty Item`);
    }
})

It will also return the item back to us, which we can see in our React Application. Here, we also have a check that stops us from adding any empty item. If we try, it will reply with "Cannot add Empty Item".

Now, we want to receive the spoken item back to our React application.

import './App.css';
import Todo from './components/Todo';
import alanBtn from "@alan-ai/alan-sdk-web";
import { useEffect } from 'react'
function App() {
  useEffect(() => {
    alanBtn({
      key: '86e866fbe49666abd385ee5c9f9cbf5c2e956eca572e1d8b807a3e2338fdd0dc/stage',
      onCommand: (commandData) => {
        console.log(commandData)
      }
    });
  }, []);
  return (
    <div>
      <Todo />
    </div>
  );
}

export default App;

Simply console.log the commandData, and you'll get the following result. Don't forget to click the microphone button and say something. You'll see what you said in the console.

Alright great, our Alan AI is now all set.

How to Use Firebase to Send Data to the Firestore Database.

We will now send this data to Firebase.

But first, we need to install it. Head over to https://firebase.google.com/ and create a project there as well.

To install Firebase, simply type npm install firebase.

Then, create an application in the project, like this:

It will give us some configuration data. Just create a file in the src folder, name it firebase-config.js, and add those configuration data.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyCP8qL8z9BorGF3NZJsGb4vSaWHYyCVfc8",
    authDomain: "todo-firebase-alan.firebaseapp.com",
    projectId: "todo-firebase-alan",
    storageBucket: "todo-firebase-alan.appspot.com",
    messagingSenderId: "892581913000",
    appId: "1:892581913000:web:dbe08ac753c3adaab87d9d"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

Don't forget to export the const app.

Next, we need to access Firestore as well. So, let's import it here in our firebase-config.js file.

import { getFirestore } from 'firebase/firestore'

export const database = getFirestore(app);

And export it too at the bottom.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyCP8qL8z9BorGF3NZJsGb4vSaWHYyCVfc8",
    authDomain: "todo-firebase-alan.firebaseapp.com",
    projectId: "todo-firebase-alan",
    storageBucket: "todo-firebase-alan.appspot.com",
    messagingSenderId: "892581913000",
    appId: "1:892581913000:web:dbe08ac753c3adaab87d9d"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const database = getFirestore(app);

This is the whole firebase-config code.

Now, in App.js, we need to import this app and database.

import { app, database } from './firebase-config';

Next, we need to create a connection to our Firebase Firestore. For that, we need the collection property from Firebase Firestore. Also, we'll import addDoc which we'll use to add data to Firestore.

import { collection, addDoc } from 'firebase/firestore';

Now, let's create the connection to our database.

Create a variable, and put in the database that we imported from the firebase-config file along with the name we want to give to our collection. Since we want the collection to be todo-list, we can add the following:

const databaseRef = collection(database, 'todo-list');

To add data, we need that addDoc property.

The addDoc property will take two parameters. The first is the connection we created, the databaseRef. The second is the data we want to add, as an object.

Put the addDoc in the useEffect Hook like this:

useEffect(() => {
    alanBtn({
      key: '86e866fbe49666abd385ee5c9f9cbf5c2e956eca572e1d8b807a3e2338fdd0dc/stage',
      onCommand: (commandData) => {
        addDoc(databaseRef, { item: commandData.data })
      }
    });
  }, []);

Currently, our Firestore is empty.

Now, let's try this out. Speak something into the microphone starting with add command, and it will be visible in the Firebase Firestore.

You see, what we said is now getting added in Firebase.

Now, let's try to read and display this data.

Pass the databaseRef to the Todo Component as a prop.

<Todo databaseRef={databaseRef}/>

And then receive it in the Todo Component.

export default function Todo({databaseRef})

Create a useEffect hook in the Todo.js component, and inside the useEffect Hook create the function getData.

useEffect(() => {
        const getData = async () => {

        }
        getData()
    }, [])

We will use getDocs property to read data from the Firebase Firestore. And we also need that connection databaseRef, that we passed as a prop previously.

let data = await getDocs(databaseRef);

const getData = async () => {
  let data = await getDocs(databaseRef);
  console.log(data.docs.map((item) => ({ ...item.data(), id: item.id })));
}

We map the incoming data to make it more readable. We also add the unique id of the item that the app will use to delete that item later.

Let's check our console now:

You see, we are getting it.

Now, let's store this data in a state to display in the React Application.

Import the useState Hook, then create an array state like this:

 const [todoList, setTodoList] = useState([]);

And set the data using the setTodoList function:

setTodoList(data.docs.map((item) => ({ ...item.data(), id: item.id })));

Now, let's map the todoList array.

<div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">
                {todoList.map((todo) => {
                    return (
                        <div className="todo-list">
                            <h3>
                                {todo.item}
                            </h3>
                            <FiX className="close-icon" />
                        </div>
                    )
                })}
            </div>
        </div>

We will see our data in our React UI and it looks like this:

Now, let's update this so that each Todo starts with a capital letter.

Give h3 as the className of todo-items.

<h3 className="todo-item">
 {todo.item}
</h3>

And in App.css, add this styling:

.todo-item{
  text-transform: capitalize;
}

And you will see that each Todo is capitalized now.

Now, if we add anything by speech command, our list in React should update. So, let's configure our useEffect to run every time we speak something into the app.

In the App.js file, create one state. It will be a boolean, with the initial state of false.

const [update, setUpdate] = useState(false)

This state will change to true when we say something, or when the useEffect in App.js runs.

useEffect(() => {
    alanBtn({
      key: '86e866fbe49666abd385ee5c9f9cbf5c2e956eca572e1d8b807a3e2338fdd0dc/stage',
      onCommand: (commandData) => {
        addDoc(databaseRef, { item: commandData.data })
        .then(() => {
          setUpdate(true);
        })
      }
    });
  }, []);

Then, we will pass the update state and the function to update state in Todo.js.

<Todo databaseRef={databaseRef} update={update} setUpdate={setUpdate}/>

And receive these two in the Todo component.

export default function Todo({ databaseRef, update, setUpdate })

Then, in the useEffect of Todo.js, once it's fetched our data from Firebase Firestore, set the update to false using the setUpdate function. Then put the update state in the dependency array.

useEffect(() => {
        const getData = async () => {
            let data = await getDocs(databaseRef);
            setTodoList(data.docs.map((item) => ({ ...item.data(), id: item.id })));
        }
        getData()
        setUpdate(false)
    }, [update])

This might be a bit confusing, but let me explain.

When we speak, the update state is changed from false to true. Then, when the data fetching from Firestore is done, it is being changed to false from true. That way, the state is constantly changing. So the useEffect gets updated every time the update state changes.

Let's try it out now. Say something and the list will be dynamically updated.

Now, let's add the delete function to delete items from Firebase Firestore and our React application.

Create a function called deleteItems.

const deleteItems = () => {

}

And bind this function to the close icon like this:

<FiX className="close-icon" onClick={() => deleteItems()}/>

When we click a particular close icon, we need to pass the id of that item to the function, which will be used to delete that item.

<FiX className="close-icon" onClick={() => deleteItems(todo.id)}/>

And in the function, receive it.

Let's try to console.log our id:

const deleteItems = (id) => {
  console.log(id)
}

We will get that particular id in the console.

Now, before deleting any todo item, we need to specify which todo to delete. So, we will create a reference using this id. We will use the doc property from Firestore.

So, first import doc from Firestore with this command:

import { getDocs, doc } from 'firebase/firestore';

Then, in the function 1deleteItems1, add the following code:

const data = doc(database, 'todo-list', id)

This doc takes three parameters – the database, the collection name, and the id. We have all the three things.

The database has been imported from firebase-config. The todo-list is the name of the Firestore collection. And the id we got from the close button click.

To delete an item, we need another property called deleteDoc from Firestore.

import { getDocs, doc, deleteDoc } from 'firebase/firestore';

Then, simply add the following:

const deleteItems = (id) => {
   const data = doc(database, 'todo-list', id);
   deleteDoc(data)
}

Try it now – click the close icon, then check Firestore. That item will be deleted.

But we have the same problem we had during the add and read actions: the React application is not getting updated after we delete an item.

So, the first thing to do is move the getData function outside the useEffect Hook. Don't worry, it will still work.

const getData = async () => {
   let data = await getDocs(databaseRef);
   setTodoList(data.docs.map((item) => ({ ...item.data(), id: item.id })));
}

useEffect(() => {   
   getData()
   setUpdate(false)
}, [update])

And in the deleteDoc function, we need to call the getData function again, to fetch the updated data after the user deletes an item.

const deleteItems = (id) => {
    const data = doc(database, 'todo-list', id);
    deleteDoc(data)
    .then(() => {
       getData()
    })
}

Here is the whole Todo.js code:

import React, { useEffect, useState } from 'react'
import { FiX } from "react-icons/fi";
import { database } from '../firebase-config';
import { getDocs, doc, deleteDoc } from 'firebase/firestore';
export default function Todo({ databaseRef, update, setUpdate }) {
    const [todoList, setTodoList] = useState([]);
    const getData = async () => {
        let data = await getDocs(databaseRef);
        setTodoList(data.docs.map((item) => ({ ...item.data(), id: item.id })));
    }
    useEffect(() => {
        getData()
        setUpdate(false)
    }, [update])

    const deleteItems = (id) => {
        const data = doc(database, 'todo-list', id);
        deleteDoc(data)
            .then(() => {
                getData()
            })
    }

    return (
        <div className="todo-main">
            <h2 className="header">Voice-based Todo Application</h2>

            <div className="todo-card">
                {todoList.map((todo) => {
                    return (
                        <div className="todo-list">
                            <h3 className="todo-item">
                                {todo.item}
                            </h3>
                            <FiX className="close-icon" onClick={() => deleteItems(todo.id)} />
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

And the App.js code as well:

import './App.css';
import Todo from './components/Todo';
import alanBtn from "@alan-ai/alan-sdk-web";
import { useEffect, useState } from 'react';
import { app, database } from './firebase-config';
import { addDoc, collection } from '@firebase/firestore';
function App() {
  const databaseRef = collection(database, 'todo-list');
  const [update, setUpdate] = useState(false)
  useEffect(() => {
    alanBtn({
      key: '86e866fbe49666abd385ee5c9f9cbf5c2e956eca572e1d8b807a3e2338fdd0dc/stage',
      onCommand: (commandData) => {
        addDoc(databaseRef, { item: commandData.data })
          .then(() => {
            setUpdate(true);
          })
      }
    });
  }, []);
  return (
    <div>
      <Todo databaseRef={databaseRef} update={update} setUpdate={setUpdate} />
    </div>
  );
}

export default App;

Now, we can add items using voice commands, and it will be stored in our Firebase Database. It will also show up in our React Application.

Ther's one last thing to do. In our App.css file, we need to set the height of the card to auto, to prevent the text from overflowing.

.todo-card {
  border: 1px dashed #1f133d;
  height: auto;
  width: 50vh;
  border-radius: 20px;
}

And this is just a simple UI design. You can use your own designs if you want. Go ahead, build this awesome application.

Thanks for reading!

You can check out my video on the same topic at Let's build a Voice-Based Todo Application using React, Firebase, and Alan AI, which is on my YouTube channel.

Happy Learning.

If you want to build serious web applications, the language to use is JavaScript.

But what JavaScript skills do you need to build apps effectively?

What Are the Essential JavaScript Skills?

There are tons of courses on JavaScript available find online, but few specialize in what so many developers want to know:

What JavaScript skills are essential to building your own applications?

There is a gap between learning vanilla JavaScript and learning a library like React, Angular, and Vue for creating single-page JavaScript applications.

I've put together a complete course with the goal of showing you how to bridge this gap.

My goal is not only to teach you the skills you need while presenting real-world examples to solidify your understanding, but also to give you a new perspective. You'll find a better way of looking at your JavaScript code that will help you start thinking like a professional app developer.

Want to get started now? Take the entire course here.

Course Overview

Let's take a brief tour through the course and each major section. We'll see how each section will ensure that you're taught JavaScript in the most effective, no-nonsense way possible.

In this course, we'll develop our skills from basic concepts to more complex ones. Even if you're an intermediate JavaScript developer, we'll cover every concept with additional depth and observations on the language that you likely haven't heard before.

Variables and Strings

We'll begin with the building blocks of any JS program: variables.

First we'll cover declaring variables with let and const and how they are an improvement over the old var syntax. We'll learn concepts like block scoping, variable shadowing and the temporal dead zone, but also discover how these new keywords can make our code easier to process.

For example, why the salePrice variable below becomes more readable when we declare it with const instead of let or var.

Click to watch this lecture

Because we declare the variable with as a constant, we know that it won't be assigned a different value later on. This makes our code easier to understand both for other developers and for ourselves.

Finally, in this section we'll touch on template literals, and how they improve strings within JavaScript in basically every way, from formatting text, to inserting dynamic values, and more.

Types and Conditionals

Next we'll touch on types and conditionals, which go hand in hand.

We'll first take a look at a strange (and often poorly understood) part of JavaScript called type coercion, which means how types are changed from one value to another.

Types can change implicitly when we write conditionals and this means we must know about truthy and falsy values, values that are subtly coerced to the boolean true and falsy, respectively.

We'll see how we can use truthy and falsy values to our advantage by creating shorter conditionals using the && (and) and || (or) operators. This trick, known as short circuiting, is the basis of how JS libraries like React display or hide elements.

Click to watch this lecture

Then we'll see how to shorten our if-else conditionals with the ternary operator, and how they come in handy in situations when we want to conditionally set a variable's value.

Functions

After that, we'll dive into functions, the powerhouse of any Javascript app.

We'll demystify a crucial feature of functions called closures. We'll wrap our head around what a closure is by through creating our in a practical example.

This will enable us to see why closures are worth knowing and how they can improve our JavaScript code by keeping track of values between function calls:

Click to watch this lecture

We'll cover a type of function, which you'll find in every modern Javascript app, namely, arrow functions. With arrow functions, we can greatly cut down our code as we go through all of the available tricks to making them as concise as possible.

Lastly, we'll touch on default values in functions and how they can make our code more reliable, especially if an expected argument isn't provided.

Objects

From primitive data types, we'll move onto objects.

Understanding essential app-building concepts like mutations and immutability isn't possible without knowing the difference between primitive types and object types in JavaScript. We'll cover this difference in detail and see firsthand why it matters for the reliability of our code.

We'll touch on a variety of practical patterns to more easily get our object data through object destructuring, as you see below:

Click to watch this lecture

Then after destructuring our objects, we'll see how to better assemble them. By using the object spread operator we can seamlessly merge multiple objects in an immutable fashion.

Arrays

Arrays are essential for any list of data that we display in our apps and we need to know how to manipulate them with ease.

We'll cover how to perform actions on all elements in arrays through higher order array functions like map and filter to transform our elements or remove them from our array.

Additionally, we'll use methods like find to get individual elements based on certain conditions:

Click to watch this lecture

Then we'll cover the most important array method, reduce, and see its power to transform our array data into virtually any data type we want.

Object-Oriented JavaScript

Next we'll get started with object-oriented programming and cover the core idea behind it that makes object oriented programming in JavaScript possible–the constructor function.

Constructor functions make it possible to give our objects shared behavior (functions) through something called the prototype chain.

Through another newer JavaScript feature called classes, we'll cover how we can easily inherit functionality through what's known as prototypical inheritance and extend our classes to share features between them.

Click to watch this lecture

Async JavaScript

After that we'll move on to async JavaScript, which is a necessary skill to have and understand if want to create sophisticated JavaScript programs of any kind.

We'll begin with a discussion of what asynchronous code is and how it was handled in the past using callback functions and how this creates problems in our code (such as 'callback hell').

Fortunately, we'll fix some of the inherent problems with using callbacks through an ES6 feature called a Promise. We'll gain experience using promises in a practical way by getting familiar with the browser's Fetch API, which allows us to make HTTP requests and bring outside data into our apps.

Then, best of all, we'll touch on how to make our promises work and look just like synchronous code so we can easily reason about it with the help of the new async-await syntax for functions.

Click to watch this lecture

Essential Topics

We'll wrap up the course with some key skills necessary for starting to build complete JavaScript projects. First of all, we'll do a deep dive into ES Modules, an ES6 feature which allows us to share our JavaScript code across files.

We'll tackle thorny issues such as the this keyword by covering a list of concrete rules to follow in order to figure out it's value in any context, such as in a DOM event handler:

Click to watch this lecture

And finally, we'll wrap up the course with a general discussion of imperative versus declarative code, which you should strive for in your coding career, and why.

Watch the course now

Take this course and, within an afternoon or two, you'll learn concepts that will meaningfully grow your JavaScript skillset and enable you to tackle high-powered front-end libraries like React, Angular, Svelte, Vue, and more with confidence.

Enjoy!

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Building any new project from scratch can be intimidating. There's a lot to decide before you can even start coding to test out your idea.

How are you building the front end? Plain CSS, or a framework? Vanilla HTML and JS, or a framework or library such as Vue, React, Angular, or Svelte?

What back end language will you use? JavaScript, Ruby, PHP, Python or something else? Maybe 'serverless'?

What about the database? Relational? MySQL, Postgresql? NoSQL? Mongo? Maybe something 'easy' like Firebase instead?

How will you handle authentication? Maybe a Passport integration that just bundles in a Facebook, Google, Github and LinkedIn login screen?

Whenever I have a cool idea for a little app I want to build myself, I'm always exhausted by the range of options and decisions to be made.

So I took some time to think about my ideal stack, including authentication and deployment considerations, and bundled it all up into one reasonably easy to setup package: Reno Expo.

What is Reno Expo?

Reno Expo stands for React, NodeJS, Express, and Postgresql. It also uses Sequelize as the ORM for the database.

At its core it is a very simple Express app that has a Create React App bundled for the front end. It is designed to be deployed to Heroku and has a very simple interface for registering new users and logging in, using JWT for authentication.

Apart from that, it is a completely blank slate. I've intentionally left it pretty empty in terms of CSS styling, so I can plug in any style libraries I want or write my own CSS as required.

Aside from the completely raw version of Reno Expo, I've also made a freeCodeCamp project, the Personal Library, using this stack. It serves as an example of how to integrate a CSS framework, Ant Design in this instance, and also provides some examples of extending the database with Sequelize migrations.

Where can I get it?

The code for the two apps can be found here:

• Reno Expo Starter Kit
• Personal Library, built with Reno Expo

Each has a detailed README.md file, but I'll also explain how to get started with both, and explain how the latter app builds upon the starter kit in this article.

What do the apps look like?

Examples for both apps can be found here:

• Reno Expo, example hosted on Heroku
• Personal Library, hosted on Heroku

The starter kit is hideous, frankly. As I stated earlier, it has minimal styling - and I wasn't kidding. The Personal Library shows how one might integrate a CSS framework to get some easy styling wins with minimal effort.

Getting Started with Reno Expo

To work with Reno Expo you will need the following installed on your local computer: git, Node, npm (bundled with your Node download), and Postgresql.

Use the latest versions of each if you are starting from scratch, but if you already have other versions of these on you system they may well work just fine.

For the record, I've been developing with these versions: Node 8.16, npm 6.14 and Postgres 10, and my Heroku deployments have been the latest stable versions of all these.

If you run into problems using different versions, either using these versions or try looking for differences in the appropriate change logs to help you get unstuck.

Your Postgres installation will also require a valid user with database creation privileges. Setting this up is outside the scope of this article, but you can find the relevant guides for your environment with an online search for "getting started with postgres windows/mac/ubuntu" etc.

Installing the Starter Kit

To initialise the starter kit, we will use two terminals. Later, I'll share a trick for spinning up your development environment from a single terminal, but for now we'll keep the front end and back end separated.

In terminal one, from the directory in which you wish to create your new app:

git clone git@github.com:JacksonBates/reno-expo.git

Then navigate to that new folder: cd reno-expo

Make a copy of the .env file: cp .env.example .env

You will need to adjust the development variables in the new .env file:

DEVELOPMENT_DATABASE=database_development
DEVELOPMENT_DATABASE_USERNAME=sequelize
DEVELOPMENT_DATABASE_PASSWORD=password

The development database can be whatever you like, but the username and password will have to match whatever you have configured for your local Postgres installation.

Now install the npm packages for the back end: npm i

Next we will create the database using Sequelize. Note, if your Postgres installation isn't set up properly, this is the first bit that will fall over...

npx sequelize-cli db:create

This will create the database with the name you set in your .env file.

Now we can create the table for our users:

npx sequelize-cli db:migrate

If this works, you should see some terminal output such as:

== 20200606113054-create-user: migrating =======
== 20200606113054-create-user: migrated (0.074s)

If all this has worked, you can now start the back end server with npm start.

Setting up the front end should be more simple. In your second terminal navigate to the client folder: reno-expo/client

Install the node modules: npm i

Now run the React app with npm start.

Single terminal Launch

If everything initialises properly, in future you can easily spin up both the React app and Express server with one command from a single terminal:

npm run dev

Check that it works

In your browser of choice, visit localhost:3000 and you should see a very basic 'Home' page and some links to an Admin and Login page.

Admin should be locked until you log in.

Login will require you to create a user account first. Click 'I don't have an account' and make one via the registration form. You can now log in and test your access to the Admin page.

If all is working, you can begin to develop your app!

Building something more substantial with Reno Expo

To create the Personal Library there were 3 main things to do:

1. install and implement the Ant Design CSS framework
2. create the new front end routes / views
3. extend the api with new database models and controllers

After installing Ant Design with npm i antd I added the following line to the existing App.css file in the client/styles folder: @import"~antd/dist/antd.css";

This ensures the Ant Design styling will be available throughout the app.

The repo for the Personal Library contains all the amendments, but here are some examples of patterns you could use. Of course, you could roll your own CSS, or use other frameworks such as Material-UI, Bootstrap or others, what follows is just illustrative.

Implementing a layout

import React from "react";
import { Layout, Menu } from "antd";
import { Link } from "react-router-dom";
import { useAuth } from "../../context/auth";

const { Content, Sider, Footer } = Layout;

export default function AppLayout(props) {
  const { setAuthTokens } = useAuth();

  const logout = (e) => {
    e.preventDefault();
    setAuthTokens();
    localStorage.removeItem("tokens");
  };

  return (
    <Layout>
      <Sider breakpoint="md" collapsedWidth="0">
        <Menu theme="dark" mode="inline">
          <Menu.Item key="1">
            <Link to={"/"}>
              <span className="nav-text">Home</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to={"/personal"}>
              <span className="nav-text">Personal Library</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to={"/public"}>
              <span className="nav-text">Public Library</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link to={"/login"} onClick={logout}>
              <span className="nav-text">Log out</span>
            </Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout style={{ minHeight: "100vh" }}>
        <Content style={{ margin: "24px 16px 0" }}>
          <div style={{ padding: 24, background: "#fff", minHeight: "80vh" }}>
            {props.children}
          </div>
        </Content>
        <Footer>Reno Expo Books</Footer>
      </Layout>
    </Layout>
  );
}

Apart from a small function handling the auth token, the rest of this uses the components supplied by Ant Design for creating an app with a persistent side bar for navigation, and dynamically rendered content depending on the active component.

Where does the active component get loaded?

import React from "react";
import { Route } from "react-router-dom";
import { AppLayout } from "../layouts";

export default function PublicRoute({ children, ...rest }) {
  return (
    <Route {...rest}>
      <AppLayout>{children}</AppLayout>
    </Route>
  );
}

Above we have an example of the PublicRoute component. There are some other route components I use, but understanding them should be straightforward enough based on this one.

Our PublicRoute is a React-Router <Route> wrapping the layout from above.

App.js shows examples of these Public Routes being used, for example:

<PublicRoute exact path="/">
  <Home />
</PublicRoute>

So in the first two files we can see a reference to children.

children is a built in prop in React that references the child components that are nested in parent components.

In the above examples we see the <Home> component as a child of the PublicRoute. In the PublicRoute.js file we see the reference to children, both in the props and being passed directly to the <AppLayout> component. And finally in the AppLayout.js the <Content> component also contains the children. In all these cases, children refers to that <Home> component passed from App.js.

In practice, this means any of the components passed from App.js on public or private routes will be rendered into the content area on our Layout, leaving the navigation sidebar untouched.

Other files in the client folder should give ample examples of how things like the Login form can be replaced with the Ant Design framework after some small modifications.

Making changes to the back end

The other main thing to develop when working with Reno Expo is the api itself - after all, it's useful being able to register a user and have them log in, but most apps require more than that to be really useful.

For the purposes of my version of the Personal Library we needed to implement a number of new api endpoints, and create some new database tables to store book and comment data.

It's worth highlighting here that in these examples I'm working backwards. Normally I'd create the database migrations and models first, then build the controller methods and api routes afterwards. I present them 'backwards' here so we can follow the logic from our goal back through how it was implemented piece by piece.

The file reno-expo-books/app/router/router.js contains all the routes for the project, but I'll share two examples here for illustration.

// Public route
app.get("/api/books", booksController.getBooks);


// Private route
app.get(
    "/api/user/books",
    [authJwt.verifyToken],
    booksController.getUserBooks
  );

Adding public routes is simple enough, we just need to define the http method, the api endpoint and the controller method that will handle the request, e.g. a GET request, to api/books handled by the booksController getBooks method.

The JWT auth that we already have available from the Reno Expo starter makes the private routes pretty simple too. All we need to do is include the middleware for verifying the token, [authJwt.verifyToken] in the example above.

The controllers for these endpoints, i.e. the code that processes the requests, are also reasonably straightforward, although using Sequelize for the first time can have a bit of a learning curve.

Here's an example of the public 'getBooks' method referenced above:

const db = require("../../models/index");
const Sequelize = require("sequelize");
const Book = db.Book;
const BookComment = db.BookComment;

// Public routes

exports.getBooks = (req, res) => {
  Book.findAll({
    where: { userId: null },
    attributes: {
      include: [
        [
          Sequelize.fn("COUNT", Sequelize.col("BookComments.id")),
          "commentcount",
        ],
      ],
      exclude: ["createdAt", "updatedAt"],
    },
    include: {
      model: BookComment,
      attributes: [],
    },
    group: ["Book.id"],
  })
    .then((data) => res.status(200).json(data))
    .catch((error) => res.send(error));
};

The imports at the top of the file provide the database models and the Sequelize library.

The getBooks method looks complicated, but it is made up of a few relatively simple parts.

Firstly we call the Book model. The model is an ORM representation of the books table - we'll look at how we create that table soon.

Sequelize, like most ORMs, provides not only a schema or description of the table, but also methods that can be called upon the model. In this case we call Book.findAll({...}), which will return all the books it can find that match particular parameters we pass to it.

In this particular instance I wanted to receive something like this:

[
  {
    "id": 1,
    "title": "The Hobbit",
    "commentcount": 3
  },
  {
    "id": 2,
    "title": "The Lord of the Rings",
    "commentcount": 2
  }
]

In the findAll method, first we pass the where parameters. If you are familiar with SQL, it should be pretty clear what this does. In the example above we want all books where the userId is null. This is because we only want to return the public books from this controller, so only those with no user attached to them.

Next, the attributes describes the shape of the response, or the data we expect back. The exclude section is easier to understand, so I'll explain it first. The books table has columns for the created_at and updated_at timestamps for each record. Since we don't want these in our json response, we can omit them explicitly in the exclude section.

Our include portion of the attributes is more complicated. In raw SQL we would count the number of associated comments like this:

SELECT "Books"."id", "Books"."title", COUNT("BookComments"."id") AS "commentcount"
FROM "Books"
JOIN "BookComments" ON "BookComments"."bookId" = "Books"."id"
GROUP BY "Books"."id";

The SQL COUNT function counts all the records in the BookComments.id column, and the GROUP BY function limits the counted comments to each book, by ID.

It's worth pointing out that commentcount is not a column on the books table, rather it is a calculated column derived from the thing we ask the database to count for us.

Sequelize gives us access to the count function via its library.

The relevant function is included in the attributes above like this:

[Sequelize.fn("COUNT", Sequelize.col("BookComments.id")),"commentcount"]

I.e. "Call the Sequelize function 'COUNT', count the columns for BookComments.id, and name the generated column 'commentcount'

This provides our count function just like in the SQL version. All that's left is to include the group: ['Book.id'] as an extra parameter of the findAll method on the Book model.

The other part you may have noticed in the findAll method parameters is this:

include: {
  model: BookComment,
  attributes: [],
},

That's right, another include. Notice that this one is not nested in the attributes, but is its peer. This include acts much the same way as the JOIN statement in the SQL above. It means we want to include the BookComment model, but we don't need to add any attributes since we don't want to reference any of the columns it has directly - we just use it in the count function.

Making changes to the database

The final thing we need to understand to be productive with Sequelize is the migrations for making changes to the database.

Migrations can be thought of as source control for your database.

While you can amend a database directly by creating new tables, adding columns, introducing constraints, changing data types or whatever else, using migrations allows you to make experimental changes with the ability to roll them back easily, and be able to share your development on a database with other people that do not have to struggle with keeping their local databases, and prod, in sync.

Migrations are essentially code that tell your database how to change, and how to undo the change that was introduced, should that be necessary.

Here is the migration for creating the books table:

'use strict';
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.createTable('Books', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      title: {
        type: Sequelize.STRING
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.dropTable('Books');
  }
};

This migration is a module that exports two functions: up and down

The up function makes the changes, while the down function undoes any of the changes that were introduced.

So here we see that up creates a table called 'Books' with the columns id, title, created_at and updated_at. Each column has some associated qualities as well, such as data type, and whether it can contain a null value, for example.

The down function simply drops the table.

I won't share all of the next migration, i.e. the one for creating the Book Comment table, but I will show a snippet from it's up function that defines the bookId column:

bookId: {
  type: Sequelize.INTEGER,
  onDelete: "CASCADE",
  references: {
    model: { tableName: "Books" },
    key: "id",
  },
  allowNull: false,
},

The interesting things to note here are the onDelete property, which is set to "CASCADE" and the references property which links the books table via the id column. This sets up the relationship between a book and its comments. The onDelete property tells the database what to do if a book is deleted: that deletion action should cascade to all associated comments. That is, if I delete 'The Hobbit' all the comments relating to 'The Hobbit' get deleted too.

The last thing to be aware of is that these migrations are also supported by models. The BookComment model looks like this:

"use strict";
module.exports = (sequelize, DataTypes) => {
  const BookComment = sequelize.define(
    "BookComment",
    {
      comment: DataTypes.TEXT,
      bookId: {
        type: DataTypes.INTEGER,
        references: {
          model: "Books",
          key: "id",
        },
      },
    },
    {}
  );
  BookComment.associate = function (models) {
    // associations can be defined here
    BookComment.belongsTo(models.Book, {
      foreignKey: "bookId",
    });
  };
  return BookComment;
};

You will notice some similarities between this and the migration. It has two parts, the Model definition and the model associations. These help reinforce the relationship between the various tables as necessary.

To create tables from scratch, you can use a command like this:

npx sequelize-cli model:generate --name Post --attributes post:text

This will automatically generate a model skeleton and a migration skeleton for a posts table with the column 'post'. You can then fill in the migration and model with whatever other column details or associations are relevant.

If you just want to amend an existing table, for example, to change a data type, or add a column, you can use a command to only generate a migration:

npx sequelize-cli migration:generate --name add-userId-to-posts

You can then make the changes to the existing model and new migration file as necessary.

Applying database changes

Simply writing the code to update the database is not enough, you also need to run the migrations for each database your code works on - i.e. your local dev machine, maybe your staging server if you have one, and also your production server.

The command for running these is:

npx sequelize-cli db:migrate

You can roll back migrations as well:

npx sequelize-cli db:migrate:undo

Happy coding!

That's it! As I mentioned above, I personally deploy everything I make with these to Heroku, and there are detailed instructions for the particulars of deploying them to Heroku in the README.md of Reno Expo. This also includes the commands for running migrations on Heroku's server.

There is a lot to take in here. But if you fundamentally understand Express and React, and are willing to dig in to the Sequelize docs when needed, you can build pretty much anything you can imagine that benefits from a relational database using this starter kit.

It's not quite as fully featured as a proper MVC framework like Rails, Laravel, Sails, or Nest, but I happen to like that there is less cruft and less magic hidden in the internals of this. It is, after all, just a Create React App bundled with a light server and an ORM package. The rest is up to you.

If you made it to the end of this article, and especially if you build anything with Reno Expo, I would love to hear from you. You can contact me on Twitter: @JacksonBates

I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. - "Litany Against Fear," Frank Herbert, Dune

You may be wondering, "What does fear have to do with a React app?" First of all, there's nothing to fear in a React app. In fact, in this particular app, we banned fear. Isn't that nice?

Now that you're ready to be fearless, let's discuss our app. It's a mini Yelp clone where instead of reviewing restaurants, users review planets from the classic sci-fi series, Dune. (Why? Because there's a new Dune movie coming out... but back to the main point.)

To build our full-stack app, we'll use technologies that make our lives easy.

1. React: Intuitive, compositional front-end framework, because our brains like to compose things.
2. GraphQL: You may have heard many reasons why GraphQL is awesome. By far, the most important one is developer productivity and happiness.
3. Hasura: Set up an auto-generated GraphQL API on top of a Postgres database in under 30 seconds.
4. Heroku: To host our database.

And GraphQL gives me happiness how?

I see you're a skeptical one. But you'll most likely come around as soon as you spend some time with GraphiQL (the GraphQL playground).

Using GraphQL is a breeze for the front-end developer, compared to the old ways of clunky REST endpoints. GraphQL gives you a single endpoint that listens to all your troubles... I mean queries. It's such a great listener that you can tell it exactly what you want, and it will give it to you, nothing less and nothing more.

Feeling psyched about this therapeutic experience? Let's dive into the tutorial so you can try it ASAP!

?? Here's the repo if you'd like to code along.

Part 1: Search

Step 1: Deploy to Heroku

The first step of every good journey is sitting down with some hot tea and sipping it calmly. Once we've done that, we can deploy to Heroku from the Hasura website. This will set us up with everything we need: a Postgres database, our Hasura GraphQL engine, and some snacks for the journey.

Not at all a Dune reference

Step 2: Create planets table

Our users want to review planets. So we create a Postgres table via the Hasura console to store our planet data. Of note is the evil planet, Giedi Prime, which has been drawing attention with its unconventional cuisine.

Meanwhile in the GraphiQL tab: Hasura has auto-generated our GraphQL schema! Play around with the Explorer here ??

Step 3: Create React app

We'll need a UI for our app, so we create a React app and install some libraries for GraphQL requests, routing, and styles. (Make sure you have Node installed first.)

> npx create-react-app melange
> cd melange
> npm install graphql @apollo/client react-router-dom @emotion/styled @emotion/core
> npm start

Step 4: Set up Apollo Client

Apollo Client will help us with our GraphQL network requests and caching, so we can avoid all that grunt work. We also make our first query and list our planets! Our app is starting to shape up.

import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "@apollo/client";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import Planets from "./components/Planets";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "[YOUR HASURA GRAPHQL ENDPOINT]",
  }),
});

const App = () => (
  <ApolloProvider client={client}>
    <Planets />
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

We test our GraphQL query in the Hasura console before copy-pasting it into our code.

import React from "react";
import { useQuery, gql } from "@apollo/client";

const PLANETS = gql`
  {
    planets {
      id
      name
      cuisine
    }
  }
`;

const Planets = ({ newPlanets }) => {
  const { loading, error, data } = useQuery(PLANETS);

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  return data.planets.map(({id, name, cuisine}) => (
      <div key={id}>
      <p>
          {name} | {cuisine}
      </p>
    </div>
  ));
};

export default Planets;

Step 5: Style list

Our planet list is nice and all, but it needs a little makeover with Emotion (see repo for full styles).

Step 6: Search form & state

Our users want to search for planets and order them by name. So we add a search form that queries our endpoint with a search string, and pass in the results to Planets to update our planet list. We also use React Hooks to manage our app state.

import React, { useState } from "react";
import { useLazyQuery, gql } from "@apollo/client";
import Search from "./Search";
import Planets from "./Planets";

const SEARCH = gql`
  query Search($match: String) {
    planets(order_by: { name: asc }, where: { name: { _ilike: $match } }) {
      name
      cuisine
      id
    }
  }
`;

const PlanetSearch = () => {
  const [inputVal, setInputVal] = useState("");
  const [search, { loading, error, data }] = useLazyQuery(SEARCH);

  return (
    <div>
      <Search
        inputVal={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        onSearch={() => search({ variables: { match: `%${inputVal}%` } })}
      />
      <Planets newPlanets={data ? data.planets : null} />
    </div>
  );
};

export default PlanetSearch;

import React from "react";
import { useQuery, gql } from "@apollo/client";
import { List, ListItem } from "./shared/List";
import { Badge } from "./shared/Badge";

const PLANETS = gql`
  {
    planets {
      id
      name
      cuisine
    }
  }
`;

const Planets = ({ newPlanets }) => {
  const { loading, error, data } = useQuery(PLANETS);

  const renderPlanets = (planets) => {
    return planets.map(({ id, name, cuisine }) => (
      <ListItem key={id}>
        {name} <Badge>{cuisine}</Badge>
      </ListItem>
    ));
  };

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  return <List>{renderPlanets(newPlanets || data.planets)}</List>;
};

export default Planets;

import React from "react";
import styled from "@emotion/styled";
import { Input, Button } from "./shared/Form";

const SearchForm = styled.div`
  display: flex;
  align-items: center;
  > button {
    margin-left: 1rem;
  }
`;

const Search = ({ inputVal, onChange, onSearch }) => {
  return (
    <SearchForm>
      <Input value={inputVal} onChange={onChange} />
      <Button onClick={onSearch}>Search</Button>
    </SearchForm>
  );
};

export default Search;

import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "@apollo/client";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import PlanetSearch from "./components/PlanetSearch";
import Logo from "./components/shared/Logo";
import "./index.css";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "[YOUR HASURA GRAPHQL ENDPOINT]",
  }),
});

const App = () => (
  <ApolloProvider client={client}>
    <Logo />
    <PlanetSearch />
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

Step 7: Be proud

We've already implemented our planet list and search features! We lovingly gaze upon our handiwork, take a few selfies together, and move on to reviews.

Part 2: Live reviews

Step 1: Create reviews table

Our users will be visiting these planets, and writing reviews about their experience. We create a table via the Hasura console for our review data.

We add a foreign key from the planet_id column to the id column in the planets table, to indicate that planet_ids of reviews have to match id's of planets.

Step 2: Track relationships

Each planet has multiple reviews, while each review has one planet: a one-to-many relationship. We create and track this relationship via the Hasura console, so it can be exposed in our GraphQL schema.

Now we can query reviews for each planet in the Explorer!

Step 3: Set up routing

We want to be able to click on a planet and view its reviews on a separate page. We set up routing with React Router, and list reviews on the planet page.

import React from "react";
import { render } from "react-dom";
import { ApolloProvider } from "@apollo/client";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import PlanetSearch from "./components/PlanetSearch";
import Planet from "./components/Planet";
import Logo from "./components/shared/Logo";
import "./index.css";

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "[YOUR HASURA GRAPHQL ENDPOINT]",
  }),
});

const App = () => (
  <BrowserRouter>
    <ApolloProvider client={client}>
      <Logo />
      <Switch>
        <Route path="/planet/:id" component={Planet} />
        <Route path="/" component={PlanetSearch} />
      </Switch>
    </ApolloProvider>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

import React from "react";
import { useQuery, gql } from "@apollo/client";
import { List, ListItem } from "./shared/List";
import { Badge } from "./shared/Badge";

const PLANET = gql`
  query Planet($id: uuid!) {
    planets_by_pk(id: $id) {
      id
      name
      cuisine
      reviews {
        id
        body
      }
    }
  }
`;

const Planet = ({
  match: {
    params: { id },
  },
}) => {
  const { loading, error, data } = useQuery(PLANET, {
    variables: { id },
  });

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  const { name, cuisine, reviews } = data.planets_by_pk;

  return (
    <div>
      <h3>
        {name} <Badge>{cuisine}</Badge>
      </h3>
      <List>
        {reviews.map((review) => (
          <ListItem key={review.id}>{review.body}</ListItem>
        ))}
      </List>
    </div>
  );
};

export default Planet;

import React from "react";
import { useQuery, gql } from "@apollo/client";
import { Link } from "react-router-dom";
import { List, ListItemWithLink } from "./shared/List";
import { Badge } from "./shared/Badge";

const PLANETS = gql`
  {
    planets {
      id
      name
      cuisine
    }
  }
`;

const Planets = ({ newPlanets }) => {
  const { loading, error, data } = useQuery(PLANETS);

  const renderPlanets = (planets) => {
    return planets.map(({ id, name, cuisine }) => (
      <ListItemWithLink key={id}>
        <Link to={`/planet/${id}`}>
          {name} <Badge>{cuisine}</Badge>
        </Link>
      </ListItemWithLink>
    ));
  };

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  return <List>{renderPlanets(newPlanets || data.planets)}</List>;
};

export default Planets;

Step 4: Set up subscriptions

We install new libraries and set up Apollo Client to support subscriptions. Then, we change our reviews query to a subscription so it can show live updates.

> npm install @apollo/link-ws subscriptions-transport-ws

import React from "react";
import { render } from "react-dom";
import {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
  split,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { WebSocketLink } from "@apollo/link-ws";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import PlanetSearch from "./components/PlanetSearch";
import Planet from "./components/Planet";
import Logo from "./components/shared/Logo";
import "./index.css";

const GRAPHQL_ENDPOINT = "[YOUR HASURA GRAPHQL ENDPOINT]";

const httpLink = new HttpLink({
  uri: `https://${GRAPHQL_ENDPOINT}`,
});

const wsLink = new WebSocketLink({
  uri: `ws://${GRAPHQL_ENDPOINT}`,
  options: {
    reconnect: true,
  },
});

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: splitLink,
});

const App = () => (
  <BrowserRouter>
    <ApolloProvider client={client}>
      <Logo />
      <Switch>
        <Route path="/planet/:id" component={Planet} />
        <Route path="/" component={PlanetSearch} />
      </Switch>
    </ApolloProvider>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

import React from "react";
import { useSubscription, gql } from "@apollo/client";
import { List, ListItem } from "./shared/List";
import { Badge } from "./shared/Badge";

const PLANET = gql`
  subscription Planet($id: uuid!) {
    planets_by_pk(id: $id) {
      id
      name
      cuisine
      reviews {
        id
        body
      }
    }
  }
`;

const Planet = ({
  match: {
    params: { id },
  },
}) => {
  const { loading, error, data } = useSubscription(PLANET, {
    variables: { id },
  });

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  const { name, cuisine, reviews } = data.planets_by_pk;

  return (
    <div>
      <h3>
        {name} <Badge>{cuisine}</Badge>
      </h3>
      <List>
        {reviews.map((review) => (
          <ListItem key={review.id}>{review.body}</ListItem>
        ))}
      </List>
    </div>
  );
};

export default Planet;

Step 5: Do a sandworm dance

We've implemented planets with live reviews! Do a little dance to celebrate before getting down to serious business.

Part 3: Business logic

Step 1: Add input form

We want a way to submit reviews through our UI. We rename our search form to be a generic InputForm and add it above the review list.

import React, { useState } from "react";
import { useSubscription, gql } from "@apollo/client";
import { List, ListItem } from "./shared/List";
import { Badge } from "./shared/Badge";
import InputForm from "./shared/InputForm";

const PLANET = gql`
  subscription Planet($id: uuid!) {
    planets_by_pk(id: $id) {
      id
      name
      cuisine
      reviews(order_by: { created_at: desc }) {
        id
        body
        created_at
      }
    }
  }
`;

const Planet = ({
  match: {
    params: { id },
  },
}) => {
  const [inputVal, setInputVal] = useState("");
  const { loading, error, data } = useSubscription(PLANET, {
    variables: { id },
  });

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  const { name, cuisine, reviews } = data.planets_by_pk;

  return (
    <div>
      <h3>
        {name} <Badge>{cuisine}</Badge>
      </h3>
      <InputForm
        inputVal={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        onSubmit={() => {}}
        buttonText="Submit"
      />
      <List>
        {reviews.map((review) => (
          <ListItem key={review.id}>{review.body}</ListItem>
        ))}
      </List>
    </div>
  );
};

export default Planet;

Step 2: Test review mutation

We'll use a mutation to add new reviews. We test our mutation with GraphiQL in the Hasura console.

And convert it to accept variables so we can use it in our code.

Step 3: Create action

The Bene Gesserit have requested us to not allow (cough censor cough) the word "fear" in the reviews. We create an action for the business logic that will check for this word whenever a user submits a review.

Inside our freshly minted action, we go to the "Codegen" tab.

We select the nodejs-express option, and copy the handler boilerplate code below.

We click "Try on Glitch," which takes us to a barebones express app, where we can paste our handler code.

Back inside our action, we set our handler URL to the one from our Glitch app, with the correct route from our handler code.

We can now test our action in the console. It runs like a regular mutation, because we don't have any business logic checking for the word "fear" yet.

Step 4: Add business logic

In our handler, we add business logic that checks for "fear" inside the body of the review. If it's fearless, we run the mutation as usual. If not, we return an ominous error.

If we run the action with "fear" now, we get the error in the response:

Step 5: Order reviews

Our review order is currently topsy turvy. We add a created_at column to the reviews table so we can order by newest first.

reviews(order_by: { created_at: desc })

Step 6: Add review mutation

Finally, we update our action syntax with variables, and copy paste it into our code as a mutation. We update our code to run this mutation when a user submits a new review, so that our business logic can check it for compliance (ahem obedience ahem) before updating our database.

import React, { useState } from "react";
import { useSubscription, useMutation, gql } from "@apollo/client";
import { List, ListItem } from "./shared/List";
import { Badge } from "./shared/Badge";
import InputForm from "./shared/InputForm";

const PLANET = gql`
  subscription Planet($id: uuid!) {
    planets_by_pk(id: $id) {
      id
      name
      cuisine
      reviews(order_by: { created_at: desc }) {
        id
        body
        created_at
      }
    }
  }
`;

const ADD_REVIEW = gql`
  mutation($body: String!, $id: uuid!) {
    AddFearlessReview(body: $body, id: $id) {
      affected_rows
    }
  }
`;

const Planet = ({
  match: {
    params: { id },
  },
}) => {
  const [inputVal, setInputVal] = useState("");
  const { loading, error, data } = useSubscription(PLANET, {
    variables: { id },
  });
  const [addReview] = useMutation(ADD_REVIEW);

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error :(</p>;

  const { name, cuisine, reviews } = data.planets_by_pk;

  return (
    <div>
      <h3>
        {name} <Badge>{cuisine}</Badge>
      </h3>
      <InputForm
        inputVal={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        onSubmit={() => {
          addReview({ variables: { id, body: inputVal } })
            .then(() => setInputVal(""))
            .catch((e) => {
              setInputVal(e.message);
            });
        }}
        buttonText="Submit"
      />
      <List>
        {reviews.map((review) => (
          <ListItem key={review.id}>{review.body}</ListItem>
        ))}
      </List>
    </div>
  );
};

export default Planet;

If we submit a new review that includes "fear" now, we get our ominous error, which we display in the input field.

Step 7: We did it! ?

Congrats on building a full-stack React & GraphQL app!

What does the future hold?

If only we had some spice melange, we would know. But we built so many features in so little time! We covered GraphQL queries, mutations, subscriptions, routing, searching, and even custom business logic with Hasura actions! I hope you had fun coding along.

What other features would you like to see in this app? Reach out to me on Twitter, and I'll make more tutorials! If you're inspired to add features yourself, please do share – I'd love to hear about them :)

We will use the following components in this application:

1. ReactJS

2. Material UI

3. Firebase

4. ExpressJS

5. Postman

How our application is going to look:

Account creation

TodoApp Dashboard

Application Architecture:

Application Architecture

Understanding our components:

You may be wondering why we are using firebase in this application. Well, it provides secure Authentication, a Real-time database, a Serverless Component, and a Storage bucket.

We are using Express here so that we don't need to handle HTTP Exceptions. We are going to use all the firebase packages in our functions component. This is because we don't want to make our client application too big, which tends to slow the loading process of the UI.

Note: I am going to divide this tutorial into four separate sections. At the start of every section, you will find a git commit that has the code developed in that section. Also If you want to see the complete code then it is available in this repository.

Section 1: Developing Todo APIs

In this section**,** we are going to develop these elements:

1. Configure the firebase functions.

2. Install the Express framework and build Todo APIs.

3. Configuring firestore as database.

The Todo API code implemented in this section can be found at this commit.

Configure Firebase Functions:

Go to the Firebase console.

Firebase Console

Select the Add Project option. After that follow the gif down below step by step to configure the firebase project.

Firebase Configuration

Go to the functions tab and click on the Get Started button:

Functions Dashboard

You will see a dialogue box which has instructions on How to set up the Firebase Functions. Go to your local environment. Open a command-line tool. To install the firebase tools in your machine use the command below:

 npm install -g firebase-tools

Once that is done then use the command firebase init to configure the firebase functions in your local environment. Select the following options when initialising the firebase function in the local environment:

1. Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices => Functions: Configure and deploy Cloud Functions

2. First, let’s associate this project directory with a Firebase project …. \=> Use an existing project

3. Select a default Firebase project for this directory => application_name

4. What language would you like to use to write Cloud Functions? => JavaScript

5. Do you want to use ESLint to catch probable bugs and enforce style? => N

6. Do you want to install dependencies with npm now? (Y/n) => Y

After the configuration is done you will get the following message:

✔ Firebase initialization complete!

This will be our directory structure once the initialization is completed:

+-- firebase.json 
+-- functions
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json

Now open the index.js under functions directory and copy-paste the following code:

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
     response.send("Hello from Firebase!");
});

Deploy the code to firebase functions using the following command:

firebase deploy

Once the deployment is done you will get the following logline at the end of your command line:

> ✔  Deploy complete!
> Project Console: https://console.firebase.google.com/project/todoapp-<id>/overview

Go to the Project Console > Functions and there you will find the URL of the API. The URL will look like this:

https://<hosting-region>-todoapp-<id>.cloudfunctions.net/helloWorld

Copy this URL and paste it in the browser. You will get the following response:

Hello from Firebase!

This confirms that our Firebase function has been configured properly.

Install the Express Framework:

Now let’s install the Express framework in our project using the following command:

npm i express

Now let's create an APIs directory inside the functions directory. Inside that directory, we will create a file named todos.js. Remove everything from the index.js and then copy-paste the following code:

//index.js

const functions = require('firebase-functions');
const app = require('express')();

const {
    getAllTodos
} = require('./APIs/todos')

app.get('/todos', getAllTodos);
exports.api = functions.https.onRequest(app);

We have assigned the getAllTodos function to the /todos route. So all the API calls on this route will execute via the getAllTodos function. Now go to the todos.js file under APIs directory and here we will write the getAllTodos function.

//todos.js

exports.getAllTodos = (request, response) => {
    todos = [
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
    ]
    return response.json(todos);
}

Here we have declared a sample JSON object. Later we will derive that from the Firestore. But for the time being we will return this. Now deploy this to your firebase function using the command firebase deploy. It will ask for permission to delete the module helloworld – just enter y.

The following functions are found in your project but do not exist in your local source code: helloWorld

Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. (y/N) y

Once this is done go to the Project Console > Functions and there you will find the URL of the API. The API will look like this:

https://<hosting-region>-todoapp-<id>.cloudfunctions.net/api

Now go to the browser and copy-paste the URL and add /todos at the end of this URL. You will get the following output:

[
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
]

Firebase Firestore:

We will use a firebase firestore as a real-time database for our application. Now go to the Console > Database in Firebase Console. To configure firestore follow the gif below:

Configuring Firestore

Once the configuration is done then click on the Start Collection button and set Collection ID as todos. Click Next and you will get the following popup:

Creating Database Manually

Ignore the DocumentID key. For the field, type, and value, refer to the JSON down below. Update the value accordingly:

{
    Field: title,
    Type: String,
    Value: Hello World
},
{
    Field: body,
    Type: String,
    Value: Hello folks I hope you are staying home...
},
{
    Field: createtAt,
    type: timestamp,
    value: Add the current date and time here
}

Press the save button. You will see that the collection and the document is created. Go back to the local environment. We need to install firebase-admin which has the firestore package that we need. Use this command to install it:

npm i firebase-admin

Create a directory named util under the functions directory. Go to this directory and create a file name admin.js. In this file we will import the firebase admin package and initialize the firestore database object. We will export this so that other modules can use it.

//admin.js

const admin = require('firebase-admin');

admin.initializeApp();

const db = admin.firestore();

module.exports = { admin, db };

Now let’s write an API to fetch this data. Go to the todos.js under the functions > APIs directory. Remove the old code and copy-paste the code below:

//todos.js

const { db } = require('../util/admin');

exports.getAllTodos = (request, response) => {
    db
        .collection('todos')
        .orderBy('createdAt', 'desc')
        .get()
        .then((data) => {
            let todos = [];
            data.forEach((doc) => {
                todos.push({
                    todoId: doc.id,
                    title: doc.data().title,
                    body: doc.data().body,
                    createdAt: doc.data().createdAt,
                });
            });
            return response.json(todos);
        })
        .catch((err) => {
            console.error(err);
            return response.status(500).json({ error: err.code});
        });
};

Here we are fetching all the todos from the database and forwarding them to the client in a list.

You can also run the application locally using firebase serve command instead of deploying it every time. When you run that command you may get an error regarding credentials. To fix it, follow the steps mentioned below:

1. Go to the Project Settings (Settings icon at the top left-hand side)

2. Go to the service accounts tab

3. Down there will be the option of Generating a new key. Click on that option and it will download a file with a JSON extension.

4. We need to export these credentials to our command line session. Use the command below to do that:

export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[FILE_NAME].json"

After that run firebase serve command. If you still get the error then use the following command: firebase login --reauth. It will open the Google sign-in page in a browser. Once sign-in is done then it will work without any error.

You will find a URL in the logs of your command-line tool when you run a firebase serve command. Open this URL in browser and append /todos after it.

✔ functions[api]: http function initialized (http://localhost:5000/todoapp-<project-id>/<region-name>/api).

You will get the following JSON output in your browser:

[
    {
        "todoId":"W67t1kSMO0lqvjCIGiuI",
        "title":"Hello World",
        "body":"Hello folks I hope you are staying home...",
        "createdAt":{"_seconds":1585420200,"_nanoseconds":0 }
    }
]

Writing Other APIs:

It's time to write all the other todo APIs that we are going to require for our application.

1. Create Todo item: Go to the index.js under the functions directory. Import postOneTodo method under the existing getAllTodos. Also, assign the POST route to that method.

//index.js

const {
    ..,
    postOneTodo
} = require('./APIs/todos')

app.post('/todo', postOneTodo);

Go to the todos.js inside the functions directory and add a new method postOneTodo under the existing getAllTodos method.

//todos.js

exports.postOneTodo = (request, response) => {
    if (request.body.body.trim() === '') {
        return response.status(400).json({ body: 'Must not be empty' });
    }

    if(request.body.title.trim() === '') {
        return response.status(400).json({ title: 'Must not be empty' });
    }

    const newTodoItem = {
        title: request.body.title,
        body: request.body.body,
        createdAt: new Date().toISOString()
    }
    db
        .collection('todos')
        .add(newTodoItem)
        .then((doc)=>{
            const responseTodoItem = newTodoItem;
            responseTodoItem.id = doc.id;
            return response.json(responseTodoItem);
        })
        .catch((err) => {
            response.status(500).json({ error: 'Something went wrong' });
            console.error(err);
        });
};

In this method, we are adding a new Todo to our database. If the elements of our body are empty then we will return a response of 400 or else we will add the data.

Run the firebase serve command and open the postman application. Create a new request and select the method type as POST. Add the URL and a body of type JSON.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/todo

METHOD: POST

Body: {
   "title":"Hello World",
   "body": "We are writing this awesome API"
}

Press the send button and you will get the following response:

{
     "title": "Hello World",
     "body": "We are writing this awesome API",
     "createdAt": "2020-03-29T12:30:48.809Z",
     "id": "nh41IgARCj8LPWBYzjU0"
}

2. Delete Todo item: Go to the index.js under the functions directory. Import the deleteTodo method under the existing postOneTodo. Also, assign the DELETE route to that method.

//index.js

const {
    ..,
    deleteTodo
} = require('./APIs/todos')

app.delete('/todo/:todoId', deleteTodo);

Go to the todos.js and add a new method deleteTodo under the existing postOneTodo method.

//todos.js

exports.deleteTodo = (request, response) => {
    const document = db.doc(`/todos/${request.params.todoId}`);
    document
        .get()
        .then((doc) => {
            if (!doc.exists) {
                return response.status(404).json({ error: 'Todo not found' })
            }
            return document.delete();
        })
        .then(() => {
            response.json({ message: 'Delete successfull' });
        })
        .catch((err) => {
            console.error(err);
            return response.status(500).json({ error: err.code });
        });
};

In this method, we are deleting a Todo from our database. Run the firebase serve command and go to the postman. Create a new request, select the method type as DELETE and add the URL.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/todo/<todo-id>

METHOD: DELETE

Press the send button and you will get the following response:

{
   "message": "Delete successfull"
}

3. Edit Todo item: Go to the index.js under the functions directory. Import the editTodo method under the existing deleteTodo. Also, assign the PUT route to that method.

//index.js

const {
    ..,
    editTodo
} = require('./APIs/todos')

app.put('/todo/:todoId', editTodo);

Go to the todos.js and add a new method editTodo under the existing deleteTodo method.

//todos.js

exports.editTodo = ( request, response ) => { 
    if(request.body.todoId || request.body.createdAt){
        response.status(403).json({message: 'Not allowed to edit'});
    }
    let document = db.collection('todos').doc(`${request.params.todoId}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((err) => {
        console.error(err);
        return response.status(500).json({ 
                error: err.code 
        });
    });
};

In this method, we are editing a Todo from our database. Remember here we are not allowing the user to edit the todoId or createdAt fields. Run the firebase serve command and go to the postman. Create a new request, select the method type as PUT, and add the URL.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/todo/<todo-id>

METHOD: PUT

Press the send button and you will get the following response:

{  
   "message": "Updated successfully"
}

Directory structure till now:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js
|   +-- util
|   +-- +-- admin.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this, we have completed the first section of the application. You can go ahead have some coffee, take a break, and after that we will work on developing the User APIs.

Section 2: Developing User APIs

In this section**,** we are going to develop these components:

1. User Authentication ( Login and Signup ) API.

2. GET and Update user details API.

3. Update the user profile picture API.

4. Securing the existing Todo API.

The User API code implemented in this section can be found at this commit.

So let’s start building the User Authentication API. Go to the Firebase console > Authentication.

Firebase Authentication Page

Click on the Set up sign-in-method button. We will use email and password for user validation. Enable the Email/Password option.

Firebase Set up Sign up page

Right now we will manually create our user. First, we will build the Login API. After that we will build the Sign-Up API.

Go to the Users Tab under Authentication, fill in the User details, and click on the Add User button.

Adding user manually

1. User Login API:

First, we need to install the firebase package, which consists of the Firebase Authentication library, using the following command:

npm i firebase

Once the installation is done go to the functions > APIs directory. Here we will create a users.js file. Now Inside index.js we import a loginUser method and assign the POST route to it.

//index.js

const {
    loginUser
} = require('./APIs/users')

// Users
app.post('/login', loginUser);

Go to the Project Settings > General and there you will find the following card:

Getting Firebase configuration

Select the Web Icon and then follow the gif down below:

Select the continue to console option. Once this is done you will see a JSON with firebase config. Go to the functions > util directory and create a config.js file. Copy-paste the following code in this file:

// config.js

module.exports = {
    apiKey: "............",
    authDomain: "........",
    databaseURL: "........",
    projectId: ".......",
    storageBucket: ".......",
    messagingSenderId: "........",
    appId: "..........",
    measurementId: "......."
};

Replace ............ with the values that you get under Firebase console > Project settings > General > your apps > Firebase SD snippet > config.

Copy-paste the following code in the users.js file:

// users.js

const { admin, db } = require('../util/admin');
const config = require('../util/config');

const firebase = require('firebase');

firebase.initializeApp(config);

const { validateLoginData, validateSignUpData } = require('../util/validators');

// Login
exports.loginUser = (request, response) => {
    const user = {
        email: request.body.email,
        password: request.body.password
    }

    const { valid, errors } = validateLoginData(user);
    if (!valid) return response.status(400).json(errors);

    firebase
        .auth()
        .signInWithEmailAndPassword(user.email, user.password)
        .then((data) => {
            return data.user.getIdToken();
        })
        .then((token) => {
            return response.json({ token });
        })
        .catch((error) => {
            console.error(error);
            return response.status(403).json({ general: 'wrong credentials, please try again'});
        })
};

Here we are using a firebase signInWithEmailAndPassword module to check if the user-submitted credentials are right. If they are right then we send the token of that user or else a 403 status with a "wrong credentials" message.

Now let’s create validators.js under the functions > util directory. Copy-paste the following code in this file:

// validators.js

const isEmpty = (string) => {
    if (string.trim() === '') return true;
    else return false;
};

exports.validateLoginData = (data) => {
   let errors = {};
   if (isEmpty(data.email)) errors.email = 'Must not be empty';
   if (isEmpty(data.password)) errors.password = 'Must not be  empty';
   return {
       errors,
       valid: Object.keys(errors).length === 0 ? true : false
    };
};

With this our LoginAPI is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST, and add the URL and body.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/login

METHOD: POST

Body: {   
    "email":"Add email that is assigned for user in console", 
    "password": "Add password that is assigned for user in console"
}

Hit the send request button in postman and you will get the following output:

{   
    "token": ".........."
}

We will use this token in an upcoming part to get the user details. Remember this token expires in 60 minutes. To generate a new token use this API again.

2. User Sign-up API:

The default authentication mechanism of firebase only allows you to store information like email, password, etc. But we need more information to identify if this user owns that todo so that they can perform read, update and delete operations on it.

To achieve this goal we are going to create a new collection called users. Under this collection, we will store the user’s data which will be mapped to the todo based on the username. Each username will be unique for all the users on the platform.

Go to the index.js. We import a signUpUser method and assign the POST route to it.

//index.js

const {
    ..,
    signUpUser
} = require('./APIs/users')

app.post('/signup', signUpUser);

Now go to the validators.js and add the following code below the validateLoginData method.

// validators.js

const isEmail = (email) => {
    const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (email.match(emailRegEx)) return true;
    else return false;
};

exports.validateSignUpData = (data) => {
    let errors = {};

    if (isEmpty(data.email)) {
        errors.email = 'Must not be empty';
    } else if (!isEmail(data.email)) {
        errors.email = 'Must be valid email address';
    }

    if (isEmpty(data.firstName)) errors.firstName = 'Must not be empty';
    if (isEmpty(data.lastName)) errors.lastName = 'Must not be empty';
    if (isEmpty(data.phoneNumber)) errors.phoneNumber = 'Must not be empty';
    if (isEmpty(data.country)) errors.country = 'Must not be empty';

    if (isEmpty(data.password)) errors.password = 'Must not be empty';
    if (data.password !== data.confirmPassword) errors.confirmPassword = 'Passowrds must be the same';
    if (isEmpty(data.username)) errors.username = 'Must not be empty';

    return {
        errors,
        valid: Object.keys(errors).length === 0 ? true : false
    };
};

Now go to the users.js and add the following code below the loginUser module.

// users.js

exports.signUpUser = (request, response) => {
    const newUser = {
        firstName: request.body.firstName,
        lastName: request.body.lastName,
        email: request.body.email,
        phoneNumber: request.body.phoneNumber,
        country: request.body.country,
        password: request.body.password,
        confirmPassword: request.body.confirmPassword,
        username: request.body.username
    };

    const { valid, errors } = validateSignUpData(newUser);

    if (!valid) return response.status(400).json(errors);

    let token, userId;
    db
        .doc(`/users/${newUser.username}`)
        .get()
        .then((doc) => {
            if (doc.exists) {
                return response.status(400).json({ username: 'this username is already taken' });
            } else {
                return firebase
                        .auth()
                        .createUserWithEmailAndPassword(
                            newUser.email, 
                            newUser.password
                    );
            }
        })
        .then((data) => {
            userId = data.user.uid;
            return data.user.getIdToken();
        })
        .then((idtoken) => {
            token = idtoken;
            const userCredentials = {
                firstName: newUser.firstName,
                lastName: newUser.lastName,
                username: newUser.username,
                phoneNumber: newUser.phoneNumber,
                country: newUser.country,
                email: newUser.email,
                createdAt: new Date().toISOString(),
                userId
            };
            return db
                    .doc(`/users/${newUser.username}`)
                    .set(userCredentials);
        })
        .then(()=>{
            return response.status(201).json({ token });
        })
        .catch((err) => {
            console.error(err);
            if (err.code === 'auth/email-already-in-use') {
                return response.status(400).json({ email: 'Email already in use' });
            } else {
                return response.status(500).json({ general: 'Something went wrong, please try again' });
            }
        });
}

We validate our user data, and after that we send an email and password to the firebase createUserWithEmailAndPassword module to create the user. Once the user is created successfully we save the user credentials in the database.

With this our SignUp API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST. Add the URL and body.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/signup

METHOD: POST

Body: {
   "firstName": "Add a firstName here",
   "lastName": "Add a lastName here",
   "email":"Add a email here",
   "phoneNumber": "Add a phone number here",
   "country": "Add a country here",
   "password": "Add a password here",
   "confirmPassword": "Add same password here",
   "username": "Add unique username here"
}

Hit the send request button in postman and you will get the following Output:

{   
    "token": ".........."
}

Now go to the Firebase console > Database and there you will see the following output:

As you can see our user’s collection is successfully created with one document in it.

3. Upload User Profile Picture:

Our users will be able to upload their profile picture. To achieve this we will be using Storage bucket. Go to the Firebase console > Storage and click on the Get started button. Follow the GIF below for the configuration:

Now go to the Rules tab under Storage and update the permission for the bucket access as per the image below:

To upload the profile picture we will be using the package named busboy. To install this package, use the following command:

npm i busboy

Go to index.js. Import the uploadProfilePhoto method below the existing signUpUser method. Also assign the POST route to that method.

//index.js

const auth = require('./util/auth');

const {
    ..,
    uploadProfilePhoto
} = require('./APIs/users')

app.post('/user/image', auth, uploadProfilePhoto);

Here we have added an authentication layer so that only a user associated with that account can upload the image. Now create a file named auth.js in functions > utils directory. Copy-paste the following code in that file:

// auth.js

const { admin, db } = require('./admin');

module.exports = (request, response, next) => {
    let idToken;
    if (request.headers.authorization && request.headers.authorization.startsWith('Bearer ')) {
        idToken = request.headers.authorization.split('Bearer ')[1];
    } else {
        console.error('No token found');
        return response.status(403).json({ error: 'Unauthorized' });
    }
    admin
        .auth()
        .verifyIdToken(idToken)
        .then((decodedToken) => {
            request.user = decodedToken;
            return db.collection('users').where('userId', '==', request.user.uid).limit(1).get();
        })
        .then((data) => {
            request.user.username = data.docs[0].data().username;
            request.user.imageUrl = data.docs[0].data().imageUrl;
            return next();
        })
        .catch((err) => {
            console.error('Error while verifying token', err);
            return response.status(403).json(err);
        });
};

Here we are using the firebase verifyIdToken module to verify the token. After that we are decoding the user details and passing them in the existing request.

Go to the users.js and add the following code below the signup method:

// users.js

deleteImage = (imageName) => {
    const bucket = admin.storage().bucket();
    const path = `${imageName}`
    return bucket.file(path).delete()
    .then(() => {
        return
    })
    .catch((error) => {
        return
    })
}

// Upload profile picture
exports.uploadProfilePhoto = (request, response) => {
    const BusBoy = require('busboy');
    const path = require('path');
    const os = require('os');
    const fs = require('fs');
    const busboy = new BusBoy({ headers: request.headers });

    let imageFileName;
    let imageToBeUploaded = {};

    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        if (mimetype !== 'image/png' && mimetype !== 'image/jpeg') {
            return response.status(400).json({ error: 'Wrong file type submited' });
        }
        const imageExtension = filename.split('.')[filename.split('.').length - 1];
        imageFileName = `${request.user.username}.${imageExtension}`;
        const filePath = path.join(os.tmpdir(), imageFileName);
        imageToBeUploaded = { filePath, mimetype };
        file.pipe(fs.createWriteStream(filePath));
    });
    deleteImage(imageFileName);
    busboy.on('finish', () => {
        admin
            .storage()
            .bucket()
            .upload(imageToBeUploaded.filePath, {
                resumable: false,
                metadata: {
                    metadata: {
                        contentType: imageToBeUploaded.mimetype
                    }
                }
            })
            .then(() => {
                const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
                return db.doc(`/users/${request.user.username}`).update({
                    imageUrl
                });
            })
            .then(() => {
                return response.json({ message: 'Image uploaded successfully' });
            })
            .catch((error) => {
                console.error(error);
                return response.status(500).json({ error: error.code });
            });
    });
    busboy.end(request.rawBody);
};

With this our Upload Profile Picture API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST, add the URL, and in the body section select type as form-data.

The request is protected so you’ll need to send the bearer token also. To send the bearer token, log in again if the token has expired. After that in Postman App > Authorization tab > Type > Bearer Token and in the token section paste the token.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/user/image

METHOD: GET

Body: { REFER THE IMAGE down below }

Hit the send request button in postman and you will get the following Output:

{        
    "message": "Image uploaded successfully"
}

4. Get User Details:

Here we are fetching the data of our user from the database. Go to the index.js and import the getUserDetail method and assign GET route to it.

// index.js

const {
    ..,
    getUserDetail
} = require('./APIs/users')

app.get('/user', auth, getUserDetail);

Now go to the users.js and add the following code after the uploadProfilePhoto module:

// users.js

exports.getUserDetail = (request, response) => {
    let userData = {};
    db
        .doc(`/users/${request.user.username}`)
        .get()
        .then((doc) => {
            if (doc.exists) {
                userData.userCredentials = doc.data();
                return response.json(userData);
            }    
        })
        .catch((error) => {
            console.error(error);
            return response.status(500).json({ error: error.code });
        });
}

We are using the firebase doc().get() module to derive the user details. With this our GET User Details API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type: GET, and add the URL and body.

The request is protected so you’ll need to send the bearer token also. To send the bearer token, log in again if the token has expired.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/user
METHOD: GET

Hit the send request button in postman and you will get the following Output:

{
   "userCredentials": {
       "phoneNumber": "........",
       "email": "........",
       "country": "........",
       "userId": "........",
       "username": "........",
       "createdAt": "........",
       "lastName": "........",
       "firstName": "........"
    }
}

5. Update user details:

Now let’s add the functionality to update the user details. Go to the index.js and copy-paste the following code:

// index.js

const {
    ..,
    updateUserDetails
} = require('./APIs/users')

app.post('/user', auth, updateUserDetails);

Now go to the users.js and add the updateUserDetails module below the existing getUserDetails :

// users.js

exports.updateUserDetails = (request, response) => {
    let document = db.collection('users').doc(`${request.user.username}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((error) => {
        console.error(error);
        return response.status(500).json({ 
            message: "Cannot Update the value"
        });
    });
}

Here we are using the firebase update method. With this our Update User Details API is completed. Follow the same procedure for a request as with the Get User Details API above with one change. Add body in the request here and method as POST.

URL: http://localhost:5000/todoapp-<app-id>/<region-name>/api/user

METHOD: POST

Body : {
    // You can edit First Name, last Name and country
    // We will disable other Form Tags from our UI
}

Hit the send request button in postman and you will get the following Output:

{
    "message": "Updated successfully"
}

6. Securing Todo APIs:

To secure the Todo API so that only the chosen user can access it, we will make a few changes in our existing code. Firstly, we will update our index.js as follows:

// index.js

// Todos
app.get('/todos', auth, getAllTodos);
app.get('/todo/:todoId', auth, getOneTodo);
app.post('/todo',auth, postOneTodo);
app.delete('/todo/:todoId',auth, deleteTodo);
app.put('/todo/:todoId',auth, editTodo);

We have updated all the Todo routes by adding auth so that all the API calls will require a token and can only be accessed by the particular user.

After that go to the todos.js under the functions > APIs directory.

1. Create Todo API: Open the todos.js and under the postOneTodo method add the username key as follows:

const newTodoItem = {
     ..,
     username: request.user.username,
     ..
}

2. GET All Todos API: Open the todos.js and under the getAllTodos method add the where clause as follows:

db
.collection('todos')
.where('username', '==', request.user.username)
.orderBy('createdAt', 'desc')

Run the firebase serve and test our GET API. Don’t forget to send the bearer token. Here you will get a response error as follows:

{   
    "error": 9
}

Go to the command line and you will see the following lines logged:

i  functions: Beginning execution of "api">  Error: 9 FAILED_PRECONDITION: The query requires an index. You can create it here: <URL>>      at callErrorFromStatus

Open this in the browser and click on create index.

Once the index is built send the request again and you will get the following output:

[
   {
      "todoId": "......",
      "title": "......",
      "username": "......",
      "body": "......",
      "createdAt": "2020-03-30T13:01:58.478Z"
   }
]

3. Delete Todo API: Open the todos.js and under the deleteTodo method add the following condition. Add this condition inside the document.get().then() query below the !doc.exists condition.

..
if(doc.data().username !== request.user.username){
     return response.status(403).json({error:"UnAuthorized"})
}

Directory structure up to now:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js 
|   +-- +-- users.js
|   +-- util
|   +-- +-- admin.js
|   +-- +-- auth.js
|   +-- +-- validators.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this we have completed our API backend. Take a break, have a coffee, and after that we will start building the front end of our application

Section 3: User Dashboard

In this section**,** we are going to develop these components:

1. Configure ReactJS and Material UI.

2. Building Login and SignUp Form.

3. Building Account Section.

The User Dashboard code implemented in this section can be found at this commit.

1. Configure ReactJS and Material UI:

We will use the create-react-app template. It gives us a fundamental structure for developing the application. To install it, use the following command:

npm install -g create-react-app

Go to the root folder of the project where the functions directory is present. Initialize our front end application using the following command:

create-react-app view

Remember to use version v16.13.1 of the ReactJS library_._

Once the installation is completed then you'll see the following in your command line logs:

cd view
  npm start
Happy hacking!

With this, we have configured our React application. You’ll get the following directory structure:

+-- firebase.json 
+-- functions { This Directory consists our API logic }
+-- view { This Directory consists our FrontEnd Compoenents }
+-- .firebaserc
+-- .gitignore

Now run the application using the command npm start . Go to the browser on [http://localhost:3000/](http://localhost:3000/) and you’ll see the following output:

Now we will remove all the unnecessary components. Go to the view directory and then remove all the files which have [ Remove ] in front of them. For this, refer to the directory tree structure below.

+-- README.md [ Remove ]
+-- package-lock.json
+-- package.json
+-- node_modules
+-- .gitignore
+-- public
|   +-- favicon.ico [ Remove ]
|   +-- index.html
|   +-- logo192.png [ Remove ]
|   +-- logo512.png [ Remove ]
|   +-- manifest.json
|   +-- robots.txt
+-- src
|   +-- App.css
|   +-- App.test.js
|   +-- index.js
|   +-- serviceWorker.js
|   +-- App.js
|   +-- index.css [ Remove ]
|   +-- logo.svg [ Remove ]
|   +-- setupTests.js

Go to index.html under the public directory and remove the following lines:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Now go to the App.js under the src directory and replace the old code with the following code:

import React from 'react';
function App() {
  return (
    <div>
    </div>
  );
}
export default App;

Go to the index.js and remove the following import:

import './index.css'

I have not deleted the App.css nor I am using it in this application. But if you want to delete or use it you are free to do that.

Go to the browser on [http://localhost:3000/](http://localhost:3000/) and you’ll get a blank screen output.

To install Material UI go to the view directory and copy-paste this command in the terminal:

npm install @material-ui/core

Remember to use version v4.9.8 of the Material UI library.

2. Login Form:

To develop the login form go to App.js. At the top of App.js add the following imports:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import login from './pages/login';

We are using Switch and Route to assign routes for our TodoApp. Right now we will add only the /login route and assign a login component to it.

// App.js

<Router>
    <div>
       <Switch>
           <Route exact path="/login" component={login}/>
       </Switch>
    </div>
</Router>

Create a pages directory under the existing view directory and a file named login.js under the pages directory.

We will import Material UI components and the Axios package in the login.js:

// login.js

// Material UI components
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';
import Container from '@material-ui/core/Container';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

We will add the following styles to our login page:

// login.js

const styles = (theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1)
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
    customError: {
        color: 'red',
        fontSize: '0.8rem',
        marginTop: 10
    },
    progess: {
        position: 'absolute'
    }
});

We will create a class named login which has a form and submit handler inside it.

// login.js

class login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            errors: [],
            loading: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ loading: true });
        const userData = {
            email: this.state.email,
            password: this.state.password
        };
        axios
            .post('/login', userData)
            .then((response) => {
                localStorage.setItem('AuthToken', `Bearer ${response.data.token}`);
                this.setState({ 
                    loading: false,
                });        
                this.props.history.push('/');
            })
            .catch((error) => {                
                this.setState({
                    errors: error.response.data,
                    loading: false
                });
            });
    };

    render() {
        const { classes } = this.props;
        const { errors, loading } = this.state;
        return (
            <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon />
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Login
                    </Typography>
                    <form className={classes.form} noValidate>
                        <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            id="email"
                            label="Email Address"
                            name="email"
                            autoComplete="email"
                            autoFocus
                            helperText={errors.email}
                            error={errors.email ? true : false}
                            onChange={this.handleChange}
                        />
                        <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            name="password"
                            label="Password"
                            type="password"
                            id="password"
                            autoComplete="current-password"
                            helperText={errors.password}
                            error={errors.password ? true : false}
                            onChange={this.handleChange}
                        />
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                            onClick={this.handleSubmit}
                            disabled={loading || !this.state.email || !this.state.password}
                        >
                            Sign In
                            {loading && <CircularProgress size={30} className={classes.progess} />}
                        </Button>
                        <Grid container>
                            <Grid item>
                                <Link href="signup" variant="body2">
                                    {"Don't have an account? Sign Up"}
                                </Link>
                            </Grid>
                        </Grid>
                        {errors.general && (
                            <Typography variant="body2" className={classes.customError}>
                                {errors.general}
                            </Typography>
                        )}
                    </form>
                </div>
            </Container>
        );
    }
}

At the end of this file add the following export:

export default withStyles(styles)(login);

Add our firebase functions URL to view > package.json as follows:

Remember: Add a key named proxy below the existing browserslist JSON object

"proxy": "https://<region-name>-todoapp-<id>.cloudfunctions.net/api"

Install the Axios and material icon package using the following commands:

// Axios command:
npm i axios
// Material Icons:
npm install @material-ui/icons

We have added a login route in App.js. In the login.js we have created a class component that handles the state, sends the post request to the login API using the Axios package. If the request is successful then we store the token. If we get errors in the response we simply render them on the UI.

Go to the browser at [http://localhost:3000/login](http://localhost:3000/login) and you’ll see the following Login UI.

Login Page

Try filling wrong credentials or sending an empty request and you will get the errors. Send a valid request. Go to the Developer console > Application. You will see that users token is store in the Local storage. Once the Login is successful we will be routed back to the Home page.

Google Chrome Developer Console

3. Signup Form:

To develop the Signup form go to App.js and update the existing Route component with the line below:

// App.js

<Route exact path="/signup" component={signup}/>

Don’t forget to import:

// App.js

import signup from './pages/signup';

Create a file named signup.js under the pages directory.

Inside the signup.js we will import the Material UI and Axios package:

// signup.js

import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import withStyles from '@material-ui/core/styles/withStyles';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

We will add the following styles to our signup page:

// signup.js


const styles = (theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(3)
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
    progess: {
        position: 'absolute'
    }
});

We will create a class named signup which has a form and submit handler inside it.

// signup.js

class signup extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            phoneNumber: '',
            country: '',
            username: '',
            email: '',
            password: '',
            confirmPassword: '',
            errors: [],
            loading: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ loading: true });
        const newUserData = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            phoneNumber: this.state.phoneNumber,
            country: this.state.country,
            username: this.state.username,
            email: this.state.email,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword
        };
        axios
            .post('/signup', newUserData)
            .then((response) => {
                localStorage.setItem('AuthToken', `${response.data.token}`);
                this.setState({ 
                    loading: false,
                });    
                this.props.history.push('/');
            })
            .catch((error) => {
                this.setState({
                    errors: error.response.data,
                    loading: false
                });
            });
    };

    render() {
        const { classes } = this.props;
        const { errors, loading } = this.state;
        return (
            <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon />
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Sign up
                    </Typography>
                    <form className={classes.form} noValidate>
                        <Grid container spacing={2}>
                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="firstName"
                                    label="First Name"
                                    name="firstName"
                                    autoComplete="firstName"
                                    helperText={errors.firstName}
                                    error={errors.firstName ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>
                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="lastName"
                                    label="Last Name"
                                    name="lastName"
                                    autoComplete="lastName"
                                    helperText={errors.lastName}
                                    error={errors.lastName ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>

                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="username"
                                    label="User Name"
                                    name="username"
                                    autoComplete="username"
                                    helperText={errors.username}
                                    error={errors.username ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>

                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="phoneNumber"
                                    label="Phone Number"
                                    name="phoneNumber"
                                    autoComplete="phoneNumber"
                                    pattern="[7-9]{1}[0-9]{9}"
                                    helperText={errors.phoneNumber}
                                    error={errors.phoneNumber ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    helperText={errors.email}
                                    error={errors.email ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="country"
                                    label="Country"
                                    name="country"
                                    autoComplete="country"
                                    helperText={errors.country}
                                    error={errors.country ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="password"
                                    label="Password"
                                    type="password"
                                    id="password"
                                    autoComplete="current-password"
                                    helperText={errors.password}
                                    error={errors.password ? true : false}
                                    onChange={this.handleChange}
                                />
                            </Grid>
                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="confirmPassword"
                                    label="Confirm Password"
                                    type="password"
                                    id="confirmPassword"
                                    autoComplete="current-password"
                                    onChange={this.handleChange}
                                />
                            </Grid>
                        </Grid>
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                            onClick={this.handleSubmit}
                            disabled={loading || 
                                !this.state.email || 
                                !this.state.password ||
                                !this.state.firstName || 
                                !this.state.lastName ||
                                !this.state.country || 
                                !this.state.username || 
                                !this.state.phoneNumber}
                        >
                            Sign Up
                            {loading && <CircularProgress size={30} className={classes.progess} />}
                        </Button>
                        <Grid container justify="flex-end">
                            <Grid item>
                                <Link href="login" variant="body2">
                                    Already have an account? Sign in
                                </Link>
                            </Grid>
                        </Grid>
                    </form>
                </div>
            </Container>
        );
    }
}

At the end of this file add the following export:

export default withStyles(styles)(signup);

The logic for the Signup component is the same as the login component. Go to the browser at [http://localhost:3000/signup](http://localhost:3000/signup) and you’ll see the following Signup UI. Once the Signup is successful we will be routed back to the Home page.

Sign up Form

Try filling wrong credentials or sending an empty request and you will get the errors. Send a valid request. Go to the Developer console > Application. You will see that users token is store in the Local storage.

Chrome Developer Console

4. Account Section:

To build the account page we will need to first create our Home page from where we will load the account section. Go to the App.js and update the following route:

// App.js

<Route exact path="/" component={home}/>

Don't forget the import:

// App.js

import home from './pages/home';

Create a new file named home.js . This file will be the index of our application. The Account and Todo sections both load on this page based on the button click.

Import the Material UI packages, Axios package, our custom Account, todo components, and auth middleware.

// home.js

import React, { Component } from 'react';
import axios from 'axios';

import Account from '../components/account';
import Todo from '../components/todo';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import withStyles from '@material-ui/core/styles/withStyles';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import NotesIcon from '@material-ui/icons/Notes';
import Avatar from '@material-ui/core/avatar';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import CircularProgress from '@material-ui/core/CircularProgress';

import { authMiddleWare } from '../util/auth'

We will set our drawerWidth as follows:

const drawerWidth = 240;

We will add the following style to our Home page:

const styles = (theme) => ({
    root: {
        display: 'flex'
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0
    },
    drawerPaper: {
        width: drawerWidth
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
    avatar: {
        height: 110,
        width: 100,
        flexShrink: 0,
        flexGrow: 0,
        marginTop: 20
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    toolbar: theme.mixins.toolbar
});

We will create a class named home. This class will have an API call to get the User's profile picture, First name and Last name. Also it will have logic to choose which component to display, either Todo or Account:

class home extends Component {
    state = {
        render: false
    };

    loadAccountPage = (event) => {
        this.setState({ render: true });
    };

    loadTodoPage = (event) => {
        this.setState({ render: false });
    };

    logoutHandler = (event) => {
        localStorage.removeItem('AuthToken');
        this.props.history.push('/login');
    };

    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            profilePicture: '',
            uiLoading: true,
            imageLoading: false
        };
    }

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/user')
            .then((response) => {
                console.log(response.data);
                this.setState({
                    firstName: response.data.userCredentials.firstName,
                    lastName: response.data.userCredentials.lastName,
                    email: response.data.userCredentials.email,
                    phoneNumber: response.data.userCredentials.phoneNumber,
                    country: response.data.userCredentials.country,
                    username: response.data.userCredentials.username,
                    uiLoading: false,
                    profilePicture: response.data.userCredentials.imageUrl
                });
            })
            .catch((error) => {
                if(error.response.status === 403) {
                    this.props.history.push('/login')
                }
                console.log(error);
                this.setState({ errorMsg: 'Error in retrieving the data' });
            });
    };

    render() {
        const { classes } = this.props;        
        if (this.state.uiLoading === true) {
            return (
                <div className={classes.root}>
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                </div>
            );
        } else {
            return (
                <div className={classes.root}>
                    <CssBaseline />
                    <AppBar position="fixed" className={classes.appBar}>
                        <Toolbar>
                            <Typography variant="h6" noWrap>
                                TodoApp
                            </Typography>
                        </Toolbar>
                    </AppBar>
                    <Drawer
                        className={classes.drawer}
                        variant="permanent"
                        classes={{
                            paper: classes.drawerPaper
                        }}
                    >
                        <div className={classes.toolbar} />
                        <Divider />
                        <center>
                            <Avatar src={this.state.profilePicture} className={classes.avatar} />
                            <p>
                                {' '}
                                {this.state.firstName} {this.state.lastName}
                            </p>
                        </center>
                        <Divider />
                        <List>
                            <ListItem button key="Todo" onClick={this.loadTodoPage}>
                                <ListItemIcon>
                                    {' '}
                                    <NotesIcon />{' '}
                                </ListItemIcon>
                                <ListItemText primary="Todo" />
                            </ListItem>

                            <ListItem button key="Account" onClick={this.loadAccountPage}>
                                <ListItemIcon>
                                    {' '}
                                    <AccountBoxIcon />{' '}
                                </ListItemIcon>
                                <ListItemText primary="Account" />
                            </ListItem>

                            <ListItem button key="Logout" onClick={this.logoutHandler}>
                                <ListItemIcon>
                                    {' '}
                                    <ExitToAppIcon />{' '}
                                </ListItemIcon>
                                <ListItemText primary="Logout" />
                            </ListItem>
                        </List>
                    </Drawer>

                    <div>{this.state.render ? <Account /> : <Todo />}</div>
                </div>
            );
        }
    }
}

Here in the code, you will see that authMiddleWare(this.props.history); is used. This middleware checks if the authToken is null. If yes then it will push the user back to the login.js. This is added so that our user cannot access the / route without Signup or log in. At the end of this file add the following export:

export default withStyles(styles)(home);

Now are you wondering what this code from home.js does?

<div>{this.state.render ? <Account /> : <Todo />}</div>

It is checking the render state which we are setting on the button click. Let's create the component directory, and under that directory create two files: account.js and todo.js.

Let’s create a directory named util and file named auth.js under that directory. Copy-paste the following code under auth.js :

export const authMiddleWare = (history) => {
    const authToken = localStorage.getItem('AuthToken');
    if(authToken === null){
        history.push('/login')
    }
}

For time being inside the todo.js file we will just write a class which renders the text Hello I am todo. We will be working on our todos in the next section:

import React, { Component } from 'react'

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';

const styles = ((theme) => ({
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
    toolbar: theme.mixins.toolbar,
    })
);

class todo extends Component {
    render() {
        const { classes } = this.props;
        return (
            <main className={classes.content}>
            <div className={classes.toolbar} />
            <Typography paragraph>
                Hello I am todo
            </Typography>
            </main>
        )
    }
}

export default (withStyles(styles)(todo));

Now it's time for the account section. Import the Material UI, clsx, axios and authmiddleWare utility in our account.js.

// account.js

import React, { Component } from 'react';

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { Card, CardActions, CardContent, Divider, Button, Grid, TextField } from '@material-ui/core';

import clsx from 'clsx';

import axios from 'axios';
import { authMiddleWare } from '../util/auth';

We will add the following styling to our Account page:

// account.js

const styles = (theme) => ({
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
    toolbar: theme.mixins.toolbar,
    root: {},
    details: {
        display: 'flex'
    },
    avatar: {
        height: 110,
        width: 100,
        flexShrink: 0,
        flexGrow: 0
    },
    locationText: {
        paddingLeft: '15px'
    },
    buttonProperty: {
        position: 'absolute',
        top: '50%'
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    progess: {
        position: 'absolute'
    },
    uploadButton: {
        marginLeft: '8px',
        margin: theme.spacing(1)
    },
    customError: {
        color: 'red',
        fontSize: '0.8rem',
        marginTop: 10
    },
    submitButton: {
        marginTop: '10px'
    }
});

We will create a class component named account. For the time being just copy-paste the following code:

// account.js

class account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            phoneNumber: '',
            username: '',
            country: '',
            profilePicture: '',
            uiLoading: true,
            buttonLoading: false,
            imageError: ''
        };
    }

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/user')
            .then((response) => {
                console.log(response.data);
                this.setState({
                    firstName: response.data.userCredentials.firstName,
                    lastName: response.data.userCredentials.lastName,
                    email: response.data.userCredentials.email,
                    phoneNumber: response.data.userCredentials.phoneNumber,
                    country: response.data.userCredentials.country,
                    username: response.data.userCredentials.username,
                    uiLoading: false
                });
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({ errorMsg: 'Error in retrieving the data' });
            });
    };

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleImageChange = (event) => {
        this.setState({
            image: event.target.files[0]
        });
    };

    profilePictureHandler = (event) => {
        event.preventDefault();
        this.setState({
            uiLoading: true
        });
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        let form_data = new FormData();
        form_data.append('image', this.state.image);
        form_data.append('content', this.state.content);
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .post('/user/image', form_data, {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            })
            .then(() => {
                window.location.reload();
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({
                    uiLoading: false,
                    imageError: 'Error in posting the data'
                });
            });
    };

    updateFormValues = (event) => {
        event.preventDefault();
        this.setState({ buttonLoading: true });
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        const formRequest = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            country: this.state.country
        };
        axios
            .post('/user', formRequest)
            .then(() => {
                this.setState({ buttonLoading: false });
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({
                    buttonLoading: false
                });
            });
    };

    render() {
        const { classes, ...rest } = this.props;
        if (this.state.uiLoading === true) {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                </main>
            );
        } else {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    <Card {...rest} className={clsx(classes.root, classes)}>
                        <CardContent>
                            <div className={classes.details}>
                                <div>
                                    <Typography className={classes.locationText} gutterBottom variant="h4">
                                        {this.state.firstName} {this.state.lastName}
                                    </Typography>
                                    <Button
                                        variant="outlined"
                                        color="primary"
                                        type="submit"
                                        size="small"
                                        startIcon={<CloudUploadIcon />}
                                        className={classes.uploadButton}
                                        onClick={this.profilePictureHandler}
                                    >
                                        Upload Photo
                                    </Button>
                                    <input type="file" onChange={this.handleImageChange} />

                                    {this.state.imageError ? (
                                        <div className={classes.customError}>
                                            {' '}
                                            Wrong Image Format || Supported Format are PNG and JPG
                                        </div>
                                    ) : (
                                        false
                                    )}
                                </div>
                            </div>
                            <div className={classes.progress} />
                        </CardContent>
                        <Divider />
                    </Card>

                    <br />
                    <Card {...rest} className={clsx(classes.root, classes)}>
                        <form autoComplete="off" noValidate>
                            <Divider />
                            <CardContent>
                                <Grid container spacing={3}>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="First name"
                                            margin="dense"
                                            name="firstName"
                                            variant="outlined"
                                            value={this.state.firstName}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Last name"
                                            margin="dense"
                                            name="lastName"
                                            variant="outlined"
                                            value={this.state.lastName}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Email"
                                            margin="dense"
                                            name="email"
                                            variant="outlined"
                                            disabled={true}
                                            value={this.state.email}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Phone Number"
                                            margin="dense"
                                            name="phone"
                                            type="number"
                                            variant="outlined"
                                            disabled={true}
                                            value={this.state.phoneNumber}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="User Name"
                                            margin="dense"
                                            name="userHandle"
                                            disabled={true}
                                            variant="outlined"
                                            value={this.state.username}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Country"
                                            margin="dense"
                                            name="country"
                                            variant="outlined"
                                            value={this.state.country}
                                            onChange={this.handleChange}
                                        />
                                    </Grid>
                                </Grid>
                            </CardContent>
                            <Divider />
                            <CardActions />
                        </form>
                    </Card>
                    <Button
                        color="primary"
                        variant="contained"
                        type="submit"
                        className={classes.submitButton}
                        onClick={this.updateFormValues}
                        disabled={
                            this.state.buttonLoading ||
                            !this.state.firstName ||
                            !this.state.lastName ||
                            !this.state.country
                        }
                    >
                        Save details
                        {this.state.buttonLoading && <CircularProgress size={30} className={classes.progess} />}
                    </Button>
                </main>
            );
        }
    }
}

At the end of this file add the following export:

export default withStyles(styles)(account);

In account.js there are lot of components used. First let's see how our application looks. After that I'll explain all the components that are used and why they are used.

Go to the browser, and if your token is expired it will redirect you to the login page. Add your details and log in again. Once you've done that, go to the Account tab and you will find the following UI:

Account Section

There are 3 handlers in the Account Section:

1. componentWillMount: This is React's inbuilt lifecycle method. We are using it to load the data before the render lifecycle and update our state values.

2. ProfilePictureUpdate: This is our custom handler that we are using so that when our user clicks on the Upload Photo button then it will send the data to a server and reload the page to show the user's new Profile Picture.

3. updateFormValues: This is also our custom handler to update the User's details. Here, the user can update their first name, last name, and country. We are not allowing email and username updates because our backend logic depends on those keys.

Other than these 3 handlers it is a form page with styling on top of it. Here is the directory structure up to this point inside the view folder:

+-- public 
+-- src
|   +-- components
|   +-- +-- todo.js
|   +-- +-- account.js
|   +-- pages
|   +-- +-- home.js
|   +-- +-- login.js
|   +-- +-- signup.js
|   +-- util
|   +-- +-- auth.js 
|   +-- README.md
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this we have completed our Account Dashboard. Now go have a coffee, take a break and in the next section, we will build the Todo Dashboard.

Section 4: Todo Dashboard

In this section**,** we are going to develop the UI for these features of the Todos Dashboard:

1. Add a Todo:

2. Get all todos:

3. Delete a todo

4. Edit a todo

5. Get a todo

6. Applying Theme

The Todo Dashboard code implemented in this section can be found at this commit.

Go to todos.js under the components directory. Add the following imports to the existing imports:

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from '@material-ui/core/CardContent';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';

import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { authMiddleWare } from '../util/auth';

We also need to add the following CSS elements in the existing style components:

const styles = (theme) => ({
    .., // Existing CSS elements
    title: {
        marginLeft: theme.spacing(2),
        flex: 1
    },
    submitButton: {
        display: 'block',
        color: 'white',
        textAlign: 'center',
        position: 'absolute',
        top: 14,
        right: 10
    },
    floatingButton: {
        position: 'fixed',
        bottom: 0,
        right: 0
    },
    form: {
        width: '98%',
        marginLeft: 13,
        marginTop: theme.spacing(3)
    },
    toolbar: theme.mixins.toolbar,
    root: {
        minWidth: 470
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)'
    },
    pos: {
        marginBottom: 12
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    dialogeStyle: {
        maxWidth: '50%'
    },
    viewRoot: {
        margin: 0,
        padding: theme.spacing(2)
    },
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500]
    }
});

We will add the transition for the pop up dialogue box:

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

Remove the existing todo class and copy-paste the following class:

class todo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            todos: '',
            title: '',
            body: '',
            todoId: '',
            errors: [],
            open: false,
            uiLoading: true,
            buttonType: '',
            viewOpen: false
        };

        this.deleteTodoHandler = this.deleteTodoHandler.bind(this);
        this.handleEditClickOpen = this.handleEditClickOpen.bind(this);
        this.handleViewOpen = this.handleViewOpen.bind(this);
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/todos')
            .then((response) => {
                this.setState({
                    todos: response.data,
                    uiLoading: false
                });
            })
            .catch((err) => {
                console.log(err);
            });
    };

    deleteTodoHandler(data) {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        let todoId = data.todo.todoId;
        axios
            .delete(`todo/${todoId}`)
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.log(err);
            });
    }

    handleEditClickOpen(data) {
        this.setState({
            title: data.todo.title,
            body: data.todo.body,
            todoId: data.todo.todoId,
            buttonType: 'Edit',
            open: true
        });
    }

    handleViewOpen(data) {
        this.setState({
            title: data.todo.title,
            body: data.todo.body,
            viewOpen: true
        });
    }

    render() {
        const DialogTitle = withStyles(styles)((props) => {
            const { children, classes, onClose, ...other } = props;
            return (
                <MuiDialogTitle disableTypography className={classes.root} {...other}>
                    <Typography variant="h6">{children}</Typography>
                    {onClose ? (
                        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
                            <CloseIcon />
                        </IconButton>
                    ) : null}
                </MuiDialogTitle>
            );
        });

        const DialogContent = withStyles((theme) => ({
            viewRoot: {
                padding: theme.spacing(2)
            }
        }))(MuiDialogContent);

        dayjs.extend(relativeTime);
        const { classes } = this.props;
        const { open, errors, viewOpen } = this.state;

        const handleClickOpen = () => {
            this.setState({
                todoId: '',
                title: '',
                body: '',
                buttonType: '',
                open: true
            });
        };

        const handleSubmit = (event) => {
            authMiddleWare(this.props.history);
            event.preventDefault();
            const userTodo = {
                title: this.state.title,
                body: this.state.body
            };
            let options = {};
            if (this.state.buttonType === 'Edit') {
                options = {
                    url: `/todo/${this.state.todoId}`,
                    method: 'put',
                    data: userTodo
                };
            } else {
                options = {
                    url: '/todo',
                    method: 'post',
                    data: userTodo
                };
            }
            const authToken = localStorage.getItem('AuthToken');
            axios.defaults.headers.common = { Authorization: `${authToken}` };
            axios(options)
                .then(() => {
                    this.setState({ open: false });
                    window.location.reload();
                })
                .catch((error) => {
                    this.setState({ open: true, errors: error.response.data });
                    console.log(error);
                });
        };

        const handleViewClose = () => {
            this.setState({ viewOpen: false });
        };

        const handleClose = (event) => {
            this.setState({ open: false });
        };

        if (this.state.uiLoading === true) {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                </main>
            );
        } else {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />

                    <IconButton
                        className={classes.floatingButton}
                        color="primary"
                        aria-label="Add Todo"
                        onClick={handleClickOpen}
                    >
                        <AddCircleIcon style={{ fontSize: 60 }} />
                    </IconButton>
                    <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
                        <AppBar className={classes.appBar}>
                            <Toolbar>
                                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                                    <CloseIcon />
                                </IconButton>
                                <Typography variant="h6" className={classes.title}>
                                    {this.state.buttonType === 'Edit' ? 'Edit Todo' : 'Create a new Todo'}
                                </Typography>
                                <Button
                                    autoFocus
                                    color="inherit"
                                    onClick={handleSubmit}
                                    className={classes.submitButton}
                                >
                                    {this.state.buttonType === 'Edit' ? 'Save' : 'Submit'}
                                </Button>
                            </Toolbar>
                        </AppBar>

                        <form className={classes.form} noValidate>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>
                                    <TextField
                                        variant="outlined"
                                        required
                                        fullWidth
                                        id="todoTitle"
                                        label="Todo Title"
                                        name="title"
                                        autoComplete="todoTitle"
                                        helperText={errors.title}
                                        value={this.state.title}
                                        error={errors.title ? true : false}
                                        onChange={this.handleChange}
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <TextField
                                        variant="outlined"
                                        required
                                        fullWidth
                                        id="todoDetails"
                                        label="Todo Details"
                                        name="body"
                                        autoComplete="todoDetails"
                                        multiline
                                        rows={25}
                                        rowsMax={25}
                                        helperText={errors.body}
                                        error={errors.body ? true : false}
                                        onChange={this.handleChange}
                                        value={this.state.body}
                                    />
                                </Grid>
                            </Grid>
                        </form>
                    </Dialog>

                    <Grid container spacing={2}>
                        {this.state.todos.map((todo) => (
                            <Grid item xs={12} sm={6}>
                                <Card className={classes.root} variant="outlined">
                                    <CardContent>
                                        <Typography variant="h5" component="h2">
                                            {todo.title}
                                        </Typography>
                                        <Typography className={classes.pos} color="textSecondary">
                                            {dayjs(todo.createdAt).fromNow()}
                                        </Typography>
                                        <Typography variant="body2" component="p">
                                            {`${todo.body.substring(0, 65)}`}
                                        </Typography>
                                    </CardContent>
                                    <CardActions>
                                        <Button size="small" color="primary" onClick={() => this.handleViewOpen({ todo })}>
                                            {' '}
                                            View{' '}
                                        </Button>
                                        <Button size="small" color="primary" onClick={() => this.handleEditClickOpen({ todo })}>
                                            Edit
                                        </Button>
                                        <Button size="small" color="primary" onClick={() => this.deleteTodoHandler({ todo })}>
                                            Delete
                                        </Button>
                                    </CardActions>
                                </Card>
                            </Grid>
                        ))}
                    </Grid>

                    <Dialog
                        onClose={handleViewClose}
                        aria-labelledby="customized-dialog-title"
                        open={viewOpen}
                        fullWidth
                        classes={{ paperFullWidth: classes.dialogeStyle }}
                    >
                        <DialogTitle id="customized-dialog-title" onClose={handleViewClose}>
                            {this.state.title}
                        </DialogTitle>
                        <DialogContent dividers>
                            <TextField
                                fullWidth
                                id="todoDetails"
                                name="body"
                                multiline
                                readonly
                                rows={1}
                                rowsMax={25}
                                value={this.state.body}
                                InputProps={{
                                    disableUnderline: true
                                }}
                            />
                        </DialogContent>
                    </Dialog>
                </main>
            );
        }
    }
}

At the end of this file add the following export:

export default withStyles(styles)(todo);

First we will understand how our UI works and after that we will understand the code. Go to the browser and you'll get the following UI:

Todo Dashboard

Click on the Add button at the bottom right corner and you’ll get the following screen:

Add Todo

Add the Todo title and details and press the submit button. You’ll get the following screen:

Todo Dashboard

After this click on the view button and you’ll be able to see the full details of the Todo:

View Single Todo

Click on the Edit button and you’ll be able to edit the todo:

Edit Todo

Click the delete button and you’ll be able to delete the Todo. Now as we are aware of how Dashboard works, we will understand the components used in it.

1. Add Todo: For implementing the add todo we will use the Dialogue component of Material UI. This component implements a hook functionality. We are using the classes so we will remove that functionality.

// This sets the state to open and buttonType flag to add:
const handleClickOpen = () => {
      this.setState({
           todoId: '',
           title: '',
           body: '',
           buttonType: '',
           open: true
     });
};

// This sets the state to close:
const handleClose = (event) => {
      this.setState({ open: false });
};

Other than this we will also change the placement of the Add Todo Button.

// Position our button
floatingButton: {
    position: 'fixed',
    bottom: 0,
    right: 0
},

<IconButton className={classes.floatingButton} ... >

Now we will replace the list tag with a form inside this Dialogue. It will help us in adding the new todo.

// Show Edit or Save depending on buttonType state
{this.state.buttonType === 'Edit' ? 'Save' : 'Submit'}

// Our Form to add a todo
<form className={classes.form} noValidate>
    <Grid container spacing={2}>
        <Grid item xs={12}>
        // TextField here
        </Grid>
        <Grid item xs={12}>
        // TextField here
        </Grid>
    </Grid>
</form>

The handleSubmit consists of logic to read the buttonType state. If the state is an empty string (“”) then it will post on the Add Todo API. If the state is an Edit then in that scenario it will update the Edit Todo.

2. Get Todos: To display the todos we will use the Grid container and inside it, we place the Grid item . Inside that, we will use a Card component to display the data.

<Grid container spacing={2}>
    {this.state.todos.map((todo) => (
    <Grid item xs={12} sm={6}>
    <Card className={classes.root} variant="outlined">
        <CardContent>
        // Here will show Todo with view, edit and delete button
        </CardContent>
    </Card>
    </Grid>))}
</Grid>

We use the map to display the todo item as the API sends them in a list. We will use the componentWillMount lifecycle to get and set the state before the render is executed. There are 3 buttons ( view, edit, and delete ) so we will need 3 Handlers to handle the operation when the button is clicked. We will learn about these buttons in their respective subsections.

3. Edit Todo: For the edit todo, we are reusing the dialogue pop up code that is used in add todo. To differentiate between the button clicks we are using a buttonType state. For Add Todo the buttonType state is (“”) while for edit todo it is Edit.

handleEditClickOpen(data) {
    this.setState({
        ..,
        buttonType: 'Edit',
        ..
    });
}

In the handleSubmit method we read the buttonType state and then send the request accordingly.

4. Delete Todo: When this button is clicked we send the todo object to our deleteTodoHandler and then it sends the request further to the backend.

<Button size="small" onClick={() => this.deleteTodoHandler({ todo })}>Delete</Button>

5. View Todo: When showing the data we have truncated it so that the user will get a glimpse of what the todo is about. But if a user wants to know more about it then they need to click on the view button.

For this, we will use the Customised dialogue. Inside that, we use DialogTitle and DialogContent. It displays our title and content. In DialougeContent we will use the form to display the content that the user has posted. (This is one solution that I found there are many and you are free to try other.)

// This is used to remove the underline of the Form
InputProps={{
       disableUnderline: true
}}

// This is used so that user cannot edit the data
readonly

6. Applying Theme: This is the last step of our application. We will apply a theme on our application. For this we are using createMuiTheme and ThemeProvider from material UI. Copy-paste the following code in App.js:

import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

const theme = createMuiTheme({
    palette: {
        primary: {
            light: '#33c9dc',
            main: '#FF5722',
            dark: '#d50000',
            contrastText: '#fff'
        }
    }
});

function App() {
    return (
        <MuiThemeProvider theme={theme}>
        // Router and switch will be here.
        </MuiThemeProvider>
    );
}

We missed applying a theme to our button in todo.js in the CardActions . Add the color tag for the view, edit, and delete button.

<Button size="small" color="primary" ...>

Go to the browser and you will find that everything is the same except that the app is a different color.

TodoApp after applying theme

And we're done! We have built a TodoApp using ReactJS and Firebase. If you have built it all the way to this point then a very big congratulations to you on this achievement.

Feel free to connect with me on Twitter and Github.

This is a basic straight forward walk through regarding how to implement push notification in Android as well as iOS using the cordova plugin for fcm and Google Firebase FCM from scratch. I will be using Ubuntu 16.04 LTS for this, but OS used for development should not matter much.

FCM Integration for Cordova Hybrid Apps

Android Implementation

Create an empty folder pushSample

cd '/opt/lampp/htdocs'
mkdir pushSample
cd pushSample
cordova create pushSample
cd pushSample
cordova platform add android
cordova plugin add cordova-plugin-FCM

While adding the cordova FCM plugin will show an error :

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.

Note : This is because we have not added the google-services.json file which has to be created in the next following steps.

Next open the google firebase console and Add Project ( basically means create a new project )

Once the project is created click on the Notifications section in the left side panel.

Now click on the Android icon to add Android platform support to our project.

In the next popup form fill the details as follows : Android package name : Package name or ID is the unique identifier for an app in the play store. Note that it is a very important value which cannot be changed for an app once it is uploaded to the play store. It will be in reverse domain name syntax : eg hello.pushSample.com will have app id : com.pushSample.hello. Also in the config.xml file in your cordova project set the same app id. For our sample project it will be in : pushSample/pushSample/config.xml eg for me the contents of this file are :

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Note the tag

<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Here the attribute id is the package id which will by default be io.cordova.hellocordova change it to the app ID you have specified in the firebase console. I will be using com.pushSample.hello

Next field to be filled in the firebase console popup is :

App nickname (optional) : This can be the same app name which is displayed in the menu for the app, this can also be changed in the config.xml, by default it will be HelloCordova, i will update it to PushSample

Debug signing certificate SHA-1 (optional) : This is optional please leave it blank.

Next click on Register App

Next step is to download the google services json file.

Click on the Download google-services.json button, which should download the file to your PC.

Once you get the file paste it in the root folder of your cordova project, in my case :

/opt/lampp/htdocs/pushSample/pushSample

Next build the project

cordova build android

After adding the google-services.json file it should build successfully.

Next we have to write the client side code for handling push notifications :

FCMPlugin.getToken(function(token) {
    //this is the FCM token which can be used
    //to send notification to specific device 
    console.log(token);
    //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
    //Here you define your application behaviour based on the notification data.
    FCMPlugin.onNotification(function(data) {
        console.log(data);
        //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
        //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
        // if (data.wasTapped) {
        //     //Notification was received on device tray and tapped by the user.
        //     alert(JSON.stringify(data));
        // } else {
        //     //Notification was received in foreground. Maybe the user needs to be notified.
        //     alert(JSON.stringify(data));
        // }
    });
});

The code basically first calls the getToken function to get an FCM token from firebase, then in the callback registers another callback onNotification to handle what happens when a push notification is received.

the onNotification function has a data value which contains the notification data. data.wasTapped indicates whether the notification is sent when the app is in foreground or background, so that we can define separate logic for each case. Now to trigger a sample push notification click on the Notification section in the left side panel, this should now show you the firebase notification composer, showing the list of past notifications sent.

In case you have not sent any push notifications yet. You should see a send your first notification button.

Note: The Notification Composer will look like this :

Note While sending push notification using firebase console you need to select app name com.pushSample.hello in my case.

To send the custom application specific data select advance options -> Key value pairs.

The data object in the onNotification callback will look as follows

{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}

Also note while sending push notifications using REST APIs from your app server instead of the firebase notification composer, you have to use the following syntax :

//POST: https://fcm.googleapis.com/fcm/send
//HEADER: Content-Type: application/json
//HEADER: Authorization: key=AIzaSy*******************
{
  "notification":{
    "title":"Notification title",
    "body":"Notification body",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"fcm_push_icon"
  },
  "data":{
    "param1":"value1",
    "param2":"value2"
  },
    "to":"/topics/topicExample",
    "priority":"high",
    "restricted_package_name":""
}
//sound: optional field if you want sound with the notification
//click_action: must be present with the specified value for Android
//icon: white icon resource name for Android >5.0
//data: put any "param":"value" and retreive them in the JavaScript notification callback
//to: device token or /topic/topicExample
//priority: must be set to "high" for delivering notifications on closed iOS apps
//restricted_package_name: optional field if you want to send only to a restricted app package (i.e: com.myapp.test)

Note : “click_action”:”FCM_PLUGIN_ACTIVITY” field is very important as not mentioning it will not execute the onNotification callback in foreground mode.

iOS Implementation

For the iOS implementation we will require the following things to be generated in the apple developer page. I am using XCODE 8.3

App ID : com.example.app Apple Push Notification Authentication Key ( APNs Auth Key ) Development Provisioning Profile with Push Notifications Enabled. APNs Certificates

Also Firebase docs for push notifications is an excellent in depth starting point.

Note: You cannot run push notifications in the simulator, you will need an actual device.

Lets begin.

Firstly login to firebase developer’s console, and select an existing project or create a new project, we will be using the same pushSample project. In the project overview add another app with iOS as platform. In the popup that comes up, enter the following details :

• Step 1 Bundle id : this is the unique identifier which is used to identify an app in the apple appstore, this should be same as the bundle id you will specify in the config.xml file of the cordova project or the Bundle Id section in xCode. we will use com.pushSample.hello App Name : This is the option identifier nick name, we will be using the same name which will display in the iOS app menu which is PushSample. App Store Id : Leave this blank.

Once you click on register app the iOS app step 2 appears.

• Step 2 Here click on the download Googleservice-info.plist button to download the file which we will use in the later steps.

Step3 and Step 4 we can skip as these will be handled internally by the cordova FCM plugin.

Once the iOS app is added to your project Click on the gear icon besides the overview label in the left side panel and select project settings. ( Refer below image. ) . This should by default open the General Tab of your project settings.

Next click on your iOS app in Your Apps -> iOS Apps. In the iOS app details update the App ID Prefix, the value for which you will get in the Apple Member Center under the membership tab.

Now switch to the Cloud Messaging tab -> iOS app configuration section.

Here as discussed earlier upload the APNs Auth Key you generated in the Apple member center. Next we do the client side app setup. Create a new folder sampleApp in your development folder, for me it is

/Volumes/Development/

so the new folder will be

/Volumes/Development/pushSample
cd /Volumes/Development/pushSample

Create a new cordova project, Note : Use sudo if required

cordova create pushSample
cd pushSample

Now add the latest iOS platform

sudo cordova platform add ios

Now paste the Googleservice-info.plist file we downloaded earlier in the cordova project root folder, for me it is

/Volumes/Development/pushSample/pushSample

add the cordova fcm plugin.

cordova plugin add cordova-plugin-fcm

Update the default app id and app name with the bundle id we decided earlier while configuring firebase console and the app name.

<widget id="com.pushSample.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>PushSample</name>

At this point the sample code will have an app.js file, which you can modify and add the getToken and onNotification functions same as android. The javascript code is same for both platforms.

Next run cordova build command

sudo cordova build ios

Once the cordova build command is successful, open the app in xcode. To do this open the xcode.proj file, which will be located in

your_cordova_project/platforms/ios/app_name.xcodeproj

for me it is

/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj

Next enable Push Notifications in the Capabilities Tab of the project.

Connect an actual device and run the app.

Now trigger the push notification from the firebase notification composer and everything should work…

Angular is one of the three most popular frameworks for front-end development, alongside React and Vue.js. The latest version is Angular 8 which was released on May 28, 2019.

There are many new features and enhancements to both the command-line interface and the framework itself which result in a performance-boost and smaller production bundles. One interesting feature is the ng deploy command which allows developers to quickly build and deploy their Angular apps to popular hosting providers such as Firebase or GitHub.

In this tutorial, we’ll take you step by step on a journey to build an example Angular application from scratch that uses many Angular APIs such as HttpClient, and Material Design.

Here are a few things we'll learn:

• How to mock a REST API server that uses fake data from a JSON file
• How to consume the REST API from our Angular 8 application using Httplient
• How to handle HTTP errors using the RxJS throwError() and catchError() operators
• How to retry failed HTTP requests in poor network conditions and cancel pending requests using the RxJS retry() and takeUntil() operators
• How to create and make use of Angular components and services
• How to set up routing and Angular Material in our project and create a professional-looking UI with Material Design components
• And finally, we’ll learn how to deploy the application to Firebase using the ng deploy command available in Angular 8.3+.

You’ll also learn by example:

• How to quickly mock a REST API with real-world features, such as pagination, that you can consume from your app before you can switch to a real backend when it’s ready.
• How to set up Angular CLI
• How to initialize your Angular 8 project
• How to set up Angular Material
• How to add Angular components and routing
• How to generate and use Angular services
• How to consume REST APIs with Angular HttpClient
• How to build and deploy your Angular application to Firebase.

This tutorial is divided into the following steps:

• Step 1 — Installing Angular CLI 8
• Step 2 — Creating your Angular 8 Project
• Step 3 — Adding Angular HttpClient
• Step 4 — Creating Components
• Step 5 — Adding Routing
• Step 6 — Building the UI with Angular Material Components
• Step 7 — Mocking a REST API
• Step 8 — Consuming the REST API with Angular HttpClient
• Step 9 — Handling HTTP Errors
• Step 10 — Adding Pagination
• Step 11 — Building and Deploying your Angular Application to Firebase

Now, let’s get started with the prerequisites!

Note: you can download our Angular 8 Book: Build your first web apps with Angular 8 for free.

Prerequisites

If you want to follow this tutorial, you’ll need to have:

• Prior knowledge of TypeScript.
• A development machine with Node 8.9+ and NPM 5.5.1+ installed. Node is required by the Angular CLI. You can head to the official website and grab the binaries for your system. You can also use NVM — Node Version Manager — a POSIX-compliant bash script to install and manage multiple Node.js versions in your machine.

If you are ready, let’s learn by example how to build an Angular 8 application that consumes a REST API using HttpClient. We'll implement real-world features like error handling and retrying failed HTTP requests.

Step 1 — Installing Angular CLI 8

Let’s start with the first step, where we’ll install the latest version of Angular CLI.

Angular CLI is the official tool for initializing and working with Angular projects. Head to a new terminal and execute the following command:

$ npm install -g @angular/cli

When writing this tutorial, angular/cli v8.3.2 is installed on our system.

That’s it, you are ready for the second step!

Step 2 — Creating your Angular 8 Project

In this step, we’ll use Angular CLI to initialize our Angular project.

Go to your terminal and execute these commands:

$ cd ~  
$ ng new angular-example