Dine Website Challenge

Welcome! 👋

The challenge

I am doing another frontend challenge to build out a multi-page website and get it looking as close to the design as possible. To accomplish this task i will use these tools:

  • React JS
  • Material-UI
  • React router dom
  • Loadable components
  • React Hook form

Your users should be able to:

  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements throughout the site
  • See the correct content for the Family Gatherings, Special Events, and Social Events section when the user clicks each tab
  • Receive an error message when the booking form is submitted if:
    • The Name or Email Address fields are empty should show "This field is required"
    • The Email Address is not formatted correctly should show "Please use a valid email address"
    • Any of the Pick a date or Pick a time fields are empty should show "This field is incomplete"