⚡🔧 A simple PC builder from scratch to determine the budget range of your selected components
A simple PC builder from scratch to determine the budget range of your selected components created using React
with TypeScript
and deployed using Netlify
.
Download the latest Node version. This is marked as <version number> Current
. Install it on your machine.
(Optional) Download Yarn. This is a faster package manager than the default npm
one.
Clone the project
git clone https://github.com/RinMinase/pc-builder.git
cd pc-builder
Install the dependencies then run the project
npm install
npm start
Note: If you have installed Yarn, run these instead:
yarn install
yarn start
Fire up your browser and go to localhost:3000
.
├── assets/ # Project assets
├── src/ # Project source code
│ ├── core/ # Core components
│ ├── <component>/ # Project component
│ ├── global.d.ts # Project type definitions
│ ├── global.scss # Main stylesheet
│ ├── index.html # Main template file
│ ├── index.tsx # Main scripts
│ ├── reducers.ts # Root reducer file
│ └── routes.tsx # Route definitions
├── tsconfig.json # TypeScript configuration file
└── webpack.config.ts # Webpack configuration file
<component>/
│ └── components/ # Sub-components folder
│ └── <component name>.tsx # Sub-component
├── actions.tsx # Component actions and types
├── index.scss # Component stylesheet
├── index.tsx # Component entry file
└── reducers.tsx # Component reducers
___________________
| _______________ | <App ></App>
| |_______________| | ├─ <Nav ></Nav>
| _______________ | │
| | | | └─ <Container ></Container>
| | | | └─ <Route ></Route>
| |_______________| |
|___________________|
Installations Required:
Fire up your terminal inside the project folder.
Build the project by running:
npm run build
Note: If you have installed Yarn, run these instead:
yarn build
This should generate a /dist
folder inside the project folder.
Task automation is based on Yarn scripts or NPM scripts.
Task | Description |
---|---|
yarn start |
Run development server on http://localhost:3000/ with file watching on changes |
yarn build |
Build production code |
yarn deploy |
Build netlify deployment code |