Skip to content

Add Svelte sprint board template #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sureshchouksey8 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Svelte sprint board template #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions svelte/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Svelte Sprint Board

This template is a compact Svelte application for planning small product sprints. It includes a seeded task board, priority filters, owner summaries, and client-side search so the app feels useful immediately after deployment.

## Run Locally

```bash
npm install
npm run dev
```

The development server runs on port `3000`.

## Codesphere

The included `ci.yml` installs dependencies, builds the app, and serves the production preview on port `3000`.

## What This Template Demonstrates

- Reactive component state with Svelte.
- Derived board metrics without a backend.
- Responsive layouts that work for demos and starter products.
- A Vite build that can be deployed through a Codesphere CI pipeline.

## Article Draft

### Building a Lightweight Sprint Board with Svelte and Codesphere

Svelte is a strong fit for small operational tools because the mental model is direct: state lives in the component, markup reacts to that state, and the final bundle stays small. This template uses that strength to build a sprint board that is easy to understand, quick to customize, and ready to run in a Codesphere workspace.

The app starts with a small list of work items. Each item has an owner, priority, status, and estimate. From that single array, the interface renders the kanban columns, the top-line metrics, the owner summary, and the filtered search results. That keeps the example practical without hiding the important parts behind a backend or a large state library.

To deploy it in Codesphere, import the template, run the prepare pipeline, and start the run pipeline. The CI file uses `npm install`, `npm run build`, and `npm run preview -- --host 0.0.0.0 --port 3000`, so the same commands work locally and in the hosted workspace.

From here, a team can replace the seeded data with an API call, add authentication, or persist the task list in a database. The template stays intentionally small so those extensions are easy to see.
14 changes: 14 additions & 0 deletions svelte/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
prepare:
steps:
- name: "Install dependencies"
command: "npm install"
- name: "Build"
command: "npm run build"

test:
steps: []

run:
steps:
- name: "Run"
command: "npm run preview -- --host 0.0.0.0 --port 3000"
12 changes: 12 additions & 0 deletions svelte/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte Sprint Board</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions svelte/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"Workspace": "free",
"Links": {},
"Categories": ["Framework"],
"Contributors": ["sureshchouksey8"],
"Title": "Svelte Sprint Board"
}
Loading