What is PCGenixAI?

An online shop for PC components and an AI-based components recommendation system to build your custom PC.

User Manual

PCGenixAI User Manual Video

Submitted Version

PC Builder: A Haven to Custom Built PC

Earlier versions

https://github.com/Fathin-Ishrak-Romeo/471Project_Rough-work

---

Features (Currently available ✅, Currently unavailable ⬜)

• User Authentication
  ✅ Sign up, log in, and log out
  ✅ Login as Customer
  ⬜ Login as Admin
  ⬜ Login as PC Building Specialist
  ✅ Update username and change password
  ⬜ Forget password option

• Shop
  ✅ Browse PC components
  ✅ Advanced filters: search bar, category-wise search, brand-wise search, price range-wise search, and sorting (Price High to Low, Low to High, Name A to Z, Z to A)
  ✅ Reset filters

• PC Build Generator
  ✅ Input: Usage category and budget range
  ✅ Output: Recommend components required to build a PC for the given usage within the budget range
  ✅ Price breakdown for generated components
  ✅ Option to add recommended components to the cart

• Manual Selection
  ✅ Choose components from the shop manually
  ✅ Price breakdown for selected components
  ✅ Add to cart functionality

• Shopping Cart
  ✅ Add components from the shop, PC Build Generator, and manual selection
  ✅ Select item quantity and delete items
  ✅ View order summary (Subtotal, 10% VAT, Total)
  

• Payment System
  ✅ Payment method selection: VISA Card, Master Card, Credit Card, Bank Transfer, BKash, Nagad, Rocket

• Support & Engagement
  ✅ Contact form
  ✅ Chatbot with suggested and category-based questions
  ⬜ Live chat with PC building specialists
  ✅ FAQ and About section
  ✅ Social media links integration
  

• UI/UX Enhancements
  ✅ Light & dark theme support
  ✅ 3D interactive image on the homepage
  ✅ Typing effect on the homepage

• Wishlist
  ⬜ Add the items that the customer wants to purchase in the future

• Order History
  ⬜ All order history with payment receipts under a specific account

• Payment Gateway
  ⬜ Implement the payment gateway for successful payment transaction

---

Tech Stack

• Frontend: TypeScript, React, Tailwind CSS
• Backend: Node.js, Express.js
• Database: Supabase
• Authentication: Supabase Authentication
• Contact Form: EmailJS for email support

---

Installation & Setup (For Normal Users)

Step 1: Download the ZIP file of the project

• Extract the ZIP flie

Step 2: Install IDE

• Ensure you have any IDE (e.g. VS Code) installed. Download VS Code from VS Code official website
• Open the extracted project folder on VS Code

Step 3: Install Node.js

• Ensure you have Node.js installed. Download it from Node.js official website.

Step 4: Configure Environment Variables

Create a .env file in the root directory and add the required configuration:

PORT=5000
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
EMAILJS_SERVICE_ID=your_emailjs_service_id
EMAILJS_TEMPLATE_ID=your_emailjs_template_id
EMAILJS_USER_ID=your_emailjs_user_id

Step 5: Install Dependencies

Run the following command into the VS Code terminal to install all necessary packages:

npm install

Step 6: Start the Development Server

Run the following command into the VS Code terminal to run the backend and frontend servers:

npm run dev

This will start the development server. In the terminal, a localhost link (e.g., http://localhost:3000) will appear. Copy and paste the link into your browser to access the application.

Step 7: Testing

• Register a new user and log in.
• Browse PC components and test the filtering options.
• Use the PC Build Generator to generate a build.
• Use the Manual Selection to select components manually.
• Add components to the cart and proceed with testing.
• Contact support using the chatbot or contact form.

---

Setup Using Git (For Developers only)

This method is recommended for developers who want to:

• Contribute to the project
• Stay updated with the latest changes
• Switch between different versions
• Create custom modifications

Prerequisites

1. Install Git: Download Git

Initial Setup

1. Clone the Repository:

   # Using HTTPS
   git clone https://github.com/Fathin-Ishrak-Romeo/PCGenixAI.git

2. Navigate to Project Directory:

   cd PCGenixAI

3. Switch to the Main Branch:

   git checkout main

4. Install Dependencies:

   pnpm install

5. Start the Development Server:

   pnpm run dev

Staying Updated

To get the latest changes from the repository:

1. Save Your Local Changes (if any):

   git stash

2. Pull Latest Updates:

   git pull origin main

3. Update Dependencies:

   pnpm install

4. Restore Your Local Changes (if any):

   git stash pop

Troubleshooting Git Setup

If you encounter issues:

1. Clean Installation:

   # Remove node modules and lock files
   rm -rf node_modules pnpm-lock.yaml
   
   # Clear pnpm cache
   pnpm store prune
   
   # Reinstall dependencies
   pnpm install

2. Reset Local Changes:

   # Discard all local changes
   git reset --hard origin/main

Remember to always commit your local changes or stash them before pulling updates to avoid conflicts.

---

Contributing

Feel free to contribute to this project by opening issues or submitting pull requests.

License

This project is licensed under the MIT License.