/Shopping-App-Prototype

This is a prototype of a mobile shopping app built as a Single Page Application (SPA) using Laravel and Vue.js. The app includes two main pages: a product list page and a product details page. It also incorporates various features and functionalities as outlined in the task.

Primary LanguagePHP

Shopping App Prototype


Readme

📗 Table of Contents

 - Features - Installation - Usage - API Integration - Database - State Management - Screenshots - Task Submission

Shopping App Prototype

This is a prototype of a mobile shopping app built as a Single Page Application (SPA) using Laravel and Vue.js. The app includes two main pages: a product list page and a product details page. It also incorporates various features and functionalities as outlined in the task.

🛠 Built With

Tech Stack

Client

Key Features

  • [Products List Page:]
    • Displays a gallery of 10 products in a Masonry Layout with 2 columns.
    • Retrieves product data from the /api/products endpoint.
    • Images for the products can be retrieved from various sources.
  • [Product Details Page:]
    • Product Details Page:
    • Accessible by clicking on any product image.
    • Displays product details including a banner image, name, description, price.
    • Provides options to add the product to the cart or save it for later.
  • [Search box to look for a particular crypto item]

(back to top)

Installation

Clone the repository from GitHub:

 - git clone [https://github.com/hagan199/Shopping-App-Prototype.git]

Configure your .env file with your database credentials and other settings.

Install the necessary dependencies:

- cd shopping-app
- composer install
- npm install

Run migrations to create the products table:

- php artisan migrate

Seed the database with product information:

- php artisan db:seed

Usage

  • To run the application locally, use the following commands:

API Integration

  • For retrieving product data, we have integrated the API Ninjas service. The API key for this service is provided in the task description.

Database

  • The application uses MySQL for database storage.
  • A migration and seeder have been provided to create and populate the products table with sample data.

State Management

  • To efficiently manage application state, the Pinia Store for state management has been implemented. This store stores and provides access to product data in the SPA.

(back to top)

👤 Emmanuel Hagan

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

If you like this project feel free to let me know via Linkedin or Github, also don't forget to leave your ⭐️. I will always appreciate your comments.

(back to top)

📝 License

This project is MIT licensed.

(back to top)