https://github.com/jakegodsall/fm-audiophile-ecommerce
Audiophile Ecommerce frontend build with Next.js and TailwindCSS.
https://github.com/jakegodsall/fm-audiophile-ecommerce
nextjs reactjs tailwindcss
Last synced: 5 months ago
JSON representation
Audiophile Ecommerce frontend build with Next.js and TailwindCSS.
- Host: GitHub
- URL: https://github.com/jakegodsall/fm-audiophile-ecommerce
- Owner: jakegodsall
- Created: 2023-07-18T17:58:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-13T17:22:44.000Z (9 months ago)
- Last Synced: 2024-09-14T07:56:17.979Z (9 months ago)
- Topics: nextjs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://jakegodsall-audiophile-ecommerce.netlify.app/
- Size: 2.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Audiophile e-commerce website solution
This 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. The application is built using ReactJS, Next.js, and TailwindCSS to ensure a modern, responsive, and maintainable codebase.
## Overview
### Screenshot
### Features
- Product Management: Users can add or remove products from their cart and adjust product quantities within the cart.
- Checkout Process: Includes a fully functional checkout process with form validation to ensure all required fields are correctly filled out.
- Dynamic Pricing: The cart total is dynamically updated based on the products selected, with shipping costs and VAT (20% of the product total, excluding shipping) calculated automatically.
- Order Confirmation: After a successful checkout, users receive a confirmation modal displaying an order summary.
- Responsive Design: The layout adapts to different screen sizes, ensuring optimal viewing on all devices.
- Interactive UI: Hover states are implemented for all interactive elements to enhance user experience.
- Persistent Cart: The application saves the state of the cart in localStorage, allowing users to retain their cart items even after refreshing the page.
### Links
- Frontend URL: [GitHub](https://github.com/jakegodsall/fm-audiophile-ecommerce-frontend)
- Live Site URL: [Netlify](https://jakegodsall-audiophile-ecommerce.netlify.app/)
## My process
### Built with
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React library
- [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Framer Motion](https://www.framer.com/motion/) - Animation library
### Set Up
1. Clone the repository:
```shell
git clone https://github.com/jakegodsall/fm-audiophile-ecommerce-frontend.git
cd fm-audiophile-ecommerce-website
```
2. Install the dependencies:
```shell
npm install
```
3. Start the development server:
```shell
npm run dev
```
4. Build for production:
```shell
npm run build
npm start
```
## Author
- Website - [Jake Godsall](https://jakegodsall.com)
- Frontend Mentor - [@jakegodsall](https://www.frontendmentor.io/profile/jakegodsall)
- LinkedIn - [@godsalljake](https://www.linkedin.com/in/godsalljake/)
## License
This project is licensed under the MIT License.