189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275 - Always run table creation before querying
276
2773. **React Configuration:**
278 - All React dependencies must be pinned to 18.2.0
279 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280 - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext, createContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "react";
3import { useNavigate, useParams } from "react-router";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { createContext, useState } from "react";
3import { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from "react-router";
4import { useLocalStorage } from "react-use";
5import { useUser } from "../hooks/useUser.tsx";
6import { ChatRoute } from "./ChatRoute.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function ProductPage({ onBuyNow }) {
330 <p class="mb-4">A brief description of the project and your role in it. Highlight key features and technologies used.</p>
331 <div class="flex flex-wrap gap-2 mb-4">
332 <span class="skill-tag text-xs px-3 py-1 rounded-full">React</span>
333 <span class="skill-tag text-xs px-3 py-1 rounded-full">Node.js</span>
334 <span class="skill-tag text-xs px-3 py-1 rounded-full">MongoDB</span>
385 <div class="progress-fill h-2.5 rounded-full" style="width: 80%"></div>
386 </div>
387 <span class="ml-2 min-w-[60px] text-right">React</span>
388 </li>
389 <li class="flex items-center">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface FooterProps {
10}
11
12const Footer: React.FC<FooterProps> = ({ projectInfo }) => {
13 return (
14 <footer className="bg-gray-800 text-white py-8">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Cart } from "../../shared/types";
4
11}
12
13const CartSidebar: React.FC<CartSidebarProps> = ({
14 cart,
15 isOpen,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { Product } from "../../shared/types";
4
10}
11
12const ProductDetail: React.FC<ProductDetailProps> = ({
13 product,
14 onClose,
