🔴 🟥 Econverse - VTEX 🔴 🟥

📑 Table of Contents

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

📖 Overview

Econverse is a robust frontend web application engineered to deliver a seamless shopping experience for a modern department store. Designed with a strict emphasis on Core Web Vitals and high Lighthouse scores, the platform ensures rapid product discovery and fluid navigation. Built using a modern React and TypeScript stack, the architecture prioritizes scalable global state management, clean component decoupling, and an optimized rendering pipeline to support a diverse, multi-category product catalog.

🛠 Technologies

The following technologies were used to build this project:

• React
• Typescript
• Node.js
• Sass
• CSS Modules
• Vite

⚡ Performance & PWA

🚀 Demo

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

Econverse: https://econverse-eight.vercel.app/

Desktop

desktop.mp4

Mobile

mobile.mp4

📦 Install and Use

Prerequisites: Node.js (v22.x) or higher installed.

1. Clone the repository:

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

2. Install the dependencies:

npm install

3. Run the development environment (Build + Watch + Server):

npm run dev

4. (Optional) Generate minified build for production:

npm run build

📂 File Structure

Below is the project architecture. All development is done inside the src/ folder. The dist/ folder is automatically generated by Vite and should not be edited manually.

econverse/
├── src/                # Main source code
│   ├── api/            # Base HTTP client configuration and request interceptors
│   ├── assets/         # Images and SVGs processed by the build pipeline
│   ├── components/     # Reusable UI components (Atomic Design principles)
│   ├── contexts/       # Global state management providers (e.g., Modals, Filters)
│   ├── hooks/          # Custom React hooks encapsulating state and fetching logic
│   ├── interfaces/     # Global TypeScript definitions and data shape contracts
│   ├── pages/          # Top-level view components representing application routes
│   ├── service/        # Abstraction layer for API endpoints and business logic
│   ├── styles/         # Global styles and theme definitions
│   ├── utils/          # Pure helper functions, constants, and data formatters
│   ├── App.tsx         # Root component
│   └── main.tsx        # Application entry point
├── public/             # Static assets (favicons, robots.txt)
├── vite.config.ts      # Custom Vite configuration (plugins and aliases)
├── tsconfig.json       # TypeScript strict configuration
└── package.json        # Project dependencies and automation scripts

🎨 Reference & Inspiration

The project's design and wireframes are available for viewing on Figma.

Figma / Wireframe: Econverse

👨‍💻 Author and Contact

_{Felipe De Andrade}

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