Skip to content

A bold, striking arts and life magazine website built as an SPA using Next.js, TypeScript, React Suspense, React Hook Form, Zod, Tailwind, Shadcn, GSAP and E2E Testing using Playwright from Figma templates designed by Pawel Gola.

Notifications You must be signed in to change notification settings

asbhogal/Fyrre-Magazine

Repository files navigation

Fyrre - Art & Life Magazine Website

A bold, striking arts and life magazine website build as an SPA from Figma templates (designed by Webflow designer Pawel Gola), using Next.js, React Server Components, React Suspense, TypeScript, Tailwind, Shadcn and ES Lint and incorporates E2E testing using Playwright.

Features

  • Faithful adaptation to Figma designs
  • Custom designed and developed 404 error page
  • Dynamic rendering of podcast, article and author data
  • Dynamic filtering of magazine articles based on categories
  • JSON data created for articles, podcast and authors to emulate API endpoints
  • React Suspense for UI loading states until async fetched content is available
  • React Server Components (app router pages)
  • TypeScript to enforce type safety
  • React Context API to store data fetched at top level
  • Custom hooks for podcast and article context store calls
  • GSAP animations for horizontal sliding text
  • Shadcn for accessible components
  • Tailwind CSS for mobile-first responsiveness
  • E2E testing across multiple browsers using Playwright
  • Husky to run lint and testing prior to Git Commit
  • React Hook form with Zod Schema validation for email subscription input
  • Server Actions and Errors using Next.js api routes for server-side validation

Stacks & Tools

nextjs logo react logo TypeScript logo Tailwind logo Shadcn logo ES Lint logo GSAP logo Playwright logo React Hook Form logo Zod logo

Links

Disclaimer

As far as the developer is aware all the individuals mentioned in this website are purely fictionalized. Any resemblance to individuals or entities, living or dead, is entirely coincidental and the developer bears no responsibility for any such resemblance.

About

A bold, striking arts and life magazine website built as an SPA using Next.js, TypeScript, React Suspense, React Hook Form, Zod, Tailwind, Shadcn, GSAP and E2E Testing using Playwright from Figma templates designed by Pawel Gola.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published

Languages