{"id":30584111,"url":"https://github.com/asbhogal/Fyrre-Magazine","last_synced_at":"2025-08-29T09:03:05.142Z","repository":{"id":196894697,"uuid":"697399906","full_name":"asbhogal/Fyrre-Magazine","owner":"asbhogal","description":"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. ","archived":false,"fork":false,"pushed_at":"2024-07-20T15:38:22.000Z","size":73752,"stargazers_count":86,"open_issues_count":1,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T07:14:28.521Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://fyrre-magazine.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asbhogal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"polar":"asbhogal"}},"created_at":"2023-09-27T16:45:04.000Z","updated_at":"2025-04-10T16:07:10.000Z","dependencies_parsed_at":"2024-06-27T00:00:36.600Z","dependency_job_id":"491e8335-46e8-4fa0-b207-d705e8ea9c9b","html_url":"https://github.com/asbhogal/Fyrre-Magazine","commit_stats":null,"previous_names":["asbhogal/fyrre-magazine"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/asbhogal/Fyrre-Magazine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FFyrre-Magazine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FFyrre-Magazine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FFyrre-Magazine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FFyrre-Magazine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asbhogal","download_url":"https://codeload.github.com/asbhogal/Fyrre-Magazine/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FFyrre-Magazine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272658783,"owners_count":24971604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-08-29T09:03:02.468Z","updated_at":"2025-08-29T09:03:05.131Z","avatar_url":"https://github.com/asbhogal.png","language":"TypeScript","funding_links":["https://polar.sh/asbhogal"],"categories":["Boilerplates \u0026 Starters"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ch1\u003eFyrre - Art \u0026 Life Magazine Website\u003c/h1\u003e\n\n\u003c/div\u003e\n\nA bold, striking arts and life magazine website build as an SPA from Figma templates (designed by Webflow designer \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.figma.com/@pawelgola\"\u003ePawel Gola\u003c/a\u003e), using Next.js, React Server Components, React Suspense, TypeScript, Tailwind, Shadcn and ES Lint and incorporates E2E testing using Playwright.\n\n\u003cstrong\u003eFeatures\u003c/strong\u003e\n- Faithful adaptation to Figma designs\n- Custom designed and developed 404 error page\n- Dynamic rendering of podcast, article and author data\n- Dynamic filtering of magazine articles based on categories\n- JSON data created for articles, podcast and authors to emulate API endpoints\n- React Suspense for UI loading states until async fetched content is available\n- React Server Components (app router pages)\n- TypeScript to enforce type safety\n- React Context API to store data fetched at top level\n- Custom hooks for podcast and article context store calls\n- GSAP animations for horizontal sliding text\n- Shadcn for accessible components\n- Tailwind CSS for mobile-first responsiveness\n- E2E testing across multiple browsers using Playwright\n- Husky to run lint and testing prior to Git Commit\n- React Hook form with Zod Schema validation for email subscription input\n- Server Actions and Errors using Next.js api routes for server-side validation\n\n\u003cstrong\u003eStacks \u0026 Tools\u003c/strong\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/nextjs/nextjs-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/nextjs/nextjs-original.svg\" alt=\"nextjs logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/react/react-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/react/react-original.svg\" alt=\"react logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/typescript/typescript-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/typescript/typescript-original.svg\" alt=\"TypeScript logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/tailwindcss/tailwindcss-plain.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/tailwindcss/tailwindcss-plain.svg\" alt=\"Tailwind logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/shadcn-ui/ui/blob/main/apps/www/public/favicon-32x32.png\"\u003e\u003cimg src=\"https://github.com/shadcn-ui/ui/blob/main/apps/www/public/favicon-32x32.png\" alt=\"Shadcn logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/eslint/eslint-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/eslint/eslint-original.svg\" alt=\"ES Lint logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://avatars.githubusercontent.com/u/2386673?s=200\u0026v=4\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2386673?s=200\u0026v=4\" alt=\"GSAP logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://playwright.dev/img/playwright-logo.svg\"\u003e\u003cimg src=\"https://playwright.dev/img/playwright-logo.svg\" alt=\"Playwright logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://avatars.githubusercontent.com/u/53986236?s=280\u0026v=4\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/53986236?s=280\u0026v=4\" alt=\"React Hook Form logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://zod.dev/logo.svg\"\u003e\u003cimg src=\"https://zod.dev/logo.svg\" alt=\"Zod logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\n\u003cstrong\u003eLinks\u003c/strong\u003e\n- \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://fyrre-magazine.vercel.app/\"\u003eFyrre Magazine Site\u003c/a\u003e\n- \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.figma.com/community/file/1136023191939170511/fyrre-magazine-website-webflow-template\"\u003eFyrre Magazine Templates\u003c/a\u003e\n\n\u003cstrong\u003eDisclaimer\u003c/strong\u003e\n\nAs 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. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbhogal%2FFyrre-Magazine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasbhogal%2FFyrre-Magazine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbhogal%2FFyrre-Magazine/lists"}