PChut - Your Ultimate Tech Shopping Destination

🚀 Built with Vue + Laravel

Watch the video:

PChut documentation

• Project description and features
• Technologies
• Installation
• PChut UI

Project description and features

Welcome to PChut, your one-stop webshop for all things tech! Whether you're a seasoned PC enthusiast or just getting started, PChut is your go-to destination for all your tech needs. From powerful CPUs and high-performance GPUs to sleek keyboards, mice, and crystal-clear monitors, we've got it all. Here's what you can expect from our cutting-edge webshop:

🛍️ Browse and Discover: Explore our extensive catalog of tech items, meticulously categorized for your convenience. Find the latest and greatest PC components and peripherals with ease.

💰 Unbeatable Deals: Keep an eye on our action prices and exclusive offers to grab your favorite tech items at the best prices in the market.

🔍 Smart Search and Filters: Find exactly what you need by using our powerful search and filtering options. Narrow down your search by manufacturer, model, price range and more.

🛒 Seamless Shopping: Add items to your cart effortlessly and create your profile if you're new to PChut. Our streamlined checkout process ensures a hassle-free shopping experience.

💳 Secure Payments: Choose your preferred payment method, whether it's a card payment or cash on delivery, to complete your order. Your financial security is our top priority.

🏠 Customized Addresses: Store multiple delivery addresses to have your tech treasures delivered wherever you want. No more limitations to just one address.

💻 Build Your Dream PC: PChut takes tech shopping to the next level. Use our unique PC builder feature to select compatible components add them to your cart, and create the ultimate custom PC.

📦 Order Tracking: Stay informed about your orders with real-time status updates. Know whether your items are still on their way, being delivered, or have safely arrived at your doorstep.

📜 Order History: Easily access to all your past orders. Keep track of your tech purchases over time.

🎨 Modern Design: Our sleek and intuitive design ensures a visually appealing and user-friendly experience, making your shopping journey enjoyable.

Discover the future of tech shopping with PChut today. Elevate your PC gaming and computing experience with the latest and greatest tech items. Start exploring now and build the tech setup of your dreams!

Project Technology Stack

This full-stack project technology stack includes:

Backend

• Laravel 💙 - A PHP web application framework
• Filament - a content management framework for building an administration interface

Frontend

• Vue 💚 - A progressive JavaScript framework for building user interfaces
• Vuex - State management pattern and library for Vue.js applications
• Axios - A popular JavaScript library for making HTTP requests
• Vue-toastification - A library for displaying toast messages
• Vue-content-loader - Customizable loaders library (placeholder loading)
• Vue-swiper - A customizable image swiper/slider library
• Vue-credit-card-validation - A Vue library for credit card validation

Database

• MySQL - A relational database management system

Installation - how to run the code?

To start this project on your PC locally, follow these steps:

• Clone the repository: git clone https://github.com/Fosleen/PCHUT

Frontend

• In terminal, navigate to the Vue directory: cd frontend/vue

• Install all dependencies: npm install

• Start the application locally on port 5173: npm run dev

Backend

• Start server on XAMPP (Apache & MySQL services)

• Optional - in PhpMyAdmin create database with name pchut and import our test database from pchut-test-db.sql file

• In new terminal, navigate to the Laravel directory: cd backend/pc-hut

• Start the server locally on port 8000: php artisan serve

• Run database migrations: php artisan migrate

  Admin

  If you want to access admin dashboard, you have to install Laravel Filament.

  • Go in new terminal while your backend is running and run composer require filament/filament:"^3.0-stable" -W

  • Then run php artisan filament:install --panels

    To access admin dashboard, you need to create a user in terminal: php artisan make:filament-user On admin dashboard, you can do CRUD operations on database.

PChut UI

Home page

Product details page

All products with filter page

• Desktop and mobile filter version

PC builder page

Register page

My cart page

• Desktop and mobile cart item component version

My orders page

Payment details page

Custom placeholder loaders

Designed in Figma.

View full Figma file here. Icons are from Flaticon and Phosphor Icons.