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.
Overview
The Fyrre Magazine website is a bold and striking arts and life magazine that has been built as a Single Page Application (SPA) using Next.js, React Server Components, React Suspense, TypeScript, Tailwind, Shadcn, and ES Lint. The website has been faithfully adapted from Figma templates designed by Webflow designer Pawel Gola. It incorporates various features such as dynamic rendering of podcast, article, and author data, custom-designed 404 error page, dynamic filtering of magazine articles based on categories, and more. The website also utilizes React Suspense for UI loading states and React Server Components for app router pages.
Features
- Faithful adaptation to Figma designs: The website has been designed and developed to accurately reflect the Figma templates created by Webflow designer Pawel Gola.
- Custom designed and developed 404 error page: The website features a unique and custom-designed 404 error page to enhance user experience.
- Dynamic rendering of podcast, article, and author data: The website dynamically renders content for podcasts, articles, and authors, providing an interactive and engaging user experience.
- Dynamic filtering of magazine articles based on categories: Users can filter magazine articles based on categories of their interest, allowing for a personalized reading experience.
- JSON data created for articles, podcast, and authors to emulate API endpoints: The website utilizes JSON data to simulate API endpoints, enabling seamless integration of content.
- React Suspense for UI loading states until async fetched content is available: React Suspense is used to display loading states while asynchronously fetched content is being loaded, ensuring a smooth user experience.
- React Server Components (app router pages): React Server Components are employed for app router pages, enhancing the website's performance and scalability.
- TypeScript to enforce type safety: TypeScript is utilized to enforce type safety, reducing the risk of runtime errors and improving code quality.
- React Context API to store data fetched at the top-level: The React Context API is used to store data fetched at the top-level, enabling easy access and management of shared data.
- Custom hooks for podcast and article context store calls: Custom hooks have been implemented to handle podcast and article context store calls, enhancing code reusability and maintainability.
- GSAP animations for horizontal sliding text: The website utilizes GSAP animations to create visually appealing horizontal sliding text effects, adding a touch of creativity to the user interface.
- Shadcn for accessible components: Shadcn is used to ensure the accessibility of components, ensuring an inclusive user experience.
- Tailwind CSS for mobile-first responsiveness: Tailwind CSS, a utility-first CSS framework, is employed to ensure the website is responsive and optimized for mobile devices.
- E2E testing across multiple browsers using Playwright: The website undergoes end-to-end (E2E) testing across multiple browsers using Playwright, ensuring its compatibility and reliability.
- Husky to run lint and testing prior to Git Commit: Husky is used to enforce code quality by running linting and testing scripts before committing changes to Git.
- React Hook form with Zod Schema validation for email subscription input: The website incorporates React Hook form with Zod Schema validation for email subscription inputs, ensuring data integrity and preventing incorrect inputs.
- Server Actions and Errors using Next.js API routes for server-side validation: Next.js API routes are utilized for server-side validation, ensuring secure and robust handling of server actions and errors.
Summary
The Fyrre Magazine website is a visually striking and feature-rich arts and life magazine built using modern web development technologies. It offers a faithful adaptation of Figma designs, dynamic rendering of content, custom-designed error pages, and various other features to deliver an immersive user experience. With its use of React Server Components, TypeScript for type safety, React Suspense for loading states, and a range of other tools and frameworks, the website demonstrates a commitment to performance, scalability, and code quality. Its comprehensive testing and validation ensure a reliable and secure browsing experience, making it a valuable resource for arts and culture enthusiasts.
- Figma
Figma is a cloud-based design tool for creating user interfaces, prototypes, and collaboration in real time.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.