Code Monkey home page Code Monkey logo

indie-web's Introduction

Indie Web Projects

This is a mono-repo for my indie web projects.

๐Ÿ’พ FloppyDisk.link

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.

๐ŸŽต Browser Chords

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.

Architecture

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.

Supported Formats

Markdown

It's quite simple to edit markdown files. I use FloppyDisk.link to write and manage all of my D&D campaign notes.

ChordPro

This project supports basic ChordPro (.chopro) files for viewing and editing. It supports chord transposition. Images can be embedded as well.

PDF

PDF Files are rendered directly in the browser through PDF.js. This is great for playing sheet music on tablets.

License

The code is open source licensed as GPLv3.

indie-web's People

Contributors

gregtatum avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

indie-web's Issues

Rename files

Not sure if this should be enter like on macOS or what. On iPad it'll need the kebab menu.

Handle Dropbox 5xx errors better

I got an error when the Dropbox service wasn't available, and it wasn't clear what was going on. It would be better to do a friendly message saying the Dropbox service is having an error, and it's not an unauthorized error.

Create an onboarding flow

Currently when you log in for the first time you are presented with a blank screen since there are no files to view. This looks like breakage.

Playback local mp3s

It'd be nice to have a way to play back local mp3s with a song. I could even see having play buttons for subsections to help practice certain parts.

Add set list feature

It would be nice to have a set list feature. It could start out as a simple text edit, and then maybe use some GUI. Synchronizing file changes will be... interesting.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.