Create an app launch tracker

To create an App Launch Tracker, you can build a simple application that logs and displays how many times an app has been opened. Below is a minimal working version using React (Frontend) and localStorage to persist launch data. This can be expanded later with backend storage if needed.

✅ Features:

• Tracks how many times the app has been launched.

• Shows the last launch time.

• Resets data button.

React Code (App Launch Tracker)

javascript
CopyEdit
import React, { useEffect, useState } from "react";

export default function AppLaunchTracker() {
  const [launchCount, setLaunchCount] = useState(0);
  const [lastLaunch, setLastLaunch] = useState(null);

  useEffect(() => {
    // Get current data from localStorage
    const storedCount = parseInt(localStorage.getItem("launchCount")) || 0;
    const storedLastLaunch = localStorage.getItem("lastLaunch");

    // Update state
    setLaunchCount(storedCount + 1);
    setLastLaunch(storedLastLaunch);

    // Save new values
    localStorage.setItem("launchCount", storedCount + 1);
    localStorage.setItem("lastLaunch", new Date().toISOString());
  }, []);

  const resetTracker = () => {
    localStorage.removeItem("launchCount");
    localStorage.removeItem("lastLaunch");
    setLaunchCount(0);
    setLastLaunch(null);
  };

  return (
    <div className="p-6 max-w-md mx-auto bg-white rounded-2xl shadow-md space-y-4">
      <h1 className="text-2xl font-bold text-gray-800">App Launch Tracker</h1>
      <p className="text-lg text-gray-700">
        This app has been launched <strong>{launchCount}</strong> time{launchCount !== 1 ? "s" : ""}.
      </p>
      {lastLaunch && (
        <p className="text-sm text-gray-500">
          Last launch was on: {new Date(lastLaunch).toLocaleString()}
        </p>
      )}
      <button
        onClick={resetTracker}
        className="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
      >
        Reset Tracker
      </button>
    </div>
  );
}

📦 Usage

• Install React (if not already):

  bash
  CopyEdit
  npx create-react-app app-launch-tracker
  cd app-launch-tracker
  

• Add the component: Replace App.js with the code above or import AppLaunchTracker and render it in App.js.

• Run the app:

  bash
  CopyEdit
  npm start
  

🧠 Notes

• This tracker uses localStorage, so it’s only browser-specific.

• For real-world apps, replace localStorage with an API call to log launches in a database.

• You can extend this to track device info, location, or sessions.

Would you like a version using a backend (e.g., Node.js + MongoDB or Firebase)?