PC Builder

Introduction

A simple PC builder from scratch to determine the budget range of your selected components created using React with TypeScript and deployed using Netlify.

Getting Started

Running the project

1. Download the latest Node version. This is marked as <version number> Current. Install it on your machine.

2. (Optional) Download Yarn. This is a faster package manager than the default npm one.

3. Clone the project

    git clone https://github.com/RinMinase/pc-builder.git
    cd pc-builder

4. Install the dependencies then run the project

    npm install
    npm start

   Note: If you have installed Yarn, run these instead:

    yarn install
    yarn start

5. Fire up your browser and go to localhost:3000

Project Structure

.
├── 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 Structure

<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

Display Structure

 ___________________
|  _______________  | <App ></App>
| |_______________| |  ├─ <Nav ></Nav>
|  _______________  |  │
| |               | |  └─ <Container ></Container>
| |               | |      └─ <Route ></Route>
| |_______________| |
|___________________|

Building the project

Installations Required:

• Node
• (Optional) Yarn

1. Fire up your terminal inside the project folder.

2. Build the project by running:

    npm run build

   Note: If you have installed Yarn, run these instead:

    yarn build

3. This should generate a /dist folder inside the project folder.

Project tasks

Task automation is based on Yarn scripts or NPM scripts.

Built with

• React 16 - Web Framework
• Redux - State Container Management
• TypeScript - Language syntax and compiler
• Material-UI - Web Layouting
• Firestore - Database
• Sassy CSS (SCSS) - CSS pre-processor
• Webpack 4 - Project bundler
• Netlify - Continuous Deployment (CD) service
• Terser - ES6+ (JavaScript) mangler and compression toolkit
• Yarn - Package Manager