1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate, useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useState, createContext } from "https://esm.sh/react@18.2.0?dev";
3import {
4 BrowserRouter,
9 Navigate,
10 useLocation,
11} from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
12import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
13import { LayoutRoute } from "./LayoutRoute.tsx";
14import { Home } from "./Home.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4import * as THREE from "https://esm.sh/three@0.153.0";
5import { OrbitControls } from "https://esm.sh/three@0.153.0/examples/jsm/controls/OrbitControls.js";
1- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!
2- [x] Get React Router working on the client & move off localstorage for storing page state
3- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)
4- [x] Make it look good
46
47OpenTownie is built with:
48- React frontend with TypeScript
49- React Router
50- Hono API server backend
51- Web Audio API for sound notifications
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { Outlet } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
3import { Header } from "./Header.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2
3export function TownieIcon({
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { Link, useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
5import { useAuth } from "../hooks/useAuth.tsx";
6import { Circle, Volume2Icon, VolumeOffIcon } from "./icons.tsx";
Starter template with client-side React & Hono server
Starter template with client-side React & Hono server
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh