fyrre magazine

An iPhone standing upright on an elevated concrete platform with showing a magazine site on the display. The title 'Art & Life' is seen in bold uppercase on the screenAn iPhone standing upright on an elevated concrete platform with showing a magazine site on the display. The title 'Art & Life' is seen in bold uppercase on the screen
templatescodesite

About

personalOctober 2023 - November 2023
development
Next.jsReact Server ComponentsTypeScriptReact SuspenseContext APICustom HooksReact Hook FormZodServer ActionsSPATailwind CSSShadcnGSAPE2E TestingPlaywrightHuskyGitVercel

Fyrre Magazine is a bold, striking arts and life-focused website focused on articles and podcasts regarding the European culture and arts scene. The app was developed from initial Figma designs created by Webflow Designer Pawel Gola. Next.js and RSC were used to handle the data fetching of the dynamic content (articles, podcasts and authors) from JSON data created to simulate an API endpoint. The site was built using the now-stable app router in Next.js, with TypeScript for type safety, Shadcn for accessible components, Tailwind for responsive styling and GSAP for horizontal scrolling animations. E2E testing using playwright was implemented, as well as React Suspense for UI loading states during data fetching. Context API and Custom Hooks were initially used for the child components, which stored the data fetched at a higher level. This was then refactored to have each component fetch directly via async/await and subsequently converted back to Server Components. The site was deployed using Vercel.

Typeface

General Sans
singular
  • 04 Regular
  • 05 Medium
  • 06 Semi Bold

Screens

A magazine article with the words 'The Best Art Museums' on a MacBook, resting on a bed with pillows and daylight behindA magazine website on an iPad in horizontal orientation, resting at an angle on a dark backdrop. The title 'Art & Life' is seen in bold uppercase on the screenA podcast article on an iPad in vertical orientation. The title 'The Art of Movement' is seen in bold uppercase, with podcast informationA magazine article on an iPad in vertical orientation and the same screen on an iPhone resting to the left of it. The title 'The Devil Is The Details' is seen in bold uppercase, with article information. Both devices rest on a desk.A magazine website on an iMac with the tower standing next to it. The title 'Art & Life' is seen in bold uppercase on the screenA magazine article on a Nothing Phone elevated and at a slight angle. The title 'Street Art Festival' is seen in bold uppercase on the screen, as well as article info underneath it

Available for agency and freelance work

For AgenciesFor Clients
loading...