Welcome to Create Ace App ✨

✅ State saved through refresh!✅ API calls, anchors & redirects are typesafe!✅ State saved while offline!
💸 Total Balance
Loading...
📉 Monthly Expenses
Loading...
📈 Monthly Income
Loading...

🍰 Categories

📆 Transactions

🤓 Markdown Example

This SEO friendly markdown ❤️ aims to briefly summarize what’s included with Create Ace App!

⚙️ General

  1. Create Ace App can be installed as a Desktop application ✅ Create Ace App

🧠 State

  1. State saved through refresh & while offline ✅
  2. On page load, static content is available immediately & dynamic state is streamed in ✅

🙌 Autocomplete

  1. Anchors are typesafe ✅
  2. Redirects are typesafe ✅
  3. API’s called with typesafe functions ✅

🧩 Components

  1. Creating & updating charts is easy ✅
  2. Aria compliant tabs, toasts, tooltips ✅
  3. Nav animations continue as current page updates ✅
  4. Tables are filterable, scrollable & sortable ✅
  5. Smooth list addition animations @ Chat & Fortunes ✅
  6. SEO Friendly Markdown w/ Code Highlighting, Tabs & Solid component support from a .md file ✅
// Component that creates this page 🙌

export default new Route('/')
  .layouts([RootLayout])
  .component(() => {
    const {sync} = useStore()

    apiGetTransactions({ // api's load simultaneously btw ❤️
      queryType: 'stream',
      onSuccess: (d) => sync('transactions', d)
    })

    apiGetFinances({ // on refresh => requests start on the BE 🤓
      queryType: 'stream',
      onSuccess(d) {
        sync('financeSummary', d.summary)
        sync('financeCategories', d.categories)
      }
    })

    return <>
      <Title>🏡 Home · Create Ace App</Title>
      <Meta property="og:title" content="🏡 Home · Create Ace App" />
      <Meta property="og:type" content="website" />
      <Meta property="og:url" content={buildOrigin} />
      <Meta property="og:image" content={buildOrigin + '/og/home.webp'} />

      <main class="home">
        <Welcome />

        <section class="summaries">
          <Summary key="balance" label="💸 Total Balance"  />
          <Summary key="monthlyExpenses" label="📉 Monthly Expenses" />
          <Summary key="monthlyIncome" label="📈 Monthly Income" />
        </section>

        <section class="vizs">
          <Categories />
          <Transactions/>
        </section>

        <MarkdownItStatic content={mdAppInfo} registerHljs={registerHljs} $div={{ class: 'markdown' }} />

        <Nav showRefresh={true} />
      </main>
    </>
  })