**[Video Summary](https://dropover.cloud/cadb35#eff3a722-a6cb-4ca9-8a54-59d21291cd1f)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwIGTXpwTtLWgApkuoUGKNpBcHEn1%2FF7bT0swrVWleigj5RSuP%2F735cedc2-93b2-460e-a948-74b579f58788.png?alt=media&token=5d7368e3-fdd8-4532-ab2c-d53849107eff","id":"735cedc2-93b2-460e-a948-74b579f58788","width":924,"height":584,"filename":"CleanShot 2023-02-10 at 22.59.21@2x.png","type":"image/png","caption":"Contribution chart on github over my time working on HTML Editor. 165,468 lines added, 147,565 lines deleted.","border":false}]}
```

Text summary:

* Intro

  * Offline app

  * Multimedia portable document editor

  * Primary developer for a year

  * Gonna walk through my personal major contributions

* Filesystem sync engine

  * Syncs with and watches user’s filesystem

  * Complications:

    * Efficient: only watches directory in the sidebar + mentioned files in open editor

    * Doing the right thing when an unsaved file gets deleted in filesystem

    * Updating mentions when file gets moved in app

* Prosemirror integration

  * Building reliable and flexible abstraction to interop between app state and editor state

  * Complications

    * Still have to use prosemirror plugins since plugins can do some things that you can’t do from outside the editor.

    * Command integration with context menu

    * Mentions,

      * You want to access app environment from within prosemirror: ipc calls to node process + app state like recently accessed files.

      * filesystem access while creating

      * moves on renames

      * invalidated when deleted

      * broken mentions suggestions

* Commands

  * Three ways of triggering: keyboard shortcut, context menu, command prompt

  * Commands can be declared through react component with a hook, automatically unmounted on dismount.

  * Complications

    * focus. Context menu gets triggered, so it’s focused, but you still want to handle the keyboard commands manually.

    * Disabled vs. unregistered

  * Mounted into frontend database. Commands can also be mounted but disabled.

* Database

  * Being a rich, interactive app means having a lot of state

  * Client-side reactive database called tuple-database is our state management solution

  * Everything becomes a plugin into the app

  * Complications

    * Very database-y: I have to select right indexes to be efficient

    * Commands have to be mounted and have 3 different indexes so we can retrieve them efficiently in 3 different contexts like keyboard shortcut and command prompt search.

* Testing architecture

  * Previous testing harness mounted whole Electron app for each test

    * Previous testing harness mounted whole Electron app and connected to mouse drivers for each test, which was slow, flaky, couldn't use my computer while running.

  * Headless, parallel testing with playwright. Testing time came down by a factor of 10! And can run on CI + can use my computer while running.

  * E2e testing dialect

* Autoupdater

* Lot more that I built, but only covered the major pieces

HTML Editor Major Contributions Summary

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwIGTXpwTtLWgApkuoUGKNpBcHEn1%2FJPyOoBSDzfpxbiSsh7w0%2F4cc09e44-2747-4c16-9c4b-5c0fdc056d79.jpg?alt=media&token=0a6d23b4-e145-4ceb-bcf2-e5e62850f6f3","id":"4cc09e44-2747-4c16-9c4b-5c0fdc056d79","width":128,"height":128,"filename":"unnamed.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwIGTXpwTtLWgApkuoUGKNpBcHEn1%2FJPyOoBSDzfpxbiSsh7w0%2F1db4d908-5af8-4b23-b7c9-4cb185a2d277.jpg?alt=media&token=c7107409-0bc1-4e31-8fd1-a9e1d96ab2e1","id":"1db4d908-5af8-4b23-b7c9-4cb185a2d277","width":640,"height":400,"filename":"unnamed-2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Notion slides is a google chrome extension that allows users to navigate notion databases in a slide show! I guess me and Michael came up with it cuz we thought making slide shows is still to complex (and Powerpoint blows). We wanted a way to combine Notion's intuitive and beautiful interface with slide show capabilities. We ended up with something that works but could certainly use a lot of polishing. Problems with it are that I'd like to prefetch all the pages in a database so going between slides is easier. I also want to have some user preferences like the option to hide page properties or have pages take up full width. Not really worried about that right now though.

[The Google Chrome Extension](https://www.notion.so/Notion-Slides-983dcaa794f149dfa0975a5a77809810#3bbe800f1e7547db98728f4544ce649d)

▶️ Notion Slides

The NASA Web API is a simple program created by me on my website designed to let the user search the NASA media database, learn more about them, and favorite media they like in an intuitive, easy-to-use interface. This project was done as a submission to the Capital One Software Engineering Summit. It was my first time directly using Javascript and HTML (this website was built using the WordPress CMS). I enjoyed the project a lot; it might be the most fun I’ve had on a software project.

[Link to live app](https://nasa-web-api.herokuapp.com/NasaWebApi.html)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwIGTXpwTtLWgApkuoUGKNpBcHEn1%2FZCT1nvTw6G8gedV8wZMF%2F84c1af4d-2abb-42d8-9cca-f0bd483fd7da.gif?alt=media&token=13119900-116d-4b66-b370-61a30a67e914","id":"84c1af4d-2abb-42d8-9cca-f0bd483fd7da","width":600,"height":270,"filename":"ezgif-4-9be1ebb1495b.gif","type":"image/gif","caption":"A demo showing how one would use the app.","border":false}]}
```

I found Javascript very easy to pick up. The syntax felt very similar to C, though it was as high-level and powerful as python. HTML and CSS less so, because it wasn’t similar to any other language I’ve used before, but the code still felt very intuitive. I found w3schools to be an invaluable resource, because they have no shortage of examples for every possible command, so that made it easy for me to learn.

The project had an element of UI/UX design to it, and that made it really fun for me, because I loved thinking of ways to make my project more user-friendly. I thought of what I expected a feature to do in my project, and what feature I would find useful to add. For example, the “find similar” button was an example of a feature I thought would be useful when a user finds a particular result interesting and wants to see more media regarding it. 

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FwIGTXpwTtLWgApkuoUGKNpBcHEn1%2FZCT1nvTw6G8gedV8wZMF%2Faa53fe9f-5304-49d1-8665-e965c8e5057b.png?alt=media&token=4bdc36b2-2bc7-4f49-acf0-02f4616feaf9","id":"aa53fe9f-5304-49d1-8665-e965c8e5057b","width":1678,"height":952,"filename":"Screen Shot 2021-04-28 at 11.50.54.png","type":"image/png","caption":"A page illustrating the \"find similar\" button.","border":false}]}
```

Being able to modify the HTML and CSS also gave me freedom to flex what I’ve learned from my design hobby. I tried to keep things very minimal and functional but definitely didn’t skimp on adding some flair. For example, how the search bar underscores green when you click on it, or how an image slightly enlarges and darkens when you hover on it. Being able to combine computer science and design was one of the big reasons this project was enjoyable to me and how happy I am with the final project.

This was the first real successful project I’ve done where it’s very dynamic. By that, I mean code I usually write for projects ends up outputting a number or several numbers, and it’s run on the terminal, etc. I could show it to someone, but they won’t really understand the impact until I explain the results. This project was different, because I could show it to someone, and they’d immediately understand the significance of what I’d done, and what my project is supposed to do, etc. It was also fun and interesting to see users could type in something that I hadn’t thought of before and I would see some new media I hadn’t seen before. It had functionality that I couldn’t immediately see. The reason for that though is just because it relies on NASA’s media database.

NASA Web API Spec

<https://gem.moonrise.tk>

Hello! Welcome to Gem. Gem is a light-weight, performant, and minimal editor designed to be aesthetic and fun.

It's entirely local: your notes don't get sent anywhere, and if you close the tab, they're gone forever.

It currently supports some limited Markdown-like functionality like **\*bold\***, *italic*, and `` `code` `` although they can be a little buggy. There's plans to add more elements with more robust support.

It's being developed by [Tanishq Kancharla](https://moonrise.tk) (me!) and open-sourced on [Github](https://github.com/moonrise-tk/gem). Have a look at the README for more information.

Please reach out to me if you like Gem, or have any ideas for features!