diff --git a/_layouts/dexie-hackathon-page.html b/_layouts/dexie-hackathon-page.html new file mode 100644 index 0000000..f04e5fc --- /dev/null +++ b/_layouts/dexie-hackathon-page.html @@ -0,0 +1,413 @@ +--- +layout: dexie-hackathon-template +--- +
+
+
+

Reactive123

+

+ Dexie 3.2 integrates better with front-end frameworks. + Query the db without boilerplate and let your components mirror the database in real time. + +

Show me »

+
+
+

Easy to learn

+

Dexie was written to be straightforward and easy to learn. If you've ever had to work with native IndexedDB then you'll certainly appreciate Dexie's concise API.

+

Dive right in »

+
+
+

Easy to sync

+

With only a few lines of extra code, you can build a consistent, authenticated and access controlled local-first app!

+

Add sync »

+
+
+
+ +
+
+
+ +
+

Basic examples

+
+
+ 

+	/*
+	|----------------------------|
+	| Declare your database      |
+	|----------------------------|
+	*/
+
+	const db = new Dexie('MyDatabase');
+
+	// Declare tables, IDs and indexes
+	db.version(1).stores({
+		friends: '++id, name, age'
+	});
+
+
+
+
+
+
+
+
+
+ 

+	/*
+	|-----------------------|
+	| Then run some queries |
+	|-----------------------|
+	*/
+
+	// Find some old friends
+	const oldFriends = await db.friends
+		.where('age').above(75)
+		.toArray();
+
+	// or make a new one
+	await db.friends.add({
+		name: 'Camilla',
+		age: 25,
+		street: 'East 13:th Street',
+		picture: await getBlob('camilla.png')
+	});
+
+
+
+
+ + + Getting started with Sync + Add Sync + + +
+ +
+
+

Live Queries

+
+ +
+
+
+ + + 
  import { useLiveQuery } from "dexie-react-hooks";
+  import { db } from "./db";
+
+  export function FriendList () {
+    const friends = useLiveQuery(async () => {
+      //
+      // Query the DB using our promise based API.
+      // The end result will magically become
+      // observable.
+      //
+      return await db.friends
+        .where("age")
+        .between(18, 65)
+        .toArray();
+    });
+
+    return <>
+      <h2>Friends</h2>
+      <ul>
+        {
+          friends?.map(friend =>
+            <li key={friend.id}>
+              {friend.name}, {friend.age}
+            </li>
+          )
+        }
+      </ul>
+    </>;
+  }
+

+ Get started with Dexie in React » +

+

+ + Play with Dexie.js and React on Stackblitz + +

+ + +
+
+ + 
  <script>
+    import { liveQuery } from "dexie";
+    import { db } from "./db";
+    
+    let friends = liveQuery(async () => {
+      //
+      // Query the DB using our promise based API.
+      // The end result will magically become
+      // observable.
+      //
+      return await db.friends
+        .where("age")
+        .between(18, 65)
+        .toArray();
+    });
+  </script>
+
+  <div>
+    <h2>Friends</h2>
+    <ul>
+    {#each ($friends || []) as friend (friend.id)}
+      <li>{friend.name}, {friend.age}</li>
+    {/each}
+    </ul>
+  </div>
+
+
+
+
+
+

+ Get started with Dexie in Svelte » +

+

+ + Play with Dexie.js and Svelte in Codesandbox + +

+ +
+
+ + +
+
+ + 
  <template>
+    <h2>Friends</h2>
+    <ul>
+      <li v-for="friend in friends" :key="friend.id">
+        {{ friend.name }}, {{ friend.age }}
+      </li>
+    </ul>  
+  </template>
+  <script>
+    import { liveQuery } from "dexie";
+    import { db } from "../db";
+    import { useObservable } from "@vueuse/rxjs";
+    
+    export default {
+      name: "FriendList",
+      setup() {
+        return {
+          friends: useObservable(
+            liveQuery(async () => {
+              //
+              // Query the DB using our promise based API.
+              // The end result will magically become
+              // observable.
+              //
+              return await db.friends
+                .where("age")
+                .between(18, 65)
+                .toArray();      
+            })
+          )
+        };
+      }
+    };
+  </script>
+

+ Get started with Dexie in Vue » +

+

+ + Play with Dexie.js and Vue in Codesandbox + +

+
+
+ + +
  import { Component } from '@angular/core';
+  import { liveQuery } from 'dexie';
+  import { db } from '../db';
+  
+  @Component({
+    selector: 'friendlist',
+    template: `
+      <h2>Friends</h2>
+      <ul>
+        <li *ngFor="let friend of friends$ | async">
+          {{ friend.name }}, {{ friend.age }}
+        </li>
+      </ul>
+    `
+  })
+  export class FriendsComponent {
+    friends$ = liveQuery(() => listFriends());
+  }
+
+  async function listFriends() {
+    //
+    // Query the DB using our promise based API.
+    // The end result will magically become
+    // observable.
+    //
+    return await db.friends
+      .where("age")
+      .between(18, 65)
+      .toArray();
+  }
+
+
+  
+
+
+

+ Get started with Dexie in Angular » +

+

+ + Play with Dexie.js in Angular on Stackblitz + +

+ +
+
+
+ + + +
+
+
+ +
+
+

+ Sync +

+
+
+

+ Turn on sync with a few simple steps: +

+
+
+
+ +
+
+
+
+

1. Create your database in the cloud

+

1. Create your db in the cloud

+ 
npx dexie-cloud create
+ +

2. Whitelist your app origin(s)

+ 
npx dexie-cloud whitelist http://localhost:3000
+ +

3. Upgrade dexie + install dexie-cloud-addon

+ 
npm install dexie@latest
+npm install dexie-cloud-addon
+
+
+

4. Update your DB declaration

+ + 
  import Dexie from "dexie";
+  import dexieCloud from "dexie-cloud-addon";
+
+  const db = new Dexie('MySyncedDB', {addons: [dexieCloud]});
+
+  db.version(1).stores({
+    friends: '++id, name, age' // '++' = auto-incremented ID
+    friends: '@id, name, age' // '@' = auto-generated global ID
+  });
+
+  db.cloud.configure({
+    databaseUrl: "https://<yourdatabase>.dexie.cloud",
+    requireAuth: true // (optional. Block DB until authenticated)
+  });
+

Read more about authentication, + access control and consistency in the Dexie Cloud documentation.

+

+
+ +
+

+ Read more » + +

+
+
+ +{% include signup-forms.html %} + +
+
+
+ +
+
+
+

That's all folks!

+

Now go make something awesome.

+
+
+
diff --git a/_layouts/dexie-hackathon-template.html b/_layouts/dexie-hackathon-template.html new file mode 100644 index 0000000..2d0cb25 --- /dev/null +++ b/_layouts/dexie-hackathon-template.html @@ -0,0 +1,796 @@ + + + + Dexie Global Hackathon 25 + + + + + + + + + + + + + + + + + + + + + + + {% include navbar.html %} + + +
+
+ + + + + +
+ {% include github-star-btn.html %} +
+

Dexie Global Hackathon 25

+

+

+ +

+
+
+ + JOIN NOW + +
+
+
+
+ + +
+
+ +

Welcome to Dexie Global Hackathon 25

+

+ A global event spanning eight weeks, from February 14 to April 13, 2025. + The Dexie Global Hackathon 25 celebrates the thriving Dexie.js and Dexie Cloud community, + fostering innovation and driving the development of next-generation offline-first applications. +

+ +

+ Dexie.js is a battle-tested IndexedDB wrapper library that developers + have trusted for years. With over 12,000 stars on GitHub, + 500,000 weekly downloads on npm, and adoption in + over 27,000 GitHub repositories, it has become + a cornerstone for building robust offline-first solutions. Leading applications like + WhatsApp, GitHub, Microsoft To-Do, Wire, and Flightradar24 rely on Dexie.js, + affirming its standard-setting approach to offline-first technology. +

+ +

+ Building on this strong foundation, Dexie Cloud elevates offline-first + applications to the next level by enabling seamless multi-user synchronization with minimal + configuration. Integrate Dexie Cloud into your existing Dexie.js setup, and your app + can sync data across devices and users in minutes. With features like built-in authentication, + advanced access control, and consistent data synchronization, Dexie Cloud empowers developers + to create some of the world’s most innovative solutions. +

+ +

+ During this hackathon, participants will showcase the power of Dexie.js and Dexie Cloud + by building applications that combine offline-first functionality, real-time synchronization, + and unparalleled user experiences. Join us in exploring how Dexie Cloud can help you create + amazing solutions, seamlessly bridging the gap between offline and online. + Push the boundaries of offline-first technology and become part of this incredible community + at the Dexie Global Hackathon 25! +

+
+
+ +
+
+
+ +

Hackathon Highlights

+

+ Dexie Global Hackathon 25 is not your typical hackathon. We’re running for + eight full weeks, giving you the time and resources to dive deeper, + collaborate, and build truly innovative applications. Whether you’re an independent developer + or a small team, we invite you to bring your creativity and join us in showing the world + what Dexie.js and Dexie Cloud can do. +

+ +

Why Participate?

+
    +
  • Grow Your Skills: Master offline-first and real-time technologies
    • +
  • Boost Your Portfolio: Build and showcase innovative projects
    • +
  • Expand Your Network: Connect with a global community of developers
    • +
  • Earn Prizes & Recognition: Win licenses, highlight your work, and gain exposure
    • +
+ +

Key Dates & Rules

+
    +
  • + Start: February 14, 2025, at 00:01 GMT +
    • +
  • + End: April 13, 2025, at 23:59 GMT +
    • +
  • + Total Duration: 8 weeks +
    • +
+

+ The rules are straightforward: +

    +
  • Your project must use Dexie.js and Dexie Cloud as core components.
    • +
  • Code must be hosted on GitHub and include a live demo URL.
    • +
  • Both solo and team entries (up to four people) are welcome.
    • +
+ Participation is free for everyone. +

+
+
+
+ +
+
+ + +

Categories & Judging

+

+ We want to recognize exceptional work in different areas. Your submission can qualify for one (or more) of the following categories: +

+
    +
  • Best Collaboration App: Real-time collaboration features (e.g., Yjs integration)
    • +
  • Most Innovative Solution: Novel or unique use of Dexie Cloud
    • +
  • Best User Experience: Outstanding design, UX/UI
    • +
  • Rookie Award: Best entry by a newcomer building their first Dexie-powered app
    • +
  • Trickiest Bug: Most interesting or elusive bug reported in Dexie Cloud (helping us improve the product!)
    • +
+ +

Judging Criteria

+

+ Our jury will evaluate submissions based on: +

+
    +
  • Innovation (30%): Uniqueness, creativity, originality
    • +
  • Technical Execution (30%): Integration of Dexie.js & Dexie Cloud, code quality, stability
    • +
  • Usability (20%): UI/UX design, overall user experience
    • +
  • Presentation (20%): Clarity, documentation, demo quality, and project description
    • +
+ +

Judging Process

+
    +
  1. Initial Screening: After the submission deadline, we verify all entries meet the basic requirements (Dexie.js + Dexie Cloud, working demo, etc.).
    2. +
  2. Jury Evaluation: Each valid entry is scored by members of the jury according to the criteria above. An average score determines the ranking.
    3. +
  3. Finalists: The top-ranked projects in each category advance as finalists.
    4. +
  4. Announcement of Winners: Winners are announced on our website, and newsletter within 2–3 weeks after the deadline. The jury’s decision is final.
    5. +
+ +

The Jury

+

+ Submissions are assessed by a panel from the Dexie development team, internal product owners, + and invited external experts with extensive experience in offline-first technologies + and real-time applications. Together, they form a broad and well-rounded jury to ensure + fair and professional evaluations of all submissions. +

+ + +
+ Avatar of David Fahlander +
+

David Fahlander + (dfahlander on GitHub) +

+

+ David is the founder and lead developer behind Dexie.js and the driving force + behind Dexie Cloud. With a deep background in IndexedDB, offline-first strategies, + and performance optimizations, David brings critical domain knowledge that + helps the jury evaluate architectural, scalability, and technical aspects + of participants’ projects. His extensive experience ensures a thorough + assessment of how well teams leverage Dexie’s offline capabilities and + real-time synchronization. +

+
+
+ + +
+ Avatar of Bennie Forss +
+

Bennie Forss + (bennieforss on GitHub) +

+

+ Bennie is the founder of Zenta AB and creator of totodo.app,” an application + showcasing practical offline-first and real-time collaboration strategies with Dexie.js and Dexie Cloud. + His hands-on approach to building user-centric apps ensures the jury + maintains a strong focus on usability, seamless synchronization flows, + and overall project feasibility. Bennie’s insights help gauge whether + participants deliver solutions that excel in design, innovation, and + real-world applicability. +

+
+
+ + +
+ Avatar of Jesper Tullberg +
+

Jesper Tullberg + (GGAlanSmithee on GitHub) +

+

+ Jesper is a software engineer with a proven track record in open-source projects + related to Dexie.js. His expertise in distributed data handling, debugging, + and innovative web functionalities brings a meticulous perspective to the jury. + Jesper’s sharp eye for performance and code quality ensures that hackathon + submissions are thoroughly evaluated for technical excellence, robustness, + and overall developer craftsmanship. +

+
+
+ +
+
+
+
+
+ + +

Prizes

+

+ The Dexie Global Hackathon 25 offers valuable awards that go beyond recognition—these prizes deliver + tangible benefits through Dexie Cloud services and licenses. Here’s an overview based on current + pricing at dexie.org/cloud: +

+
    +
  • + 1st Place: One On-Prem Gold license + exposure on Dexie’s website & newsletter +
    + Value: $7,995. + This license includes full source code, five years of software updates, one year of + Gold Support, + and no recurring costs. Perfect for teams that need complete control over their data + and deeper integration with Dexie Cloud. +
    • + +
  • + 2nd Place: 1,000 Dexie Cloud seats for 12 months + exposure +
    + Value: $1,320. + Ideal for scaling your production environment without added cost. Great for real-time + collaboration apps with a large user base. +
    • + +
  • + 3rd Place & Rookie Award: 100 Dexie Cloud seats for 12 months + exposure +
    + Value: $132. + A significant boost for smaller-scale or first-time Dexie Cloud applications. +
    • + +
  • + Trickiest Bug: 100 Dexie Cloud seats for 12 months + exposure +
    + Value: $132. + Rewarding those who help improve Dexie Cloud by identifying and reporting challenging bugs. +
    • + +
  • + Biggest Security Hole: 100 Dexie Cloud seats for 12 months + exposure +
    + Value: $132. + A thank-you for proactively uncovering security vulnerabilities that keep Dexie Cloud safe. +
    • + +
  • + Community Vote: 100 Dexie Cloud seats for 12 months + exposure +
    + Value: $144. + An opportunity to earn Dexie Cloud capacity based on popular vote and show off your project’s + community appeal. +
    • +
+ +

At the end of the day, everyone who takes part in Dexie Global Hackathon 25 is a winner—because you’ll walk away with the skills to build powerful offline-first applications using Dexie.js and Dexie Cloud.

+ + + For the latest information on Dexie Cloud pricing, including any updates or promotional rates, + please see + dexie.org/cloud. + We can’t wait to see what you build! + +
+
+
+ +
+ +

Sign Up

+
+ + +
+ + +
+

Step 1: Create Your Hackathon Database

+

+ To ensure your project is recognized as part of the official hackathon, add the + + --hackathon + +  flag when creating your Dexie Cloud database: +

+ 
npx dexie-cloud create --hackathon
+
+ +
+

Step 2: Whitelist Your App Origin(s)

+

Whitelist the domains or ports where your application will run. For local development, for example:

+ 
npx dexie-cloud whitelist http://localhost:3000
+ + You can whitelist your production URL later as well. + +
+ + +
+

Step 3: Install Dexie & dexie-cloud-addon

+

Make sure you have the next version of dexie and dexie-cloud-addon (ensuring all latest features are available).

+ 
npm install dexie@next
+npm install dexie-cloud-addon@next
+ + If you are using React please run npm install dexie-react-hooks@next + +
+ +
+

Step 4: Declare your Dexie instance

+

+ Configure Dexie to use Dexie Cloud by updating your initialization code: +

+ 
+          import Dexie from "dexie";
+import dexieCloud from "dexie-cloud-addon";
+
+const db = new Dexie('MySyncedDB', { addons: [dexieCloud] });
+
+db.version(1).stores({
+  yourTable: '@id, ...indexes' // '@' = auto-generated global ID (optional but recommended)
+});
+
+db.cloud.configure({
+  databaseUrl: "https://<yourdatabase>.dexie.cloud",
+  requireAuth: true // (optional. Block DB until authenticated)
+});
+          
+          
+
+ + Read more about authentication, access control, and consistency in the + Dexie Cloud documentation. + +
+
+ +
+ + +
+
+

How to Submit

+

+ We will provided a submission form here on this page during the hackathon. + Once your project is ready, simply fill out the submission form. + Make sure to include a link to your GitHub repo and your working demo or live preview. That’s it! +

+ +

FAQ & Contact

+
    +
  • Do I need prior experience with Dexie.js? Not necessarily! We offer starter templates + and documentation to help you get up to speed quickly.
    • +
  • Can I start coding before February 14? You can plan, design, and prepare, + but official hackathon coding should primarily happen during the event.
    • +
  • How do I get help or ask questions? Join our + Discord channel + for Q&A, updates, and networking.
    • +
+
+
+

+ Project Ideas & Inspiration +

+ +

+ Wondering how to make the most of Dexie.js and Dexie Cloud? Here are some globally relevant, high-impact ideas to spark your creativity. Pick one or combine multiple concepts to create an innovative solution that appeals to both tech enthusiasts and everyday users: +

+ +
    +
  • + AI-Assisted Offline Apps:
    + Build solutions that integrate AI models for local inference or real-time recommendations, storing large model weights offline with Dexie Cloud. Only sync incremental updates—perfect for areas with limited connectivity or privacy-focused use cases. +
    • +
  • + Blockchain & Decentralized Storage:
    + Combine Dexie Cloud’s offline-first capabilities with decentralized ledgers. For example, build a system where transaction data or metadata is cached locally before finalizing on-chain, offering smoother performance and reliability even with flaky network connections. +
    • +
  • + Crypto-Enabled Microtransactions & NFT Marketplaces:
    + Use Dexie Cloud to store and sync user wallets, NFT metadata, or in-game assets. Create a frictionless experience by letting users browse and transact offline, then syncing changes to the blockchain once they reconnect. +
    • +
  • + Real-Time Collaboration Across Devices:
    + From co-editing documents to multi-user scheduling or brainstorming boards—let people collaborate seamlessly, even when they lose internet access. Dexie Cloud’s automatic sync ensures everyone stays in sync across desktops and mobiles. +
    • +
  • + Offline-First Gaming:
    + Develop a game that keeps track of scores, inventory, and progression locally. Dexie Cloud syncs updates whenever players go online, allowing for multiplayer stats, leaderboards, or item trading without requiring persistent connectivity. +
    • +
  • + Sustainability & Environmental Monitoring:
    + Crowdsource sensor data (e.g., air quality, noise levels) and store readings locally. Sync to Dexie Cloud for real-time aggregation and visualization, helping communities and researchers access critical information. +
    • +
  • + Healthcare & Telemedicine Solutions:
    + Build an offline-first patient-tracking or medication reminder app that syncs only essential data when online. Crucial for remote or emergency scenarios where intermittent connectivity is the norm. +
    • +
  • + Educational & Microlearning Platforms:
    + Create interactive lesson modules, quizzes, and progress tracking that function entirely offline. When back online, Dexie Cloud syncs scores and new content, bridging the digital divide in education. +
    • +
  • + Community-Driven Applications:
    + Launch a local news aggregator, volunteer coordination platform, or disaster-relief hub. Offline capture of updates and real-time syncing in Dexie Cloud ensures community members stay informed and engaged. +
    • +
  • + Browser Extensions & Cross-Platform Use:
    + Extend Dexie Cloud’s functionality to Chrome/Firefox/Edge add-ons, Electron apps, or React Native. Keep user settings, data, or synced features consistent across all devices with minimal overhead. +
    • +
  • + Enterprise & B2B Solutions:
    + Build internal tools (e.g., CRM, inventory management) that function offline and auto-sync to Dexie Cloud. Great for remote employees and field workers needing reliable data access at all times. +
    • +
  • + Security & Data Privacy Enhancements:
    + Implement robust encryption or role-based permissions with Dexie Cloud’s built-in access control. Perfect for sensitive apps in finance, healthcare, or legal domains. +
    • +
  • + Replacing Big Corp Services Cost-Effectively:
    + Showcase how Dexie Cloud can step in as a more affordable real-time backend—covering chat, sync, and notifications—while keeping data local-friendly and ownership flexible. +
    • +
+ +

+ These are just a few possibilities. Think about real-world problems or fun personal projects you’re passionate about—health, education, gaming, crypto, productivity, creative arts—and apply Dexie Cloud’s offline-first and multi-user sync features to make them truly stand out. We can’t wait to see what you build! +

+
+
+ +
+
+

Code of Conduct

+

+ We aim to create a safe, respectful, and inclusive environment. By participating in + Dexie Global Hackathon, you agree to follow these guidelines: +

+ +

Expected Behavior

+
    +
  • Respect Others: Treat participants, mentors, and organizers with courtesy.
    • +
  • Be Inclusive: Support an environment welcoming to all backgrounds and skill levels.
    • +
  • Collaborate: Provide constructive feedback, share knowledge, and encourage diverse ideas.
    • +
+ +

Unacceptable Behavior

+
    +
  • Harassment or Discrimination: Offensive comments or intimidation based on personal characteristics.
    • +
  • Trolling or Abuse: Personal attacks, disrespectful language, or deliberate disruption.
    • +
  • Unwanted Contact: Stalking, excessive messaging, or making someone feel unsafe.
    • +
  • Plagiarism or IP Violations: Submitting code, media, or other assets without permission.
    • +
+ +

Reporting & Consequences

+

+ If you witness or experience misconduct, contact us at hackathon@dexie.org + or reach out via our official Discord. Organizers may issue warnings, remove participants + from communication channels, or disqualify submissions if this Code of Conduct is violated. +

+
+
+

Official Disclaimers

+ +

Eligibility & Age Requirements

+

+ The Dexie Global Hackathon (“Hackathon”) is open to individuals at least 18 years old. + Entrants must have internet access, a GitHub account, and the ability to host or demonstrate + their application online. This Hackathon is globally available unless local laws prohibit + participation. Organizers reserve the right to verify age and eligibility before awarding prizes. +

+ +

Intellectual Property Ownership

+

+ All submissions remain the intellectual property of the participants. By submitting an entry, + you warrant that you own or have permission to use all content in your project. You also grant + Dexie the right to display your project name, description, screenshots, and demo links for + promotional purposes. +

+ +

Privacy

+

+ Dexie collects participant data (e.g., name, email) only for Hackathon administration and + communication. We do not sell or share personal data outside Dexie’s scope of operations. By + signing up, you consent to receive Hackathon-related emails, including updates and winner + announcements. Participants from regions with data protection laws (e.g., GDPR) have + the right to request data deletion or exercise other data rights. +

+ +

Limitations of Liability

+

+ The Hackathon is provided “as is,” without warranty of any kind. Dexie is not liable for + technical failures, lost data, or similar issues that may affect participation or scoring. + By entering, you release Dexie from any claims arising from the Hackathon, including + but not limited to personal injury, property damage, or data loss. +

+
+ + + +
+ + + + +
+
+ + +
+
+ +

Join now, folks

+

Go out there and create something amazing – the worst that can happen is that you learn how to build some of the world’s best offline-first applications.

+ +
+ + JOIN NOW + +
+
+ + + +
+
+ + +
+
+
+ + + + + + + + + + + + + + {% include google-analytics.html %} + + + \ No newline at end of file diff --git a/assets/images/hackathon/hackathon-hero.jpg b/assets/images/hackathon/hackathon-hero.jpg new file mode 100644 index 0000000..a6eb7ef Binary files /dev/null and b/assets/images/hackathon/hackathon-hero.jpg differ diff --git a/assets/images/hackathon/hackathon-section-bg.jpg b/assets/images/hackathon/hackathon-section-bg.jpg new file mode 100644 index 0000000..2034c11 Binary files /dev/null and b/assets/images/hackathon/hackathon-section-bg.jpg differ diff --git a/hackathon/index.md b/hackathon/index.md new file mode 100755 index 0000000..8ac2336 --- /dev/null +++ b/hackathon/index.md @@ -0,0 +1,3 @@ +--- +layout: dexie-hackathon-page +---