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 />
| |_______________| |  ├─ <Nav />
|  _______________  |  │
| |               | |  └─ <Container />
| |               | |      └─ <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.

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

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