M1 and M2 code

.github/workflows/ci.yml

@@ -0,0 +1,126 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+defaults:
+  run:
+    shell: bash
+
+env:
+  NODE_VERSION: "20"
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ci
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [lint, test]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build/
+
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build -- --base /${{ github.event.repository.name }}/
+
+      - name: SPA fallback for GitHub Pages
+        run: cp build/index.html build/404.html
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build/
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Vite
+.vite
+*.local

README.md

@@ -1,2 +1,194 @@
-# AI-Assisted-Coding
-Applied AI Assisted Coding Course on Pluralsight by Adhithi Ravichandran
+# Bethany's Pie Shop - Full Stack Application
+
+A modern full-stack e-commerce application for a pie shop, built with React + TypeScript frontend and Express.js backend.
+
+## 🚀 Features
+
+- **React 19** with TypeScript for type safety
+- **Vite** for fast development and building
+- **Express.js** backend with RESTful API
+- **React Router** for client-side navigation
+- **Context API** for global state management
+- **Custom Hooks** for data fetching and cart management
+- **Responsive Design** with modern CSS
+- **Component-based Architecture** for maintainability
+
+## 📁 Project Structure
+
+```
+├── server/              # Backend Express.js server
+│   ├── server.js        # Server entry point
+│   ├── app.js           # Express app configuration
+│   ├── config/          # Configuration files
+│   │   ├── constants.js # App constants and settings
+│   │   └── swagger.js   # Swagger/OpenAPI documentation (optional)
+│   ├── routes/          # API route handlers
+│   │   └── api.js      # Pie API routes
+│   ├── middleware/      # Express middleware
+│   │   └── security.js # Security headers (Helmet)
+│   ├── models/          # Data models
+│   │   └── pies.js     # Pies data
+│   └── utils/           # Utility functions
+│       └── piesHelper.js # Pie helper functions
+│
+├── src/                 # Frontend React application
+│   ├── components/      # Reusable UI components
+│   │   ├── PieCard/    # Individual pie display
+│   │   ├── Cart/       # Cart functionality
+│   │   ├── Header/     # Navigation header
+│   │   ├── Hero/       # Hero carousel
+│   │   ├── SearchBar/  # Search functionality
+│   │   └── Footer/     # Application footer
+│   ├── contexts/        # React Context providers
+│   │   └── CartContext.tsx # Global cart state
+│   ├── hooks/           # Custom React hooks
+│   │   ├── useCart.ts  # Cart management hook
+│   │   └── usePies.ts  # Pie data fetching hooks
+│   ├── pages/           # Page components
+│   │   ├── HomePage.tsx    # Home page with hero and monthly pies
+│   │   ├── CategoryPage.tsx # Category-specific pages
+│   │   └── CartPage.tsx    # Full cart page
+│   ├── services/        # API service layer
+│   │   └── pieService.ts  # Pie API calls
+│   ├── types/           # TypeScript type definitions
+│   │   └── pie.ts      # Pie, Cart, and API types
+│   └── utils/           # Utility functions
+│       └── cartStorage.ts # Cart storage utilities
+│
+├── public/              # Static assets
+└── package.json         # Project dependencies and scripts
+```
+
+## 🛠️ Available Scripts
+
+- `npm run dev` - Start Vite development server (frontend)
+- `npm start` - Start Express backend server
+- `npm run start:dev` - Start backend server with auto-reload (nodemon)
+- `npm run build` - Build frontend for production
+- `npm run preview` - Preview production build
+- `npm test` - Run tests with Vitest
+
+## 🔧 Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm or yarn
+
+### Installation
+
+```bash
+npm install
+```
+
+### Running the Application
+
+You need to run both servers in separate terminals:
+
+**Terminal 1 - Backend Server:**
+
+```bash
+npm start
+# or for auto-reload on changes:
+npm run start:dev
+```
+
+Backend runs on `http://localhost:4000`
+
+**Terminal 2 - Frontend (Vite):**
+
+```bash
+npm run dev
+```
+
+Frontend runs on `http://localhost:3000`
+
+The Vite dev server is configured to proxy `/api` requests to the backend on port 4000.
+
+**Open your browser** to `http://localhost:3000`
+
+## 🔗 API Endpoints
+
+The backend provides the following REST API endpoints:
+
+- `GET /api/pies` - Fetch all pies
+- `GET /api/pies?category={category}` - Fetch pies by category (seasonal, fruit, cheesecake)
+- `GET /api/pies/:id` - Get a specific pie by ID
+- `GET /api/pies-of-the-month` - Fetch monthly featured pies
+
+### Example API Calls
+
+```bash
+# Get all pies
+curl http://localhost:4000/api/pies
+
+# Get fruit pies only
+curl http://localhost:4000/api/pies?category=fruit
+
+# Get a specific pie
+curl http://localhost:4000/api/pies/f1
+
+# Get monthly featured pies
+curl http://localhost:4000/api/pies-of-the-month
+```
+
+## 🎨 Key Components
+
+- **PieCard**: Displays individual pie information with add to cart functionality
+- **Cart**: Modal cart with item management (add, remove, update quantities)
+- **Hero**: Auto-advancing carousel showcasing featured pies
+- **SearchBar**: Real-time search functionality
+- **Header**: Navigation with cart preview and item count
+
+## 🔄 State Management
+
+- **Cart Context**: Global cart state using React Context API
+- **Custom Hooks**:
+  - `useCart` - Cart management (add, remove, update items)
+  - `usePies` - Fetch pies by category
+  - `useMonthlyPies` - Fetch featured monthly pies
+- **Local Storage**: Persistent cart data across browser sessions
+- **Cross-tab Sync**: Cart updates synchronized across browser tabs
+
+## 📱 Responsive Design
+
+- Mobile-first approach
+- Grid layouts for pie cards
+- Responsive navigation
+- Touch-friendly interactions
+
+## 🛡️ Security
+
+- **Helmet.js** for security headers (XSS protection, content security policy, etc.)
+- **Input validation** on API endpoints (category parameter validation)
+- **Error handling** with proper HTTP status codes
+
+## 🧪 Testing
+
+Tests are configured with Vitest. Run tests with:
+
+```bash
+npm test
+```
+
+## 📝 Tech Stack
+
+**Frontend:**
+
+- React 19
+- TypeScript
+- Vite
+- React Router
+- Axios
+
+**Backend:**
+
+- Express.js
+- Node.js
+- Helmet (security)
+
+**Development:**
+
+- Vitest (testing)
+- Nodemon (auto-reload)
+- TypeScript