flump

Finance dashboard project based on Remix JS Blues stack using:

• supabase - postgresql database
• vite - build tool
• vitest - unit/integration testing
• cypress - e2e testing
• eslint - linting
• prettier - formatting
• fly.io - hosting
• github actions - ci/cd
• starlight - documentation

Development

• Install Node.js and pnpm.

• Set up supabase locally docs

  • Docker Desktop
  • Supabase CLI
  • Git

• Run the remix.init script and commit the changes it makes to your project.

  npx remix init
  git init # if you haven't already
  git add .
  git commit -m "Initialize project"

• Login to supabase

  supabase login

• Start Supabase services Initialize Supabase to set up the configuration for developing your project locally:

supabase init

• Make sure Docker is running. The start command uses Docker to start the Supabase services. This command may take a while to run if this is the first time using the CLI.

supabase start

Once all of the Supabase services are running, you'll see output containing your local Supabase credentials. It should look like this, with urls and keys that you'll use in your local project:

• create .env file

  mkdir .env

• add local supabase url and anon_key to .env file

  SUPABASE_URL="http://localhost:54321"
  SUPABASE_ANON_KEY="your anon key"

• apply migrations

  supabase db start

• Run the first build:

  pnpm run build

• Start dev server:

  pnpm run dev

This starts your app in development mode, rebuilding assets on file changes.

Scripts

• build: Runs the build:* scripts concurrently.
• build:remix: Builds the remix project.
• build:server: Bundles the server.ts file using esbuild.
• commit: Runs git-cz for committing changes.
• dev: Runs the dev:* scripts concurrently.
• dev:build: Builds the server in development mode and watches for changes.
• dev:remix: Runs the remix project in development mode and watches for changes.
• dev:server: Runs the built server in development mode with Node.js inspector and required modules.
• docker: Starts the Docker containers using docker-compose.
• format: Formats the code using Prettier.
• lint: Lints the code using ESLint with auto-fixing, caching, and a specified cache location.
• lint:staged: Runs linting on staged files using the timezone UTC.
• start: Starts the server in production mode.
• start:mocks: Starts the server in production mode with mocks.
• supabase:start: Starts the Supabase server.
• supabase:stop: Stops the Supabase server.
• test: Runs the tests using vitest.
• test:ui: Runs the tests with the UI using vitest.
• test:preview: Creates a preview of the tests using vite.
• test:e2e:dev: Starts the server in development mode and runs Cypress tests.
• pretest:e2e:run: Runs the build before running the end-to-end tests.
• test:e2e:run: Starts the server with mocks and runs Cypress end-to-end tests.
• ts-coverage: Generates a TypeScript coverage report with strict settings.
• ts-coverage:ui: Generates a TypeScript coverage report and creates a preview using vite.
• validate: Runs multiple tasks including tests, linting, type checking, and running end-to-end tests.

Dependencies

• @chakra-ui/react: React UI component library with Chakra UI styling.
• @emotion/cache: Cache package for Emotion CSS-in-JS library.
• @emotion/react: React bindings for the Emotion CSS-in-JS library.
• @emotion/server: Server-side rendering support for Emotion CSS-in-JS library.
• @emotion/styled: Styled component support for Emotion CSS-in-JS library.
• @isaacs/express-prometheus-middleware: Prometheus middleware for Express.js to collect and expose metrics.
• @remix-run/css-bundle: CSS bundling package for Remix Run framework.
• @remix-run/express: Express.js integration for Remix Run framework.
• @remix-run/node: Node.js runtime for Remix Run framework.
• @remix-run/react: React bindings for Remix Run framework.
• @remix-run/server-runtime: Server runtime for Remix Run framework.
• @supabase/auth-helpers-remix: Remix-specific authentication helpers for Supabase.
• @supabase/supabase-js: JavaScript client library for Supabase.
• bcryptjs: Library for hashing passwords using bcrypt algorithm.
• compression: Compression middleware for Express.js.
• cross-env: Cross-platform environment variable setting package.
• express: Fast and minimalist web framework for Node.js.
• framer-motion: Animation library for React.
• isbot: Package for detecting bots based on user agent.
• morgan: HTTP request logger middleware for Node.js.
• prom-client: Prometheus client library for Node.js.
• react: JavaScript library for building user interfaces.
• react-dom: React package for DOM rendering.
• supabase: Open-source alternative to Firebase for building realtime and collaborative applications.
• tiny-invariant: Tiny utility for handling invariants.

Dev Dependencies

• @commitlint/cli: Linting tool for commit messages.
• @commitlint/config-conventional: Commitlint configuration following conventional commits.
• @faker-js/faker: Library for generating fake data.
• @remix-run/dev: Development server for Remix Run framework.
• @remix-run/eslint-config: ESLint configuration for Remix Run framework.
• @testing-library/cypress: Cypress testing library for Cypress.io.
• @testing-library/jest-dom: Custom DOM matchers for Jest.
• @testing-library/react: Testing utilities for React components.
• @testing-library/user-event: User events simulation library for testing.
• @trivago/prettier-plugin-sort-imports: Prettier plugin for sorting imports.
• @types/bcryptjs: TypeScript typings for bcryptjs.
• @types/compression: TypeScript typings for compression.
• @types/eslint: TypeScript typings for ESLint.
• @types/express: TypeScript typings for Express.js.
• @types/morgan: TypeScript typings for Morgan HTTP request logger.
• @types/node: TypeScript typings for Node.js.
• @types/react: TypeScript typings for React.
• @types/react-dom: TypeScript typings for React DOM.
• @typescript-eslint/eslint-plugin: ESLint plugin for TypeScript.
• @typescript-eslint/parser: Parser for TypeScript ESLint.
• @vitejs/plugin-react: React plugin for Vite bundler.
• @vitest/browser: Headless browser runner for vitest.
• @vitest/coverage-c8: Coverage reporter for vitest using c8.
• @vitest/coverage-v8: Coverage reporter for vitest using V8.
• @vitest/ui: UI for vitest test runner.
• autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes.
• c8: Code coverage tool for Node.js using V8 coverage API.
• cookie: HTTP cookie parsing and serialization for Node.js.
• cypress: JavaScript end-to-end testing framework.
• dotenv: Environment variable loader for Node.js.
• esbuild: JavaScript bundler and minifier.
• eslint: Pluggable JavaScript linter.
• eslint-config-prettier: ESLint configuration to disable conflicting Prettier rules.
• eslint-config-react-app: ESLint configuration for React applications.
• eslint-plugin-cypress: ESLint plugin for Cypress.io.
• eslint-plugin-no-relative-import-paths: ESLint plugin to disallow relative import paths.
• eslint-plugin-sonarjs: ESLint plugin that provides rules from SonarJS.
• happy-dom: In-memory DOM implementation for testing.
• husky: Git hooks made easy.
• install: CLI tool to install packages.
• lint-staged: Run linters on Git staged files.
• msw: Library for mocking HTTP requests in tests.
• npm-run-all: CLI tool to run multiple npm scripts sequentially or in parallel.
• postcss: Tool for transforming CSS with JavaScript.
• prettier: Opinionated code formatter.
• start-server-and-test: CLI tool to start server and run tests against it.
• ts-node: TypeScript execution and REPL for Node.js.
• tsc-files: TypeScript checker for changed files.
• tsconfig-paths: Load modules using tsconfig.json paths.
• type-coverage: Static analysis tool to check TypeScript code coverage.
• typescript: Typed superset of JavaScript.
• typescript-coverage-report: Generate code coverage reports for TypeScript projects.
• vite: Fast development server and bundler.
• vite-plugin-checker: Vite plugin for running TypeScript and ESLint checks.
• vite-tsconfig-paths: Vite plugin for resolving TypeScript paths.
• vitest: Test runner for Vite and Vue.
• vitest-github-actions-reporter: GitHub Actions reporter for vitest.
• vitest-sonar-reporter: SonarQube reporter for vitest.
• webdriverio: Next-gen browser and mobile automation framework.