Alpine Markt

Alpine Markt is a simple e-commerce website that allows users to add products to a shopping cart and calculate the total price of the products. The shopping cart data is stored in the local storage, so the data persists even after the page is refreshed.

Demo: alpine-markt.vercel.app

Features

• API Integration: The application uses the DummyJSON API to fetch product data.
• Add Products: Add products to the shopping cart.
• Remove Products: Remove products from the shopping cart.
• Search Products: Search for products by name.
• Sort Products: Sort products by price.
• Clear Cart: Clear the shopping cart and remove all products.
• Calculate Total: Calculate the total price of the products in the shopping cart.
• Local Storage: The shopping cart data is stored in the local storage.
• Responsive Design: The application is responsive and works on all devices.

Tech Stack

• Framework: Alpine.js
• Styling: Tailwind CSS
• API: DummyJSON
• Linting: ESLint
• Formatting: Prettier
• Testing: Jest, Cypress, Cucumber
• Package Manager: PNPM
• Build Tool: Vite
• Deployment: Vercel

Getting Started

To get started with this project, follow these steps:

1. Clone the repository:

git clone https://github.com/zorkham/alpine-markt.git

2. Install dependencies:

pnpm install

3. Run project locally:

pnpm dev

4. Open your browser: Go to http://localhost:3000 to see the app in action.

Testing

This project uses Jest, Cypress, and Cucumber for testing. To run the tests, use the following commands:

• Unit Tests:

  pnpm test

• E2E Tests:

  pnpm test:e2e

• All Tests:

  pnpm test:all

Other Projects

• Alpine Password Manager
• Alpine Board Game Explorer
• Alpine Pokedex