uross-11/fem-newsletter

Solution to Frontend Mentor Newsletter form challenge

Frontend Mentor - Newsletter sign-up form with success message solution

This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

The challenge

Users should be able to:

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
  • The field is left empty
  • The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive mail a few minutes after succesfully submitting the form

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/newsletter-form-that-actually-works-with-mailchimp-api-3wIbGCZQd5
• Live Site URL: https://fem-newsletter-navy.vercel.app/

My process

Built with

• React
• Next.js
• Tailwind CSS
• Chakra UI
• react-hook-form
• yup

What I learned

• Mailchimp API
• Next.js:
  • You can have API Routes in your Next.js app and abstract all the request/response fuzz away
  • Loading page is straightforward and easy-to-use
• Chakra UI is really helpful, but if you want to customize it heavily, it will look something like this:

<Link
  href="/"
  display="flex"
  justifyContent="center"
  alignItems="center"
  position="relative"
  borderRadius="0.5rem"
  h="3.5rem"
  mt="auto"
  mb={{ base: "10", lg: "unset" }}
  _hover={{
    _before: { opacity: 0 },
    boxShadow: "0px 16px 32px 0px rgba(255, 97, 85, 0.50)",
  }}
  _focusVisible={{
    _before: { opacity: 0 },
    boxShadow: "0px 16px 32px 0px rgba(255, 97, 85, 0.50)",
  }}
  bgGradient="linear(to-b, #FF6A3A 0%, #FF527B 100%)"
  overflow="hidden"
  _before={{
    position: "absolute",
    content: `""`,
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    bg: "fem.darkSlateGrey",
    transition: "220ms",
  }}
  _active={{
    _before: { opacity: 0 },
  }}
  color="white"
  w="full"
></Link>