Welcome to the PC Wizardry website, where you can create and customize your dream PC configuration. This website provides a user-friendly interface to browse and select components for your PC build.
You can access the live version of the PC Wizardry website : Live Link: PC Wizardry
Repository: PC Wizardry Repo
- Navbar with Searchbar
- Featured category
- Featured product
- Product Details
- PC Building page
- Checkout page
- Auth system = {Github, Google}
The website is built using Next.js, a popular React framework for building web applications. We have used various libraries and tools to enhance the user experience, including:
- Tailwind CSS: A utility-first CSS framework that allows for easy styling and responsiveness.
- Ant Design (antd): A comprehensive UI component library for React, ensuring a polished and user-friendly design.
- Next-Auth: An authentication library for Next.js, providing user authentication and authorization features.
- React Icons: A library for adding popular icons to the user interface.
- React Loader Spinner: A spinner component to display loading states.
- React Loading Skeleton: A skeleton loader component for smooth content loading.
- Redux Toolkit: A toolkit for efficient state management and state updates.
-
Start by browsing the product catalog to select your preferred components for your PC build. You can explore products based on different categories and view detailed information about each item.
-
Click on the product's image or name to access further details, including key features, price, and user reviews.
-
Use the "Add to Wizardry" button to add a product to your PC configuration. The selected components will be displayed in the PC Wizardry section, along with the total cost and individual component details.
-
The website calculates the GPA (Gaming Performance Assessment) of your PC build based on your selected components. This metric provides an estimate of your PC's gaming capabilities.
-
You can sign in to save and load your PC configurations. Just click on "Sign In" to get started.
-
Enjoy building your custom PC configuration!
To set up the development environment for this project, follow these steps:
- Clone this repository.
- Install project dependencies using
npm install. - Start the Next.js development server using
npm run dev. - Start the JSON server using
npm run json-server. - Access the development server at
http://localhost:3000.
We'd love to hear your feedback and suggestions. Feel free to report any issues, make feature requests, or contribute to this project by submitting pull requests.
Enjoy building your dream PC configuration with PC Wizardry!
Thank you for visiting the PC Wizardry website!