create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Docker Postgres Setup

• in db-backend there is a docker compose
  • run docker compose up -d to start the database, to shutdown run docker compose down
• start the dashboard with npm run dev
  • without the database running the page will show errors
• to create dummy data there is a script in package.json if you run npm run test-data
• the database is interacted with via the drizzle orm javascript package
  • this gives us drizzle studio
  • the 'contract runtime' will need to update this database as it gets information and with every page reload the dashboard will have the most up to date info
  • there are db specific functions in src/lib/db

Svelte layout

• an 'api' or 'backend' file is one that ends in 'js' or 'ts'. These files do not render content but provide json data to the corresponding page file (the one with the same name)
  • for instance '+page.server.js' provides json data to '+page.server.svelte'.
  • the server keyword tells sveltekit to render this on the server not the client
• We have several svelte components in src/lib/components
  • for rendering the list of miners / farmers and generating a basic graph of hashrate
  • hashrate will need to be improved with toggling for monthly / weekly etc... without long term data this becomes a challenge to template out
• the page operates like an SPA but there are links for the individual pages (miner, farmer, etc..) that are linked to via the nav bar
• the files src/routes/api are js / ts files that interact with the database and provide json data either to an end user or to other pages that use the functions defined in these 'api' files

Styling

• there is no definitive style guide but everything is styled using scss and bootstrap
• bootstrap seems to provide the best way to get something off the ground with limited css knowledge
• scss allows for better customization and with bootstrap you get a good foundation of components that can be altered as needed.
• the colors I went with are an eth blue, btc orange, and muted greys.