Bodega - E-commerce Web App

Bodega is an online shopping website developed using Vue and Typescript. While its name is inspired by Peruvian 'Bodegas,' it brings a unique and responsive e-commerce experience to users. This project utilizes Vuex as the state management library for all the components in the application.

Design

The design for Bodega was created with attention to detail and user experience. You can view the design on Figma at: Bodega Design

Deployment

You can access the live deployment of Bodega at the following link: Bodega E-commerce

Features

• Responsive Design: Bodega offers a seamless shopping experience on various screen sizes, thanks to its responsive design.

• Vue.js and Typescript: Developed using Vue.js and Typescript, providing a robust and maintainable codebase.

• SCSS and Bootstrap: Utilizes SCSS for custom styling and Bootstrap for responsive UI elements.

• State Management with Vuex: Vuex is employed to manage the state of the cart and other components efficiently.

• External API Integration: The project fetches product data from the FakeStoreAPI to populate the store with products.

• Persistent Cart and Wishlist: Cart and Wishlist state is persisted even on page refresh using Vuex, ensuring a seamless shopping experience for returning users.

Technical Details

Bodega was built with a focus on code reusability and scalability, making use of the following technologies and practices:

• Vue.js: The core of the project is built using Vue.js, providing a component-based architecture for building the user interface.

• Typescript: Typescript is used to ensure type safety and enhance code quality.

• SCSS: SCSS is used for styling to create a visually appealing and consistent user interface.

• Bootstrap: Bootstrap is used for responsive design and pre-built UI components.

• Vuex: Vuex is employed for state management, ensuring components have access to shared data and functions.

• FakeStoreAPI: Product data is fetched from the FakeStoreAPI, simulating real e-commerce product data.

Deployment and Usage

You can access the live deployment of Bodega at https://bodega.onrender.com/. Feel free to explore the website, add products to your cart, and enjoy a responsive and user-friendly shopping experience.

Experience a responsive and user-friendly online shopping experience with Bodega!

Made with 🦔 by @TheRoro