👗 Loja Meteora - Front-End Desafio 7 👗

📑 Table of Contents

• 📑 Table of Contents
• 📖 Overview
• 🛠️ Technologies
• ⚡ Performance & PWA
• 🚀 Demo
• 📦 Install and Use
• 📂 File Structure
• 🎨 Reference & Inspiration
• 👨‍💻 Author and Contact

📖 Overview

Meteora Store is a responsive fashion e-commerce platform designed to showcase products through a modern and accessible shopping experience.

Users can browse the catalog, explore product details through modal interfaces, and subscribe to a newsletter with built-in form validation. The project prioritizes accessibility, responsive layouts, and user-friendly interactions across desktop and mobile devices.

Built with HTML, CSS, and Vanilla JavaScript, the application consumes product data from a mock REST API provided by JSON Server, demonstrating core front-end development concepts without relying on external frameworks.

🛠 Technologies

The following technologies were used to build this project:

• HTML5
• CSS3
• Javascript
• Gulp
• Node.js
• JSON

⚡ Performance & PWA

Comming Soon!

🚀 Demo

Access the live application below to interact with the interface and run your own performance tests

Meteora: https://meteora-pearl.vercel.app/

Desktop

desktop-home-meteora.mp4

Mobile

mobile-home-meteora.mp4

📦 Install and Use

1. Clone the repository:

git clone https://github.com/Epiled/meteora.git
cd meteora

2. Install the dependencies:

npm install

3. Start the Mock Database: Navigate to the db directory and initialize the local JSON server. (Note: prefixing with npx ensures it runs even if not installed globally).

cd db
npx json-server --watch db.json

📂 File Structure

Comming Soon!

🎨 Reference & Inspiration

The project's design and wireframes are available for viewing on Figma. Below is a list of the real-world examples that inspired the UI/UX design.

Figma / Wireframe: Meteora

👨‍💻 Author and Contact

_{Felipe De Andrade}

Made with ❤️ by Felipe De Andrade 👋🏽 Get in touch!