Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

How to build Habit tracker with Lovable?

Creating a New Lovable Habit Tracker Project

Create a new project in Lovable. Since Lovable does not include a terminal, all file creation is done via Lovable’s built-in file editor.
In the project’s file tree, create the following files:
- index.html – This will serve as the main user interface.
- app.js – This file contains the logic for tracking habits.
- style.css – This file will contain style rules to make the habit tracker visually appealing.
There is no need for installing dependencies via a terminal. We will include any external libraries using a CDN in our code (if needed).

Building the User Interface (index.html)

Open the index.html file in Lovable’s editor and insert the following HTML snippet. This code sets up a simple structure for the habit tracker with an input to add new habits and a list container to display them.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Habit Tracker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>My Habit Tracker</h1>
        <input type="text" id="habitInput" placeholder="Enter a new habit">
        <button id="addHabitBtn">Add Habit</button>
        <ul id="habitList">
            <!-- Habit items will appear here -->
        </ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

Implementing Habit Tracker Logic (app.js)

Open the app.js file in Lovable’s editor and paste the following JavaScript code. This code makes the habit tracker interactive by enabling adding new habits and toggling them as complete or incomplete.


document.addEventListener('DOMContentLoaded', function() {
    const habitInput = document.getElementById('habitInput');
    const addHabitBtn = document.getElementById('addHabitBtn');
    const habitList = document.getElementById('habitList');

    // Function to create a new habit list item.
    function addHabit() {
        const habitText = habitInput.value.trim();
        if (habitText === '') {
            alert('Please enter a habit!');
            return;
        }
        const listItem = document.createElement('li');
        listItem.textContent = habitText;
        listItem.addEventListener('click', function() {
            listItem.classList.toggle('completed');
        });
        habitList.appendChild(listItem);
        habitInput.value = '';
    }

    addHabitBtn.addEventListener('click', addHabit);

    // Optional: Allow pressing Enter to add a habit.
    habitInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            addHabit();
        }
    });
});

Styling the Habit Tracker (style.css)

Open the style.css file in Lovable’s editor and add the following CSS. This makes the user interface clean and highlights completed habits.


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input[type="text"] {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 15px;
    margin-left: 10px;
    border: none;
    background: #28a745;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

li.completed {
    text-decoration: line-through;
    color: #777;
}

Integrating External Dependencies (Optional)

If you need to use external libraries (for example, for date management or animations), include them via a CDN directly in the index.html file. For instance, to include Moment.js, add the following snippet inside the <head> section:


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

This way, there is no requirement to install dependencies via a terminal since Lovable does not support terminal commands.

Testing Your Habit Tracker

After saving all the above files, click the "Run" button in Lovable’s interface. Lovable will serve your index.html page.
Test your application by entering a habit in the input field and clicking the "Add Habit" button. Click on a habit item to toggle its completion state.
Review any changes or errors directly in Lovable’s live preview pane.

Deploying and Sharing Your Habit Tracker

Once you are satisfied with the functionality, use Lovable’s sharing options to publish your project. Lovable automatically exposes a live URL that you can share with others.
Make sure to test the published version to verify that all assets (index.html, app.js, style.css) are loading correctly.

How to Build a Habit Tracker API with Express, Mongoose, and Lovable


const express = require('express');
const mongoose = require('mongoose');

const app = express();
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/habittracker', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const habitSchema = new mongoose.Schema({
  name: { type: String, required: true },
  frequency: { type: Number, default: 1 },
  events: [{
    date: { type: Date, default: Date.now },
    completed: { type: Boolean, default: false }
  }]
});

const Habit = mongoose.model('Habit', habitSchema);

app.post('/api/habit', async (req, res) => {
  try {
    const { name, frequency } = req.body;
    const habit = new Habit({ name, frequency });
    await habit.save();
    res.status(201).json(habit);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.get('/api/habit/:id', async (req, res) => {
  try {
    const habit = await Habit.findById(req.params.id);
    if (!habit) return res.status(404).json({ error: 'Habit not found' });
    res.json(habit);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.post('/api/habit/:id/complete', async (req, res) => {
  try {
    const habit = await Habit.findById(req.params.id);
    if (!habit) return res.status(404).json({ error: 'Habit not found' });
    habit.events.push({ date: new Date(), completed: true });
    await habit.save();
    res.json(habit);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

How to integrate Lovable notifications into your habit tracker


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Habit Tracker - Lovable Integration</title>
  </head>
  <body>
    <h1>Habit Tracker: Complete Habit</h1>
    <button id="completeHabit" data-habit-id="habit-456">Complete Habit</button>
    
    <!-- This hidden form mimics a backend API endpoint call for habit completion -->
    <script>
      document.getElementById('completeHabit').addEventListener('click', async function () {
        const habitId = this.getAttribute('data-habit-id');
        
        // First: Notify your own backend about habit completion
        try {
          const backendResponse = await fetch('https://your-backend.example.com/api/habits/' + habitId + '/complete', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ completedAt: new Date().toISOString() })
          });
          
          if (!backendResponse.ok) {
            throw new Error('Failed to update your backend');
          }
          
          // Second: Connect to the external Lovable API to send a celebratory notification
          const lovableResponse = await fetch('https://api.lovable.com/v1/notify', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer YOUR_LOVABLE_API\_TOKEN'
            },
            body: JSON.stringify({
              habitId: habitId,
              message: 'Yay! You completed your habit today!',
              timestamp: new Date().toISOString()
            })
          });
          
          if (!lovableResponse.ok) {
            throw new Error('Failed to send notification to Lovable');
          }
          
          const notificationResult = await lovableResponse.json();
          console.log('Notification sent successfully:', notificationResult);
          alert('Habit completed and notification sent!');
        } catch (error) {
          console.error(error);
          alert('Error processing habit completion.');
        }
      });
    </script>
  </body>
</html>

How to Sync and Reward Your Daily Habits Using Lovable API


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Habit Tracker - Daily Sync and Reward</title>
  </head>
  <body>
    <h1>Daily Habit Sync</h1>
    <button id="syncHabits">Sync and Reward Habits</button>
    <div id="status"></div>
    
    <script>
      document.getElementById('syncHabits').addEventListener('click', async () => {
        const statusDiv = document.getElementById('status');
        statusDiv.innerHTML = 'Fetching today's habits...';
        try {
          // Fetch today's habits from your backend
          const habitsRes = await fetch('https://your-backend.example.com/api/habits/today', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
          });
          if (!habitsRes.ok) throw new Error('Unable to fetch habits');
          const habits = await habitsRes.json();
          
          // Filter the habits that are completed but not yet rewarded
          const completedHabits = habits.filter(habit => habit.completed && !habit.rewarded);
          if (completedHabits.length === 0) {
            statusDiv.innerHTML = 'No new completed habits to reward today.';
            return;
          }
          
          // Process reward for every completed habit
          for (const habit of completedHabits) {
            // Send reward details to Lovable API to award points
            const rewardRes = await fetch('https://api.lovable.com/v1/rewards', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR_LOVABLE_API\_TOKEN'
              },
              body: JSON.stringify({
                habitId: habit.id,
                userId: habit.userId,
                points: 10,
                message: 'Great job on completing your habit today!'
              })
            });
            
            if (!rewardRes.ok) {
              statusDiv.innerHTML += `<p>Failed to reward habit: ${habit.name}</p>`;
              continue;
            }
            
            // Update the backend to mark the habit as rewarded
            await fetch(\`https://your-backend.example.com/api/habits/${habit.id}/reward\`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ rewarded: true })
            });
            
            statusDiv.innerHTML += `<p>Reward sent for habit: ${habit.name}</p>`;
          }
        } catch (error) {
          statusDiv.innerHTML = \`<p>Error: ${error.message}</p>\`;
        }
      });
    </script>
  </body>
</html>

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Best Practices for Building a Habit tracker with AI Code Generators

Understanding the Habit Tracker & AI Code Generator Concept

This guide explains how to build a habit tracker application enhanced by AI code generators.
A habit tracker is a tool to monitor daily habits, set reminders, and visualize progress.
AI code generators help write boilerplate code, suggest improvements, and speed up development.

Prerequisites

A computer with Internet access.
Basic understanding of how web applications work, even if you are not a developer.
An account on an AI code generation platform (e.g., GitHub Copilot, ChatGPT, or similar).
A simple code editor like Visual Studio Code.
Willingness to learn and experiment with AI-generated code snippets.

Project Setup

Create a new folder on your computer called "habit-tracker-project".
Open this folder in your code editor.
Create a file called index.html for the main user interface.
Create a file called app.js for the application's logic.
Create a file called styles.css for design and layout.

Using AI Code Generators in Your Project

Open your chosen AI code generation tool alongside your code editor.
Ask the AI to generate a basic HTML template. For example, you could request: "Generate a basic HTML template for a habit tracker."
Review the generated code and copy it into your index.html file.
Similarly, ask the AI to produce JavaScript functions that add or remove habits, update a list, and store data locally.
Insert the AI generated code into your app.js file.

Setting Up a Basic Habit Tracker Interface

In index.html, start with a basic HTML skeleton:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Habit Tracker</title>
  </head>
  <body>
    <h1>My Habit Tracker</h1>
    <div id="habit-container">
      <!-- Habits will be displayed here -->
    </div>
    <script src="app.js"></script>
  </body>
</html>

In styles.css, add simple styling to enhance the look of the page.


body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

#habit-container {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

Implementing Core Habit Tracker Functionality

Use AI code generator to help you write functions for adding a new habit. For instance, ask the AI: "Write a JavaScript function to add a new habit to a list and store it in localStorage."
Insert the following sample function in your app.js file:


function addHabit(habit) {
  let habits = JSON.parse(localStorage.getItem('habits')) || [];
  habits.push(habit);
  localStorage.setItem('habits', JSON.stringify(habits));
  displayHabits();
}

Create a function that displays habits from localStorage on the webpage:


function displayHabits() {
  let habits = JSON.parse(localStorage.getItem('habits')) || [];
  const container = document.getElementById('habit-container');
  container.innerHTML = '';
  habits.forEach(function(habit, index) {
    const habitDiv = document.createElement('div');
    habitDiv.textContent = habit;
    container.appendChild(habitDiv);
  });
}

Integrating AI-Generated Code Snippets Safely

Always review AI-generated code for accuracy and compatibility with your existing code.
Test each snippet by integrating it into small parts of your project before combining globally.
Refine prompts and regenerate portions if necessary until the code fits your needs.
Ensure the code follows best practices, such as proper variable naming and error handling.

Testing and Iteration

After adding new functionalities, open the index.html file in your browser to test the app.
Use the developer console to check for any JavaScript errors.
Iterate on the AI-generated code by requesting improvements, for instance, "Optimize the addHabit function for better performance."
Keep refining both the design and functionality, ensuring the habit tracker remains user friendly.

Deployment and Best Practices

Use version control

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022

How to build Habit tracker with Lovable?

How to build Habit tracker with Lovable?

Want to explore opportunities to work with us?

How to Build a Habit Tracker API with Express, Mongoose, and Lovable

How to integrate Lovable notifications into your habit tracker

How to Sync and Reward Your Daily Habits Using Lovable API

Want to explore opportunities to work with us?

Best Practices for Building a Habit tracker with AI Code Generators

Client trust and success are our top priorities