asbhogal/Fyrre-Magazine

README

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

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.

Fyrre - Art & Life Magazine Website

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

Links

Disclaimer

gem-hunter