BetterBuy Frontend

Welcome to the BetterBuy Frontend repository! This project is the frontend implementation for the BetterBuy e-commerce website. It is built using Vue.js 2, a progressive JavaScript framework for building user interfaces.

Project Overview

The BetterBuy Frontend provides a user-friendly interface for customers to browse products, learn more about the company, manage their shopping cart, and perform account-related actions. The main pages and features of the frontend include:

Home Page

The home page serves as the landing page for BetterBuy. It contains the following sections and features:

• Branding and company logo.
• Navigation links to different sections of the website, such as "Products", "Learn", "Sign In", and "Sign Up".
• Information about the company and its mission.
• Copyright and other related data.

Products Page

The products page allows users to browse different categories of products available on BetterBuy. It includes the following functionality:

• Navigation links to different product categories, such as "Mobile", "Laptop", "Camera", and "Appliances".
• The ability to choose from different merchants selling the same product, providing users with options and competitive pricing.
• Each product listing displays key details, such as product name, description, price, and available stock.
• Users can add products to their shopping cart by specifying the quantity desired.
• Account-related details, such as user profile information and options to sign out.

Cart Page

The cart page provides users with an overview of the items they have added to their shopping cart. It includes the following functionality:

• Display of all products added to the cart, including product details, quantity, and total price.
• The ability to increase or decrease the quantity of each product in the cart.
• Option to remove individual products or clear the entire cart.
• Calculation of the total price for all items in the cart.
• Checkout option to proceed to the payment and order confirmation process.

Prerequisites

Before running the BetterBuy Frontend, make sure you have the following prerequisites installed:

• Node.js: Make sure you have Node.js installed on your machine to run the frontend code.

Project Structure

The project structure follows the standard conventions of a Vue.js 2 application. The main files and directories in the project include:

• src/: This directory contains the main source code for the frontend.
• src/components/: This directory contains reusable Vue components used throughout the application.
• src/views/: This directory contains the main page components that are rendered for different routes.
• src/router/: This directory contains the Vue Router configuration for handling navigation between different pages.
• src/assets/: This directory contains static assets such as images, stylesheets, and fonts used in the application.

Getting Started

To get started with the BetterBuy Frontend, follow these steps:

1. Clone this repository to your local machine.

2. Open a terminal and navigate to the project directory.

3. Install the project dependencies by running the following command:

   npm install
   

4. Start the development server by running the following command:

   npm run serve
   

5. The frontend should now be running and accessible at the provided local development URL. Open your web browser and navigate to the specified URL to view the BetterBuy website.

Snapshots

Please refer to the assets directory to view snapshots of the components. During the snipping process, the backend was not connected to the frontend, preventing the transfer and reflection of data onto the frontend.

Customize Configuration

If you need to customize the configuration of the Vue.js project, you can refer to the Vue CLI Configuration documentation.