1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4interface User {
19 const [error, setError] = useState<string | null>(null);
20
21 const handleSubmit = async (e: React.FormEvent) => {
22 e.preventDefault();
23
26
27- **Database**:[Val Town SQLite](https://docs.val.town/std/sqlite/) for storing users, sessions, and magic link tokens
28- **Frontend**: React with Tailwind CSS
29- **Backend**: Hono.js for API routes and middleware
30- **Authentication**: Built by following the [Lucia guide](https://lucia-next.pages.dev/)
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4interface LoginFormProps {
11 const [emailSent, setEmailSent] = useState(false);
12
13 const handleSubmit = async (e: React.FormEvent) => {
14 e.preventDefault();
15
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { LoginForm } from "./LoginForm.tsx";
4import { UserProfile } from "./UserProfile.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { Recipe } from "../../shared/types.ts";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { Recipe, ShoppingList } from "../../shared/types.ts";
4
27## Tech Stack
28
29- **Frontend**: React 18.2.0 with TypeScript, TailwindCSS
30- **Backend**: Hono API framework with TypeScript
31- **Database**: SQLite with normalized schema (recipes + ingredients tables)
135
136### Frontend Architecture
137- Single-page React application with TypeScript
138- Component-based architecture with clear separation of concerns
139- Mobile-first responsive design
170- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
171- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
172- **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 */`
173- Ensure all React dependencies and sub-dependencies are pinned to the same version
174- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
175
257 - Always run table creation before querying
258
2593. **React Configuration:**
260 - All React dependencies must be pinned to 18.2.0
261 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
262 - Rendering issues often come from mismatched React versions
263
2644. **File Handling:**
369
370 <div class="card is-visible">
371 <h3 class="card-title">Calendario React Interactivo</h3>
372 <div class="card-description">
373 Un calendario interactivo desarrollado con React, Moment y SCSS en
374 CodePen. Diseñado para gestionar eventos y tareas diarias con una
375 interfaz moderna y atractiva, perfecto para aplicaciones web
399 <a
400 class="trigger-hover"
401 href="https://monchovarela.es/ideas/calendario-react-interactivo"
402 title="Ir a Calendario React Interactivo"
403 aria-label="Ir a Calendario React Interactivo"
404 >Ver mas...</a>
405 </div>
