Slime Recipe Creator

Awesome website for kids who are interested in slime. Create and share recipes without login.

Comment

Slime Recipe Creator

Inspiration

We wanted to create a fun and educational tool for kids that helps them explore science through creativity. Slime is a universally loved activity among kids, and the idea of being able to create, customize, and share their own slime recipes felt like the perfect blend of learning, experimentation, and joy.

We were also inspired by beautifully crafted PWAs like those featured on Onilab’s blog, and wanted to bring that level of polish and offline capability to something playful and engaging.

What it does

Slime Recipe Creator lets kids:

  • Build their own slime recipes from a wide range of ingredients.
  • Toggle between Metric and Imperial measurements.
  • Learn what each ingredient does and why substitutions might be needed.
  • Save their creations to “My Slime Lab.”
  • Share recipes with friends using a smart link generator (no backend required).
  • Explore random “slime personalities” through a surprise generator.
  • Enjoy the app offline thanks to full PWA support.

How we built it

  • Frontend: React (via Vite), TailwindCSS, React Router.
  • PWA: Vite PWA plugin for offline support and installability.
  • State Management: useState and useEffect hooks with localStorage.
  • Routing & Sharing: React Router with recipe data encoded in the URL query string.
  • Testing: Vitest + React Testing Library for 100% unit test coverage.
  • Design: Custom Tailwind components styled in the spirit of leading PWAs (e.g., Starbucks, Pinterest).
  • Deployment: Fully static, no backend—everything runs client-side.

We also ensured every page includes the Bolt.new hackathon badge in the bottom-right corner, as required.

Challenges we ran into

  • Ensuring proper URL encoding/decoding for recipe sharing without breaking across browsers.
  • Balancing simplicity for younger users while including enough flexibility for detailed recipes.
  • Handling unit conversion accurately across all ingredients.
  • Making the app fully functional offline while keeping it lightweight.
  • Tailwind and PWA integration quirks during the Vite build step.

Accomplishments that we're proud of

  • Achieving full offline capability and shareable, link-based recipe loading with zero backend.
  • Designing an interface that is both playful and educational for our target audience (ages 6–12).
  • Hitting 100% unit test coverage across all components and utilities.
  • Creating an app that looks great on both desktop and mobile in the style of world-class PWAs.

What we learned

  • Deepened our knowledge of PWA lifecycle and how to manage offline assets in Vite.
  • Built confidence using modern React with TailwindCSS in a real-world design-heavy application.
  • Improved our front-end testing practices using Vitest and React Testing Library.
  • Learned to think through edge cases for URL-based data sharing and localStorage persistence.

What's next for Slime Recipe Creator

  • Add voice guidance and narration for non-readers.
  • Introduce AR mode where kids can “see” their slime creation animated on the table.
  • Include real-world brand support and safety recommendations for substitutions.
  • Add profile avatars, badges, and a way to remix others’ slime recipes from shared links.
  • Release an iOS/Android version through TWA or Expo Web wrapper.

Built With

  • react
  • react-router
  • tailwindcss
  • vite
  • vitest
Share this project:

Updates