DEV Community: Rita Bradley

Build a Summer-Ready Packing List App with React and TailwindCSS

Rita Bradley — Tue, 27 Jun 2023 14:30:00 +0000

Hey there, lovely people! 🌞

It's summer in the United States, which means it's the season for weekend getaways, trips to the beach, or maybe just a day off lounging at home pretending you're in Bali. Whether you're a hardcore planner or a last-minute packer, we've all been through the struggle of forgetting something essential on a trip, haven't we?

To save us all from the “Oh no, I forgot my _____!” moment, I built a packing list app using React and TailwindCSS. You can check it out here and see a live demo here. This post will walk you through how I built it.

Getting Started with the Project

I used Vite with the React template to scaffold the project. This was as simple as running the following command in my terminal:

npm create vite@latest my-vue-app --template react

I then used TailwindCSS for the styling because, well, who doesn't love utility-first CSS frameworks, am I right?

Configuring TailwindCSS

I customized the default Tailwind configuration (tailwind.config.js) to add some extra colors and fonts that I wanted to use throughout the app. These colors and fonts help give the app a little nautical ⚓️ personality, and who doesn't love that? Here's a peek at my Tailwind config:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        whip: '#fdf0d5',
        maroon: '#780000',
        lava: '#c1121f',
        navy: '#003049',
        cerulean: '#669bbc',
      },
      fontFamily: {
        body: ['"Karla"', 'sans-serif'],
        heading: ['"Caprasimo"', 'cursive'],
      },
    },
  },
  plugins: [],
};

Pro Tip: Adding custom properties to the extend field in the theme section lets you extend Tailwind's default config rather than completely replacing it.

Styling with TailwindCSS

Next, let's dive into how I styled the app. The majority of the styling is defined in index.css and App.css. I used the @apply directive from Tailwind to apply multiple utility classes to my own custom class, and used @layer to ensure that these styles are included in the right place in the final CSS file.

The index.css file:

@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Karla:wght@500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

.list ul {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@layer components {
  .pill {
    @apply bg-whip text-navy font-body px-8 py-3 text-lg font-bold border-none rounded-full cursor-pointer;
  }

  .pill-sm {
    @apply px-6 py-2 mx-2 text-sm font-bold uppercase;
  }
}

The App.css file simply defines the grid for the app:

.app {
  grid-template-rows: auto auto 1fr auto;
}

Fun Fact: Did you know that with TailwindCSS, you can use the @apply directive to dry up your styles by reusing utility patterns?

Creating the Components

Our app is divided into six main components: App, Header, Form, PackingList, Item, and Stats.

Here's a quick rundown:

App: This is the root component of our application. It's where we manage all our state and handle all the logic for our app.
Header: Just a simple header to give our app a title.
Form: The input form where users can add items to their packing list.
PackingList: The heart of our app where we display all the items on the packing list.
Item: The individual items in the PackingList. Each item has its own checkbox and remove button for user interactivity.
Stats: A component to show some fun statistics about our packing progress.

Now, let's take a closer look at each component.

The App Component

import { useState } from 'react';
import Header from './components/Header';
import Form from './components/Form';
import PackingList from './components/PackingList';
import Stats from './components/Stats';

import './App.css';

function App() {
  const [items, setItems] = useState([]);
  const [description, setDescription] = useState('');
  const [quantity, setQuantity] = useState(1);

  function handleQuantityChange(e) {
    setQuantity(e.target.value);
  }

  function handleDescriptionChange(e) {
    setDescription(e.target.value);
  }

  function handleFormSubmit(e) {
    e.preventDefault();
    const newItem = {
      id: items.length + 1,
      inputOrder: items.length + 1,
      quantity: quantity,
      description: description,
      packed: false,
    };
    setItems([...items, newItem]);
    setQuantity(1);
    setDescription('');
  }

  // Handle packed state of each item
  function handlePackedChange(id) {
    // Create a new array with the same items, but with the packed state of the selected item toggled
    const newItems = items.map((item) => (item.id === id ? { ...item, packed: !item.packed } : item));
    setItems(newItems);
  }

  function handleRemoveItem(id) {
    const updatedItems = items.filter((item) => item.id !== id);
    setItems(updatedItems);
  }

  function calculatePackedItems() {
    return items.filter((item) => item.packed).length;
  }

  function calculatePercentagePacked() {
    return Math.round((calculatePackedItems() / items.length) * 100);
  }

  function handleSort(e) {
    const sortBy = e.target.value;
    setItems((currentItems) => {
      const sortedItems = [...currentItems];
      if (sortBy === 'input') {
        sortedItems.sort((a, b) => a.inputOrder - b.inputOrder);
        return sortedItems;
      } else if (sortBy === 'description') {
        sortedItems.sort((a, b) => {
          if (a.description.toLowerCase() < b.description.toLowerCase()) {
            return -1;
          } else if (a.description.toLowerCase() > b.description.toLowerCase()) {
            return 1;
          } else {
            return 0;
          }
        });
        return sortedItems;
      } else if (sortBy === 'packed') {
        sortedItems.sort((a, b) => {
          if (a.packed < b.packed) {
            return -1;
          } else if (a.packed > b.packed) {
            return 1;
          } else {
            return 0;
          }
        });
        return sortedItems;
      }
    });
  }

  function handleClearList() {
    setItems([]);
  }

  const numOfItems = items.length;
  const numOfPacked = calculatePackedItems();
  const percentPacked = numOfItems > 0 ? calculatePercentagePacked() : 0;

  return (
    <div className='app font-body text-navy grid w-full h-screen'>
      <Header />
      <Form
        onFormSubmit={handleFormSubmit}
        quantity={quantity}
        description={description}
        onDescriptionChange={handleDescriptionChange}
        onQuantityChange={handleQuantityChange}
      />
      <PackingList
        items={items}
        onPackedChange={handlePackedChange}
        onRemoveItem={handleRemoveItem}
        onClearList={handleClearList}
        onSort={handleSort}
      />
      <Stats numOfItems={numOfItems} numOfPacked={numOfPacked} percentPacked={percentPacked} />
    </div>
  );
}

export default App;

This is the main component of our application. We use React's useState hook to keep track of the list items and the current item quantity and description. There are several helper functions for managing the packing list:

handleQuantityChange(e): This function updates the quantity value in the state whenever the user changes the quantity input field.
handleDescriptionChange(e): This function updates the description value in the state whenever the user changes the description input field.
handleFormSubmit(e): When the user submits the form, this function prevents the page from reloading, creates a new item object, adds this object to the current items list, and resets the quantity and description fields for further input.
handlePackedChange(id): This function toggles the packed status of a specific item when the user checks or unchecks the associated checkbox.
handleRemoveItem(id): If a user clicks the remove button on a specific item, this function removes that item from the items list.
calculatePackedItems(): This function calculates the number of packed items in the list.
calculatePercentagePacked(): This function calculates the percentage of items that are packed.
handleSort(e): This function sorts the list of items based on the user's preference: by input order, by description, or by packed status.
handleClearList(): This function clears all items from the list when the user clicks the "Clear List" button.

The Header Component

Header.jsx is the simplest of our components. It only returns a styled h1 tag, and there are no props or state involved. Easy peasy! 🍋

export default function Header() {
  return (
    <h1 className='font-heading bg-cerulean py-6 text-6xl tracking-tight text-center uppercase'>
      ✈️ AFK Packing List ⌨️
    </h1>
  );
}

The Form Component

The Form component handles user inputs for new items and their quantities. It takes the current quantity and description from the App component via props and uses these to pre-fill the form fields.

export default function Form({ onFormSubmit, quantity, description, onQuantityChange, onDescriptionChange }) {
  return (
    <form className='bg-lava py-7 flex items-center justify-center gap-3' onSubmit={onFormSubmit}>
      <h3 className='mr-4 text-2xl'>what do you need for your trip?</h3>
      <select value={quantity} onChange={onQuantityChange} id='quantity' className='pill focus:outline-lava'>
        {[...Array(20)].map((_, i) => (
          <option key={i} value={i + 1}>
            {i + 1}
          </option>
        ))}
      </select>
      <input
        value={description}
        onChange={onDescriptionChange}
        id='description'
        className='pill focus:outline-lava'
        type='text'
        placeholder='Item...'
      />
      <button className='pill bg-cerulean focus:outline-navy uppercase' type='submit'>
        Add
      </button>
    </form>
  );
}

This component also uses the onFormSubmit, onQuantityChange, and onDescriptionChange props to handle form submissions and updates to the quantity and description fields.

The select input for quantity is a neat little feature! 🎩 The quantity input leverages JavaScript's array and map methods to create a drop-down menu with 20 options, allowing the user to easily select the quantity of an item.

[...Array(20)].map((_, i) => (
  <option key={i} value={i + 1}>
    {i + 1}
  </option>
))

First, we create an array with 20 empty items by using the Array constructor and the ES6 array spread operator.
Then, we call the map() method to iterate over the array and create a new array with the number of options we need.
The map() method calls the callback function on each array item.
The value of the first argument is always the current array item.
The value of the second argument is always the index of the current item.
We use the index to generate a unique key for each option. Each Item also has a checkbox and a remove button. The checkbox allows the user to toggle the packed status of an item, and the remove button allows the user to remove an item from the list.

The Packing List Component

This is where the magic happens! ✨ The PackingList component takes the array of items and maps over them, creating a new Item component for each.

import Item from './Item';

export default function PackingList({ items, onPackedChange, onRemoveItem, onClearList, onSort }) {
  return (
    <section className='bg-navy text-whip list flex flex-col items-center justify-between gap-8 py-10'>
      <ul className='grid content-start justify-center w-4/5 gap-3 overflow-scroll list-none'>
        {items.map((item) => {
          return (
            <Item
              key={item.id}
              id={item.id}
              description={item.description}
              quantity={item.quantity}
              packed={item.packed}
              onPackedChange={onPackedChange}
              onRemoveItem={onRemoveItem}
            />
          );
        })}
      </ul>
      <div>
        <select onChange={onSort} className='pill pill-sm'>
          <option value='input'>Sort by input order</option>
          <option value='description'>Sort by description</option>
          <option value='packed'>Sort by packed status</option>
        </select>
        <button onClick={onClearList} className='pill pill-sm'>
          Clear List
        </button>
      </div>
    </section>
  );
}

Additionally, this component includes controls for sorting the list and clearing all items, which makes our packing list not only functional, but also user-friendly!

The Item Component

Now, let's take a look at the Item component. Each Item represents an individual item on the packing list and is responsible for rendering the item's quantity, description, and packed status.

export default function Item({ id, description, quantity, packed, onPackedChange, onRemoveItem }) {
  return (
    <>
      <li className='flex items-center gap-3'>
        <input
          className='accent-cerulean w-5 h-5'
          type='checkbox'
          checked={packed}
          onChange={() => onPackedChange(id)}
        />
        <span style={packed ? { textDecoration: 'line-through' } : {}}>
          {quantity} {description}
        </span>
        <button
          className='bg-none p-2 text-lg translate-y-0.5 border-none cursor-pointer'
          onClick={() => onRemoveItem(id)}
        >
          ❌
        </button>
      </li>
    </>
  );
}

The Stats Component

Last but not least, the Stats component. This component displays some statistics about our packing list, like the total number of items, the number of items already packed, and the percentage of items packed.

export default function Stats({ numOfItems = 0, numOfPacked = 0, percentPacked = 0 }) {
  return (
    <footer className='bg-maroon text-whip py-8 text-lg font-bold text-center'>
      <p>
        You have {numOfItems} items on your list and you&apos;ve already packed {numOfPacked} ({percentPacked}%)
      </p>
    </footer>
  );
}

And there you have it – a summer-ready packing list app built with React and TailwindCSS! I hope you've enjoyed this little peek into my process, and I hope it's inspired you to create something of your own.

I hope this walkthrough helps you understand how I built the AFK Packing List. If you're interested in building your own version or contributing to mine, feel free to clone the repository and give it a go! 🚀

Until next time, happy coding and happy travels! 🚀

Takeaway: Building this packing list app not only helps keep your travels stress-free, but also gives you a practical and fun way to put your React and TailwindCSS knowledge into practice. What other projects have you built to solve everyday problems? Share in the comments below!

Creating A Stepper Component with `useState`

Rita Bradley — Fri, 23 Jun 2023 13:00:00 +0000

Introduction

We've all seen a stepper before right? No, not the fitness machine that simulates walking up a flight of stairs. A stepper is a piece of UI that shows you where you are in a list of tasks, questions, steps, etc,. They provide a wizard-like workflow and can are sometimes used as navigation. They're also pretty easy to create with React and the useState hook.

Full disclosure, I didn't come up with the idea of this project on my own. I'm still refreshing my React knowledge with Jonas Schmedtmann's React course. This is a practice project from the course. Last week I wrote a post detailing how I created a developer profile card from the same course. If you're interested learning how I did it, be sure to check it out!

What I've been doing with these projects is pausing the video, and attempting to complete them on my own. I find this helps me find out what I already know while forcing me to challenge myself to figure out the things I don't. This is a recommended approach if you struggle with imposter syndrome like I do. Exploring your own solutions to tutorials is a great way to test and solidify your knowledge. Let's get started.

Prerequisites

In this post, I'm assuming you have a working knowledge of JavaScript and its array methods. I'm also assuming you know some React basics like JSX, how to create components, and how to pass props. In React, props (short for properties) are a way of passing data from parent components to child components. They make our components more versatile and reusable by allowing them to behave differently based on the input they receive. If you need a refresher on any of this, I recommended checking out the following resources:

MDN JavaScript guide & reference
freecodecamp.org
JavaScript30 by Wes Bos
Codecademy's React course

Getting Started with the Step Progress Component

Let's dive in and create our own Step Progress Component with React and useState.

Setting up the Project

First, we need to set up a new React project. If you don't already have one, you can create a new one using Create React App.

npx create-react-app step-progress-component

I normally use Vite for creating React projects, but since this tutorial called for CRA, I stuck with it.

Once you've created your React project, navigate to the project directory and start your local development server.

cd step-progress-component
npm start

You should now have a new React project running on http://localhost:3000.

Remove boilerplate code

Create React App gives us a lot of code/files that we may not always need. In this case, we don't need App.css, App.test.js, reportWebVitals.js, setupTests.js, nor logo.svg. In index.js, remove and trace of reportWebVitals. In App.js remove the imports for App.css and logo.svg. Then remove everything between the first div, and delete className="App".

Jonas provided the CSS for this project, so we'll be replacing the code in index.css with that. All I added was the .active styling for buttons, and extra styling to the body to make it pretty.

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #333;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background-image: radial-gradient(circle, #7950f2, #995ef5, #b36df8, #ca7dfb, #df8eff);
}

.steps {
    width: 600px;
    background-color: #f7f7f7;
    border-radius: 7px;
    padding: 25px 100px;
    margin: 100px auto;
}

.numbers {
    display: flex;
    justify-content: space-between;
}

.numbers > div {
    height: 40px;
    aspect-ratio: 1;
    background-color: #e7e7e7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.numbers .active,
button.active {
    background-color: #7950f2;
    color: #fff;
}

.message {
    text-align: center;
    font-size: 20px;
    margin: 40px 0;
    font-weight: bold;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.buttons {
    display: flex;
    justify-content: space-between;
}

.buttons button {
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;

    display: flex;
    align-items: center;
    gap: 10px;
}

.buttons button span {
    font-size: 16px;
    line-height: 1;
}

h3 {
    margin: 0;
    text-transform: uppercase;
}

Creating the Step component

Firstly, let's dive into our Step Component. This component accepts two props, styleClass and number.

export default function Step({ styleClass, number }) {
 return <div className={styleClass}>{number}</div>;
}

The styleClass prop allows us to apply conditional styling to our component depending on what step is active, and the number prop passes a number to the component based on the current step.

This component is quite simple, but it plays a key role in our application by rendering each step in the progress bar.

Crafting the StepText Component

The StepText component is responsible for displaying the text associated with each step in our progress bar. We pass a single text prop to this component, which we then render within an h3 tag.

export default function StepText({ text }) {
 return <h3>{text}</h3>;
}

This component is a fantastic example of the principle of "composition" in React, allowing us to keep our components small, focused, and reusable.

Button, button, who's got the button?

Next, we'll move onto the Button component. This component will render our 'Next' and 'Previous' buttons, and will handle user interactions to move between steps.

export default function Button({ children, onClick, styleClass }) {
  return (
    <button className={styleClass} onClick={onClick}>
      <span>{children}</span>
    </button>
  );
}

The onClick prop that we pass to our button allows us to handle user clicks and thus manipulate the active step in our progress bar. The children prop allows us to pass the button text as children of the Button component.

Bringing it all together

In App.js, we need to import all three components.

I recommend placing individual components in a components folder in the src directory. This makes for better organization in the long run. Since this is a smaller project, we can get away with not doing this.

Adding Interactivity with `useState`

With our components ready, let's move on to creating an interactive stepper. For this, we'll be using React's useState hook. Hooks are a relatively new addition to React that allows us to use state and other React features in our functional components. useState is one of these hooks and it allows us to add state to our functional components. State can be thought of as a way to keep track of information in your application that can change over time and affect your app's behavior.

In our App.js, we'll start by importing useState from React and our three components: Step, StepText, and Button.

import { useState } from 'react';
import Step from './Step';
import StepText from './StepText';
import Button from './Button';

Then, let's define the text for each step of our progress bar. We'll store this in an array called stepText.

const stepText = ['Learn React ⚛️', 'Apply to jobs 💼', 'Get a job 🎉'];

Creating the State for Our Stepper

Next, we're going to create our step state. We initialize it to 1 since we want to start at the first step. We use setStep to change the state.

const [step, setStep] = useState(1);

Handling Step Changes

After that, we'll create two functions handleNext and handlePrevious. These functions will allow us to go forward or backward in our progress bar when the next and previous buttons are clicked.

const handleNext = () => {
  if (step < stepText.length) {
    setStep(step + 1);
  }
};

const handlePrevious = () => {
  if (step > 1) {
    setStep(step - 1);
  }
};

Rendering Our Components

Finally, we'll render our components. We create a div for each step and conditionally apply the 'active' class to the current step. We also render the text for the current step and the previous and next buttons, again applying the 'active' class conditionally.

return (
  <div className="steps">
    <div className="numbers">
      {stepText.map((_, index) => (
        <Step
          styleClass={step === index + 1 ? "active" : ""}
          key={`Step ${index + 1}`}
          number={index + 1}
        />
      ))}
    </div>
    <div className="message">
      <StepText text={stepText[step - 1]} />
    </div>

    <div className="buttons">
      <Button styleClass={step > 1 ? "active" : ""} onClick={handlePrevious}>
        Previous
      </Button>
      <Button
        styleClass={step < stepText.length ? "active" : ""}
        onClick={handleNext}
      >
        Next
      </Button>
    </div>
  </div>
);

And that's it! We've built a functional Step Progress Component using React and the useState hook. The full code for App.js looks like this:

import { useState } from "react";
import Step from "./components/Step";
import StepText from "./components/StepText";
import Button from "./components/Button";

const stepText = ["Learn React ⚛️", "Apply to jobs 💼", "Get a job 🎉"];

function App() {
  const [step, setStep] = useState(1);

  const handleNext = () => {
    if (step < stepText.length) {
      setStep(step + 1);
    }
    console.log(step);
  };

  const handlePrevious = () => {
    if (step > 1) {
      setStep(step - 1);
    }
    console.log(step);
  };

  return (
    <div className="steps">
      <div className="numbers">
        {stepText.map((_, index) => (
          <Step
            styleClass={step === index + 1 ? "active" : ""}
            key={`Step ${index + 1}`}
            number={index + 1}
          />
        ))}
      </div>
      <div className="message">
        <StepText text={stepText[step - 1]} />
      </div>

      <div className="buttons">
        <Button styleClass={step > 1 ? "active" : ""} onClick={handlePrevious}>
          Previous
        </Button>
        <Button
          styleClass={step < stepText.length ? "active" : ""}
          onClick={handleNext}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

export default App;

Conclusion

Learning React is all about understanding its core concepts, and useState is definitely one of them. By building this Step Progress Component, not only did we gain a better understanding of how useState works, but we also learned how to structure our code using components and how to pass props to make them more reusable. This is a great step forward in becoming a more proficient React developer. Keep practicing and you'll surely get there!

If you want to see the stepper in action, check out my pen!

Creating a Versatile Developer Profile Card with React

Rita Bradley — Mon, 12 Jun 2023 21:49:19 +0000

Hey fellow coders! Today I want to walk you through the process of creating a Developer Profile Card using React. This project started as a practice exercise from Jonas Schmedtmann's React course, but instead of following the tutorial, I decided to challenge my imposter syndrome and create my own version. The result? A vibrant profile card that doubles as a testament to my growing confidence in React.

This Developer Profile Card, with a few tweaks, can be repurposed as a product description card, a recipe card, a blog post card, etc. To follow along, you should have a basic understanding of JavaScript and some fundamental React concepts, such as creating components, JSX, and passing props.

The first step in creating this project was to identify and create the components needed. The Avatar and Intro components were pretty straightforward, consisting of an image, an h1 for my name, and a paragraph for self-introduction.

However, the real fun began when I started working on the Skill and SkillsList components. Each skill consists of a skill name, an emoji, and a corresponding background color. The challenge was getting different background colors for each skill. Here's what I did:

Created an array of colors.
Created a getRandomColor function that returns a random item from the array.

const getRandomColor = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};

Used the getRandomColor function to assign a bgColor to each skill.

bgColor: getRandomColor(colors)

Used the style attribute to set each skill's backgroundColor to its corresponding bgColor.

<p className="skill" style={{ backgroundColor: bgColor }}>
  {name} <span>{emoji}</span>
</p>

In the SkillsList component, I map over each object in skillsData and return a Skill component with the necessary props.

function SkillsList() {
  return (
    <>
      <ul className="skill-list">
        {skillsData.map((skill) => (
          <Skill
            key={skill.name}
            name={skill.name}
            emoji={skill.emoji}
            bgColor={skill.bgColor}
          />
        ))}
      </ul>
    </>
  );
}

Upon completion, I found the outcome quite satisfying, having successfully added a more dynamic color selection to the project. It was a funny realization when my initial idea of assigning a random color to a variable resulted in all the badges getting the same color. This little challenge reminded me to trust my instincts, leading me back to the function-based solution. You can check out my CodePen below:

Looking forward, I plan to enhance the Intro component by making it dynamic and reusable via props. Remember, developers, there is no harm in challenging yourself and stepping out of the comfort zone of tutorials. Each time you do, you are one step closer to combating that imposter syndrome. Happy coding!

Developing the Face Detective App: A Tale of Creativity, Problem Solving, and Growth

Rita Bradley — Thu, 30 Mar 2023 22:28:54 +0000

Hey there! I recently completed an exciting project called Face Detective, and I wanted to share my experience with you. While this began as a tutorial project, I decided to make it my own by incorporating various technologies and features that sparked my interest. Some of the technologies I used include Tailwind CSS, React hooks, functional components, and Vite, which replaced Create React App for this project. I also added custom functionality like a route to check for matching passwords.

So, let's dive into the details of how I built the Face Detective web app!

Leveraging Tailwind CSS

One of my first steps was to give the project a sleek and modern look using Tailwind CSS. I found it incredibly helpful and efficient for quickly styling my components. Here's an example of how I styled the SignIn component using Tailwind CSS:

<div className="sm:mx-auto sm:w-full sm:max-w-md">
  <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-violet-700">
    Sign in to your account
  </h2>
  <p className="mt-2 text-center text-md text-white">
    Or{" "}
    <a
      onClick={() => onRouteChange("register")}
      href="#"
      className="font-bold text-violet-500 hover:text-violet-600"
    >
      register for an account
    </a>
  </p>
</div>;

React Hooks and Functional Components

I chose to use React hooks and functional components for my project because they provide a clean and efficient way to manage state and side effects. I found this approach particularly helpful when working on the SignIn and Register components.

Here's an example of how I used the useState hook in the SignIn component:

import React, { useState } from "react";

const SignIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // more code
};

I also leveraged the useEffect hook in the App component to fetch data when the component mounts:

useEffect(() => {
  // Retrieve saved email and timestamp from localStorage
  const savedEmail = localStorage.getItem("email");
  const savedTimestamp = localStorage.getItem("emailTimestamp");

  // Check if saved email and timestamp exist
  if (savedEmail && savedTimestamp) {
    const currentDate = new Date();
    const savedDate = new Date(Number(savedTimestamp));
    const daysPassed = (currentDate - savedDate) / (1000 * 60 * 60 * 24);

    // Check if saved email is within the 14-day limit
    if (daysPassed <= 14) {
      setEmail(savedEmail);
      setRememberMe(true);
    } else {
      // Clear saved email and timestamp if the 14-day limit has passed
      localStorage.removeItem("email");
      localStorage.removeItem("emailTimestamp");
    }
  }
}, []);

In the next sections, I'll share more about the challenges I faced and how I overcame them to build the Face Detective web app. Stay tuned!

Challenges and Problem Solving

As with any project, I encountered a few challenges along the way. One such challenge was ensuring the SignIn and Register components sent the proper information back to the database. Initially, I struggled to send and receive the correct data, but with persistence and some creative problem-solving, I managed to overcome this hurdle.

For instance, here's the code snippet for handling the SignIn form submission:

const handleSubmit = async (e) => {
  e.preventDefault();
  let hasError = false;
  let errorMessages = [];

  // some code

  const signInResult = await handleSignIn(email, password);

  if (signInResult) {
    loadUser({
      userId: signInResult.userId,
      name: signInResult.name,
      email: signInResult.email,
      entries: signInResult.entries,
      joined: signInResult.joined,
    });
    // more code
  }
};

Initially when the sign in or registration form was submitted, the user would be transferred to the home page. They should have been able to see their name and number of entries, but instead, the name was blank and the entries said "user not found'. It turned out that I needed to update my call to loadUser() to return the user object. It was a tricky bug to fix, but thank goodness for console.log.

Another challenge I tackled was creating a custom route to check for existing emails. This functionality wasn't part of the tutorial, but I decided to implement it to add an extra layer of validation to the registration process. Here's the code for the existing email check:

app.post("/check-email", (req, res) => {
  const { email } = req.body;
  database("users")
    .select("email")
    .where("email", email)
    .then((result) => {
      if (result.length > 0) {
        res.status(400).json({ message: "Email already exists" });
      } else {
        res.json({ message: "Email is available" });
      }
    })
    .catch((err) => {
      console.error("Error in /check-email route:", err); // Add this line for more detailed logging
      res.status(500).json({ message: "Error checking email availability" });
    });
});

Before writing the code above, the issue was that the /check-email endpoint was using the database('users').where('email', email) method, which returned a query builder, but I never executed the query. Therefore, it would always evaluate to a truthy value. I had to use .select() and .then() to execute the query and process the result.

Future Enhancements

The Face Detective App is a work in progress, and I plan to continually improve and expand its features. Some upcoming additions include:

User sessions: Implementing user authentication and maintaining sessions for a seamless experience.
Profile page: Adding a dedicated profile page to display user information and settings.
Account deletion: Giving users the option to delete their account and all associated data.

And more! I'm always exploring new ideas to make the app more robust and user-friendly.

Conclusion

Building the Face Detective web app has been an invaluable learning experience. It allowed me to hone my skills in various technologies like Tailwind CSS, React hooks, functional components, and Vite. Additionally, it gave me the opportunity to apply problem-solving techniques and creativity to overcome challenges and enhance the app's functionality.

I'm excited to continue working on the Face Detective App and sharing my progress with you. If you're interested in checking out the project demo, visit https://face-detective.ritabradley.dev/. Feel free to share your thoughts and feedback!

Happy coding!

TypeScript or PropTypes

Rita Bradley — Thu, 30 Jul 2020 00:02:14 +0000

Of course my first post ever after being a member for 3 years will be to ask a (probably) dumb question. If you write React apps with TypeScript, is it even necessary to declare PropTypes? If so, why? If not, why not? I'm really trying to work up the courage to continue learning TypeScript but as I primarily create with React, I have a hard time seeing its usefulness. Please educate me! Much appreciated.

DEV Community: Rita Bradley

Build a Summer-Ready Packing List App with React and TailwindCSS

Getting Started with the Project

Configuring TailwindCSS

Styling with TailwindCSS

Creating the Components

The App Component

The Header Component

The Form Component

The Packing List Component

The Item Component

The Stats Component

Creating A Stepper Component with `useState`

Introduction

Prerequisites

Getting Started with the Step Progress Component

Setting up the Project

Remove boilerplate code

Creating the Step component

Crafting the StepText Component

Button, button, who's got the button?

Bringing it all together

Adding Interactivity with useState

Creating the State for Our Stepper

Handling Step Changes

Rendering Our Components

Conclusion

Creating a Versatile Developer Profile Card with React

Developing the Face Detective App: A Tale of Creativity, Problem Solving, and Growth

Leveraging Tailwind CSS

React Hooks and Functional Components

Challenges and Problem Solving

Future Enhancements

Conclusion

TypeScript or PropTypes

Adding Interactivity with `useState`