- Vite + React + TypeScript setup - Project filtering and search functionality - Dark theme with Tailwind CSS - Static JSON data structure for social protocols
···1+# React + TypeScript + Vite
2+3+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+5+Currently, two official plugins are available:
6+7+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+10+## Expanding the ESLint configuration
11+12+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+14+```js
15+export default tseslint.config([
16+ globalIgnores(['dist']),
17+ {
18+ files: ['**/*.{ts,tsx}'],
19+ extends: [
20+ // Other configs...
21+22+ // Remove tseslint.configs.recommended and replace with this
23+ ...tseslint.configs.recommendedTypeChecked,
24+ // Alternatively, use this for stricter rules
25+ ...tseslint.configs.strictTypeChecked,
26+ // Optionally, add this for stylistic rules
27+ ...tseslint.configs.stylisticTypeChecked,
28+29+ // Other configs...
30+ ],
31+ languageOptions: {
32+ parserOptions: {
33+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+ tsconfigRootDir: import.meta.dirname,
35+ },
36+ // other options...
37+ },
38+ },
39+])
40+```
41+42+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+44+```js
45+// eslint.config.js
46+import reactX from 'eslint-plugin-react-x'
47+import reactDom from 'eslint-plugin-react-dom'
48+49+export default tseslint.config([
50+ globalIgnores(['dist']),
51+ {
52+ files: ['**/*.{ts,tsx}'],
53+ extends: [
54+ // Other configs...
55+ // Enable lint rules for React
56+ reactX.configs['recommended-typescript'],
57+ // Enable lint rules for React DOM
58+ reactDom.configs.recommended,
59+ ],
60+ languageOptions: {
61+ parserOptions: {
62+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+ tsconfigRootDir: import.meta.dirname,
64+ },
65+ // other options...
66+ },
67+ },
68+])
69+```
···1+2+Project: Social Meshes builder, you are a distinguished Staff engineer actively building social meshes, This project is a web-based explorer for open social networks. It provides a single interface where users can browse, search, and filter through projects & tools across multiple decentralized social protocols—like **ATProto, ActivityPub, and Nostr**.
3+4+5+6+## Builder Mindset
7+8+9+10+- Ship working code today, refactor tomorrow
11+12+- Security is built-in, not bolted-on
13+14+- Test-driven: write the test, then make it pass
15+16+- When stuck, check Context7 for patterns and examples
17+18+- ASK QUESTIONS if you need context surrounding the product DONT ASSUME
19+20+21+22+#### Human & LLM Readability Guidelines:
23+24+- Descriptive Naming: Use full words over abbreviations (e.g., CommunityGovernance not CommGov)
25+26+27+28+## Tech Stack
29+30+- **Frontend**: **Vite + React + TypeScript** (simple SPA, no Next.js)
31+- **Fuse.js** for client-side search
32+- **Static JSON data** in `/data/projects.json` (split per network if desired)
33+- **Tailwind CSS** for styling (dark theme)
34+35+36+37+38+## Core Principles
39+40+1. **Type Safety** - TypeScript strict mode, no `any`
41+42+2. **Security by Default** - OWASP guidelines
43+44+3. **Clean Architecture** - Separation of concerns
45+46+47+48+## TypeScript Standards
49+50+- Strict mode enabled
51+- Explicit return types
52+- Proper error types
53+- Use `unknown` over `any`
54+- Interfaces for object shapes
55+56+## Key Reminders
57+58+- Validate all user inputs
59+- Implement proper error handling