Fyrre Magazine

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.

Installation

The installation process for the Fyrre Magazine website involves the following steps:

1. Clone the repository:

git clone [repository-url]

2. Install dependencies:

npm install

3. Build the Next.js project:

npm run build

4. Start the Next.js development server:

npm run dev

5. Access the website locally: Open a web browser and navigate to http://localhost:3000

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.