Learn Anything

Explanation of project's goals is here.

Current focus is on making Electron app working. Essentially an app like Obsidian.

Reference file structure to make sense of how code is laid out in the repo.

Read setup to get started with development.

Sharing current tasks in readme until MVP is released.

Ask questions on Discord if interested in developing the project or you get issues with setup.

File structure

• api - server related actions
  • db
    • dbschema
      • default.esdl - EdgeDB schema definining all the models and relations
      • migrations - migration files get generated after running pnpm db:migrate
    • client.ts - exports client to connect with EdgeDB
    • topic.ts / user.ts - CRUD functions on models
  • grafbase - Grafbase provides GraphQL API layer for all server functions like talking with DB
    • resolvers - edge resolvers are server functions exposed with GraphQL
    • schema.graphql - Grafbase's config
  • server - temporary hono server until grafbase supports public resolvers
• app - desktop app
  • packages
    • electron-web - electron's renderer web process
    • main - electron main process (use node.js to do OS operations)
    • preload - exported functions from app/packages/preload/src/index.ts are available in electron-web
• lib - shared utility functions
• test - test cases (useful for itereating quickly)
• website - learn-anything.xyz website code
  • components - solid components
  • routes - routes defined using file system

Setup

This project is a monorepo setup using pnpm workspaces.

Everything is driven using pnpm .. commands. First run:

pnpm i
pnpm dev-setup

pnpm dev-setup will git clone seed repo. It's needed for dev setup below to work well.

Run Electron app

pnpm app:dev

This will start an Electron development app. Started from this app starter.

Solid code that renders the app is located at app/packages/electron-web.

app/packages/preload/src/index.ts exposes functions to front end from node.js preload process.

TinyBase setup

TinyBase is setup with SQLite adapter inside Electron node.js preload process.

If changes are made to SQLite content, it will update the files in the file system using TinyBase reactive hooks.

TinyBase is the main app state of the app. Front end state is reflection of TinyBase state. If TinyBase state changes, GraphQL requests to mutate real backend state are sent where needed. Same goes for any other side effects that needs to happen such as updating of files connected.

Useful DevTools panel

In the app you get after running pnpm app:dev, you will see DevTools panel in bottom right corner. It contains a list of useful actions you can run to aid you.

One of the actions is Seed TinyBase. This will seed your local TinyBase store/sqlite with one of the wikis in seed folder.

Read app/packages/preload/src/index.ts file for details. syncWikiFromSeed is the function.

Setup DB

First need to make Electron + TinyBase + Solid sync work smoothly. Check ## Tasks

Assumes you installed EdgeDB (run curl .. command).

pnpm db:init

Follow instructions, name EdgeDB instance learn-anything.

Run edgedb ui. This will open EdgeDB graphical interface where you can run queries or explore the schema.

Run below command to apply the schema defined in default.esdl on your local DB:

pnpm db:watch

Then, generate EdgeDB TS bindings with:

pnpm db:ts-generate

Seed DB with content

Run server

First need to make Electron + TinyBase + Solid sync work smoothly. Check ## Tasks

Before running server, create file at api/server/.env with this content:

EDGEDB_INSTANCE=learn-anything
EDGEDB_SECRET_KEY=edbt_ey

EDGEDB_SECRET_KEY can be gotten by running pnpm db:ui which will open the EdgeDB UI.

In terminal after running above command you will see url like http://localhost:10700/ui?authToken=edbt_ey. EDGEDB_SECRET_KEY is the authToken content.

Then run:

pnpm api

In future Grafbase will be used for all API requests. There is blocker there that you can't do both public and private resolvers.

pnpm api:grafbase

Will start Grafbase locally and give you GraphQL access.

Run web

First need to make Electron + TinyBase + Solid sync work smoothly. Check ## Tasks

Create .env file inside app/packages/website with this content:

VITE_HANKO_API=https://e879ccc9-285e-49d3-b37e-b569f0db4035.hanko.io
API_OF_GRAFBASE=http://127.0.0.1:4000/graphql

Hanko is used as auth provider. You can swap Hanko API variable content with one from a project you create yourself.

Run:

pnpm web:dev

Open http://localhost:3000

Contribute

The tasks to do are outlined below.

If you are interested in helping out, please join Discord and let's make it happen. ✨

The project is incredibly ambitious once it works.

Tasks

sorted by priority

• setup proper testing
  • need to make wiki imports robust so write lots of tests cases for different files one can try import
  • specifically try import Nikita's wiki without issues
• electron app close to Obsidian/Reflect in UX
  • be able to edit markdown files, show sidebar of files/folders on the left
  • sync up with file system
• everything nicely persisted to tinybase with solid.js store syncing working well
• setup proper code sharing between monorepo packages
  • there is lib and components folders at root
    • should be usable across all the mono repo
  • the way packages are imported should be thought out well
    • which packages get installed at root? which go to specific package?
• would be nice if app/packages did not exist potentially
  • just don't think app/packages is nice structure, maybe move everything into app/
  • afraid to modify it as it came from template and moving things will break
• in dev tools panel when you click on Seed TinyBase (default), it seeds with default files
  • also add Seed TinyBase (custom), then provide an option of folders to choose what to seed so users can provide custom folders to seed quickly
• is there need for app/packages/electron-web/package.json?
  • or app/package.json is enough
  • it's all the same bundle I would think

Better DX

• Setup devenv to get one command dev env install. Currently we ask to install EdgeDB manually for example.
• Can potentially use only one codebase for both web code and electron app renderer code, using vite-plugin-ssr.
  • Electron expects index.html file as entry but Solid Start does not provide a index.html file. At least I don't know how to make that work so for now its split up. The app is quite different to the website in features so it's even for the best.

Notes

to be moved to docs/ and deployed with vitepress later

• Text editor once used Solid CodeMirror. Similar to CodeImage project. But there were issues in making it work nicely. So now Monaco Editor is used.
• Inlang, CodeImage, Actual have great code to take inspiration from.
  • Inlang's tech stack specifically is very great.