Everything you need to build a Svelte library, powered by sv
.
Read more about creating a library in the docs.
##Overview Real-time cryptocurrency tracker with user auth built with:
SvelteKit + TypeScript
SQLite3 database
Tailwind CSS
CurrencyAPI BitcoinAPI ETHAPI
Live BTC/ETH price updates
Secure authentication
Responsive UI
Tech Stack: Frontend: SvelteKit + TypeScript
/src/components
(^) Reusable UI components following Svelte best practices:
Core Components:
Header.svelte
: Responsive navigation bar with auth stateFooter.svelte
: Standard footer with project infoSidebar.svelte
: Context-aware navigation panelAPI Services:
crypto.ts
: Handles all cryptocurrency data fetchingauth.ts
: Authentication logicUI Components:
PriceChart.svelte
: Interactive price visualization
/src/routes
File-system based routing with SvelteKit conventions:
Authentication (/(auth)
):
login/+page.svelte
: Secure login interfacesignup/+page.svelte
: User registration flowCryptocurrency Pages:
/bitcoin/+page.svelte
: /ethereum/+page.svelte
:Core Pages:
/+page.svelte
: Dashboard homepageSQLite Setup: Creates userDB.db if missing users(id, username, password_hash) sessions(id, user_id, expires_at)
Provides:
hashPassword() : Hashes a password using Argon2id
verifyPassword() :Compares a plaintext password against its hashed version.
Tables: 1: users id: Auto-incrementing primary key. username: Unique, non-nullable. password_hash: Stores Argon2id-hashed passwords.
2: sessions id: Session identifier (stored in cookies). user_id: Foreign key linked to users.id. expires_at: Session expiration timestamp.
How It Works Login Flow
User submits credentials → Password is hashed and compared with the database.
On success:
A session is created in the sessions table.
A session_id cookie is set in the response.
Session Validation
Every request checks for a valid session_id cookie.
If valid, event.locals.user is populated with:
Delete the session from the database and clear the cookie.
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