Nuances of building an AI/ML Roadmap Tracker using Google Gemini’s Canvas

by Posted on

What you will see at the end of this blog ?

But to reach the end, you need to start somewhere right ?

This weekend I was inspired by looking at value add done by creators of https://roadmap.sh/. For those who don’t know about this website, it’s a highly popular website which gives your tailored roadmap for almost all technical topics.

However, this website is very high level and I was looking for a tracker which can fit my roadmap and have a week-wise, day-wise and phase-wise tracking.

Since the rise of AI coding apps, I decided to give Gemini’s Canvas feature a try and started giving prompts to it a general set of requirements. I already had a PDF of AI-ML roadmap tracking generated again using ChatGPT.

This the first prompt I gave:

"Analyze this document and make a visual progress tracker for me which I can run on my system locally without internet. Each phase should go from 0 to 100 and then the tracker should show the overall progress bar as well. When I complete each phase, I should get congratulatory messages as well.

Make the tracker high interactive and fluid. Within each week and each task, allow me to add link to my work or my notes for future revision and then. Have separate progress sections for work done post phases. Idea is to work on it myself and then publish this entire work on a new website where people should be able to login and do the work and see their progress.

Also, it should remind me daily to dedicate 30 to 60 minutes.

In future I or anyone who logs in should be able to add learning roadmaps for new topics as well and see similar progress."

What happens next, is surprised me, that Gemini was able to come up with a full-fledged application within minutes with a clear bisection of code and preview.

The code can be copied locally on your system and can be served on localhost.

As a developer myself, I was able to notice a few details missing. My document had links with learning for each day which was missing on the first iteration. Notes and Quick notes field was overflowing. The next prompt I gave:

There couple of things which need to done.

1. Within the week, please add the finer details of each day with links

2. Make the fields "Link to work/notes" and "Add quick Notes" fit into each table, it's currently overflowing.

3. Make the background a bit more motivating and soothing.

4. On completion of each phase I should get different different congratulatory motivating messages.

Canvas started working again and generated a preview. To refine the app further, I gave the next prompt:

1. Add check boxes against the days per week and project work. The fields of Notes and Quick Notes should be added against per day and project work.

2. If I finish working on the projects and all days in the week, the checkbox for that Week should automatically get checked.

3. Make the page friendly for dark mode as well.

4. We don't need to have "Show/Hide Daily Details"

5. Change the fonts to make it bit more stylish in nature.

Next, Canvas started working again and generated a preview but this time the Links got removed. The following prompt fixed this:

Links within each day got removed, can you please add respective links as well ?

Now the app was looking really good.

Next I asked Gemini:

One last thing, tell me how to run this tracker on my localhost ?

Gemini’s response was a set of instructions on how to setup Firebase and run on NodeJS locally

The full steps are documented here: https://github.com/abhinav1592/AI-ML-Roadmap-Tracker

When I followed the steps, I got few of the following errors:

src/App.js

Line 433:78: '__initial_auth_token' is not defined no-undef
Line 514:49: '__app_id' is not defined no-undef
Line 515:76: '__app_id' is not defined no-undef
Line 541:51: '__app_id' is not defined no-undef
Line 715:52: '__app_id' is not defined no-undef
Line 716:77: '__app_id' is not defined no-undef
Line 771:52: '__app_id' is not defined no-undef
Line 791:52: '__app_id' is not defined no-undef

This __app_id is actually the app-id of Firebase project and and needs to be assigned manually. In later iterations of code, Gemini was able to fix this with following code:

// Determine appId: prioritize Canvas global if available, otherwise use
// localFirebaseConfig or a default
      const currentAppId = typeof window !== 'undefined' && typeof window.__app_id !== 'undefined' ? window.__app_id : firebaseConfig.appId || 'default-local-app-id';
      setAppId(currentAppId);

At each stage, Gemini was able to show the thinking after each prompt I generated and then showed reasoning behind those decisions.

Next when the app complied, on localhost, the output is looking like plain HTML page, without any beautiful rendering. This is what took most time to fix.

The problem got attributed to a package used for CSS tailwindcss. The instructions provided by Gemini and even I looked up online were:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

However, the install of tailwindcss did not work as expected on my local Linux machine, it seemed that that the package is there but npx tailwindcss init -p is not able to find it.

$$ npm install -D tailwindcss postcss autoprefixer
added 2 packages, removed 1 package, changed 1 package, and audited 1405 packages in 8s

268 packages are looking for funding

  run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
 npm audit fix --force
Run `npm audit` for details.

$$ npx tailwindcss init -p
sh: 1: tailwind: not found

$ ls node_modules/tailwindcss/
dist  index.css  LICENSE  package.json  preflight.css  README.md  theme.css  utilities.css

This started a cat and mouse journey between myself and Gemini to resolve this. Sometime it suggested to clean the rpm cache and re-do the install.

npm cache clean --force

Another time it suggested me to do following:

rm -rf node_modules package-lock.json
npm install

I even consulted ChatGPT for this and the result was the suggest of above two steps.

Then I decided to ask Gemini to build this app without tailwindcss package. I was surprised by the push back received from Gemini telling to me to convince me to fix the issue itself.

I understand your frustration with the tailwind: not found error. It's a common hurdle when setting up new development environments, and it usually points to an issue with how Node.js or npm is locating the executable, rather than a problem with the Tailwind CSS package itself.

Why Switching Packages for "Same Output" Is Complex
Regarding your question about using another package for the "same output":

The current React code is heavily styled using Tailwind CSS utility classes. For example, classes like bg-gradient-to-br, text-blue-700, rounded-xl, dark:from-gray-900, font-playfair, etc., are all specific to Tailwind.

If you were to switch to another CSS framework like Bootstrap, Material-UI, or Chakra UI, you would need to:

Remove almost all existing Tailwind classes from the HTML/JSX.
Learn the new framework's class names (e.g., Bootstrap uses btn btn-primary, container, row, col-md-6).
Manually replace every single Tailwind class with the equivalent (or closest equivalent) from the new framework. This would be a significant refactoring effort and the visual output would likely be different due to the distinct design philosophies of each framework.
Therefore, getting the "same output" is generally not feasible with a simple package swap; it requires a complete rewrite of the styling.

I actually got convinced and tried to do things one more time and when I was unable to figure out how to get away with tailwindcss, I entered the next prompt:

Rewrite everything without tailwindcss please, this is consuming my lot of time.

This time it created an App.css file and added css code there, provided me that file and refactored the existing code in App.js

The next error I got with the latest version of NodeJS was following:

opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],

  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

Node.js v24.1.0

This where Gemini suggested following:

Newer Node.js versions have stricter security policies that can cause issues with older cryptographic algorithms used by some dependencies during the build process.

To resolve this, you can set an environment variable before running your npm start command. This temporarily bypasses the stricter OpenSSL checks.

Please try the following in your terminal, in the root directory of your React project:

For macOS/Linux:

Bash
export NODE_OPTIONS=--openssl-legacy-provider && npm start

The application started successfully.

Now comes the actual functionality of the app itself, whatever operation I am doing the on web app, should by default persist in the database, it means if I am adding link to my notes or marking a section complete, it should not happen that if a user is restarting the server, the entire data is lost.

To resolve above problem, my next prompt was:

How to ensure that whatever is entered into Text Boxes is saved a well upon restart of application ?

This is where Gemini suggested to ensure two things:

  1. FirebaseConfig is copied correctly from the https://console.firebase.google.com/ project
  2. [This I did not knew] Set Up Firestore Security Rules

What needs to be done here is, we must go to “Firestore Database”, configure and in the Rules section add the following content and publish it:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Allow authenticated users to read and write to their own data
    match /artifacts/{appId}/users/{userId}/{documents=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }

    // Optional: If you plan to have public/shared data later, you can add rules like this:
    // match /artifacts/{appId}/public/data/{documents=**} {
    //   allow read: if true; // Publicly readable
    //   allow write: if request.auth != null; // Only authenticated users can write
    // }
  }
}

Then Gemini went ahead and explained how the Firebase database works, that whatever you enter in the text box, even a letter leads to POST call to Firebase so that the data can persist.

The next hiccup came, that even after setting the above rules, app was not persisting the data, next Gemini suggested to allow “Anonymous” sign in Firebase Authentication.

Next, I thought of adding a Google Sign-On page:

Now, how do I add a login page which uses Google Sign In ?

Gemini refactored the code again and suggested me to enable Google SignOn Authentication from Firebase. Still after reloading the app, sign-on page was not coming and there few errors in NodeJS terminal. I gave again following prompt:

Let's do two things:
1. read the roadmap data from AiRoadMapData.js
2. When i triggered, npm start I did not get a sign-on page at all.
3. Fix:
  Line 3:19:  'signInAnonymously' is defined but never used      no-unused-vars
  Line 3:38:  'signInWithCustomToken' is defined but never used  no-unused-vars

After the Sign On page started working, I asked Gemini to add Sign Out button as well and the final app looked what you have already seen in the start of this blogs. Entire project along with source code can be found here: https://github.com/abhinav1592/AI-ML-Roadmap-Tracker

Features of the app:

  1. Google Sign-In: Securely authenticate users using their Google accounts.
  2. Progress Tracking: Mark individual daily tasks and projects as complete.
  3. Real-time Updates: Progress is saved and updated in real-time using Firestore.
  4. Overall & Phase Progress: Visual progress bars for individual phases and the entire roadmap.
  5. Notes & Work Links: Add custom notes and links to your completed work/projects.
  6. Daily Reminders: A modal reminder to encourage consistent study.
  7. Plain CSS: Styled with simple, maintainable CSS (no complex frameworks).

Technologies used:

  1. React.js: Frontend library for building the user interface.
  2. Firebase:
    • Authentication: For user sign-in (Google Provider).
  3. Firestore:
    • NoSQL cloud database for storing user progress.
  4. Plain CSS: For all styling.
  5. NodeJS for local deployment

Learnings:

  1. NPM packages do not necessarily play well along with each other, having a set of working packages which are not breaking your UI is a hard challenge.
  2. Prompting can cut down your development time, but you still need to be very clear on what needs to be built or how should it evolve.
  3. Even with AI assistance, a solid understanding of core technologies (React, JavaScript, CSS, Firebase concepts) is essential for effective debugging, customization, and informed decision-making.
  4. Utilizing Firebase is also an option for end to end project. They even have a studio which I have not explored.
  5. Software development is an iterative process, involving continuous refinement, debugging, and feature addition (e.g., adding a sign-out button, daily reminders).
Post Views: 30

Published by abhinav1592

Leave a Reply

Your email address will not be published. Required fields are marked *