项目作者: RinMinase

项目描述 :
⚡🔧 A simple PC builder from scratch to determine the budget range of your selected components
高级语言: TypeScript
项目地址: git://github.com/RinMinase/pc-builder.git
创建时间: 2019-10-21T16:37:38Z
项目社区:https://github.com/RinMinase/pc-builder

开源协议:

下载


PC Builder



David-DM


David-DM




Netlify-Status

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

    1. git clone https://github.com/RinMinase/pc-builder.git
    2. cd pc-builder
  4. Install the dependencies then run the project

    1. npm install
    2. npm start

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

    1. yarn install
    2. yarn start
  5. Fire up your browser and go to localhost:3000

Project Structure

  1. .
  2. ├── assets/ # Project assets
  3. ├── src/ # Project source code
  4. ├── core/ # Core components
  5. ├── <component>/ # Project component
  6. ├── global.d.ts # Project type definitions
  7. ├── global.scss # Main stylesheet
  8. ├── index.html # Main template file
  9. ├── index.tsx # Main scripts
  10. ├── reducers.ts # Root reducer file
  11. └── routes.tsx # Route definitions
  12. ├── tsconfig.json # TypeScript configuration file
  13. └── webpack.config.ts # Webpack configuration file

Component Structure

  1. <component>/
  2. │ └── components/ # Sub-components folder
  3. │ └── <component name>.tsx # Sub-component
  4. ├── actions.tsx # Component actions and types
  5. ├── index.scss # Component stylesheet
  6. ├── index.tsx # Component entry file
  7. └── reducers.tsx # Component reducers

Display Structure

  1. ___________________
  2. | _______________ | <App ></App>
  3. | |_______________| | ├─ <Nav ></Nav>
  4. | _______________ |
  5. | | | | └─ <Container ></Container>
  6. | | | | └─ <Route ></Route>
  7. | |_______________| |
  8. |___________________|

Building the project

Installations Required:

  • Node
  • (Optional) Yarn
  1. Fire up your terminal inside the project folder.

  2. Build the project by running:

    1. npm run build

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

    1. 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