I am studying for AWS Solutions Architect Associate exam right now and I found some concepts confusing as I am fairly new to networking. I am writing down key points here for myself and for others who are also learning AWS Networking for review.

VPC Endpoints

• Allow private connection between your VPC and AWS services (e.g., S3, DynamoDB) without using the public internet.

Use Case Scenario

Imagine you have an application hosted on EC2 instances inside a VPC that needs to access files stored in an S3 bucket. Without a VPC Endpoint, your EC2 instances would have to go through the public internet to reach S3.

• Solution: Create a VPC Gateway Endpoint for S3. This allows your EC2 instances to communicate directly with S3 over the AWS private network, enhancing security and reducing latency since the data never leaves the AWS network.

VPN (Virtual Private Network)

• Securely connect your on-premises network or other cloud networks to your AWS VPC.

Use Case Scenario

Suppose your company has a data center on-premises and you want to securely connect your data center network to your AWS VPC to transfer data or run hybrid cloud applications.

• Solution: Set up an AWS Site-to-Site VPN connection. This creates an encrypted tunnel over the internet between your on-premises data center and your AWS VPC, enabling secure communication between your on-premises servers and AWS resources.

How About Route tables, Network ACLs, and Security Groups?

Route tables, Network ACLs, and Security Groups control traffic within the VPC and between subnets, but they cannot establish private connectivity to AWS services (like S3 or DynamoDB) outside your VPC. VPC Endpoints are needed because they enable private connections to AWS services using the AWS network, without exposing traffic to the public internet.

AWS services like S3, DynamoDB, and SNS are global AWS services and do not reside inside a specific VPC by default.

For connecting to services in another VPC (even your own), you would use VPC Peering or Transit Gateway, not VPC Endpoints.

Important Points to Remember

• AWS services like S3, DynamoDB, and SNS are global AWS services and do not reside inside a specific VPC by default.
• For connecting to resources in another VPC (even your own), you would use VPC Peering or Transit Gateway, not VPC Endpoints.

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Differ
• More content at Stackademic.com

Understanding VPC Endpoints vs VPN: A Quick Guide for AWS Networking Beginners was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

In the fast-paced world of web applications, responsiveness is key. Users expect quick and seamless interactions, but often, full-stack applications, especially those hosted on platforms like Render, can experience slow startups after periods of inactivity. In this blog, we delve into a practical solution to keep your full-stack application always ready and responsive. Whether you’re using React for the front end and Flask/Python for the backend like me or any other technology stack, this guide will walk you through the steps to ensure that your application on Render stays active and avoids the dreaded slow launch. This enhances user experience and maintains consistent performance. Note that syntax and modules might differ, but the concept should remain the same.

On Render, if your website doesn’t receive any request for 15 minutes, next time someone accesses it, it can take 30 seconds or more to load the website. (Yes, it’s longer than the few seconds mentioned in their documentation, unfortunately.)

Most of my work stuff is live on paid hosts but I still have few projects from my coding bootcamp using free tier service on Render. Initially, I thought I had to just accept the slow performance. So I ended up filming a demo video to share on social media and added that to my resume, along with the link to the live website, because I knew the link would be slow to access.

Luckily, there is an easy and quick solution to that problem 🙌

Option 1: Frontend Approach

You can send a request every 15 minutes to your backend. In my case, I could use setInterval function in React that sends a simple GET request to your Flask backend every 15 minutes. This could be for a lightweight endpoint like /pingin your backend app, just to receive the request and keep the website active.

The catch is that this approach relies on the user keeping the browser tab open. If the tab is closed, the requests will stop. So for a portfolio project, this might not be very effective because these sites don’t have a steady stream of visitors.

Option 2: Backend Approach

A much better and more reliable approach would be to set up a similar mechanism in the backend, as it doesn’t rely on user activity in the browser.

In my case, I used Flask/Python for the backend (You would need a WSGI environment to run Flask app) and it was super simple to set up a background task. You can install BackgroundScheduler from apscheduler.schedulers.background and requests module and have that run your HTTP requests on schedule on your behalf! Pretty neat, isn’t it?

Run pip install apscheduler and pip install requests and add the below code to your app.py.

from apscheduler.schedulers.background import BackgroundScheduler
import requestspy

Here is what my code looks like using the above modules for one of the projects.

I added an endpoint called ‘/ping’ that simply returns a response {“status”: “alive”}, 200 for this task.

I then added a function keep_alive() that tries to send HTTP request to the /ping endpoint with an exception handling to capture the error messages.

I saved BackgroundSchedule() to a variable scheduler and used that to run the keep_alive() function, setting intervals of 15 minutes so it will run automatically at this frequency.

After that, I ran pip freeze > ../requirements.txt to update my requirements.txt as I installed new modules. Then I pushed to my deploy branch on Github and Render automatically re-deployed my application with the new set up.

You can check the log on Render to see if it is actually sending requests every 15 minutes. It seems pretty consistent but as you can see, sometimes it is 16 minutes or 14 minutes. So you can set the interval to 13 minutes or less just to make sure that it is responsive at all times. Check out my website below and see if you can access it right away!

Property Panda 🐼

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.

Keeping Your Full-Stack App Responsive: Prevent Slow Startups Even on Free Instances on Render was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

Never expose your API keys to the public

You might know that when developing a website, you shouldn’t have your API keys out in the public. Keeping API keys secure within your project is essential to prevent potential security risks.

Storing API Keys in a Secure .env File

You can safely keep your API keys in the .env file. Additionally, you should include the .env file in your project's .gitignore to prevent it from being pushed to your remote repository on platforms like GitHub. This practice ensures that sensitive information remains hidden from public view.

Here’s an example of how you can access API keys from the .env file in your code from my React application:

const { isLoaded } = useLoadScript({
googleMapsApiKey: process.env.REACT_APP_GOOGLEMAPS_KEY,
libraries,
});

But what happens when you deploy your website? How does your app have access to your API keys if they are saved on your local computer?

The Importance of Hiding API Keys

Exposing API keys is a recipe for disaster, and here’s why:

1. Unauthorized Usage: Unauthorized individuals might exploit your keys, resulting in unexpected financial charges.
2. Credibility Issues: Misuse of your API keys could tarnish your reputation with the API provider, potentially leading to service restrictions.
3. Data Breaches: Depending on the type of API, this could lead to data breaches, as malicious actors may gain access to sensitive information through unauthorized API requests.
4. Reputation Damage: And all of these can cause reputation damage to your website and yourself.

Protecting API Keys After Deployment

Luckily, it is fairly simple to hide your API keys even after deploying your website. In my case with React and Flask full-stack application that I deployed on render.com, it only took me a few minutes to do so. The basic concept should be fairly similar for other web hosts but the code might need to be modified accordingly depending on their setup.

Follow these steps to protect your API keys after deployment ⬇️

1. Copy API Key Information: Begin by copying the API key information from your .env file.

In my project, I used EmailJS and Google Maps.

2. Configure Environment Variables: Navigate to the Environment Variables on render.com and add the information there:

Make sure you use the same key value pairs as in yourgitignore file for each API key.

3. Re-Deploy Your Application: Once you’ve saved the environment variables, your application should automatically re-deploy. You should now be able to see the components of your website using the protected API keys.

In my case, I was still using trial account so when I added the API keys on render’s environment variables, I still had an issue with generating Google Maps saying For development purposes only right on the Map but I just needed to go to the Google API console and activate my account. To use API after delopying, make sure you have full account access. To do so, you might have to add a billing information.

Happy coding, and keep those keys safe! 🚀

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.

Protecting Your API Keys: A Guide for Website Deployment was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

App Localization with TUO

I did app localization for TUO, a startup specializing in circadian lighting. For their Ionic/Capacitor application, I could simply use ionic serve command to launch a server on localhost, and test on a browser just like I would for web applications.

But it turns out that many app plugins and certain features may not show up when run on a server, especially if they rely on hardware-specific components or system resources that may not be available on a server environment. That’s when the trusty emulator or an actual test device comes to the rescue!

Where’s my Console?

In my latest project involving a review prompt using Android Studio, I hit a little roadblock. Unlike the familiar Console in Chrome Inspect for web applications, Android Studio didn’t offer an equivalent feature right out of box.

After a thorough online quest, I stumbled upon something called ‘logcat’ in Android Studio. Exciting, right? Well, not so fast! It didn’t quite display what I needed from console.log() in the code.

Chrome Inspect: Guiding the Way Through Debugging Puzzles

Thankfully, a solution wasn’t far off. Once your application is up and running on an emulator, simply type chrome://inspect in the browser's URL. Chrome Inspect will seamlessly identify the application for you, providing a vital tool for debugging.

You can then hit inspect below your device details and a new browser with a Console pops up like below 🙌

I must admit, I never thought I’d be this excited to see a Console. But here I am, enthusiastic about the prospect of enhanced debugging on my mobile app development journey. 📱🥂

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.

Emulator Hacks: Revealing console.log() Output for Seamless Debugging was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

Exploring the Take-Home Assignment

I recently had the chance to dive into an interview process for a position that had me buzzing with excitement. I went to the third round of interview which was a take home assignment. The fourth one would’ve been the final round. I was given a simple design and was asked to create a website using React but was given a liberty to add as much features as I felt fit. I was so excited but, long story short, the job ultimately slipped through my fingers.

The Rush to Completion: Lessons in Patience

Now, let’s talk about the mad dash I made to complete the assignment. Given a generous week to work my magic, I decided to channel all my energy into a day and a half of intense, I mean INTENSE, creativity, hitting submit next. I literally put everything else on hold. Looking back, I can’t help but cringe a little. If I could hop into a time machine and give past-me a piece of advice, it would be this: “Wait until the last day. Exhaust all your resources, let your ideas simmer, revisit them with fresh eyes, seek input from mentors, refine them, and then, and only then, hit submit.”

Hindsight is a funny thing; what once seemed like a brilliant move now strikes me as a rush of excitement that obscured my vision of the project as a website, not just an assignment.

A Moment of Clarity

For a few weeks after the rejection, I’ll admit, I was baffled. I couldn’t figure out why I had been turned down. I wished I could see other candidates’ submissions so I could learn from them. After all, I felt quite content with what I had submitted.

Yet, giving up isn’t my style. I really believed that the position was a perfect match for me, both technically and in terms of cultural fit. Instead of viewing this setback as a mere failure, I saw it as an invaluable learning opportunity. It was then that I decided to reach out to my mentor, who graciously guided me through my thought process.

That conversation led to a series of realizations:

1. I had approached the project as an assignment rather than treating it like a genuine website.
2. I got caught up in trying to mirror the design, thinking of the extra features I added as icing on the cake. Turns out, I ended up throwing in functionalities that wouldn’t really fly in the real world.
3. I failed to grasp the subtle message embedded in the instructions.

When you’re granted creative freedom, it’s likely intended to see not just what you did, but why you did it, or at the very least, to ensure your choices are intuitively clear.

In hindsight, I realize that providing a brief note on the reasoning behind the features I included would have been invaluable. After all, the assignment isn’t just about showcasing technical skills, but also about revealing one’s approach to problem-solving.

Turning Setbacks into Stepping Stones

Reflecting on this experience, I’ve come to appreciate the valuable lessons learned. What initially felt like a setback has turned into a powerful stepping stone for personal and professional growth. It’s shown me the importance of seeing beyond the surface, of treating each project as an opportunity to create something meaningful and functional.

As I move forward, I feel more prepared for the next assignment I may have in the future thanks to this opportunity. I’ll remember that it’s not just about what you create, but why and how you create it. I’ll embrace setbacks as chances to learn, improve, and ultimately, to excel.

And most importantly, having a mentor is gold. (Thanks, Amy! 💚)

Thank you for joining me on this journey of self-discovery and growth. Here’s to taking on new challenges with confidence and a determination to continuously better ourselves.

What is Docusaurus?

Docusaurus is a static-site generator to help build a documentation site quickly to let users focus on its contents rather than the technical parts, through text editors like VSCode or Content Management Systems (CMS) such as WordPress, Strapi, and Netlify CMS.

Content writers can use those tools and save contents in markdown files and it has a lot of out-of-the-box features to fit your needs.

Customizing Docusaurus

Customizing features on Docusaurus can be a headache at first for that reason though: there are a lot of out-of-the-box-features!

But once you understand how things work with Docusaurus, I’ve actually come to enjoy it. A lot of people didn’t even think React was that good when it first came out and now it is the most popular JS framework in the world, right? (I wasn’t a dev back then but this React documentary was so interesting, I got my husband to watch it with me. 🍿 It turns out that our friend was in the documentary but that’s a story for another day…)

What is Swizzling…?

Swizzling is a special-term in Docusaurus: a feature that allows you to customize built-in components and features to better suit your specific needs.

Admonitions

Admonitions in markdown look like below ⬇️

The code for the above looks like this ⬇️

:::info title goes here
content goes here
:::

Custom Admonitions

In Docusaurus, there are 5 built-in admonitions: ‘note’, ‘tip’, ‘info’, ‘caution’, and ‘danger’.

To add custom admonitions, follow the steps below 🏁

Step 1️⃣ Add words to the array of keywords in docusaurus.config.js

These keywords will be used to call the admonitions.
Here, question, podcast, newletter, company, contribute, and book were added.

Step 2️⃣ Add custom css in src/theme/Admonition/styles.module.css

If the file is not there yet, you need to swizzle the component. (See here for more info on swizzling)

To add a custom css to the new admonition, you simply use the keyword as a selector. For example, for ‘podcast’, it would be .podcast.

.podcast {
  border-left: 5px solid yellow;
  background-color: rgb(250, 250, 234);
}

Step 3️⃣ Add keywordIcon function to src/theme/Admonition/index.js

import { MdPodcasts } from 'react-icons/md'

function PodcastIcon() {
  return (
    <MdPodcasts
      title="Podcast Icon"
      style=""
    />
  )
}

I’m using react-icons so in this case, I’m importing the icon from the library and then use that to create PodcastIcon()function which simply returns the icon with the title.

Step 4️⃣ Add keyword to the object AdmonitionConfigs in index.js

For other keywords, simply change where is says podcast to others.

Step 5️⃣ Add the new ones to Admonition() in index.js

For podcast, I added const isPodcastAdmonition = type === ‘podcast’; and [styles.podcast]: isPodcastAdmonition to the admonitionClassName variable and did the same for other keywords.

Step 5️⃣ Test 🚀

Once all the above is done, add admonition code (:::keyword title content :::) to any markdown file where you want to test and you should be able to see your custom admonitions with your keywords and icons like below 🎉

caveat: don’t forget to re-start the server as we made changes to the config file!

Examples were from my experience at the Climate Tech Handbook.

Please give them a follow on LinkedIn!

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Following us on Twitter(X), LinkedIn, and YouTube.
• Visiting Stackademic.com to find out more about how we are democratizing free programming education around the world.

Creating Custom Admonitions in Docusaurus React App was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

For the Climate Tech Handbook, the open source project that I’ve been contributing to for the last few months, I got to make a reusable react component called ImageCards to generate cards in markdown files using Docusaurus.

Docusaurus is a static site generator like Nextra.js (Next. js Static Site Generator framework) and it allows content writers to use simple markdown files via softwares like notion but also takes in mdx which allows us to use reusable react components in those files.

With that, we can generate static sites with react components like below:

Live site here
Github Repo here

This is not limited to .mdx files but when a component is used multiple times in a single page or across pages, it is hard to keep everything looking nice and clean. For example in the above, cards are used to list climate solutions for each sector. The problem here is that word/ character count for each image’s description varies.

For the above ImageCards component, I had the below code originally in typescript:

import React from 'react'
import styles from "./ImageCard.module.css";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import { AiOutlineArrowRight } from 'react-icons/ai';
import { useHistory } from 'react-router-dom';

    interface CardProps {
        title: string;
        description: string;
        imageUrl: string;
        linkUrl: string;
    }

    const ImageCard: React.FC<CardProps> = ({
        title,
        description,
        imageUrl,
        linkUrl,
    }) => {

    const history = useHistory();

    const handleClick = () => {
        history.push(linkUrl);
      };

    return (
        <div className={clsx("cardContainer", styles.cardContainer)} onClick={handleClick}>
            <img className={clsx("img", styles.cardImg)} src={imageUrl} alt={title} />
            <div className={clsx("content", styles.content)}>
                <h2>{title}</h2>
                <p>{description}
                    <Link
                        to={linkUrl}
                        className={clsx(
                            styles.cardButton,
                        )}
                    > <AiOutlineArrowRight />
                    </Link>
                </p>
                
            </div>
        </div>
    )
}

export default ImageCard 

In order to make sure that the description fits in the card and doesn’t look like below, we can truncate the text.

First, we need to set the character limit. For this, I started with 100 characters and then adjusted it to 80 to make sure it works with our content.

After that, I created a variable called truncatedDescription and set it to description that gets passed by writers as props in markdown files.

Next step is to check the length of the description and if the length is smaller than the limit set above, we want to show it as is, otherwise, we need to truncate it.

But we don’t want to cut off description in the middle of a word just because it is over the character limit. We want to add ... to the last word if the description is too long to indicate to the reader that it continues.

To do so, I created another variable called lastSpaceIndex and save the index of the last white space using a method called .lastIndexOf.

If the lastSpaceIndex equals to -1, which is the end of the description, we have a complete word right before so we just need to add ... at the end but if it doesn’t, it means at character 80, it is in the middle of a word so we have to go back to the last white space and add ... there instead.

Here is the code for the above:

const characterLimit = 80;
    let truncatedDescription = description;
    if (truncatedDescription.length > characterLimit) {
        const lastSpaceIndex = truncatedDescription.lastIndexOf(' ', characterLimit);
        if (lastSpaceIndex !== -1) {
            truncatedDescription = truncatedDescription.substring(0, lastSpaceIndex) + '...';
        } else {
            truncatedDescription = truncatedDescription.substring(0, characterLimit) + '...';
        }
    }

Once this is added to the typescript file and the JSX is changed from {description} to {truncatedDescription}, everything should fit perfectly in the image cards like below 🎉

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.

Mastering Truncation: A Guide to Implementing Reusable React Component with Text Truncation was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

React Conf in 2019

I just watched this video where Nat Alison gave a talk at React Conf back in 2019. I didn’t know this, but it turns out that despite the fact that React has become the most popular front-end library, much of the documentation is still not available in other languages.

The problem is that there are developers all over the world. They may want to use React or has been using React for work but can’t look up issues or check out their documentations if they don’t speak English.

What’s Happened Since 2019

Since then, a lot of efforts have been made to make the documentation available in different languages. But they faced a lot of issues with integrating translation into their web application.

Since Nat’s talk at the conference, the reality is that there is still a significant amount of work to be done. (Source)

The Good News

Recently they started using Github for the project and it seems to be working pretty well. I just tried it myself, and the process was relatively easy.

Contributing to Open Source Localization Projects

Wether open source or not, I love working on the localization projects because it promotes accessibility by breaking down language barriers.

Especially in the tech industry, learning how to program can empower so many people including those without traditional education, single-parents, people who had career breaks, and career switchers (like me), to name a few. Having resources available in their own languages means that more people have access, breaking down socio-economic barriers worldwide.

After watching the video, I had to start contributing to the React project. I just assumed their documentation was available in every language imaginable because, at the end of the day, React is a product of Meta, one of the largest corporations in the world. It is being translated for sure but definitely could use more help. As Nat says in the video, it is better done than perfect.

So if you want to contribute to a great cause, go here and click on ‘contribute’ button for your preferred language.

Contributing to an open source project could also help you:
1. Build experience.
2. Learn new technologies.
3. Familiarize yourself with the workflow of software engineering.
4. Help others.
5. Keep your Github account active.

The React localization project doesn’t use a translation library. It simply uses markups and Git. Nothing is dynamically rendered, so it’s straightforward. You can keep your Github account active and certainly learn the Git workflow. The freeCodeCamp project uses Trello and Ghost for articles and Crowdin for carriculum. If you translate their articles, they create a profile page for you, allowing you to showcase your work on their page like this.

Let’s get them translated!

…A Little Background

Before I started coding, I was a translator for 10 years. When I started coding, I joined a localization project to add Japanese to the mobile application for a startup called TUO, in preparation for their launch in Japan this fall. I’ve also been contributing to the open source project at freeCodeCamp.org for their localization project since March this year.

Why Google Maps?

Using Google Maps was part of my stretch goals for my capstone project. In fact, it wasn’t really necessary for the core functionalities of my application, which was an expense tracker for properties. However, as humans, we love visual effects. Even blog posts are easier to read when they include pictures, animations, and other elements. So, I knew that adding Google Maps would be a great enhancement to my project. I was also told that implementing Google Maps could be challenging, especially considering we only had three weeks to develop a full-stack web application. But I love challenges, so I decided to give it a try. In the end, it really helped with the forms by providing an Autocomplete feature for address input as well.

2 Key Points

(And I had to spend days figuring these out on my own)

1. Avoid generating longitudes and latitudes every time the page renders. Instead, convert addresses to longitudes and latitudes when new data is created and save them along with other information in the database.
   (You can see my struggles here when I did try to generate longitudes and latitudes every time the page is loaded. And yes, I answered my own question when I figured it out a couple days later)
2. If your map doesn’t get rendered for no apparent reasons, it probably needs to be placed inside a container with defined height and width, as shown below. (I really think this should be a built in feature of Google Maps…)

<div style={{width: '80vw', height: '80vh', marginTop: '5vh'}}>
  <GoogleMap 
    zoom={10} 
    center={{lat: 47.6062, lng: -122.3321}} 
    mapContainerStyle={{ width: '80%', height: '80%' }}
  >
      { markers }
  </GoogleMap>
</div>

Where to Begin 🗺️

The very first thing to do is to get a Google API key. Google provides a great documentation for setting it up and is available here. It even has a video demo so highly recommend checking it out.

No Google Cloud Account Yet?

If you don’t have a Google Cloud Platform account, you can create one here. I found this tutorial video very helpful.

For the project, I added Google Maps to show property locations on the property page.

Google Maps & React

Google provides amazing tutorial videos on YouTube and I highly recommend watching these videos before starting or at least coding along with them here. It give you step-by-step guide from what to import, what variables can be used from them etc. It also talks about how to hide your API key and that was very helpful.

If you are building a full stack application like me instead of front end application, make sure you have your .env file in the front-end directory instead of the root directory.

Also, keep in mind that to restrict the key once you deploy your application, you need to pay small fees but otherwise by hiding your key in .env file, you get to enjoy Google Maps for free.

As I mentioned earlier, I saved longitude and latitude for each address when each property is created and updated using getGeocode and getLatLng from the use-places-autocomplete module. Below is the code for the NewProperty component as an example.

On submit, I am simply adding that information (longitude and latitude) to the data I obtained from the form using formik.

Bonus Features

Another thing that was really cool about Google Maps API was Autocomplete from @react-google-maps/api. With Autocomplete, you don’t even need to type the whole address anymore, and you can even search by names of landmarks like Eiffel Tower or Disney Land. You can see the demo video here!

I hope this helps with your project — let me know if you have any question!📍📍

State Management Using Redux Tool Kit

For the capstone project, implementing state management such as useContext or Redux was a requirement so I decided to go with Redux.

I’ll cut to the chase.

I wouldn’t recommend using this for a simple state management such as keeping track of counts, votes, or likes unless you have hundreds of components in your app and different components located in completely different places in the component tree need to access it.

React’s useState hook is very efficient and so much simpler and easier. I like the idea of being able to access redux state from anywhere without passing it but in each component you would need to import the state, reducer to update the state, and dispatch to call the reducer and it seems like a lot for a simple state management.

However, for API fetches, it was pretty nice once one was set up. All I had to do was copy and paste, change the names for other tables. I had 6 relational tables for this project and it was definitely a time saver. I can only imagine that it gets easier and easier as you have significantly more tables or APIs to access.

That being said, I’m glad I decided to use it even though I know there are mix feelings about Redux and I’m not sure if I would use it again unless I have tons of tables or APIs. It took me a while to understand the set up and how this works. Here, I would like to point out a few things I wish I knew so those who are trying to create a full stack web application using react and redux toolkit, and deploy it like me have something to reference as I found it very hard to find resources online.

I’m building a property management app designed to help property owners keep track of their expenses to make filing taxes a little less stressful and managing properties easier in general. The app is called Property Panda and the idea is that the owners can be as lazy as a cute cuddly panda while the app does the work 🐼

It is live here! And Github repo is here.

The above is my file structure for the client side to show where the files for redux are. To use redux, I created two folders inside of src called app and features. Inside of app, I have services folder and the store file. I am using services folder to organize API requests and features folder for slices (simple state management.) Ultimately, everything in services and features will go into the store file because store becomes the single source of state for this app. As I mentioned earlier that I do not really recommend using redux for simple state management, I won’t go into details about the features folder.

baseUrl

One thing that had to be changed once the API requests were set up using the redux createApiand fetchBaseQuery from @reduxjs/toolkit/query/react was that I had to change the baseUrl to the frontend server Url instead of backend server to fetch.

This was because I was using proxy for fetching like below in package.json:

{
  "name": "phase5-project-property-management",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5555",
  ...
}

If you don’t have proxy set up, then you can just use the backend server url like regular react app for fetching. If you are having trouble fetching after setting up the services file, this is a good place to check.

baseUrl — Deployment

Another interesting thing was that once it was deployed, I had to change the baseUrl to ‘/’ like below:

For my previous project, I didn’t use Redux and had the server url in proxy and did not have to change it to anything else. However, for some reason, this was the only way I could send requests to server. Leave me a comment to let me know if you know why! I couldn’t find answer anywhere about this and this was the motivation behind writing this blog post because I had to spend sometime to figure this out on my own.

tagTypes

Another thing I had trouble while implementing Redux was updating DOM.
So my app structure was that when a user clicks on a property card, that would take them to the units page where thy can view units that belong to the property. Now, usually with useState, I would just fetch in property page, get the property data but since they are relational database, I can get the units information for each property from the property data so I would save it all in a state and pass units info for each property and the setter function to units page and if it gets updated, I’ll just do fetch to the endpoint for units and update the state with the setter.

At first I did the same with Redux. It was updating the database but the DOM wasn’t getting updated so I had to refresh to see the change.

As you can see below, there is an attribute called tagTypes. What this does is that it creates a tag that you can place on a query method. In this case, I placed a tag on getProperties method by adding providesTags: [‘Property’]. I also added invalidatesTags[‘Property] to addProperty method. By placing them, it tells it to run getProperties query method again if addProperty method is invoked.

This is a really cool feature because this file is taking care of state properties and just by adding the tag, it automatically re-fetch, re-renders, and updates the DOM accordingly.

The problem was that because I was passing units that I got from properties API endpoints as props to units page, and was adding, updating, and deleting them via units API, that didn’t trigger the tag to act on properties, therefore, nothing was happening in the units page unless I refresh the page.

So here is what I did instead.

Instead of passing the units object to Units component, I passed property id using routes and get the property id in question with useParams hook from react-router-dom and fetch units for a property from units api using its id. To do so, I added another Resource in my backend flask app called UnitsByProperty but that fixed the issue of (non) re-rendering.

authAPI

I also created a file called authAPI in services folder to handle login, logout, signup, and check session.

It was pretty straight forward after I got a hang of the other API routes. For some reason, check session would not work and the original code without using redux was not that much anyway, I kept the original code for that but others worked fine.

I would just import the useLoginUserMutation, get the method and use it instead of fetching when a user submits a form. You can then save the data returned from the server and set it to the currentUser.

import React from 'react'
import RingLoader from 'react-spinners/RingLoader';
import * as yup from "yup";
import { Grid, Form, Button, Icon } from 'semantic-ui-react'
import { useFormik } from "formik";
import { useNavigate, Link } from 'react-router-dom';
import { useLoginUserMutation } from '../../app/services/authAPI';

const Login = ({ setCurrentUser }) => {
  const navigate = useNavigate();
  const [ loginUser, { isLoading } ] = useLoginUserMutation();

  const formSchema = yup.object({
      username: yup.string().required('Field required'),
      password: yup.string().required('Field required'),
  });

  const formik = useFormik({
    initialValues: {
      username: "",
      password: ""
    },
    validationSchema: formSchema,
    onSubmit: async (values) => {
      if (formik.isValid) {
        try {
          const { data } = await loginUser(values)
          setCurrentUser(data)
          navigate('/')
        } catch (error) {
          alert('Oops, username and password don\'t match');
        }
      }
    }
  });

  return (
    <div>
      <RingLoader color={'#F5A623'} loading={isLoading}/>
      <div className='ui container hidden divider'>
        <Grid >
          <Grid.Column >
            <Form onSubmit={formik.handleSubmit}>
            <h1>Hi again! Please log in below</h1>
            <br/>
              <Form.Field >
                <label>Username:</label>
                <Form.Input
                  name="username"
                  type="text"
                  placeholder="Username"
                  value={formik.values.username}
                  onChange={formik.handleChange}
                />
                <p style={{ color: "orange" }}> {formik.errors.username}</p>
              </Form.Field>
              <br/>
              <Form.Field>
                <label>Password:</label> 
                <Form.Input
                  name="password"
                  type="password"
                  placeholder="Password"
                  value={formik.values.password} 
                  onChange={formik.handleChange}
                />
                <p style={{ color: "orange" }}> {formik.errors.password}</p>
                </Form.Field>
                <br/>
                <Button 
                  color='teal'
                  className='ui button' 
                  type='submit'>Log In</Button>
                <br/>
            </Form>
          </Grid.Column>
        </Grid>
          <h4 style={{textAlign:'center'}}>
            <Icon color='teal' name='arrow alternate circle right'/>
            No a panda yet? Sign up 
            <Link to="/signup">  here  </Link>
            <Icon color='teal' name='arrow alternate circle left'/></h4>
      </div>
    </div>
  )
}

export default Login

Nice thing about Redux is that you can de-structure things like isLoading, isSuccess, isError, and error when you call mutation (for post, patch, and delete) or query (for get) and it works really well with spinners from react-spinners. As you can see in the above code, you just pass isLoading to, in my case, <RingLoader /> and it shows itself when isLoading is true but if not, it’ll just hide itself. There are other styles as well here.

I hope this helps with your project — Leave a comment if you have any other redux related question!