When a Distributed Systems Class Becomes a Career Catalyst

Picture this: I'm sitting in my Distributed Systems exam, heart racing as I face a ten-mark question about Remote Procedure Calls. The question demands a diagram, and my mind scrambles to recall some bit of knownledge I heard about gRPC, Protocol Buffers, and bidirectional communication patterns for me to put something down. Despite my best efforts to sketch something coherent, I know my answer barely scratches the surface of what's required.

You know that feeling when you've missed the target even before seeing the results? Yeah, that was me in that moment.

Rather than brushing it off and moving on, the experience lit a fire under me. What exactly was an RPC? Why was it important in distributed systems? How does it differ from the REST APIs I'm comfortable with?

The more I researched, the more I discovered about software architectures I hadn't fully understood:Here are some of the findings:

: Software organized in horizontal layers, with each layer communicating only with adjacent ones.

: Kernel, drivers, system calls, applications

: Enables programs to call procedures on remote systems as if they were local.

: Google's high-performance RPC framework

: Remote method calls between Java objects

: Applications structured as loosely coupled services with standardized interfaces.

: Separate services for accounts, loans, investments

: Business modules integrated through service interfaces

: Small, independent services developed and deployed individually.

: Hundreds of services for recommendations, authentication, content

: Thousands of services for distinct business capabilities

: Systems where components communicate through events from producers to consumers.

: Market data events triggering analysis and trades

: Sensor events activating connected devices

No Theory Goes without a Practical Application Behind It :The Challenge

Learning without application is like reading about swimming without ever getting wet. I needed a real project to cement my understanding.

That's when it hit me – why not convert one of my most familiar integrations, the M-Pesa Daraja API, from REST to RPC?

: Google's high-performance RPC framework using Protocol Buffers

: End-to-end typesafe APIs made easy, built for TypeScript developers

After weighing the options, I chose tRPC. Why? Because who doesn't love the 

? The promise of type safety across frontend and backend was too good to pass up.

Move Fast and Break Nothing. End-to-end typesafe APIs ...

 : his is waht trpc means to every eveloper that adopts it....

For those not familiar, tRPC (TypeScript Remote Procedure Call) creates end-to-end typesafe APIs without schemas or code generation. Unlike traditional REST APIs where you need to manually maintain type definitions, tRPC leverages TypeScript's type inference to ensure full type safety across your client and server.

The key advantages that led me to choose tRPC for this integration:

: Full end-to-end type safety without any code generation

: Autocompletion and compiler checks catch errors before runtime

: No need for separate API documentation or validation libraries

: Handle authentication and token management with tRPC middleware.

: Build secure and efficient API calls using TypeScript.

: Implement clean and straightforward client-side logic.

: Discover the advantages of tRPC in reducing bugs and improving documentation.

Basic understanding of Mpesa-Daraja Api (Reference this article  && great should out to the author Mary Maina 

 requires a specific authentication flow:

It uses the username and password to obtain an accesstoken that u can progressively use in the other subsequent invocations.....

Obtain an access token from their authorization API

Use this token in subsequent API calls (STK Push, B2C, C2B, etc.)

In my original REST implementation, I used Express middleware to handle this authentication flow:

For reference i will be  using my own implementaion that i did back then 

The middleware would fetch the token and attach it to the request object, making it available to downstream handlers. But how would this work in the tRPC paradigm?

The frontend makes a request to initiate payment with a phone number and amount

The backend authenticates with the M-Pesa API

The server sends an STK Push request to M-Pesa

M-Pesa sends a payment prompt to the user's phone

The user confirms payment by entering their PIN

M-Pesa sends the result back to our callback URL

Before diving into implementation, it's important to understand the key differences:

HTTP-based with explicit routes and HTTP methods

Authentication typically handled through middleware

Request and response formats vary (JSON, form data, etc.)

Below is an illustration of the Rest Architecture pattern 

Middleware works differently than in Express

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Dive into our programming articles for insights and tips.

Articles

MPesa Daraja 2.0 + TRPC 

Wrestling with authentication complexity? Want to ship your app in a weekend?
Worry no more because 

Think about it: no more worrying about password hashing, token management, or setting up authentication servers. Instead of spending time building the main app functionality, you can leverage 

 for a production-ready solution in minutes.

: Firebase handles sensitive operations like password hashing, token management, and secure session handling.

: With just a few lines of code, you get a production-ready authentication system.

: Built on Google’s infrastructure, it scales automatically with your user base.

Familiarity with async/await and promises

Basic understanding of authentication concepts

We'll create a complete authentication system featuring:

User authentication credentials stored in Firestore

Persistent login sessions and Authentication State

Navigate to the Firebase page and create a project with a name of your choice.

For this project, let’s disable Google Analytics.

Allow a few minutes for the project to be created.

 button and enable the providers you need for authentication.

.After selecting your provider, you’ll be navigated to the 

 page, which shows a list of your active authentication providers.

After selecting your provider, you’ll be navigated to the 

match /databases/{database}/documents { ... }



Matches all documents in Firestore db.




Specifically matches documents within the users collection, where {userId} its representing any user ID.



allow read: if request.auth != null && request.auth.uid == userId;



Allows read access to a user document only if the request is authenticated 

and the authenticated user's ID matches the document ID

allow write: if request.auth != null && request.auth.uid == userId;



Allows write access to a user document under the same conditions as read access: 

Firebase provides a variety of functions to enable a custom and simplified authentication flow:


Functionality for registering users with an email and password.


Enables user login to access restricted features.


Allows users to reset their password securely if forgotten.


Lets users log out from their account and end the session.


A way to listen to real-time authentication state changes, like login or logout, across the app.

 async function handles user registration in Firebase Auth by taking user credential

It creates a new user account in your Firebase project, sets up their initial password, and returns a

. The auth object represents your initialized Firebase 

, while email and password come from user input fields

 async function handles user authentication in Firebase by 

validating provided client side credentials

 (auth, email, password). It checks these against existing Firebase user accounts, and if matched, returns a Promise containing the user's credential object.

 async function manages Firebase's password recovery process. When triggered with your 

 to that email address. This link gives users a secure way to create a new password. The function returns a 

- if successful, the user gets a recovery email; if it fails (like with an invalid email), it throws an error that your code can catch and handle appropriately.

, clearing all authentication state. When invoked, it removes the

 and returns a Promise that resolves once they're successfully logged out.

real-time listener keeps track of user authentication status . It 

 to the user's sign-in state (logging in, logging out, or token expiry) and triggers a callback function that lets you update your app accordingly.This helps maintain proper UI state -eg showing different content for logged-in versus logged-out users.

: Individual data records that contain user data with unique IDs. Documents can also have 

How to seamlessly Roll Auth into your React App using Firebase Authentication

Have you ever wondered how apps make those 

 that instantly capture your attention? Whether it’s buttons gliding across the screen or 

, animations make interfaces engaging. With Framer Motion, you can easily add

 to your React apps without being an animation expert.

In this guide, we’ll walk you through creating eye-catching animations, from simple transitions to complex gestures. 

 component, animation properties, and variants.

: Use animation controls and gesture animations to enhance user interactions.

: Learn best practices for performance optimization and accessibility considerations.

: Develop reusable animation hooks to manage complex animation logic.

Integrate Error Handling and Loading States

 to handle  loading and error states gracefully.

Basic Knowledge of React (creating custom hooks)

Framer Motion is a popular open-source animation library from Framer for React that allows developers to manipulate DOM elements e.g enables them create and manage complex animations and transitions within apps.It's an excellent alternative to making complex CSS or Javascript animations.

 Describes adding interactivity with gestures like drag, hover, and tap, which can trigger animations.

  Introduces reusable animation states with variants, a powerful tool                                                                                                                                                                                                                                        for applying animations to multiple elements.

 Focuses on how animations are defined through initial and animate props, directly targeting the animation states.

 Discusses seamless animations during layout changes, providing an advanced concept for dynamic UIs.

Explains the ability to control timing and easing of animations using the transition prop.

 allowing you to animate them using initial and animate props.

Initial State: The initial prop defines the starting point of the animation. In this case, the motion.div will start with an opacity of 0 (completely invisible) when it first appears.

The animate prop defines the final state the element will animate to. Here, the motion.div will transition from its initial state (opacity 0) to an opacity of 1 (fully visible).

 The exit prop defines how the element will animate out when it’s removed from the DOM. In this case, when the motion.div is unmounted, it will fade out (go back to opacity 0).

This controls how long the animation takes to complete. The transition prop here specifies that the animation will last 2.3 seconds, whether it's fading in or fading out.

  allows components to animate out when they're removed from the React tree/DOM.

It works hand in hand with the motion components 

components. Each component has its own animation behavior, and these behaviors are controlled by the 



The A form (motion.div) that fades in from below.

 This defines the animation states for the form as a whole.



  shifts the form 50 pixels down, so it starts out off-screen.
Visible State:



  fades the form in, making it fully visible.


  moves the form back to its original position, making it appear from below.
transition:


This controls the time it takes for the animation to complete (0.6 seconds).


 This delays the animation of child elements (like input fields) by 0.1 seconds, creating a smooth cascading effect.

 will fade in and move up from its starting point when the component is rendered. It will 

 and the children (input fields) will animate in a staggered manner thanks to the 

Gestures allow you to add interactive animations that respond to user input, like hovering, tapping, dragging, and scrolling.

This property triggers animations when the user hovers over an element.

This is commonly provides feedback, like enlarging a button or changing its appearance when a user hovers over it.

The element scales up (enlarges) to 1.1 times its original size when the user hovers

 property triggers an animation when the user taps or clicks on an element.

The element shrinks (scales down to 0.9) when the user taps or clicks on it, simulating a pressed state.


Animate beyond your React-Forms with Framer-motion

Ever thought about launching your own application over a weekend or rapidly shipping your SaaS product? Stripe makes it easy to handle payments, and combining it with SendGrid can streamline sending email notifications to users after successful transactions. In this blog,Weel use React to consumer our srtie backend server configured using the Two Third party APIs.

Integrating Material Tailwind for UI components

 Handling user bookings and displaying notification

Configuration and Setup for project Environment

2.   Add tailwind to your postCSS configuration

 function is a utility provided by Material Tailwind to help integrate Tailwind CSS with Material Tailwind components seamlessly.

7.  Within the styles folder lets add our tailwind directives input.css file and its 

 to ensure that whenever non-existent routes are navigates they fall back to this page

 in our package.json within the scripts object 

Within the src/component create the following files using the cli;

Task 1.  Declare  all the imports and  the states to be used within our componnent           



The function first makes a POST request to the backend server to create a 

( necessary for handling payments) a charged (bill)is attached to the request
The server responds with a sessionId, which is used to generate a 

 received from the server, the function constructs a payment link (stripePaymentLink). This link will direct the user to the Stripe-hosted payment page.





The function then makes a POST request to the backend server to send an email to the user.
The request is sent to 

with details such as the user's email, the service booked, the start time, the bill amount, and the payment link.


Task 3 . Handling Boooking Function and the Dialog Functionality

component for entering the email, preferred service time in minutes.

 component triggers the handleBooking function when clicked. If the isLoading state is true, the button displays a loading spinner.





The Dialog component displays a success message when the booking is successful.

When we submiit through the Button our dialog Works Hurray!

 to load Stripe and redirect the user to the checkout session based on a session ID provided in the URL parameters.

 is used to load the Stripe JavaScript library with the provided publishable key.


The component defines an asynchronous function redirectToCheckout that uses the loaded Stripe instance to redirect the user to the Stripe Checkout page.

Upon receiving the Emaill click the link and Get redirected to the Stripe hosted page 

Stripe Payments Made Easy: Checkout and Email Automation with SendGrid Part 2

Most applications have embraced dark mode to meet diverse preferences and user needs among other benefits. A theme switcher element provides users with the ability to switch dark and light themes. By offering a theme switcher, applications can accommodate a wider range of users and ensure that everyone can comfortably use the app regardless of their visual needs.

Before diving into the demo it is important to have the following:

We shall scaffold our React application using 

Install Tailwind and its peer dependencies

Add the Tailwind directives into your index.css file by including the appropriate @tailwind directives for each layer.

After the project cleanup, we shall create different folders to support the dark/light mode feature.

We will use context API  to ensure we can pass data through the component tree without having to pass down props manually at every level. In this case, the useThemeContext provider ensures all the components have access to the current theme mode based on the user's selection.

: Creates a new context with an initial value of 

. It's typed according to the ThemeContextType

: This functional component serves as the provider for the theme context. 

 function to toggle between light and dark themes. 

 element to apply dark mode styles globally. The dark class is provided by Tailwind to handle dark mode. This shall be explained further as we proceed.

 object containing the current theme and the 

The useTheme custom hook defines an easier for components to consume the theme context. 

It also provides a way to handle potential errors.

We wrap the App component with the theme Provider so that every component can access the store context.

We also import Navbar in the main component to ensure it is part of the main layout and rendered alongside other components.

Tailwind has support for dark mode that lets you style your site differently when dark mode is enabled. We will use the 'selector' strategy to manually toggle between light and dark mode. 

The 'dark' class gets applied whenever it is present in the HTML tree structure.

In our index.css file, we will target the body element whenever the Tailwind dark mode property is activated. This styles the body of the webpage based on the defined styles.

This component has a theme switcher that allows users to switch between dark and light modes according to their preferences.

In the App component, there's a product component displaying a catalog of products. It mimics an e-commerce product catalog, is updated whenever the theme switcher is toggled.

The product data has been defined in a constants file. Here we import a Card component that takes in a product prop after mapping through the product list.

The Card appearance is modified by the dark mode class. 

Github repo: https://github.com/kodaschool/theme-switcher-react

Articles

MPesa Daraja 2.0 + TRPC

How to seamlessly Roll Auth into your React App using Firebase Authentication

Animate beyond your React-Forms with Framer-motion

Stripe Payments Made Easy: Checkout and Email Automation with SendGrid Part 2

How to build a theme switcher in React with context API

Exploring Advanced React hooks

Getting started with React Query

Practice Frontend, Android and iOS by building real world projects.