18## Implementation Details
19
20The frontend is built with React and uses the Twind library for styling (Tailwind CSS in JS). It communicates with the backend API to authenticate users and fetch their liked posts from Bluesky.
21
22The application processes post text to make mentions and links clickable, and displays images when available.
8 const [error, setError] = useState(null);
9
10 const fetchData = async () => {
11 try {
12 const userEndpoint = new URL(USER_ENDPOINT, window.location.origin);
13
14 const res = await fetch(userEndpoint);
15 const data = await res.json();
16 if (!res.ok) {
33
34 useEffect(() => {
35 fetchData();
36 }, []);
37
38 return { data, loading, error, refetch: fetchData };
39}
40
9 const [error, setError] = useState(null);
10
11 const fetchData = async () => {
12 try {
13 const projectEndpoint = new URL(PROJECT_ENDPOINT, window.location.origin);
17 if (branchId) filesEndpoint.searchParams.append("branchId", branchId);
18
19 const { project } = await fetch(projectEndpoint).then((res) =>
20 res.json()
21 );
22 const { files } = await fetch(filesEndpoint).then((res) => res.json());
23
24 setData({ project, files });
34 useEffect(() => {
35 if (!projectId) return;
36 fetchData();
37 }, [projectId, branchId]);
38
39 return { data, loading, error, refetch: fetchData };
40}
41
8 const [error, setError] = useState(null);
9
10 const fetchData = async () => {
11 try {
12 const res = await fetch(ENDPOINT);
13 const data = await res.json();
14 if (!res.ok) {
32
33 useEffect(() => {
34 fetchData();
35 }, []);
36
37 return { data, loading, error, refetch: fetchData };
38}
39
19 setError(null);
20 try {
21 const res = await fetch(ENDPOINT, {
22 method: "POST",
23 headers: {
12 setData(null);
13 setError(null);
14 const res = await fetch(ENDPOINT, {
15 method: "POST",
16 body: JSON.stringify({
7 const [loading, setLoading] = useState(true);
8
9 const fetchData = async () => {
10 const endpoint = new URL(ENDPOINT, window.location.origin);
11 endpoint.searchParams.append("projectId", projectId);
12
13 const res = await fetch(endpoint)
14 .then(res => res.json());
15 setData(res.branches);
19 useEffect(() => {
20 if (!projectId) return;
21 fetchData();
22 }, [projectId]);
23
24 return { data, loading, refetch: fetchData };
25}
47<!--
48
49- [x] refetch project data on create/etc
50- [x] Loading favicon
51- [x] Ensure main branch is default selected
136 let type_: "file" | "http" | "script";
137 if (path.includes("backend/index.ts")) type_ = "http";
138 if (file_text?.includes("export default app.fetch")) type_ = "http";
139 if ([".ts", ".tsx", ".js", ".jsx"].some(ext => path.endsWith(ext))) {
140 type_ = "script";
234
235 // Inject data to avoid extra round-trips
236 const initialData = await fetchInitialData();
237 const dataScript = `<script>
238 window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
281
2825. **API Design:**
283 - `fetch` handler is the entry point for HTTP vals
284 - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
285