{"id":13880826,"url":"https://github.com/folathecoder/audiophile","last_synced_at":"2025-07-16T17:31:15.332Z","repository":{"id":49524415,"uuid":"414603470","full_name":"folathecoder/audiophile","owner":"folathecoder","description":"An online store built with React, Next.js, Redux Toolkit, Styled Components, Heroku-Hosted API, React Hook Forms, and TypeScript 🐱‍🏍🤞","archived":false,"fork":false,"pushed_at":"2021-10-31T21:58:03.000Z","size":13125,"stargazers_count":33,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-24T09:34:09.948Z","etag":null,"topics":["heroku","nextjs","react","react-hook-form","redux","redux-toolkit","schema-org","styled-components","toastify","typescript","vercel","yup-validation"],"latest_commit_sha":null,"homepage":"https://audiophilic.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/folathecoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-07T13:02:56.000Z","updated_at":"2024-09-20T09:28:40.000Z","dependencies_parsed_at":"2022-09-25T18:24:23.334Z","dependency_job_id":null,"html_url":"https://github.com/folathecoder/audiophile","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/folathecoder/audiophile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folathecoder%2Faudiophile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folathecoder%2Faudiophile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folathecoder%2Faudiophile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folathecoder%2Faudiophile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/folathecoder","download_url":"https://codeload.github.com/folathecoder/audiophile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/folathecoder%2Faudiophile/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527547,"owners_count":23782480,"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","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":["heroku","nextjs","react","react-hook-form","redux","redux-toolkit","schema-org","styled-components","toastify","typescript","vercel","yup-validation"],"created_at":"2024-08-06T08:03:31.463Z","updated_at":"2025-07-16T17:31:13.775Z","avatar_url":"https://github.com/folathecoder.png","language":"TypeScript","readme":"\n# Audiophile eCommerce Web Application\n\nAudiophile is a online store that sells luxury and branded audio gadgets ranging from earphones, speakers, to headsets. The main aim of this web application is to present the products in the most user-friendly format and keeping accessibility in mind. \n\n\n## Tech Stack\n\n**Frontend Stack:** React, Next JS, \u0026 TypeScript\n\n**React Libraries:** Styled Components, Redux,  Redux Toolkit, React HookForm, Yup Validation, React Toastify, \u0026 Axios \n\n**Deployment:** Heroku, Netlify, \u0026 Vercel \n\n**Tools:** Google Rich Results Test, Schema Generator, PhotoShop, Canva, Lighthouse, GT Metrix, FireFox Developer Tools, Trello, Git, Redux DevTools, WAVE Accessibility Tool, \u0026 VS Code Editor  \n\n\n## Run Locally\n\nRun this application into your local environment by forking the repository and enter the following commands in your local terminal\n\nClone the project\n\n```bash\n  git clone https://github.com/folathecoder/audiophile.git\n```\n\nGo to the project directory\n\n```bash\n  cd audiophile\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nStart the server\n\n```bash\n  npm run dev\n```\n\n\n## Screenshot\n\n![Audiophile website overview](./public/audiophile.gif)\n\n\n## SEO \n\nSchema markup were dynamically rendered on all product pages using a function that takes in the product data as an argument and returns a customized JSON-LD. \n\n```bash\n  helpers/schemaGenerator.ts\n```\n\n```bash\n  export const productSchemaGenerator = (product): object =\u003e {\n  const productName = convertToUpperCase(product.name);\n\n  return {\n    \"@context\": \"https://schema.org/\",\n    \"@type\": \"Product\",\n    name: `${productName}`,\n    image: `https://audiophilic.vercel.app/${product.image.desktop}`,\n    description: `${product.description}`,\n    brand: \"Audiophile\",\n    sku: `${product.id}`,\n    offers: {\n      \"@type\": \"Offer\",\n      url: `https://audiophilic.vercel.app/product/${product.slug}`,\n      priceCurrency: \"USD\",\n      price: `${product.price}`,\n      priceValidUntil: \"2023-08-02\",\n      availability: \"https://schema.org/InStock\",\n      itemCondition: \"https://schema.org/NewCondition\",\n    },\n  };\n};\n```\n\nThis function is called before products are pre-rendered at build time.\n\n\n**Results of Schema markup implementation**\n\n![Audiophile website overview](./public/schema-1.png)\n\n![Audiophile website overview](./public/schema-2.png)\n\n\n## Lessons Learned\n\nThis project is one of [frontendmentor.io](https://frontendmentor.io)'s GURU challenges. I have been taking up challenges on their platform for almost a year, since I started my coding journey, and I remember looking at this particular project, wondering when I will be skilled enough to execute it. Well! Now I know! 😎\n\nThis project is by far one of the hardest projects I have ever executed. It was both challenging and full of learning/unlearning of new TypeScript, React \u0026 Next JS concepts. \n\n\n## 🔗 Social Links\n\n[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge\u0026logo=ko-fi\u0026logoColor=white)](https://folarin.dev/)\n\n[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/akinloye-folarin)\n\n[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white)](https://twitter.com/folathecoder)\n\n\n## Authors\n\n- **Coded By:** [@folathecoder](https://www.github.com/folathecoder)\n- **Designed By:** [@frontendmentor.io](https://frontendmentor.io)\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffolathecoder%2Faudiophile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffolathecoder%2Faudiophile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffolathecoder%2Faudiophile/lists"}