Bistro Boss — Frontend (Vite + React)

Short description

• Bistro Boss is a React + Vite frontend for a restaurant application (menu, ordering, dashboard, payments, authentication).

Quick links

• Project entry: src/main.jsx
• Vite config: vite.config.js
• Firebase config: src/Firebase/Firebase.config.js
• Context provider: BistroContextApi — src/BistroContext/BistroContext.jsx
• Axios setups: useAxiosPublic, useAxiosSecure — src/Hooks/useAxiosPublic.jsx, src/Hooks/useAxiosSecure.jsx
• Key hooks: useBistro, useManu, useCart, useAdmin — src/Hooks/useBistro.jsx, src/Hooks/useManu.jsx, src/Hooks/useCart.jsx, src/Hooks/useAdmin.jsx
• Routing & guards: src/PrivateRoute/PrivateRoute.jsx, src/PrivateRoute/AdminRoute.jsx
• Dashboard layout: src/Layout/DashboardLayout.jsx
• Main layout: src/Layout/Layout.jsx

Requirements

• Node.js (recommend latest LTS)
• npm

Install and run

npm install
npm run dev

Available scripts (package.json)

• dev: vite (development server)
• build: vite build
• preview: vite preview
• lint: eslint .

Environment variables

• Copy .env.local (not committed) and populate values used across the app:
  • VITE_apiKey, VITE_authDomain, VITE_projectId, VITE_storageBucket, VITE_messagingSenderId, VITE_appId — used by Firebase (src/Firebase/Firebase.config.js)
  • VITE_image_api — image hosting key (used by image upload in src/Pages/AddItems/AddItem.jsx and src/Pages/UpdateItem/UpdateItem.jsx)
  • VITE_stripe_pk — Stripe publishable key (used in src/Pages/Payment/Payment.jsx)
  • BASE_PURL — backend base URL for axios instances (used in src/Hooks/useAxiosPublic.jsx and src/Hooks/useAxiosSecure.jsx)
  • BASE_DURL — alternate backend URL (present in .env.local)

Folder structure (high level)

• src/
  • App.jsx — simple app shell (src/App.jsx)
  • main.jsx — router + providers + routes (src/main.jsx)
  • Firebase/ — Firebase init (src/Firebase/Firebase.config.js)
  • BistroContext/ — auth context and token issuance (BistroContextApi) (src/BistroContext/BistroContext.jsx)
  • Hooks/ — custom hooks (see links above)
  • Layout/ — Layout.jsx, DashboardLayout.jsx (src/Layout/Layout.jsx, src/Layout/DashboardLayout.jsx)
  • Pages/ — all page components (Home, SignIn, SignUp, Dashboard pages, Payment, etc.)
  • SharedComponents/ — Navbar, Footer, FoodCard, ItemCover, SectionTitle, SocialLogin, etc.
  • assets/ — images and static assets
  • index.css — Tailwind entry (src/index.css)

Notable flows & integrations

• Authentication: Firebase Auth initialized in src/Firebase/Firebase.config.js; auth provider & token exchange implemented in BistroContextApi which posts to /jwt endpoint to receive a token stored in localStorage as access-token.
  • Context exports: createUser, userSignIn, userSignOut, user, loading referenced from src/BistroContext/BistroContext.jsx
• HTTP client:
  • Public axios: useAxiosPublic (baseURL = import.meta.env.BASE_PURL)
  • Secure axios: useAxiosSecure sets Authorization header from localStorage and handles 401/403 by signing out and redirecting to sign-in. See src/Hooks/useAxiosSecure.jsx
• Payment: Stripe is integrated in src/Pages/Payment/Payment.jsx and src/Pages/Payment/PaymentPage.jsx
• File uploads: Image uploads use imgbb (image hosting API) via VITE_image_api in add/update item pages.
• Admin / Private routes: PrivateRoute and AdminRoute components guard routes defined in src/main.jsx

Deployment

• Vercel configuration exists: vercel.json — adjust if backend deployed separately. The frontend is a Vite SPA; typical deployment is to Vercel or Netlify. Ensure environment vars are configured in the hosting dashboard.

Troubleshooting & notes

• .env local is gitignored (see .gitignore). Do not commit secret keys.
• Axios token header in useAxiosSecure contains a header value prefix "Beerer" — consider changing to "Bearer" if your backend expects the standard format.
• Some components use synchronous axios calls directly inside component bodies (e.g., src/Pages/AdminHome.jsx/AdminHome.jsx, src/Pages/UserHome/UserHome.jsx). Consider moving these into effects or React Query for consistent behavior and to avoid repeated calls.
• Loading states: PrivateRoute and AdminRoute render spinner markup but currently do not return it when loading is true. You may want to return the spinner JSX to avoid rendering children or redirect prematurely. See src/PrivateRoute/PrivateRoute.jsx and src/PrivateRoute/AdminRoute.jsx.

Developer utilities

• ESLint config: eslint.config.js
• Tailwind + DaisyUI: tailwind.config.js, postcss.config.js and src/index.css

Helpful files (quick access)

• Routes and app bootstrapping: src/main.jsx
• Auth context: src/BistroContext/BistroContext.jsx (BistroContextApi)
• Axios helpers: src/Hooks/useAxiosPublic.jsx, src/Hooks/useAxiosSecure.jsx
• Private / Admin guards: src/PrivateRoute/PrivateRoute.jsx, src/PrivateRoute/AdminRoute.jsx
• Dashboard layout: src/Layout/DashboardLayout.jsx
• Payment: src/Pages/Payment/Payment.jsx, src/Pages/Payment/PaymentPage.jsx

Contributing

• Follow existing code patterns (React + hooks + React Query + axios)
• Run npm run lint and fix issues before submitting PR.

License

• Project license not specified.

If you want, I can:

• Update README with architecture diagram or sequence flows.
• Create a CONTRIBUTING.md or update components to address the "Beerer" header and loading spinner returns.