Lemon is a simple local "habit tracker" for 30-day challenges, created for personal use (and mostly to tinker with Server Actions!).
You can color-code each challenge, mark its status daily, and watch your progress.
lemon-homepage-demo.mov
Clone the repository:
git clone git@github.com:rivea0/lemon.git
cd into it:
cd lemon
Install dependencies:
npm install
Initialize the SQLite3 database (this will create a challenges.db file inside src/app/db, see schema):
cd src/app/db
node initializeDb.js
Run the server:
npm run dev
You can add a new challenge by going to the /add-challenge route, providing a title and choosing a color for the challenge (it defaults to yellow if you don't pick any). You can also provide a description, which is shown on the homepage underneath the challenge title, and you can also select a starting date of your own choosing. It defaults to today's date if you don't specifically provide one.
lemon-add-demo.mov
On the homepage, you can see all your challenges and "tracker grids" for each challenge, which makes it easier to see your progress visually. You can also see challenges yet to be completed for that day, so it's easier to see them at a glance.
Each challenge has its own specific route. For example, if the title of the challenge is "push-ups," then the /push-ups route has everything specific to that challenge. (You can go to a challenge's page by clicking on it from the carousel on the homepage.) You can choose a date to change its status: not-completed, completed, or postponed. The page also has progress indicators: a tracker grid that is colored for each day with the identity color of the challenge if it's completed, a progress bar, and a radial progress showing the percentage for the completed days.
There is also a table showing the status of the challenge for each day, for example:
Each challenge page has a "remove this challenge" button at the bottom, so you can easily mark it as removed. To delete a challenge permanently, you can go to the /removed-challenges route by selecting it from the menu and clicking the "delete this challenge permanently" button.
You can select the completed challenges from the menu to see all your completed challenges. Each one also has a "delete this challenge permanently" button if you wish to completely delete it from the database.
lemon-completed-challenges.mov
You can choose the "export your data" option from the menu, which downloads an out.zip file that includes two JSON files: challenges.json, and dates-entries.json.
challenges.json includes the fields:
idtitleid_colordescriptionstart_datedeleted(0if marked as deleted,1otherwise)
dates-entries.json includes the fields:
datechallengeIdstatus
This project was started initially to track progress for DAREBEE Workout Challenges. You can go to the /inspiration route by selecting the "inspiration" option from the menu to see some examples.
You can select one of the themes:
- Light
- Dark
- Dim
- Lemonade
- Dracula
- Synthwave
- Nord
- Autumn
lemon-theme-switch.mov
You can extend the themes by choosing one from DaisyUI themes, modifying tailwind.config.ts like so:
module.exports = {
//...
daisyui: {
themes: ['light', 'dark', ..., 'cupcake'],
},
}And adding the new theme to src/app/components/ThemeSwitcher.tsx:
<li>
<input
type="radio"
name="theme-dropdown"
className="theme-controller btn btn-sm btn-block justify-start"
aria-label="Cupcake"
value="cupcake"
onChange={() => setTheme('cupcake')}
/>
</li>When you initialize the database, two tables are created: challenges and dates_entries.
The schema is almost the same with JSON fields for the files created when you export your data.
challenges table includes:
id,title,id_color,description,start_date,deleted(either0or1, defaults to0)
dates_entries table includes:
datechallengeIdstatus
challengeId being a foreign key, referencing challenges(id).
GPLv3

