Perfect Landing: Goat Cheese Day
#devchallenge#frontendchallenge#css#javascript
beretests

beretests @beretests

About: A software tester with a budding interest in DevOps and Security

Joined:
Jul 10, 2022

Perfect Landing: Goat Cheese Day

Publish Date: Jun 28
1 0

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

I built a landing page to celebrate Goat Cheese Day (June 25). The goal was to highlight the joy, diversity, and community around goat cheese. The page features a modern, responsive design built with React and Material UI. It includes sections about the origins and benefits of goat cheese, the different types, recipes and pairings, FAQs, and upcoming events. Users can sign up for a newsletter, download a recipe booklet, and explore interactive content — all designed to promote and celebrate Goat Cheese Day in a fun and informative way.

Demo

For a limited time, this landing page can be viewed live at Goat Cheese Day Page. Please feel free to interact with the page and let me know what you think!

This project code can also be viewed on Github below:

GitHub logo beretests / devto-challenge-june-celebrations-2025

DevTo Challenge: June Celebrations 2025 (Goat Cheese Day) – Vite + React + Material UI + Tailwind CSS

Celebrate Goat Cheese Day with this interactive, modern web app built using Vite, React, Material UI, Tailwind CSS, and Zustand.

Features

  • Responsive design with Material UI and Tailwind CSS
  • Light, dark, and system theme support
  • Interactive sections: About, Benefits, Types, Recipes, FAQs, Events, and more
  • Newsletter signup and event sidebar
  • Downloadable recipe booklet (demo)
  • Animated transitions and snackbars
  • State management with Zustand

Getting Started

Prerequisites

Installation

Clone the repository and install dependencies:

git clone https://github.com/your-username/goat-cheese-app.git
cd goat-cheese-app
npm install
Enter fullscreen mode Exit fullscreen mode

Development

Start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:5173 in your browser.

Build

To build for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

To preview the production build:

npm run preview
Enter fullscreen mode Exit fullscreen mode

Project Structure

  • src/ – Main source code (components, theme, stores, assets)
  • public/ –…
View on GitHub

Journey

First off, I'd like to say a huge THANK YOU to the dev.to team for putting this challenge together. When designing web pages, I tend to think more in terms of functionality than aesthetics so this was a great chance to flex my design skills 😉

Landing page was built with React, Typescript, Vite and MUI. I originally planned to also use Taiwind for styling but I did a deep dive into the MUI Component APIs and found it much easier to do the component styling with those instead. I originally set up the project with MUI's Vite example with Tailwind CSS in TypeScript. I started by planning the sections and user flow, then built reusable components for each feature (like FAQs, recipes, and events).

Learning Takeaways

  • Create and apply custom themes using the MUI theme builder. One of the hardest things for me in web design is picking a color (or font) so this was really helpful.
  • Separation of concerns: I tried to separate 'data' from code where possible as can be observed in the components directory. I think it helps to make the code more readable.
  • Use of Zustand for simple state management. Switching between themes is now a breeze and I am able to add as many themes as I want (pretty cool). It also facilitated the implementation of alerts (on newsletter subscription and recipe download) making the landing page very interactive.
  • Use of Zustand stores to implement alerts using MUI snackbar. This will help make the code more extensible if more features that require in-app alerts are added.

Proud Moments

I'm especially proud of the interactive animations (like the animated events and animated list of benefits of goat cheese) which I implemented using the Framer Motion library. I'm also proud of the theme switcher implemented with MUI theming.

Image description

Next Steps

I'd like to dive deeper into the following:

  • more event interactivity
  • improving accessibility
  • adding tests to ensure maintainability of the code

Comments 0 total

    Add comment