/fe-stock-keeper-ai

FE for hack for good 2021

Primary LanguageTypeScript

React 2021 setup

Initial setup

Installation

  • Make sure yarn is installed globally: npm install -g yarn
  • Run yarn install in terminal to install dependencies

Debugging

  • If there arises any issues with node_modules try:
    1. delete node_modules: rm -rf node_modules yarn.lock
    2. clean cache: yarn cache clean
    3. re-install dependencies: yarn install

Linting, prettier, and pre-commit hooks (in-progress)

Folders structure

  • We will try using atomic web design for this set-up template, as referenced by the official React docs

    • Atoms (ex. buttons, checkbox) and Molecules' (ex. Search bar with Search button) components will likely be derived from Bootstrap, so are not referenced in the folder setup. Feel free to add these folders as suitable if creating new atoms or molecules components
    • Organisms and Templates' components may be redundant for simple apps (will assess later if one can be removed) 
      .
├── ...
├── src                     # Main point of entry for React code
│ ├── api                   # Handling of endpoints
│ ├── organisms             # Ex. Header, Footer
│ ├── pages                 # Ex. dashboard page, inventory page
│ ├── shared                # global styles, constants, re-useable functions
│ └── templates             # Ex. DashboardHeader, MobileFooter, WebFooter
└── ...

Styling

Starting dev environment

  • Make sure yarn is installed globally: npm install -g yarn
  • Navigate to the root of this repo, and run yarn start
  • Navigate to localhost:4000 in your browser to view the application

    Hot reloading is enabled

  • Make sure to ctrl + C out of the terminal when done development, otherwise the application may continue to run in the background (blocking your port) after closing your code editor

Bundling files for production

  • Once satisified with development, run yarn build to bundle the files from ./src folder into the ./build folder

Process automation (in-progress)