Front-end Overview

Technologies

React: Front-end React app

Redux: State management

Material UI: UI library

Folder Structure

src/
  components  # Reusable components
  features # Redux slice logic
  pages # Core components
  shared # Shared logic and data
    data
    themes
    utils

File Structure

Generally for the core pages, we have comments that specify the section of the page as such:

//////////////////////////////////////////////////////////
//                      Imports                         //      # Imports
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//                      Redux                           //      # Redux logic
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//                   State Logic                        //      # Core logic
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//                     useEffect                        //      # useEffect
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//                      Render                          //      # Render
//////////////////////////////////////////////////////////

First time setup

The first step to running the Seedcalc locally is downloading the code by cloning the repository:

git clone https://github.com/precision-sustainable-ag/dst-seedcalc.git

Then run:

npm install && npm run start