client

-------------
npm create vite@latest simple-firebase -- --template react
npm install react-router-dom localforage match-sorter sort-by

---install-firebase---
npm install firebase

--------tailwind-------

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
---------then--------------
--tailwind.config.js--
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
----------then-------------
./src/index.css
-------
@tailwind base;
@tailwind components;
@tailwind utilities;
----------------------------------
daisy-UI---
npm i -D daisyui

module.exports = {
//...
plugins: [require("daisyui")],
}

--------------------------------
prop validation----------
npm i prop-types

import PropTypes from 'prop-types';

const Bottle = ({ bottle, handleAddToCart }) => {

console.log(bottle);
const { img, name, price } = bottle;
return (
<div className="bottle">
<h3>Bottle: {name}</h3>
<img src={img} alt="" />
<p>Price: {price}</p>
<button onClick={() => handleAddToCart(bottle)}>Purchase</button>

</div>
);
};

Bottle.propTypes = {
bottle: PropTypes.object.isRequired
}

Bottle.propTypes = {
 bottle: PropTypes.object.isRequired,
handleAddToCart: PropTypes.func.isRequired
}

---------------//------------
React _icon
npm install react-icons --save

=----------------===========---------
Sweet alart 2
npm install sweetalert2

rafcp

--------------------
solve eslintrc error
env: { browser: true, node: true, es2020: true },

rules: {
'react-refresh/only-export-components': 'warn',
"react/prop-types": "off"
},

------------------

Server
---------
cd \projects
mkdir folder-name
cd folder-name
npm init -y

npm install -g nodemon (1st Time)

npm i express cors mongodb dotenv jsonwebtoken cookie-parser

nodemon index.js