1. Dependencies

  1. Appwrite - using BAAS backend as a service
  2. Redux toolkit
  3. Router-dom
  4. tinymce - -text editor that allows users to create formatted content link
  5. html-react-parser parses html output to show on display link
  6. react-hook-form validation form lib link
npm i @reduxjs/toolkit react-redux react-router-dom appwrite @tinymce/tinymce-react html-react-parser react-hook-form

"dependencies": {
    "@reduxjs/toolkit": "^2.8.2",
    "@tinymce/tinymce-react": "^6.2.1",
    "appwrite": "^18.1.1",
    "html-react-parser": "^5.2.5",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.57.0",
    "react-redux": "^9.2.0",
    "react-router-dom": "^7.6.2"
  },

env var we need for this project

VITE_APPWRITE_URL=""
VITE_APPWRITE_PROJECT_ID=""
VITE_APPWRITE_DATABASE_ID=""
VITE_APPWRITE_COLLECTION_ID=""
VITE_APPWRITE_BUCKET_ID=""
Question

why we use VITE prefix before any var name in .env?
the reason is if we use VITE prefix before the var name in env then only vite compiler will allow me to access it without it the if u try to get the env var it will show access denied
in react we get the env var in any file by process.env.varname
but in vite this method dosent work we need to write import.meta.env.varname

conf.js