Ficsheet

A TypeScript/React app to track and visualize periodic writing goals and trends.

Features:

• Just paste. Paste your writing directly into the app and only your daily word count will be stored. None of your writing is stored anywhere!
• Writing activity analytics. Drill down into your writing data and get colorful, dynamic charts and graphs for any year or month.
• Make and track goals. Set a start date, a target word count, and if you want, an end date. (And a color.) Keep an eye on the goals tab to see if you're on track. Can be project-specific or apply to any writing you log in that timeframe.
• Host your own data. If you run the app locally, you get all the bells and whistles, but no data leaves your computer. Be sure to save backups in multiple places to prevent data loss.

  Next up: web hosting for everyone! I'm in the process of tracking down and setting up privacy-first hosting.

• Export to clipboard. Copy JSON backups, save them, edit them.
• Import from file. Import saved backups. Great for if you need to move devices but want to keep that local-first experience.

Local development

Running this app locally saves your data in a .sqlite file on your computer. No data is sent, sold, or tracked (...by me). You can export this data by going to the History tab and clicking "Export", which will copy your data in a JSON format that may be saved and imported into the app.

git clone git@github.com:kenziebottoms/ficsheet.git
cd ficsheet
nvm use # if using nvm
npm i
npm start

For greater error visibility, you can also run the front and back ends separately.

Command	Description
npm run dev	Serve React SPA with vite command
npm run serve	Serve Node Express API with nodemon command
npm run start	Serve both the front- and back-end with concurrently

Toolbox

• ESLint
• Material UI
• Tailwind CSS
• Vite

---

React + TypeScript + Vite Boilerplate documenation

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])