Cookbook

A React-based web application that presents linguistics concepts and mini-projects in the form of "recipes" for a college-level English linguistics course.

Features

• Recipe-based learning experience
• Dynamic content loading from Google Sheets (one sheet tab per recipe)
• Responsive and accessible design
• Modern UI with Tailwind CSS

Prerequisites

• Node.js (v18 or higher)
• npm (v7 or higher)
• Google Sheets API credentials

Setup

1. Clone the repository

2. Install dependencies:

   npm install

3. Create a .env file in the root directory with the following variables:

   VITE_GOOGLE_SPREADSHEET_ID=your_spreadsheet_id
   VITE_GOOGLE_API_KEY=your_api_key
   

4. Set up your Google Sheets:

   • Create a new Google Spreadsheet
   • For each recipe, create a new sheet/tab. The tab name will be used as the recipe's unique id.
   • Each tab should have the following columns in the first row:

     title | description | benefits | ingredients | procedures | steps | duration | category
     

   • The second row should contain the data for that recipe.
   • Share the spreadsheet publicly for reading.

5. Start the development server:

   npm run dev

Project Structure

src/
  ├── components/     # Reusable UI components
  ├── pages/          # Page components
  ├── services/       # API and data services
  ├── types/          # TypeScript type definitions
  └── utils/          # Utility functions

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request