Archived version of Nimbus 2022ß

Nimbus Web App

up and running

Requirements
- nodejs,npm
  - install nvm curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
  - install node & npm nvm install node
- pnpm sudo npm i -g pnpm
pnpm install
npm start

Development

bundler and bootstrapped with - vite
package manager - pnpm -- to save disk space
Library - React
Global State Management - Redux ( redux-toolkit ) /src/store/ Queries State Management - react-query

VsCode Extentions

Prettier
Eslint
GitLens
Material Icons (*optional)

Network Requests model

Layer 4 - Use react-query hooks in components
Layer 3 - define react-query hooks in src/hooks/api
Layer 2 - fetcher functions src/services/api
Layer 1 - request/fetch src/services/api/request.js

Styling Guideline

https://github.com/airbnb/javascript/tree/master/react

src/components/
- ./atoms/ - small components which does not depend on any other component.
- ./molecules - components which use atoms.
- ./organisms - coponents which use atoms and molecules

every category folder has an index.js file which exports all the components in that folder which are intrun expoterd by the index.js file in outer folder. components will always be imported like import { SomeComponent } from '/components not like import SomeComponent from '/components/atoms/SomeComponents

src/pages/ page level containers which are accesible from a seperate route.

Component Structure

every component has a folder named exactly as the component name. Component names are in PascalCase.

SomeComponent/
- SomeComponent.jsx
- SomeComponent.scss

// SomeComponent.jsx
import React from 'react';

export default function SomeComponent({ prop1, prop2 }) {
  // STATES & REFS
  // EFFECTS
  // FUNCTIONS
  // PRE-RENDER
  // RENDER
  return (
    <div className="some-component">
      {/* classname should be same as component name in - style. to avoid css conflicts  */}
      <div className="abc">Some</div>
      <div className="xyz-q">Component</div>
    </div>
  );
}

// SomeComponent.scss
// everything starts from the outermost main component class
.some-component {
  // every other css goes here in the same nested form as in html
  .abc {
    display: block;
    @include respond(phone) {
      display: none;
    }
  }

  .xyz-q {
    font-size: 2em;
  }
}

pixonoids/Nimbus-2k22