An interactive, bilingual web application designed to help shoppers understand different cuts of beef, their characteristics, and how best to cook them. Features an AI-powered chef that generates custom recipes on the fly using Google's Gemini API.
- Interactive Cow Map: Visually select different parts of the cow to learn about specific cuts.
- Detailed Profiles: View bilingual (English/Chinese) descriptions, price levels, and common dishes for every cut.
- Smart Metrics: At-a-glance visualization of tenderness, fat content, and cooking difficulty.
- AI Chef: Generate custom Western or Asian style recipes for any selected cut using the Gemini 3 Flash model.
- Responsive Design: Built with Tailwind CSS to work seamlessly on mobile and desktop.
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS, Lucide React (Icons)
- AI Integration: Google GenAI SDK (
@google/genai) - Build & Deploy: GitHub Actions, GitHub Pages
- Node.js (v20 or higher recommended)
- A Google Gemini API Key
-
Clone the repository
git clone https://github.com/your-username/beef-guide.git cd beef-guide -
Install dependencies
npm install
-
Configure Environment Variables Create a
.envfile in the root directory and add your Gemini API Key:API_KEY=your_google_gemini_api_key_here
-
Run the development server
npm run dev
-
Build for production
npm run build
This project is configured to automatically deploy to GitHub Pages using GitHub Actions.
- Go to your repository Settings > Secrets and variables > Actions.
- Create a
New repository secretnamedAPI_KEYand paste your Google Gemini API key. - Push changes to the
mainbranch. - The workflow in
.github/workflows/deploy.ymlwill build and deploy the site.
This project is licensed under the MIT License.