|
1 | | -# React + TypeScript + Vite |
| 1 | +# Nostr Relay Browser 🚀 |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +**Ever wondered what's happening inside a Nostr relay?** This sleek browser app transforms any Nostr relay into an explorable universe of decentralized content, wrapped in a beautiful email-client-inspired interface that makes browsing events as intuitive as checking your inbox. |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +Connect to any relay with a single URL, watch real-time events stream in, and explore the raw pulse of the decentralized social web with powerful filtering, search, and export capabilities—all running entirely in your browser with zero backend dependencies. |
6 | 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 |
| 7 | +## ✨ What Makes This Special |
9 | 8 |
|
10 | | -## Expanding the ESLint configuration |
| 9 | +- **One-Click Relay Exploration** - Just paste a relay URL and instantly dive into its event stream |
| 10 | +- **Gmail-Inspired UI** - Familiar three-pane layout with sidebar navigation, event timeline, and detailed preview |
| 11 | +- **Real-Time Updates** - Watch events flow in live via WebSocket subscriptions |
| 12 | +- **Smart Filtering** - Browse by event types (notes, profiles, reactions), authors, or time ranges |
| 13 | +- **Developer-Friendly** - Export events as JSON, view raw event data, and inspect relay metadata |
| 14 | +- **Privacy-First** - Completely client-side with no tracking, accounts, or data collection |
11 | 15 |
|
12 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
| 16 | +## 🛠 Tech Stack |
13 | 17 |
|
14 | | -```js |
15 | | -export default tseslint.config([ |
16 | | - globalIgnores(['dist']), |
17 | | - { |
18 | | - files: ['**/*.{ts,tsx}'], |
19 | | - extends: [ |
20 | | - // Other configs... |
| 18 | +Built on a modern foundation: |
| 19 | +- **React 19** + TypeScript for robust development |
| 20 | +- **Vite 7** for lightning-fast builds and development |
| 21 | +- **shadcn/ui** + Tailwind CSS v4 for beautiful, accessible components |
| 22 | +- **NDK/nostr-tools** for Nostr protocol compliance |
| 23 | +- **Responsive design** that works perfectly on mobile and desktop |
21 | 24 |
|
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, |
| 25 | +## 🚀 Quick Start |
28 | 26 |
|
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 | | -]) |
| 27 | +```bash |
| 28 | +git clone [repository-url] |
| 29 | +cd relay_browser |
| 30 | +npm install |
| 31 | +npm run dev |
40 | 32 | ``` |
41 | 33 |
|
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: |
| 34 | +Visit `http://localhost:5173` and start exploring the decentralized web! |
43 | 35 |
|
44 | | -```js |
45 | | -// eslint.config.js |
46 | | -import reactX from 'eslint-plugin-react-x' |
47 | | -import reactDom from 'eslint-plugin-react-dom' |
| 36 | +## 🎯 Perfect For |
48 | 37 |
|
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 | | -``` |
| 38 | +- **Nostr Enthusiasts** - Discover what's happening across different relays |
| 39 | +- **Developers** - Debug relay behavior and inspect event structures |
| 40 | +- **Researchers** - Analyze decentralized social patterns and content flows |
| 41 | +- **Curious Minds** - Experience the raw, unfiltered pulse of Web3 social networking |
| 42 | + |
| 43 | +--- |
| 44 | + |
| 45 | +*Join the decentralized revolution - one relay at a time.* 🌐 |
0 commit comments