https://github.com/qridwan/pc-builder
A clean and straightforward PC Builder website for PC parts and components, built with Next.js. This project allows users to build their own PC by selecting various components and viewing product details.
https://github.com/qridwan/pc-builder
antd-design nextapi nextauth nextjs redux-toolkit
Last synced: about 1 year ago
JSON representation
A clean and straightforward PC Builder website for PC parts and components, built with Next.js. This project allows users to build their own PC by selecting various components and viewing product details.
- Host: GitHub
- URL: https://github.com/qridwan/pc-builder
- Owner: qridwan
- Created: 2023-07-27T20:01:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-30T17:08:00.000Z (over 2 years ago)
- Last Synced: 2025-01-18T00:48:55.288Z (about 1 year ago)
- Topics: antd-design, nextapi, nextauth, nextjs, redux-toolkit
- Language: TypeScript
- Homepage: https://pc-builder-pro.vercel.app
- Size: 3.32 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PC Builder Website using Next.js
# [Live Link](https://pc-builder-pro.vercel.app)
A clean and straightforward PC Builder website for PC parts and components, built with Next.js. This project allows users to build their own PC by selecting various components and viewing product details.
## Table of Contents
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Installation](#installation)
- [Protected Routes](#protected-routes)
- [Screenshots](#screenshots)
## Features
- Navbar with a **PC Builder** button to redirect users to the PC Builder page.
- Categories dropdown in the navbar for quick navigation to specific component categories.
- Home page displaying 6 random PC components as Featured Products (Done By SSG).
- Featured Product cards with product information and a link to the product detail page (Done By SSG).
- Featured Categories section on the home page for each component category (Done By SSG).
- Featured Category sections with products and links to their detail pages (Done By SSG).
- Product Detail page with detailed information about each PC component.
- PC Builder page with category sections and the ability to add components to the build. (Done By SSR)
- **Complete Build** button, which is enabled after adding at least 5-6 components to the build.
- Optional bonus features:
- User authentication using NextAuth and social login (Google/Github).
- Success alert after completing the build.
- Hero section and footer on the home page for improved user experience.
- Responsive design for mobile and desktop devices.
## Tech Stack
The PC Builder website is built using the following technologies:
- Next.js (Frontend)
- Next.js/Api (Backend)
- Context API (State Management - for PC Builder page)
- NextAuth (for optional user authentication)
## Installation
To run the project locally, follow these steps:
1. Clone the repository from GitHub.
2. Install dependencies using `npm install`.
3. Start the development server using `npm run dev`.
```bash
git clone https://github.com/qridwan/pc-builder.git
cd pc-builder
yarn
yarn dev
```
## Protected Routes
- User cant access [pc builder page](https://pc-builder-pro.vercel.app/pcbuild) without authentication
## Screenshots
Banner Page:
Feature Page:
PC Builder Page:
Items Page:
