https://github.com/asbhogal/fyrre-magazine

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.
https://github.com/asbhogal/fyrre-magazine

context-api custom-hooks e2e e2e-tests eslint figma gsap next nextjs nextjs13 playwright react react-hooks react-server-components rsc shadcn shadcn-ui tailwind tailwindcss typescript

Last synced: 3 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/asbhogal/fyrre-magazine
• Owner: asbhogal
• Created: 2023-09-27T16:45:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-20T15:38:22.000Z (11 months ago)
• Last Synced: 2025-04-13T07:11:42.663Z (3 months ago)
• Topics: context-api, custom-hooks, e2e, e2e-tests, eslint, figma, gsap, next, nextjs, nextjs13, playwright, react, react-hooks, react-server-components, rsc, shadcn, shadcn-ui, tailwind, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://fyrre-magazine.vercel.app/
• Size: 70.3 MB
• Stars: 86
• Watchers: 1
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

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

- Fyrre Magazine Site

- Fyrre Magazine Templates

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.