notes.txt

REMEMBER

1)Said it's much more useful to learn MUI than tailwind, cuz many of it's functionality (designing a Box comp) 
so better than using tailwind to make a div look like stuff 

2)In FLexbox, 
justify-content : space-between (SOO many times used)
                  flex-start
align-items : center

3) YOU NEED ICONS => https://mui.com/material-ui/material-icons/

4) Ctrl + Alt + UP / DOWN => multiple cursor up or DOWN

5) (JUST BACKSPACE ON div the both opening and closing tag will automatically be removed)
      <> <---------------------------- empty wrapper
        <DashboardBox  gridArea="a"></DashboardBox>
        <DashboardBox  gridArea="b"></DashboardBox>
        <DashboardBox  gridArea="c"></DashboardBox>
      </>

6) for AUTO IMPORTING USING INTELLISENSE :
  ( just BACKSPACE few letter on DashboardBo and wait for the drop down to come ):

  import DashboardBox from '@/components/DashboardBox'

7) You need to learn stuff from reading the DOCS <-------- MAKE IT A SKILL
   learning Recharts is better for a beginner. You can learn Nivo charts also. Both of theor Documentation are good
   But Recharts is much more accessible for beginner.
<-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

PROJECT LOGS

1)npm create vite@latest
named project as client 
React + Typescript
npm install


2)Redux dev tools chrome extension allows you to 
SEE the state in Redux Store ( many other state management lib don't have it)


3)npm i react-redux @reduxjs/toolkit
// this is out state management lib with react-redux 


4)npm i react-router-dom @mui/material @emotion/react @emotion/styled @mui-icons-material
@mui/material => gives all mui components


5)npm i -D @types/react-dom 
the -D means that we are installing a dev dependency
react-dom needs some different `types` so that we can use with Typescript


6)npm i -D eslint eslint-config-react-app
configuring eslint so we'll get shouted at every error we make


7)npm i -D @types/node


setting up an eslintrc.json as :
{
    "extends": "react-app"
}


8)declaring env varibales


including in paths in compilerOptions in tsconfig.json
    "paths" : {
      "@/*" : ["./src/*"]
    },  
so that on renaming the path such that it starts with '@' , if we ctrl+ click that path 
we'll be able to go to that file (in normal js it was easy but ts needs this to be configed  by us)


9)themes.ts in src generates all the themes we'll be using
generally we don't use just one color, we use many shades of that color i,e 100 - 900.
there is something called "design tokens" in  the designer space 
the dude explains everything in themes.ts pretty well

while confuguring mui ui setting in themes.ts : 
  // mui theme settings
  export const themeSettings = {
    palette: {
      primary: {
        ...tokens.primary,
        main: tokens.primary[500],
        light: tokens.primary[400],
      },

Notice that he is extending the theme capabilities of mui by 
using his own token (destructuring into "palette" of mui)

So he needed to config ts again in order to include this 


10)Then did App.tsx , created 2 routes - one for home page, another 
for predicitons page


11)Designing file and folder structure



<--------------------index.tsx------------------------->

12)index.tsx in scenes/navbar . tsrafce would fire a ts rafce snippet

13) Because we will create lot of <Box /> that has the contents inside it centers
    we created a FlexBetween component THAT IS JUST A BOX WITH justify-content : space-between 

14) MUI ICONS ICONS ICONS ICONS ICONS ICON => https://mui.com/material-ui/material-icons/
    but THERE IS SOME PROBLEM. (solved it by copying the package.json and running npm install) 

15) For normal react (or react-router-dom etc) comp. its' style={{}} and for MUI , its sx={{}} 

<---------------------------------------------------------->



16) Inside App.tsx :

            <Routes>
              <Route path="/" element={<div>dashboard page</div>} />
              <Route path="/predictions" element={<div>predictions page</div>} />
            </Routes>
    
    The dummy div is gonna be changed to real thing now. So inside scenes -> we make a dashboard folder ->
    inside which we create a index.tsx file. Notice that if a file is called index.tsx then on importing:

    `import Navbar from "@/scenes/dashboard";` <==== you don't need to add the extension



<------------------------------index.tsx in scene/Dashboard---------------------------->

17) THE DUDE EXPLAINS Grid : https://grid.malven.co (Learn basics)
    and the ABSOLUTE MASTERPIECE that is Grid-Template-area : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas (Learn basics)

    He has divided his dashboard entries as a grid of 10 "things" row-wise and 3 "things" column-wise.

    sx = {{
        gridTemplateColumns :"repeat(3, minmax(370px, 1fr))" , <====  WE'LL REPEAT COLUMNS 3 times and EACH COLUMN needs minimum 370px ()
        gridTemplateRows :"repeat(10, minmax(60px, 1fr))", <==== WE'LL REPEAT ROWS 10 times and EACH ROW needs minimum 60px (vertical units height)
        gridTemplateAreas : gridTemplateLargeScreens
    }}

    const isAboveMediumScreens = useMediaQuery("(min-width: 1200px)"); <=== A BUILT IN HOOK THAT MUI HAS,
                                                                            Returns a boolean wheather screen width is more than 1200 px

18) So now we made each of the DashboardBox appear RESPONSIVELY. Now since each Box in the Dashboard is same 
    we make it as a component.

    In component/DashboardBox.tsx is made (styling for A BOX in dashboard)                                                                 

<-------------------------------------------------------------------->




<--------------------------------Creating Rows for dealing with DashboardBox in each row------------------------------------>

19) It'll be too tedious to code out the functionality of the induvidual DashboardBox
    So we divide entire thing into 3 Rows => 1 + 1 + 1
                                             1 + 1 + 1
                                             1 + 1 + 2
      <Box .....props for styling.....>
        {/* Now we'll declare all the grid elements inside */}
        <DashboardBox  gridArea="a"></DashboardBox>
        <DashboardBox  gridArea="b"></DashboardBox>
        <DashboardBox  gridArea="c"></DashboardBox>
        <DashboardBox  gridArea="d"></DashboardBox>
        <DashboardBox  gridArea="e"></DashboardBox>
        <DashboardBox  gridArea="f"></DashboardBox>
        <DashboardBox  gridArea="g"></DashboardBox>
        <DashboardBox  gridArea="h"></DashboardBox>
        <DashboardBox  gridArea="i"></DashboardBox>
        <DashboardBox  gridArea="j"></DashboardBox>
    </Box>

in Row1.tsx :

////////////////////////////////////////////////IMPORTANT SHORTCUT NO.1 ---->
tsrafce and copy paste inside the wrapper div: (JUST BACKSPACE ON div the both opening and closing tag will automatically be removed)
      <>
        <DashboardBox  gridArea="a"></DashboardBox>
        <DashboardBox  gridArea="b"></DashboardBox>
        <DashboardBox  gridArea="c"></DashboardBox>
      </>
and similarly in the other two


////////////////////////////////////////////////IMPORTANT SHORTCUT NO.2 ---->
for AUTO IMPORTING USING INTELLISENSE :
  ( just BACKSPACE few letter on DashboardBo and wait for the drop down to come )
import DashboardBox from '@/components/DashboardBox'


////////////////////////////////////////////////IMPORTANT SHORTCUT NO.3 ---->
 Ctrl + Alt + UP / DOWN => multiple cursor up or DOWN
<-------------------------------------------------------------------->



ENTER TYPESCRIPT and REDUX TOOLKIT (State management library)
HEAVY BACKEND STUFF STARTS NOW
////////////////////////////////////////////////////////////////////////////////////////////////////////////



<-----------------------------state/api.ts--------------------------------------->

Till now we did not touch TS because we were doing the layout , Now we'll deal with data 
and from here on Typescript becomes really useful

20) doing API CALLS and getting the data , exporting hooks in api.ts

21) setting up STORES AND PROVIDERS FOR REDUX in main.tsx

22) setting up the Backend :
      creating server folder --> npm init -y (initialises npm packages for us)

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

SHORTCUT==============-----------===========>
23) npm i express body-parser cors dotenv helmet morgan mongoose mongoose-currency 

express -> framework for Node js to handle API
body-parser -> handle information coming from the body of the request
cors -> Cross Origin Resource Sharing (So you can call from a different URL)
dotenv -> in order to handle env variables
helmet -> API endpoint Security
morgan -> console loggin information every time we hit an endpoint 
mongoose -> an ORM used for MongoDB
mongoose-currency -> in order to deal with values that are monetary ,i.e currency

24) npm i -D nodemon (installing dev dependencies)

nodemon -> so that you dont have to restart the server every time you make any change

25) Create  a index.js inside server and begin importing stuff 
    BUT TO IMPORT STUFF IN JS , INSIDE package.json YOU NEED TO ADD THIS SOMEWHERE:

    "type" : "module"   (-both singular word , -if you are adding it in the end, no need of comma
                          for some reason, in json you can't do that , at the end just-in-case)

    inside scripts :
    "dev" : "nodemon index.js" (by npm run dev , now you can have nodemon run the server via index.js)

Write a console command of Hello World and run the server (npm run dev) to see if everything is fine

26) So now you need to go to MongoDB and set up an acc.
    In your Dashboard in MongoDB -> Click connect on the CLuster -> Connect your application
    -> Copy the URL and paste it in (newly created .env file)

    ALso keep a PORT = <whatever port you gave in .env of client where vite will fire the React app>

<-------------------------------------PROBLEM CONNECTING TO SERVER--------------------------->

27) Error: Invalid mongodb uri (Eventhough everything was correct)
    SOLUTION : https://www.npmjs.com/package/npm-check-updates seems like one of the dependencies
    were not UPDATED TO LATEST VERSION (HERE mongoose)

    => ncu -g (npm-check-updates all the dependencies globally)
    => ncu mongoose (After that the error was gone)

BUT ANOTHER ERROR : Error: querySrv ECONNREFUSED _mongodb._tcp.cluster0.jd3uha7.mongodb.net did not connect
  SOLUTION : I had to get the MONGO_URL for node verison 2.20 and later 
  https://www.mongodb.com/community/forums/t/querysrv-econnrefused/99869 
  
BUT NEW ERROR:  MongoNetworkError: connection 1 to 35.154.42.45:27017 closed did not connect
    SOLUTION :  In Sidebar of Dashboard-> Network Access -> Adding 0.0.0.0/0 to the whitelisted IP
    
    => npm run dev and VOILA 

    BUT READ THIS => https://stackoverflow.com/questions/60431996/mongooseerror-mongooseserverselectionerror-connection-monitor-to-52-6-250-2

   " On your MongoDB account, check the IP you choose to connect your application.
    If you start working on a initial IP and try to work using another IP address it won't work.
    In mongoDB:
    NetworkAccess/ (verify the IP you registered is the same than this your actually used). 
    You can select : Add IP address"

<--------------------------------------PROBLEM SOLVED!!!----------------------------------------------------->    

28) DATA MODELLING => That presentation of how the data is modelled across the app

29)Setting up Routes in index.js and creating routes/kpi.js


So in index.js -------------------------------------------------------------------------

import kpiRoutes from "./routes/kpi.js"; <-\
app.use("/kpi", kpiRoutes);<---------------/ We created ENTRY POINT FOR A ROUTE (exported from ./route/kpi.js )         


In kpi.js --------------------------------------------------------------------------------

// WE SET UP A ROUTE , in it's most basic form it is just this

import express
const router = express.Router();  <--------- A ROUTER !!!!

/* https://expressjs.com/en/guide/routing.html */

export default router;

THE BODY =>

router.get("/kpis", async (req, res) => {
  try {
    const kpis = await KPI.find(); <---------- WAITING TO GET KPI FROM our !!!DATABASE!!!<----. 
    res.status(200).json(kpis);                                                               |
  } catch (error) {                                                                           |
    res.status(404).json({ message: error.message });<---- Handling basic errors              |
  }                                                                                           |
});                                                                                           |
                                                                                              |
In order to get data from our MongoDB DATABASE , we use mongoose --> (ORM Object Document MAPPING)
{FYI:-  there are ORM Object Relational Mapping, which is the ODM equivalent for NOSQL DB } 

30)Setting up the model (DB Model : logical structure of a database)

The database schema is the structure of a database described in a formal language 
supported by the DBMS.

BOILERPLATE (Before build a schema just write this, almost same)------------------

import mongoose from "mongoose";
const Schema = mongoose.Schema;

const KPISchema = new Schema(
<BODY>
);

const KPI = mongoose.model("KPI",KPISchema);
export default KPI;


BODY--------------------------------------------------------------------------------

START READING FROM KPISchema (EVERYTHING IS COMMENTED THERE)

const KPISchema = new Schema(
  {
    totalProfit: {
      type: mongoose.Types.Currency,<------------------- mongoose currency allows us to do this 
      currency: "USD",
      get: (v) => v / 100,<----------------------------- mongoose for some reason multiplies val by 100 , so you need to divide it ? ( wierd , Read Doc and see what's up)
    },
    totalRevenue : {

    }
  }
)

31) If you check the data.js file , you'll understand that the data in it is 
    just like we made in our Schema

32) inside mongoDB connection in index.js

   // await mongoose.connect.db.dropDatabase();// <------------- Dropping any database that already exists (kinda like a CLEAR SCREEN)
    // KPI.insertMany(kpis);                    // <------------- Inserting kpis we exported from dummy data

Now the data is given to db in MongoDB you can see it in the dashboard
Database -> Cluster _ -> View Collection -> Tada!

33) In Frontend scene/dashboard/Row1.tsx 

(TURBO CONSOLE LOG => NEW EXTENSION !! 
ctrl + alt + L on the "thing" you wanna console log)

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: import.meta.env.VITE_BASE_URL }), //<--- URL TO which we make the API call
    reducerPath: "main",
    tagTypes: ["Kpis"],
    // Just 3 API CALLS
    endpoints: (build) => ({
        getKpis: build.query <void, void> ({
        query: () => "kpi/kpis/",
        providesTags: ["Kpis"],
        }), 
    }),

});
export const { useGetKpisQuery } = api;


<---------------------------------------- PROBLEMS ----------------------------------------------------------
34)  PROBLEM 1:  For some reason , the API CALL IS NOT MADE (HENCE THE UNDEFINED , and no call in networks)
     PROBLEM 2:  Is it something to do with the fact that our MONGO_URL was created from node ^2.2 
---> NOT YET SOLVED


35)  Go to Recharts documentation and cut and copy code for Line charts

            npm i recharts (lol you need to install recharts first)

36)  Made BoxHeader.tsx 
    Using Recharts to display our data