Age calculator app

What are you most proud of, and what would you do differently next time?

I learned how to manage state effectively in React, specifically lifting state up from child components (DateForm) o parent components (Card) to share data across the app. I also learned about professional refactoring techniques, such as grouping related form state into objects to keep code clean and scalable.

I gained experience with modern styling using Tailwind CSS v4, creating custom animations directly in the CSS configuration. Additionally, I learned how to optimize fonts using next/font/google and implement robust date validation using date-fns.

Here are some code snippets I'm proud of:

• The "Bag of Errors" Validation Strategy:

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const newErrors: {days?: string, months?: string, years?: string, wholeForm?: string} = {};

  // Validate empty fields
  if (!formData.days) newErrors.days = "This field is required";
  
  // Validate future dates using date-fns
  if (isFuture(birthDate)) {
    newErrors.wholeForm = "Must be in the past";
  }

  // If errors exist, stop submission
  if (Object.keys(newErrors).length > 0) {
    setErrors(newErrors);
    return;
  }
};

• Custom Tailwind v4 Animation:

@theme {
  --animate-fade-in-up: fade-in-up 0.6s ease-out forwards;
  
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}