QPICK - iPhone Accessories Store

QPICK is a React-based online store offering a wide range of iPhone accessories such as cases, screen protectors, chargers, and more. The app utilizes React Router for seamless page navigation without reloading, enhancing the user experience.

Live Demo

You can check out the live demo of the app here.

Technologies Used

• Framer Motion
• OpenStreetMap
• Leaflet.js

Features

• React-based: Built using React to ensure a dynamic and responsive UI.
• Product Catalog: Displays various iPhone accessories.
• Seamless Navigation: Utilizes React Router for efficient page navigation.
• Animated Transitions: Implemented using Framer Motion for smooth page transitions.
• Styled with Tailwind CSS: The UI is styled using Tailwind CSS for a modern and clean design.
• Interactive Map for Delivery: Uses OpenStreetMap and Leaflet.js to show the user's location and display delivery information dynamically.

Map & Geolocation

QPICK integrates an interactive map using OpenStreetMap and Leaflet.js:

• Geolocation Support: Automatically detects the user's location using the browser's Geolocation API.
• Default Location: If geolocation is not granted, the map centers on Kyiv, Ukraine.
• Smooth View Transition: The map updates dynamically when the user's location is detected.
• No API Keys Required: OpenStreetMap and Leaflet.js are free and open-source, requiring no API keys.

Installation

1. Clone the repository:

   git clone https://github.com/andriiafanasiev/QPICK.git

2. Navigate to the project directory:

   cd QPICK

3. Install dependencies:

   npm install

4. Run the application:

   npm start