SolidJS frontend development for a food diary/nutrition tracking app with Auth0, GraphQL, and TailwindCSS
Development guidelines for building and maintaining a SolidJS-based food diary/nutrition tracking application.
This is a SolidJS frontend application using TypeScript, Vite, TailwindCSS, and Auth0 authentication with a GraphQL (Hasura) backend.
**Core Technologies:**
```
src/
├── App.tsx # Main application component with auth wrapper
├── index.tsx # Entry point with route definitions
├── Api.ts # GraphQL API client and type definitions
├── Auth0.ts # Auth0 authentication context
├── *.tsx # Page and UI components
├── *.test.ts # Test files
├── index.css # Global styles
└── assets/ # Static assets
```
**Use SolidJS reactive primitives instead of React hooks:**
**Use SolidJS components:**
**Example:**
```typescript
import type { Component } from "solid-js";
import { createSignal, Show } from "solid-js";
const MyComponent: Component = () => {
const [count, setCount] = createSignal(0);
return (
<div class="p-4">
<Show when={count() > 0} fallback={<p>No items</p>}>
<p>Count: {count()}</p>
</Show>
</div>
);
};
```
**Backend:** Hasura GraphQL Engine
**Conventions:**
**Example:**
```typescript
export async function createEntry(
accessToken: string,
entry: { date: string; calories: number }
) {
const query = `
mutation CreateEntry($date: date!, $calories: Int!) {
insert_diary_entry_one(object: {
date: $date,
calories: $calories
}) {
id
date
calories
}
}
`;
const response = await fetch("/api/v1/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify({
query,
variables: objectToSnakeCaseKeys(entry),
}),
});
return response.json();
}
```
**Test file conventions:**
**Critical: Never mock `fetch` directly**
**Example:**
```typescript
import { http, HttpResponse } from "msw";
import { server } from "./test-setup";
import { describe, it, expect } from "vitest";
describe("API", () => {
it("should fetch entries", async () => {
server.use(
http.post("/api/v1/graphql", () => {
return HttpResponse.json({
data: {
diary_entry: [
{ id: 1, date: "2024-01-01", calories: 2000 }
]
}
});
})
);
const result = await fetchEntries(mockToken);
expect(result.data.diary_entry).toHaveLength(1);
});
});
```
Before committing changes, ensure all automated checks pass:
1. **TypeScript Check:** `npm run tsc` - No errors or warnings
2. **Prettier Check:** Run prettier for consistent formatting
3. **Unit Tests:** `npm test` - All tests must pass
4. **Acceptance Tests:** Run acceptance tests - All must pass
These checks must pass before any pull request is merged.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/food-diary-frontend-development/raw