Clarify

push changes

git add .
git commit -m "caption"
git push

Templates

Client

github

• create new github repo.

• clone repo with ssh url.

• use the bundler vite to make your local repo a react template.

  npm create vite@latest
  

• create .gitignore file with:

  dist
  node_modules
  .env
  

• push changes.

firebase deploy

• create firebase project - firebase console.

  • in creation dialog you can uncheck analytics option.
  • enable in authentication:
    • email/password.
    • google provider

• create in firebase project: “web client app”.

• install in your machine firebase CLI with npm (if you didn’t already)

  npm install -g firebase-tools
  

• login via firebase SDK:

  firebase login
  

  a browser suppose to open signin dialog.

• initialize firebase by running:

  firebase init
  

  in dialog:

  • choose hosting with github actions.
  • use existing project.
  • choose your client github repo.
  • set public directory as dist for vite bundler.
  • set up automatic builds: YES!
  • choose your client github repo.
  • set up workflow for every deploy: YES!

• push changes.

Server

• create github repo.

• clone repo with ssh url.

• make local rpo a minimal express server with cors.

• in package.json add in scripts.

  {
      "start": "node index.js"
  }
  

• create .gitignore with:

  node_modules
  .env
  

• push changes.

• deploy your server github repo in cyclic.

Test Environment Variables

Server

• install dotenv:

  npm i dotenv
  

• in index.js add:

  require('dotenv').config();
  

• create .env

• add in index.js:

  app.get('/test', (req, res) => res.send(process.env.NISIM));
  

• push changes.

• in local environment.

  • in .env add:

    NISIM=shlomo
    

  • run server in your machine.

  • insert in browser: http://localhost:5000/test

• deployment

  • in cyclic “Variables” tab add variable NISIM with value david.

  • insert in browser: https://your-cyclic-address/test.

DB connection

• add mongo url to .env and .github workfow.
• add connect execution.
• read a collection and send it back to in testing endpoint.
• push changes.

Client

• in local environment

  • create .env and add:

  VITE_NISIM=shlomo
  

  • add in page:

    <h1>{import.meta.env.VITE_NISIM}</h1>
    

  • run client in your machine:

    npm run dev
    

  • insert in browser: http://localhost:5173/.

  • look for the title: shlomo.

• in deployment

  • in .github/workflows/firebase-hosting-merge.yml add after jobs:

    env:
      VITE_NISIM: david
    

  • push changes.

  • insert in browser: https://your-firebase-address/.

  • look for the title: david.

Project Content

DB

• try reading and inserting entries in your Atlas db.
• define ERD.

Server

• create an express server.

• create schemes in mongoose.

• create sample data in sample.json like:

  {
    "products": [
      { "id": 1, "name": "eggs" },
      { "id": 2, "name": "bread" }
    ],
    "users": [
      { "id": 1, "name": "nisim" },
      { "id": 2, "name": "shlomo" }
    ]
  }
  

• develop a reset script.

• create all CRUD endpoints for your entities - best practices.

• use firebase-admin package for authentication.

Client

• choose css strategy.

  my favourites:

  • utility classes:
    • tailwind - config in vite
    • bootstrap - config in vite
  • tailwind
    • mantine
    • material UI

• create components templates for common pages and define routes for them with react-router.

  for example:

  Route	Page
  /	home
  /paroducts/:id	single product
  /products	catalog
  /cart	shopping cart
  /login	login
  /contact	contact us
  /about	about us

• develop a simple home page.

• create a navbar with a menu.

• develop your catalog board.

• add controls to allow common sorting and filtering of the catalog.

  note: before implementing you should decide who will filter and sort - the client or the server.

• use redux.

• implement shopping cart page.

• for loading use react-loading-skeleton

• for the payment process use stripe - youtube tutorial