esdecode
Starter kit

Cadence — React Habit Tracker App

No ratings
|0 Sales|by Quietframe Studio|v1.0.0
Cadence — React Habit Tracker App screenshot 1
1 / 4

Preview and demo

Status: unchecked. Availability checks are not a security guarantee.

0
Sales
Rating
0
Reviews

Description

Cadence is a polished, local-first habit & routine tracker built with React 18, TypeScript and Vite. Add habits with flexible cadences, check them off each day, and watch streaks, heatmaps and insights build up — all stored in the browser, no backend required.

The earthy, editorial design — warm cream, sage green and terracotta with a Fraunces serif — is a deliberate break from the usual blue/purple SaaS dashboard look.

Highlights

  • React 18 · TypeScript (strict) · Vite 5 — no UI/CSS framework, no chart library.
  • Today check-in, habit management, per-habit heatmap, insights and settings.
  • Real streak engine: current & longest streaks and completion rate from your log history.
  • Daily / weekday / X-times-per-week cadences, color & emoji icons.
  • localStorage persistence with JSON export / import / reset.
  • Toasts, modals, empty / loading / error / validation states, responsive mobile drawer.

Features

React 18 + TypeScript + Vite
Local-first: localStorage persistence, no backend
Today check-in with progress ring & dynamic header
Daily / weekday / X-times-per-week cadences
Streak engine: current, longest & completion rate
GitHub-style heatmap calendar per habit
Insights: best weekday, totals, comparison bars, streak leaderboard
JSON export / import / reset, accent themes
Typed React Context state — swap for your API
Responsive with empty/loading/error/validation states

Requirements

  • Node.js 18+ and npm
  • A modern browser
  • Deploys as static files anywhere

Changelog

**v1.0.0** (Latest) - Initial release - React 18 + TypeScript + Vite habit tracker - Streaks, heatmap, insights, local-first storage

Frequently Asked Questions

Does this app require a backend, database, or paid API to run?

No — Cadence is entirely local-first and stores all habit and log data in the browser's localStorage. There is no backend, server, or external API dependency, so you can run it straight after installing npm packages with no extra setup or running costs.

What are the technical requirements to use and build this template?

You need Node.js installed locally to run the Vite dev server and build pipeline. The project is built with React 18, TypeScript (strict mode), and Vite 5 — no additional UI framework or chart library is required.

What exactly is included in the purchase?

You receive the full source code including all React components, TypeScript types, the streak engine, heatmap calendar, insights dashboard, JSON export/import/reset logic, toast and modal systems, accent theming, and responsive mobile drawer. Everything shown in the listing is production-ready and included — no upsells or locked sections.

How easy is it to connect this to my own API or database instead of localStorage?

The entire state layer is built on typed React Context, which is intentionally designed to be swapped out. You can replace the localStorage calls inside the Context provider with your own API or database client without touching any of the UI components.

Can I customise the visual design and branding for my own project or client?

Yes — the design uses plain CSS with no UI framework, making it straightforward to restyle. Accent themes are built in, and the distinctive earthy palette (cream, sage green, terracotta) and Fraunces serif typeface can be replaced to match any brand.

Which cadence/scheduling options are supported for habits?

Cadence supports three scheduling types: every day (daily), specific weekdays only, or a set number of times per week. The streak engine and completion rate calculations are all cadence-aware, so stats remain accurate regardless of which schedule a habit uses.

Technical requirements

  • See the detailed requirements in the product description below.

What is included

  • Starter kit package with full downloadable files
  • Product listing and product page guidance
  • Product files ready for self-hosting or integration
  • 10 listed features
  • Changelog included on the product page

Who is this product for

  • Buyers who need a starter kit rather than a custom build from scratch
  • Teams shopping within React
  • Use cases aligned with react, react template, habit tracker, typescript

License and usage

  • Regular license for one end product where end users are not charged for access to the item itself
  • Extended license for one end product where end users can be charged
  • Verify the exact usage rights on the selected license before deployment or client handoff
  • Keep the purchase record and license certificate for future verification

Updates and support

  • 6 months of seller support included
  • Review the seller support scope before purchasing.
  • Recent changes are visible in the product changelog
  • Use the changelog to confirm ongoing maintenance before rollout

Technical details

Current version
1.0.0
Last updated
Jul 11, 2026
License options
Regular, Extended
Support period
6 months of seller support included

Marketplace review

Content review process

No completed marketplace review record is available for this product.

This is not a full penetration test or a guarantee that the product is vulnerability-free.

License comparison

A license is tied to one end product, not strictly to one domain. Development, staging, and the final production domain may belong to the same licensed deployment.

UseRegular LicenseExtended License
Source code modification
Own project use
One client project
One production deployment
Development and staging
Paid SaaS or paid user access
Multiple unrelated client projects
Redistribute source code
Resell source code
Read the full license terms →

License FAQ

Can I modify the source code?

Yes, under both licenses.

Can I use the script for a client?

Yes, for one client end product.

Can I install it on a staging domain?

Yes. Development and staging may belong to the licensed deployment.

Do I need another license for another client?

Yes, each unrelated client end product needs its own license.

Can I use it for a paid SaaS?

Yes, with an Extended License.

Can I resell the source code?

No. Standalone redistribution or resale is prohibited.

Is a license limited strictly to one domain?

No. It is tied to one end product, which may use development, staging, and production domains.

$18.00

For one end product — free to end users

Price$14.00
VAT 23%$3.22
Rounding adjustment$0.78
Total$18.00
Instant digital download
Review scope shown below
Recent product changes listed in the changelog
6 months of seller support included

Item Details

Last Update
July 11, 2026
Published
June 8, 2026
Version
1.0.0
Category
React
Sales
0
Reviews
No reviews

Share This Item

License Info

Regular License — Use in one end product which end users are not charged for.

Extended License — Use in one end product which end users can be charged for.

Verify a license key →