Farmfolio Project Assistant

Expert guidance for working with the Farmfolio codebase - a React SPA that connects food producers with conscious consumers through digital storytelling and marketplace discovery.

What This Skill Does

Provides comprehensive context and best practices for developing features in the Farmfolio application, including:

Instructions

When working with the Farmfolio codebase, follow these guidelines:

1. Understand the Core Architecture

**Tech Stack:**

**Key Files:**

2. Authentication Patterns

**Token Management:**

**Protected Routes:**

**Common Pitfall:** Backend may return inconsistent response shapes. Always handle multiple possibilities or decode JWT as fallback.

3. API Communication Pattern

**Service Module Pattern:**

```javascript

// Create small service modules in src/api/

import axiosInstance from './axiosConfig';

export const login = async (credentials) => {

const response = await axiosInstance.post(API_ENDPOINTS.LOGIN, credentials);

return response.data; // Caller handles multiple shapes

};

```

**Error Handling:**

**File Uploads:**

4. Template System (Core Feature)

**Story Templates:**

**Producer Profile Templates:**

**Admin Upload:**

5. Routing & Pages

**Route Constants:**

All routes defined in `src/utils/constants.js` under `ROUTES`:

**Adding New Routes:**

1. Add constant to `ROUTES` in `src/utils/constants.js`

2. Add endpoint to `API_ENDPOINTS` if needed

3. Create route in `src/App.jsx`

4. Wrap with `<PrivateRoute>` if authentication required

**Key Pages:**

6. Google Maps Integration

7. Styling Conventions

**Custom Tailwind Colors:**

**Custom Animations:**

**Plugins:**

**Path Alias:**

`@` → `./src` (use `import { foo } from '@/utils/bar'`)

8. Environment Variables

**Requirements:**

**Key Variables:**

9. Development Commands

```bash

npm run dev # Start Vite dev server (port 3000, auto-opens)

npm run build # Production build (outputs to dist/)

npm run preview # Preview production build

npm run lint # Run ESLint

```

10. Common Pitfalls to Avoid

**API Response Shape Inconsistency:**

Backend may return different shapes. Always handle multiple possibilities (see `AuthContext.jsx` lines 56-110).

**FormData Requests:**

**401 Redirect Loop:**

Axios interceptor auto-redirects on 401. Avoid loops by checking `_retry` flag (already implemented).

**useAuth Outside Provider:**

`useAuth()` throws error if used outside `AuthProvider`. Ensure component is wrapped in provider tree.

**Environment Variable Not Exposed:**

Vite only exposes vars with `REACT_APP_` prefix. Check `vite.config.js`.

11. Deployment Context

12. Testing Notes

No test runner configured yet. When adding tests:

Example Usage

**Adding a new API service:**

```javascript

// src/api/myNewApi.js

import axiosInstance from './axiosConfig';

export const fetchData = async (id) => {

const response = await axiosInstance.get(`${API_ENDPOINTS.MY_NEW_ENDPOINT}/${id}`);

return response.data;

};

```

**Creating a protected route:**

```javascript

// In src/App.jsx

<Route

path={ROUTES.MY_NEW_PAGE}

element={

<PrivateRoute>

<MyNewPage />

</PrivateRoute>

}

/>

```

**Handling file uploads:**

```javascript

import { createFormData } from '@/api/axiosConfig';

const formData = createFormData(

{ title: 'Story Title', CategoryIds: [1, 2] },

filesArray

);

await axiosInstance.post(API_ENDPOINTS.CREATE_STORY, formData);

```

Constraints