🧠 Built with AI: Pathways- A Career Roadmap Generator | 888 Day 2
- Cindy Adem
- May 15
- 6 min read
Updated: May 17
Visualise what it takes to get your dream career
The Vision: Career Guidance at Scale
Let's talk about careers for a moment. How many people do you know who feel genuinely fulfilled by their work? Or how many friends have asked you, "How do I break into tech/design/marketing?"
The challenge of career navigation is universal, yet most solutions are painfully generic or prohibitively expensive.
This is where I saw an opportunity. What if we could create a tool that generates personalized career roadmaps based on someone's specific situation and goals, making expert-level guidance accessible to everyone?
Enter "Pathways" - an AI-powered career roadmap generator that's the second project in my 8-8-8 Challenge, where I'm building 8 products in 8 hours for 8 days exclusively using Replit's AI Assistant.
The Problem Pathways Solves
Career development resources typically fall into three problematic categories:
Too generic: "10 steps to become a developer" articles that ignore your unique background
Too expensive: Career coaches charging hundreds per session
Too overwhelming: Scattered advice across books, forums, and YouTube videos
Pathways bridges this gap by using AI to create personalized roadmaps that consider your current career, experience level, time commitment, and specific goals - all delivered in an interactive, visually appealing interface.
Technical Implementation: The Build Journey
Building Pathways was an exercise in smart constraints. Just so you know, all I did was talk to Replit and tell it what I wanted to happen. But I needed to know how to describe what I wanted in a language Replit understood properly. So I brain dumped on ChatGPT, aligned on the strategy there, then asked it to create for me a polished prompt which I pasted on Replit and we co-created from there. With the help of ChatGPT and Replit, I limited myself to:
HTML5 & Tailwind CSS for the UI
Vanilla JavaScript for functionality (no frameworks)
OpenAI's API for the roadmap generation
A Node.js server for API calls
Completely client-side data storage
Design Decisions That Made the Difference
What version 1 looked like:
Design Decisions that Made the Difference
Watch demo below to notice the design changes at 7.5 hours into the build
For this project, I leaned heavily into a few key design principles:
Progressive disclosure through a "Typeform-style" experience: Rather than overwhelming users with a complex form, I created a sequence of individual question cards that appear one at a time.
Engaging microinteractions: Floating emojis, fun loading messages, and subtle animations create a delightful experience during what could otherwise be boring wait times.
Glassmorphism UI with scenic backgrounds: The transparent card-like elements over beautiful mountain landscapes create a sense of clarity and forward vision - perfect for career planning.
Comprehensive resource integration: Each roadmap stage includes curated resources, from learning materials to communities and tools, making the roadmap immediately actionable.
Design decisions influence user emotion, which affects user experience. The details matter.
What's interesting is how effectively the Replit AI interpreted my initial design requirements. I'd say the most effective part of my prompt was being specific about the exact user journey I wanted, down to the "fun loading state with moving emojis and rotating messages."
This level of specificity gave the AI a clear direction while still leaving room for creative implementation.
Where I could have improved my prompting was in providing more examples of the output format I wanted for the roadmap data. We had to iterate a bit on getting the structure right between the modal views and the main timeline view.
What I Learned Building This
The most fascinating aspect of creating Pathways was observing the blurring lines between traditional roles:
The Shifting Role of Product Managers
As a product person, this project made me reflect on how AI is transforming product development. With tools like Replit Assistant, I could go from product requirements directly to implementation without the traditional handoffs between design and engineering teams.
This doesn't eliminate the need for PMs - if anything, it elevates our role to focus more on vision, problem discovery, and user psychology rather than feature specification. The ability to rapidly prototype ideas means PMs can now test hypotheses that previously would have been too resource-intensive to explore.
How the roles of Design and Engineering are evolving
The most striking realization was how AI is reshaping the relationship between design and engineering. Replit Assistant could take my high-level design direction and implement it with proper HTML/CSS, handling responsive layouts, animations, and even accessibility considerations.
For engineers, the value-add shifts from writing boilerplate code to system architecture, optimization, and innovation in areas where AI still struggles. The mundane parts of development are increasingly automated, allowing engineers to focus on the truly challenging problems.
Potential Impact on Knowledge Workers
Building Pathways, an app that helps people navigate career transitions, while using AI to build it, created a meta-moment for me. The very tool I was building highlighted how AI is changing the nature of work across industries.
Knowledge workers everywhere, not just in tech, will need to adapt to an environment where AI can handle routine cognitive tasks. This shift will place greater emphasis on uniquely human skills: creativity, empathy, ethical judgment, and the ability to ask the right questions.
Technical Challenges and Solutions
The project wasn't without its hurdles. Here are a few technical challenges we encountered and how we solved them:
1. Optimizing API Usage
OpenAI's API is powerful but can be expensive. I structured the prompts carefully to generate comprehensive roadmaps in a single API call, then store them in localStorage to avoid unnecessary regeneration.
2. Modal Positioning Issues
Getting the modals to appear consistently in the correct position took some finessing. I ultimately solved this by using fixed positioning with careful handling of scroll positions to ensure the background content stays in place when a modal is triggered.
3. PDF Export Issues
The PDF export functionality still has some quirks that need addressing before deployment. While the print version looks great in-browser, the exported PDF sometimes has formatting inconsistencies. This is something I'll continue working on post-deployment.
4. Data Persistence Without a Backend
To keep the app simple and deployable as a static site, I implemented localStorage for saving user data and generated roadmaps. This allows returning users to continue where they left off without requiring authentication or a database.
The Build Timeline
If we exclude the breaks between sessions, completing this project took approximately 7.5 hours of active development time. How this looks like in Replit dev time:
Setting up the initial HTML/CSS structure (1 hour)
Implementing the Typeform-like question flow (1.5 hours)
Building the OpenAI integration (1 hour)
Creating the roadmap visualization (2 hours)
Adding microinteractions and polish (1 hour)
Implementing localStorage and fixing bugs (1 hour)
What's particularly interesting is that about 80% of this time was spent on refinement rather than initial implementation. The AI could generate working code quickly, but the iterative improvements to make the experience truly delightful required more back-and-forth.
Deployment Status
As with previous projects in this challenge, we haven't yet had a successful deployment from Replit to Vercel. We're going to attempt it with Pathways, but if complications arise, it will remain a private demo for now. If you're reading this case study, I hope you enjoy the attached video showcasing the app in action.
The PDF export feature has some formatting quirks that we'll address during deployment, but the core application functionality is solid and ready for users.
Conclusion: The Future of Work is Collaborative AI
Building Pathways reinforced my belief that the future isn't AI replacing humans, but humans partnering with AI to achieve outcomes that neither could accomplish alone. The AI handles implementation details, pattern matching, and repetitive tasks, while I focused on the conceptual design, user empathy, and overall vision.
This is just the beginning of how AI will transform career development and professional growth. Tools like Pathways represent the first wave of personalized, AI-powered guidance that will help people navigate increasingly complex career landscapes.
As someone deeply interested in how technology shapes the way we work, I'm excited to see how tools like this evolve - and to continue pushing the boundaries of what's possible in my 8-8-8 Challenge.
🔥 What is 888?
8 Hours. 8 Days. 8 Products. A personal challenge to build 8 functional AI-powered tools in 8 consecutive days — dedicating just ~8 hours to each build.
This is not about perfection — it’s about speed, creativity, and clarity of product thinking.
Every project is an exploration: solving real problems, testing ideas fast, and documenting the build process openly.
📌 How to Follow the Flow
Each day, I’ll share:
A short demo video
A concise build recap post (on LinkedIn & Twitter)
A full write-up in comments or blog (with lessons, tech stack, and what worked/didn’t)
And once ready, a live link to the deployed product (or prototype status if not yet deployed)
Give me your email and I'll send you daily updates or connect with me on socials to stay updated daily.
Commenti