This is a mono-repo for my indie web projects.
When I was a kid I would have my game saves, school projects, and other important documents stored on floppy disks so that I can take them places. This website is a collection of tools for viewing and manipulating files. Mostly it supports markdown editing, and can save in the browser, or to DropBox.
Manage tabs, chords, and sheet music in your browser. This is how I organize my music collection. Many apps can lock you into their systems, but this one focuses on just having files that you are in control of. It's really just another front for FloppyDisk, but more tailored for music.
The front-end is built in TypeScript using React for the component system. It is using React Hooks and functional components for the component management. The state is centrally controlled using Redux. The state is accessed using selectors and the reselect to provide functional memoization for state changes.
The build process is managed by Webpack. Hosting is done through Netlify. The routing of the URLs is all handled through the front-end. Testing is handled through Jest and React Testing Library.
Dropbox uses an in-browser PKCE OAuth flow to securely log you in. This app gets access to a subfolder in the Dropbox/Apps folder to limit the access to files.
The site is broken down into three code areas:
src/frontend- Code that runs in the browser.src/server- Code that runs in node.src/shared- Code that runs in either place.
I use path aliases to import these with absolute paths. I find this easier to maintain the codebase, as the paths are more explicit, and makes it easier to refactor code.
import { App } from 'frontend/components/App';I use a few aliases for common pieces of code.
import { T, $, $$, A } from 'frontend';T- All of the TypeScript types exported under a single namespace.$- All of the redux selectors.$$- All of the redux selectors wrapped in auseSelectorhook.A- All of the redux actions.
I prefer this flat structure as it makes code organization so much simpler. I would prefer a long selector name for instance compared to a bunch of complicated folder structures that I would have to navigate.
It's quite simple to edit markdown files. I use FloppyDisk.link to write and manage all of my D&D campaign notes.
This project supports basic ChordPro (.chopro) files for viewing and editing. It supports chord transposition. Images can be embedded as well.
PDF Files are rendered directly in the browser through PDF.js. This is great for playing sheet music on tablets.
The image formats that are supported by the browser can be viewed.
The code is open source licensed as GPLv3.