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 screen](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Desktop-1.jpg&w=3840&q=75)
![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 screen](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-1.jpg&w=1920&q=75)
About
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
- 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 behind](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-2.jpg&w=3840&q=75)
![A 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 screen](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-3.jpg&w=3840&q=75)
![A podcast article on an iPad in vertical orientation. The title 'The Art of Movement' is seen in bold uppercase, with podcast information](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-4.jpg&w=3840&q=75)
![A 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.](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-7.jpg&w=3840&q=75)
![A magazine website on an iMac with the tower standing next to it. The title 'Art & Life' is seen in bold uppercase on the screen](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-5.jpg&w=3840&q=75)
![A 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](/_next/image?url=%2Fimages%2FFyrreMagazine%2FFyrreMagazine-Mobile-6.jpg&w=3840&q=75)
Available for agency and freelance work