21- **Frontend**: React (for web), React Native (for mobile)
22- **Backend**: Node.js with Express.js
23- **Database**: MongoDB / PostgreSQL
24- **Authentication**: Firebase / JWT
25- **Hosting**: AWS / Vercel / Netlify
30
31- Node.js installed
32- MongoDB or PostgreSQL database setup
33
34### Steps
46 npm install
47 ```
484. Set up environment variables (create a `.env` file and add credentials for the database, authentication, etc.).
495. Run the development server:
50 ```sh
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1import { generateCode } from "./backend/generate-code";
2import { createTables } from "./database/migrations";
3import { createProject, getCode, getNextVersionNumber, insertVersion } from "./database/queries";
4
5async function servePublicFile(path: string): Promise<Response> {
13 todayHits = hits.todayHits;
14 } catch (e) {
15 console.log("Caught database error: ", e);
16 }
17 return new Response(
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
15```
16โโโ backend/
17โ โโโ database/
18โ โ โโโ queries.ts # SQLite database operations
19โ โโโ index.ts # Hono API server
20โโโ frontend/
54
551. Fork this project in Val Town
562. The app will automatically create its database table on first run
573. Access the app through your Val Town URL
1import { generateCode } from "./backend/generate-code";
2import { createTables } from "./database/migrations";
3import { createProject, getCode, getNextVersionNumber, insertVersion } from "./database/queries";
4
5async function servePublicFile(path: string): Promise<Response> {
30- [ ] add triggers to sidebar
31- [ ] add upload from SQL, CSV and JSON
32- [ ] add ability to connect to a non-val town Turso database
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.
8
9To use it on your own Val Town SQLite database, [fork it](https://www.val.town/v/stevekrouse/sqlite_admin/fork) to your account.
10
11It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.