Fyrre Magazine

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