{"id":21688985,"url":"https://github.com/felix221123/audiophile-e-commerce-website","last_synced_at":"2026-04-05T22:04:54.741Z","repository":{"id":225879487,"uuid":"767099916","full_name":"Felix221123/Audiophile-E-Commerce-Website","owner":"Felix221123","description":"This is an Audiophile E-Commerce Website built using REACTJS and Typescript, utilises react context api for data fetching and also local storage for data storing and retrieval","archived":false,"fork":false,"pushed_at":"2024-04-18T14:50:06.000Z","size":2641,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T12:41:42.679Z","etag":null,"topics":["localstorage","reactjs","saas","tailwindcss","typescript","usecontext-hook"],"latest_commit_sha":null,"homepage":"https://audiophile-e-commerce-website-eight.vercel.app/","language":"CSS","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/Felix221123.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-04T17:47:42.000Z","updated_at":"2024-03-05T22:11:15.000Z","dependencies_parsed_at":"2024-04-18T16:06:22.930Z","dependency_job_id":null,"html_url":"https://github.com/Felix221123/Audiophile-E-Commerce-Website","commit_stats":null,"previous_names":["felix221123/audiophile-e-commerce-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FAudiophile-E-Commerce-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FAudiophile-E-Commerce-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FAudiophile-E-Commerce-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Felix221123%2FAudiophile-E-Commerce-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Felix221123","download_url":"https://codeload.github.com/Felix221123/Audiophile-E-Commerce-Website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244611555,"owners_count":20481216,"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":["localstorage","reactjs","saas","tailwindcss","typescript","usecontext-hook"],"created_at":"2024-11-25T17:19:02.223Z","updated_at":"2025-12-31T00:05:22.751Z","avatar_url":"https://github.com/Felix221123.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Audiophile e-commerce website solution\n\nThis is a solution to the [Audiophile e-commerce website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the app depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Add/Remove products from the cart\n- Edit product quantities in the cart\n- Fill in all fields in the checkout\n- Receive form validations if fields are missed or incorrect during checkout\n- See correct checkout totals depending on the products in the cart\n  - Shipping always adds $50 to the order\n  - VAT is calculated as 20% of the product total, excluding shipping\n- See an order confirmation modal after checking out with an order summary\n- **Bonus**: Keep track of what's in the cart, even after refreshing the browser (`localStorage` could be used for this if you're not building out a full-stack app)\n\n\n### Links\n\n- Solution URL: [Add solution URL here](https://your-solution-url.com)\n- Live Site URL: [Add live site URL here](https://your-live-site-url.com)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- Mobile-first workflow\n- [REACTJS] ([JS framework library](https://react.dev/learn/react-developer-tools))\n- [TailwindCSS](https://tailwindcss.com/docs/) \n- TypeScript\n\n\n\n### What I learned\nI learnt and advanced my knowledge on using REACTJS context api to allocate cart contents and how to manipulate it.\nAdditionally I also learnt to use the framer motion to animate my contents\n\n\n### Continued development\nI will continue to use REACTJS to build my frontend application and i will also use REDUX in any next project i build\n\n\n### Useful resources\n\n- [Animation Styles](https://animate.style/) - This helped me for to use animation in my projects\n- [Framer motion](https://animate.style/) - This is the site for framer motion which helped me provide animation for my site\n\n\n## Author\n\n- Website - [mywebsite](https://felix221123.github.io/my-portfolio-website/)\n- Frontend Mentor - [@Felix221123](https://www.frontendmentor.io/profile/Felix221123)\n- Twitter - [@IxKvfi](https://www.twitter.com/IxKvfi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix221123%2Faudiophile-e-commerce-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelix221123%2Faudiophile-e-commerce-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelix221123%2Faudiophile-e-commerce-website/lists"}