RasoiRun — Client

A lightweight React frontend for the RasoiRun food ordering demo. Built with Vite and modern React (hooks + context). This repo contains the client application that talks to the RasoiRun API to list foods, show details, and place orders.

Quick overview

• Tech: React, Vite, Axios, React Router
• Language: JavaScript (JSX)
• Styling: component-level CSS files + Bootstrap utility classes
• Dev environment: tested on Windows (PowerShell)

This README covers local setup, environment variables, common troubleshooting (images not appearing), and a short summary of recent UX improvements included in this branch.

Prerequisites

• Node.js (>= 16 recommended)
• npm (or pnpm/yarn if you prefer; instructions below use npm)

Environment

This project uses a Vite environment variable for the API base URL. Create a .env in the project root (or set the variable in your environment):

VITE_API_URL=http://localhost:8080/api

Make sure the URL points to your backend API. If your backend is hosted at the root (no /api suffix), set it accordingly.

Install & run (PowerShell)

Open PowerShell in the project root and run:

# install dependencies
npm install

# start dev server
npm run dev

# build for production
npm run build

# preview production build
npm run preview

Project structure (important files)

• index.html, vite.config.js — Vite entry and build config
• src/main.jsx — app bootstrap
• src/App.jsx — top-level router and layout
• src/context/StoreContext.jsx — global state (foodList, cart, auth token). The context now exposes loadingFoods and foodsError flags used by consumer components for loading/error UI.
• src/service/ — API wrappers (foodService.js, cartService.js, authService.js, orderService.js)
• src/components/ — reusable UI components (Menubar, FoodItem, FoodDisplay, Header, Login/Register, etc.)
• src/pages/ — route pages (Home, ExploreFood, FoodDetails, Contact, Cart, PlaceOrder, MyOrders)

UX / Recent changes & notes

These changes were added to improve reliability and user feedback:

• Loading state: StoreContext exposes loadingFoods and foodsError. FoodDisplay shows rotating loading messages and a spinner while food data loads.
• Image fallback: FoodItem uses an onError handler to display a small placeholder (inline SVG) when an image fails to load.
• Wake ping: to reduce cold-start delays on sleeping hosts, the client performs a short GET to the API root before fetching list data. Errors from this ping are ignored.
• Menu/Nav behavior: Menubar now derives its active state from the router location so client-side navigation shows the correct active tab and consistent blur/fixed styles.
• Contact page: full-height gradient background and a small credit block in the bottom-right.

Troubleshooting — images not showing

If images from the backend are not appearing in the UI, check the following:

1. VITE_API_URL: ensure VITE_API_URL is correctly set and points to the API that returns food objects with image URLs. In dev, this is commonly http://localhost:8080/api.
2. Absolute vs relative paths: the backend should return image URLs that are absolute or resolvable from the client. If the API returns relative paths, you may need to prefix them with the API host in the client.
3. CORS: inspect the browser console / network tab. If images are blocked due to CORS, enable proper CORS headers on the backend for those image endpoints.
4. Auth: if image endpoints require authentication, ensure the request includes the token or make the images publicly accessible.

Quick checks you can run in the browser devtools:

• Network tab: open the failing image request to see status code and response headers.
• Console: look for mixed-content or CORS errors.

Accessibility & ARIA

• FoodDisplay uses aria-live to announce loading messages for screen readers.
• Image elements have been given graceful fallbacks for broken images.

Helpful commands

PowerShell-flavored commands (project root):

# install dependencies
npm install

# start dev server
npm run dev

# build for production
npm run build

# preview production build
npm run preview

Backend

This client is designed to work with the RasoiRun backend built with Spring Boot and MongoDB. Expected notes:

• API base: the client reads VITE_API_URL (for example http://localhost:8080/api). The backend should expose REST endpoints under that base path.
• Data store: the backend uses MongoDB for persisting food items, orders, and user data.
• Running locally: start the Spring Boot application (e.g., with mvn spring-boot:run or from your IDE) and ensure MongoDB is available (local or containerized). Update VITE_API_URL if your backend has a different host/port or path.

If you want, I can add a short backend/ README template (or an example docker-compose.yml) describing how to run Spring Boot + MongoDB locally.

License

Specify your license here (e.g. MIT). Replace this line with a proper license file if needed.

---

If you'd like, I can also add a CONTRIBUTING.md, a short list of known issues, or CI setup (GitHub Actions) to build and lint on PRs.