_Telegram group for this repo https://t.me/seeditreact_
# Seedit
-Seedit is a serverless, adminless, decentralized reddit alternative. Seedit is a client (interface) for the Plebbit protocol, which is a decentralized social network where anyone can create and fully own unstoppable communities. Learn more: https://plebbit.com
+Seedit is a serverless, adminless, decentralized and open-source (old)reddit alternative built on the [Bitsocial protocol](https://bitsocial.net). Like reddit, anyone can create a seedit community, It features a similar homepage structure as reddit, but with a crucial difference: **anyone can create and own communities, and multiple communities can compete for each default community slot**.
- Seedit web version: https://seedit.app — or, using Brave/IPFS Companion: https://seedit.eth
### Downloads
-- Seedit desktop version (full p2p plebbit node, seeds automatically): available for Mac/Windows/Linux, [download link in the release page](https://github.com/plebbit/seedit/releases/latest)
-- Seedit mobile version: available for Android, [download link in the release page](https://github.com/plebbit/seedit/releases/latest)
+- Seedit desktop version (full p2p bitsocial node, seeds automatically): available for Mac/Windows/Linux, [download link in the release page](https://github.com/bitsocialhq/seedit/releases/latest)
+- Seedit mobile version: available for Android, [download link in the release page](https://github.com/bitsocialhq/seedit/releases/latest)
## How to create a community
-In the plebbit protocol, a seedit community is called a _subplebbit_. To run a subplebbit, you can choose between two options:
+To run a community, you can choose between two options:
-1. If you prefer to use a **GUI**, download the desktop version of the Seedit client, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/seedit/releases/latest). Create a subplebbit using using the familiar old.reddit-like UI, and modify its settings to your liking. The app runs an IPFS node, meaning you have to keep it running to have your board online.
-2. If you prefer to use a **command line interface**, install plebbit-cli, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/plebbit-cli/releases/latest). Follow the instructions in the readme of the repo. When running the daemon for the first time, it will output WebUI links you can use to manage your subplebbit with the ease of the GUI.
+1. If you prefer to use a **GUI**, download the desktop version of the Seedit client, available for Windows, MacOS and Linux: [latest release](https://github.com/bitsocialhq/seedit/releases/latest). Create a community using using the familiar old.reddit-like UI, and modify its settings to your liking. The app runs an IPFS node, meaning you have to keep it running to have your board online.
+2. If you prefer to use a **command line interface**, install bitsocial-cli, available for Windows, MacOS and Linux: [latest release](https://github.com/bitsocialhq/bitsocial-cli/releases/latest). Follow the instructions in the readme of the repo. When running the daemon for the first time, it will output WebUI links you can use to manage your community with the ease of the GUI.
-Peers can connect to your subplebbit using any plebbit client, such as Plebchan or Seedit. They only need the subplebbit's address, which is not stored in any central database, as plebbit is a pure peer-to-peer protocol.
+Peers can connect to your bitsocial community using any bitsocial client, such as Seedit or [5chan](https://github.com/bitsocialhq/5chan). They only need the community address, which is not stored in any central database, as bitsocial is a pure peer-to-peer protocol.
-### How to add a community to the default list (p/all)
-The default list of communities, used on p/all on Seedit, is plebbit's [temporary default subplebbits](https://github.com/plebbit/lists) list. You can open a pull request in that repo to add your subplebbit to the list, or contact devs via telegram [@plebbit](https://t.me/plebbit). In the future, this process will be automated by submitting proposals to a plebbit DAO, using the [plebbit token](https://etherscan.io/token/0xea81dab2e0ecbc6b5c4172de4c22b6ef6e55bd8f).
+### How to add a community to the default list (s/all)
+The default list of communities, used on s/all on Seedit, is bitsocial's [default-multisub.json list](https://github.com/bitsocialhq/lists/blob/master/default-multisub.json). You can open a pull request in that repo to add your community to the list.
## To run locally
@@ -44,4 +49,4 @@ The default list of communities, used on p/all on Seedit, is plebbit's [temporar
### Build:
-The linux/windows/mac/android build scripts are in https://github.com/plebbit/seedit/blob/master/.github/workflows/release.yml
+The linux/windows/mac/android build scripts are in https://github.com/bitsocialhq/seedit/blob/master/.github/workflows/release.yml
diff --git a/android/plebbit.keystore b/android/plebbit.keystore
index 2acc2e33..4f98bb21 100644
Binary files a/android/plebbit.keystore and b/android/plebbit.keystore differ
diff --git a/docs/react-guide.md b/docs/react-guide.md
deleted file mode 100644
index 957de419..00000000
--- a/docs/react-guide.md
+++ /dev/null
@@ -1,813 +0,0 @@
-# React guide
-
-A lot of AI-generated React code is heavily biased toward using useState and useEffect, often in verbose or naive ways. That’s because these hooks are:
-
-1. Explicit, making them easy for LLMs to pattern-match.
-2. Safe defaults, requiring less architectural decision-making.
-3. Well-documented, so the model’s training data is oversaturated with examples.
-
-But modern, well-architected React apps rarely rely on raw useState/useEffect beyond simple UI state or lifecycle quirks. Here’s a breakdown of what serious devs use instead—and why this is the real moat for human engineers.
-
-Alternatives to useState and useEffect
-
-1. State Machines / Statecharts (e.g. Zustand)
-- Why: Replaces ad-hoc local state management with deterministic, declarative logic.
-- Advantage: Less bugs, easier to test, clearer state transitions.
-- AI gap: LLMs struggle to model state transitions declaratively. LLM Agent must overcome this.
-
-2. React Query / SWR for Data Fetching
-- Why: Avoids useEffect-based data fetching and loading/error state juggling.
-- Advantage: Caching, stale-while-revalidate, retries, pagination—all handled out of the box.
-- AI gap: AI often uses useEffect + fetch and forgets cleanup, race conditions, or caching.
-
-3. Global State with Zustand, Jotai, Recoil, or Redux Toolkit
-- Why: Local useState doesn’t scale for shared or persistent state.
-- Advantage: Better performance, devtools support, persistence.
-- AI gap: Defaults to prop-drilling or bloated context APIs.
-
-4. Custom Hooks and Composition
-- Why: Reuse logic cleanly without bloating components or copy-pasting useEffect.
-- Advantage: Separation of concerns, encapsulation.
-- AI gap: Often fails to factor logic out, keeping everything in one component.
-
-## Why This Matters
-
-AI can mimic patterns, but it can’t:
-- Architect a system for long-term maintainability.
-- Predict runtime performance tradeoffs.
-- Refactor spaghetti effects into custom hooks or state machines.
-- Decide when state should be colocated vs globalized.
-- Avoid footguns like stale closures, unnecessary re-renders, or race conditions.
-
-In short: AI is great at writing code, but bad at engineering software.
-
-Takeaway
-- Use fewer useEffect and useState hooks.
-- Learn to design systems, not just code components.
-- Reach for declarative, composable patterns.
-- Understand caching, reactivity, and scalability beyond local state.
-
-Here’s a side-by-side breakdown of common AI-generated React patterns (bad) vs what experienced engineers write (good) across 4 key areas: state management, data fetching, side effects, and logic reuse.
-
-## 1. State Management
-
-❌ Bad (AI-style useState)
-
-```typescript
-function TodoApp() {
- const [todos, setTodos] = useState([]);
- const [input, setInput] = useState('');
-
- const addTodo = () => {
- setTodos([...todos, { text: input }]);
- setInput('');
- };
-
- return (
- <>
- setInput(e.target.value)} />
-
- -
- {todos.map((todo, i) =>
- {todo.text} )} -
-
- {todos.map((todo, i) =>
- {todo.text} )} -
-
- {users.map(u =>
- {u.name} )} -
Loading...
;
-
- return (
- -
- {users.map(u =>
- {u.name} )} -
{results.length} results
;
-}
-```
-
-✅ Good (abort previous fetch with AbortController)
-
-```typescript
-function Search({ term }) {
- const [results, setResults] = useState([]);
-
- useEffect(() => {
- const controller = new AbortController();
-
- fetch(`/api/search?q=${term}`, { signal: controller.signal })
- .then(res => res.json())
- .then(setResults)
- .catch((e) => {
- if (e.name !== 'AbortError') console.error(e);
- });
-
- return () => controller.abort();
- }, [term]);
-
- return {results.length} results
;
-}
-```
-
-Better yet? Don’t use useEffect at all. Use React Query with term as a key.
-
-## 4. Logic Reuse
-
-❌ Bad (repeated logic inline)
-
-```typescript
-function ComponentA() {
- const [count, setCount] = useState(0);
- useEffect(() => {
- const id = setInterval(() => setCount(c => c + 1), 1000);
- return () => clearInterval(id);
- }, []);
- return {count}
;
-}
-
-function ComponentB() {
- const [count, setCount] = useState(0);
- useEffect(() => {
- const id = setInterval(() => setCount(c => c + 1), 1000);
- return () => clearInterval(id);
- }, []);
- return {count}
;
-}
-```
-
-✅ Good (custom hook)
-
-```typescript
-function useCounter(intervalMs = 1000) {
- const [count, setCount] = useState(0);
- useEffect(() => {
- const id = setInterval(() => setCount(c => c + 1), intervalMs);
- return () => clearInterval(id);
- }, [intervalMs]);
- return count;
-}
-
-function ComponentA() {
- const count = useCounter();
- return {count}
;
-}
-
-function ComponentB() {
- const count = useCounter();
- return {count}
;
-}
-
-```
-
-## 5. State Machines with Zustand
-
-❌ Bad (AI-style complex useState with boolean flags)
-
-```typescript
-function OrderProcess() {
- const [isLoading, setIsLoading] = useState(false);
- const [isError, setIsError] = useState(false);
- const [isSuccess, setIsSuccess] = useState(false);
- const [cart, setCart] = useState([]);
- const [paymentDetails, setPaymentDetails] = useState(null);
- const [orderPlaced, setOrderPlaced] = useState(false);
-
- const addToCart = (item) => {
- setCart([...cart, item]);
- };
-
- const submitPayment = async (details) => {
- setIsLoading(true);
- setIsError(false);
-
- try {
- await processPayment(details);
- setPaymentDetails(details);
- setIsSuccess(true);
- setIsLoading(false);
- } catch (error) {
- setIsError(true);
- setIsLoading(false);
- }
- };
-
- const placeOrder = async () => {
- setIsLoading(true);
- setIsError(false);
-
- try {
- await submitOrder(cart, paymentDetails);
- setOrderPlaced(true);
- setIsSuccess(true);
- setIsLoading(false);
- } catch (error) {
- setIsError(true);
- setIsLoading(false);
- }
- };
-
- return (
-
- {/* Complex conditional rendering based on multiple state variables */}
- {isLoading &&
- );
-}
-```
-
-✅ Good (Zustand state machine)
-
-```typescript
-import { create } from 'zustand';
-
-// Create a Zustand store with state machine pattern
-const useOrderStore = create((set, get) => ({
- // State machine's current state
- state: 'browsing',
-
- // Context/data
- cart: [],
- paymentDetails: null,
- error: null,
-
- // Actions that transition between states
- addToCart: (item) => set((state) => ({
- cart: [...state.cart, item]
- })),
-
- goToCheckout: () => set({ state: 'paymentEntry' }),
-
- goBack: () => {
- const { state: currentState } = get();
- if (currentState === 'paymentEntry') {
- set({ state: 'browsing' });
- } else if (currentState === 'confirmOrder') {
- set({ state: 'paymentEntry' });
- }
- },
-
- submitPayment: async (details) => {
- set({ state: 'processingPayment', error: null });
-
- try {
- const result = await processPayment(details);
- set({
- state: 'confirmOrder',
- paymentDetails: result
- });
- } catch (error) {
- set({
- state: 'paymentEntry',
- error: error.message
- });
- }
- },
-
- placeOrder: async () => {
- const { cart, paymentDetails } = get();
- set({ state: 'processingOrder', error: null });
-
- try {
- await submitOrder(cart, paymentDetails);
- set({ state: 'orderComplete' });
- } catch (error) {
- set({
- state: 'confirmOrder',
- error: error.message
- });
- }
- }
-}));
-
-function OrderProcess() {
- const {
- state,
- cart,
- paymentDetails,
- error,
- addToCart,
- goToCheckout,
- goBack,
- submitPayment,
- placeOrder
- } = useOrderStore();
-
- // Render UI based on current state
- return (
-
- {error &&
- );
-}
-```
-
-### Key Benefits of the Zustand State Machine Approach:
-
-1. **Explicit states**: The system can only be in one well-defined state at a time
-2. **Centralized logic**: All state transitions are defined in one place
-3. **Predictable transitions**: State changes follow clear patterns
-4. **Simplified UI logic**: Components just render based on the current state
-5. **Async handling**: Asynchronous operations are contained within the state transitions
-6. **Shared state**: Any component can access the store without prop drilling
-7. **Improved debugging**: The current state is always clear and predictable
-8. **No impossible states**: Unlike boolean flags that could create invalid combinations
-9. **Simpler API**: Compared to XState, Zustand offers a more approachable API for many developers
-10. **Smaller bundle size**: Zustand is significantly smaller than XState
-
-This approach gives most of the benefits of formal state machines while maintaining the simplicity and familiarity of React state management. It's a pragmatic middle ground that's often easier to adopt in existing projects.
-
-## 6. Concurrent UI Techniques
-
-❌ Bad (Blocking UI updates without concurrency):
-```jsx
-// Bad example: Synchronously fetching data in useEffect can cause UI jank.
-function SearchResults({ query }) {
- const [results, setResults] = React.useState([]);
-
- React.useEffect(() => {
- fetch(`/api/search?q=${query}`)
- .then(res => res.json())
- .then(data => setResults(data));
- }, [query]);
-
- return (
-
- {results.map(item =>
- );
-}
-```
-
-✅ Good (Using useTransition for non-blocking updates):
-```jsx
-// Good example: Leveraging useTransition to mark state updates as low-priority.
-function SearchResults({ query }) {
- const [results, setResults] = React.useState([]);
- const [isPending, startTransition] = React.useTransition();
-
- React.useEffect(() => {
- startTransition(() => {
- fetch(`/api/search?q=${query}`)
- .then(res => res.json())
- .then(data => setResults(data));
- });
- }, [query, startTransition]);
-
- return (
- {item.title}
)} -
- {isPending &&
- );
-}
-```
-
-## 7. Routing and Navigation (Not applicable with Next.js apps)
-
-❌ Bad (Manual routing without a dedicated library):
-```jsx
-// Bad example: Handling routing manually using state and window history.
-function App() {
- const [route, setRoute] = React.useState(window.location.pathname);
-
- React.useEffect(() => {
- const onPopState = () => setRoute(window.location.pathname);
- window.addEventListener('popstate', onPopState);
- return () => window.removeEventListener('popstate', onPopState);
- }, []);
-
- return (
- Loading...
}
- {results.map(item => {item.title}
)} -
- {route === '/' &&
- );
-}
-```
-
-✅ Good (Using React Router v6 with lazy-loaded routes):
-```jsx
-// Good example: Utilizing React Router to manage routes and lazy load components.
-import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
-import React, { lazy, Suspense } from 'react';
-
-const Home = lazy(() => import('./Home'));
-const About = lazy(() => import('./About'));
-
-function App() {
- return (
- {data}
;
-}
-
-function App() {
- return Something went wrong.
; - } - return this.props.children; - } -} - -function MyComponent({ data }) { - if (!data) { - throw new Error("Data not found"); - } - return{data}
;
-}
-
-function App() {
- return (
-
-
- );
-}
-```
-
-✅ Good (Lazy loading heavy components with React.lazy and Suspense):
-```jsx
-// Good example: Dynamically importing components to reduce initial load time.
-import React, { lazy, Suspense } from 'react';
-
-const HeavyComponent = lazy(() => import('./HeavyComponent'));
-
-function App() {
- return (
- console.log('Clicked!')}>Click me
;
-}
-```
-
-✅ Good (Semantic button with ARIA attributes and theming via CSS variables):
-```jsx
-// Good example: Accessible button component that utilizes theming.
-function ThemedButton() {
- return (
-
- );
-}
-
-/* CSS (in a separate file or styled-components):
-:root {
- --primary-color: #007bff;
-}
-*/
-```
-
-# Summary Table
-
-| Concern | Bad AI Pattern | Solid Engineering Practice |
-|---------|---------------|----------------------------|
-| **State Management** | `useState` everywhere, prop‑drilling | Central store (Zustand / Redux Toolkit) or colocated custom hooks |
-| **Data Fetching** | `useEffect` + `fetch`, manual loading/error juggling | React Query / SWR with caching, retries, stale‑while‑revalidate |
-| **Side Effects** | Effects without cleanup → race conditions, leaks | AbortController or query library handles cancellation & retries |
-| **Logic Reuse** | Copy‑pasted hooks and state in every component | Extract cross‑cutting logic into custom hooks |
-| **Workflow / State Machine** | Boolean‑flag soup, impossible states | Deterministic statechart in a single store (Zustand / XState) |
-| **Concurrent UI Updates** | Blocking synchronous work inside effects | `useTransition` / `startTransition` for low‑priority updates |
-| **Routing & Navigation** | DIY history manipulation, inline route state | React Router v6 (or Next.js built‑ins) with lazy‑loaded routes |
-| **Error Handling** | No error boundary → full‑app crashes | Top‑level `ErrorBoundary` plus logging in `componentDidCatch` |
-| **Form Management** | Manual state, zero validation or feedback | React Hook Form + Yup/Zod schema for declarative validation |
-| **Code Splitting & Lazy Loading** | Eager imports ballooning bundle size | `React.lazy` + `Suspense` for on‑demand loading |
-| **Testing Strategy** | Brittle tests keyed to DOM structure | User‑centric tests with React Testing Library & jest‑dom |
-| **Accessibility & Theming** | Non‑semantic elements, missing ARIA, inline colors | Semantic HTML, ARIA labels, CSS variables / theme provider |
\ No newline at end of file
diff --git a/docs/you-might-not-need-an-effect.md b/docs/you-might-not-need-an-effect.md
deleted file mode 100644
index fa91579f..00000000
--- a/docs/you-might-not-need-an-effect.md
+++ /dev/null
@@ -1,1745 +0,0 @@
----
-title: 'You Might Not Need an Effect'
-source: https://react.dev/learn/you-might-not-need-an-effect
----
-
--
- {visibleTodos.map(todo => (
-
-
- {todo.completed ?
{todo.text}: todo.text} -
- ))}
-
-
- {visibleTodos.map(todo => (
-
-
- {todo.completed ?
{todo.text}: todo.text} -
- ))}
-
-
- {visibleTodos.map(todo => (
-
-
- {todo.completed ?
{todo.text}: todo.text} -
- ))}
-
-
- {visibleTodos.map(todo => (
-
-
- {todo.completed ?
{todo.text}: todo.text} -
- ))}
-
-
- {visibleTodos.map(todo => (
-
-
- {todo.completed ?
{todo.text}: todo.text} -
- ))}
-
- setSelectedId(id)}
- />
-
-
- )
-}
-
-const initialContacts = [
- { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
- { id: 1, name: 'Alice', email: 'alice@mail.com' },
- { id: 2, name: 'Bob', email: 'bob@mail.com' }
-];
-```
-
-```js src/ContactList.js hidden
-export default function ContactList({
- contacts,
- selectedId,
- onSelect
-}) {
- return (
- -
-
- {contacts.map(contact =>
-
- - - - )} -
- setSelectedId(id)}
- />
-
-
- )
-}
-
-const initialContacts = [
- { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
- { id: 1, name: 'Alice', email: 'alice@mail.com' },
- { id: 2, name: 'Bob', email: 'bob@mail.com' }
-];
-```
-
-```js src/ContactList.js hidden
-export default function ContactList({
- contacts,
- selectedId,
- onSelect
-}) {
- return (
- -
-
- {contacts.map(contact =>
-
- - - - )} -