diff --git a/README.md b/README.md new file mode 100644 index 0000000..debcba7 --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# find-addis + +**Short description:** find-addis is a small React + Express + MongoDB application to discover and review restaurants. The repo contains a `client` (React + Vite) and a `server` (Express + MongoDB) folder. + +--- + +## ⚙️ Structure + +- `client/` — React frontend (Vite) +- `server/` — Express API server (MongoDB) + +--- + +## 🔧 Quick start + +Prerequisites + +- Node 18+ / npm or yarn +- MongoDB (local or Atlas) + +Install + +```bash +# from repository root +npm install +# or install separately under each subfolder +cd client && npm install +cd ../server && npm install +``` + +Development + +Run both services concurrently (recommended) + +```bash +# from repository root (uses npm workspaces + concurrently) +npm install +npm run dev +``` + +Run individually (alternatives) + +```bash +# run server in dev (nodemon) +cd server && npm run dev +# run client in dev (Vite) +cd client && npm run dev +``` + +Production (build & serve frontend + run server) + +```bash +# build frontend +cd client && npm run build +# serve client/build with any static file server (Nginx, serve, etc.) or configure server to serve static files +# run server +cd server && npm start +``` + +--- + +## 📚 Contributing & Notes + +- Follow the existing code style and ESLint in `client/` (use `npm run lint`). +- If you add new env vars, document them in `server/.env.example` (see `server/README.md`). + +--- + +> For more details about usage, roadmap and endpoints, see `client/README.md` and `server/README.md`. diff --git a/client/README.md b/client/README.md old mode 100755 new mode 100644 index b31baa6..a78d0b3 --- a/client/README.md +++ b/client/README.md @@ -1,74 +1,72 @@ -# FindAddis +# Client (React + Vite) — find-addis (Project README) -A small React + Vite project with an Express + MongoDB backend. This README describes how to run the app locally. +**Purpose:** This file documents how to run and build the frontend for the find-addis project. The app consumes the `find-addis` API (default `http://localhost:3000/api`). -## Prerequisites -- Node.js (16+ recommended) -- npm -- MongoDB (local `mongod`) or a MongoDB Atlas connection string +--- -## Run locally (Frontend + Backend) +## Functional Highlights -1) Frontend (run from project root): +- Browse restaurants, view details, filter by category/rating. +- Users: signup/login, add favorites, write reviews. +- Owners: signup/login, add restaurants, manage own restaurants. -```bash -cd "C:\Users\PC\Downloads\ReactProject-zip\ReactProject\FindAddis" -npm install -npm run dev -``` +--- -Vite will print a local URL (e.g. `http://localhost:5173` or another available port). +## How to run (dev) -2) Backend (in a separate terminal): +1. Install ```bash -cd backend +cd client npm install -node server.js ``` -The backend defaults to port `5000` and uses the `MONGO_URI` environment variable to connect to MongoDB. - -Create `backend/.env` (already added in this repo) with values like: +2. Start dev server +```bash +npm run dev ``` -MONGO_URI=mongodb://localhost:27017/findaddis -PORT=5000 -``` -3) Seed sample data (optional): +3. Open the app at the URL printed by Vite (usually `http://localhost:5173`). + +--- + +## Build & Preview (production) ```bash -curl http://localhost:5000/api/seed +npm run build +npm run preview # or npm start ``` -4) Verify: -- Restaurants API: `http://localhost:5000/api/restaurants` -- Frontend: visit the Vite URL printed by `npm run dev`. +--- + +## Environment configuration + +- Recommended: add `VITE_API_URL` to `.env` to avoid hard-coded `http://localhost:3000` strings. + +Example `.env` -## Notes -- Bootstrap is included and used sparingly for Navbar, Buttons, Forms and Grid. -- If MongoDB is not running locally, replace `MONGO_URI` in `backend/.env` with your Atlas connection string. -- Do not commit secrets. `backend/.env` in this repository should be replaced with safe values before sharing publicly. +``` +VITE_API_URL="http://localhost:3000" +``` -## Development tips -- To enable automatic backend reloads, install `nodemon` and run `npx nodemon server.js` from the `backend` folder. -- Linting: `npm run lint` (configured in the root `package.json`). +--- -If you want, I can add a GitHub Actions workflow to run tests/lint on push. -# React + Vite +## Linting -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +```bash +npm run lint +``` -Currently, two official plugins are available: +--- -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +--- -## React Compiler +## Configuration hygiene -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +- Some files reference the API base URL directly (for example, `http://localhost:3000`). For production, centralize the base URL using `VITE_API_URL` and an HTTP client helper (see suggested `src/utils/api.js` above). +- Images are sent as base64; keep payloads within the server limit (default `5MB`) or use dedicated storage (e.g., S3 or Cloudinary) for large media. -## Expanding the ESLint configuration +--- -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +If you'd like, I can open a PR to replace the remaining direct API calls with the centralized helper and add `VITE_API_URL` to the repository's environment templates. diff --git a/client/src/App.jsx b/client/src/App.jsx index 4bcd35b..190f90a 100755 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -11,6 +11,7 @@ import SearchResultsPage from "./pages/SearchResultsPage"; import WriteReviewPage from "./pages/WriteReviewPage"; import Login from "./pages/Login"; import OwnerLoginPage from "./pages/OwnerLoginPage" +import OwnerDashboard from "./pages/OwnerDashboard"; import Signup from "./pages/Signup"; import OwnerSignUp from "./pages/OwnerSignup"; import UserProfilePage from "./pages/UserProfilePage"; @@ -46,6 +47,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/client/src/components/home/FeaturedCard.jsx b/client/src/components/home/FeaturedCard.jsx index 4e5422f..5aabf20 100755 --- a/client/src/components/home/FeaturedCard.jsx +++ b/client/src/components/home/FeaturedCard.jsx @@ -11,13 +11,11 @@ import TomocaImg from '../../assets/tomoca.png'; import Placeholder from "../../assets/addis-cafe.jpg"; -function FeaturedCard({ restaurant }) { +function FeaturedCard({ restaurant, showDeleteButton }) { - const { toggleFavorite, isFavorite } = useContext(RestaurantsContext); + const { toggleFavorite, isFavorite, deleteRestaurant } = useContext(RestaurantsContext); const fav = isFavorite ? isFavorite(restaurant._id) : false; - // const inputRef = useRef(null); - // const [uploading, setUploading] = useState(false); // Default images for known restaurants const defaults = { @@ -80,6 +78,8 @@ function FeaturedCard({ restaurant }) {
{restaurant.address &&
{restaurant.address}
} View + {showDeleteButton && } +
diff --git a/client/src/components/layout/Navbar.jsx b/client/src/components/layout/Navbar.jsx index f6fc4a9..95f9355 100755 --- a/client/src/components/layout/Navbar.jsx +++ b/client/src/components/layout/Navbar.jsx @@ -41,7 +41,6 @@ function Navbar({ onSearch }) {