The latest articles on DEV Community by Dipanshu Rawat (@dipanshurdev). https://dev.to/dipanshurdev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1023862%2Fca31886c-37a8-44aa-8f24-60885c72b57f.jpeg https://dev.to/dipanshurdev en Dipanshu Rawat Mon, 05 Oct 2026 04:43:11 +0000 https://dev.to/dipanshurdev/i-built-devnavigates-an-interactive-visual-learning-roadmap-for-developers-2cik https://dev.to/dipanshurdev/i-built-devnavigates-an-interactive-visual-learning-roadmap-for-developers-2cik <p>Most developer roadmaps are either static text lists or massive, rigid images that are overwhelming to look at and clunky to navigate.</p> <p>I wanted something different: an interactive canvas where you can explore career paths visually, click through nodes, and directly access curated resources (articles, docs, videos) attached to each milestone.</p> <p>That led me to build <strong>DevNavigates</strong>.</p> <h2> 🚀 Live Demo &amp; Repo </h2> <ul> <li> <strong>Live App:</strong> <a href="https://devnavigates.vercel.app" rel="noopener noreferrer">https://devnavigates.vercel.app</a> <em>(or your deployed Vercel link)</em> </li> <li> <strong>GitHub Repository:</strong> </li> </ul> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/dipanshurdev" rel="noopener noreferrer"> dipanshurdev </a> / <a href="https://github.com/dipanshurdev/devpath" rel="noopener noreferrer"> devpath </a> </h2> <h3> Your ultimate roadmap to becoming a successful developer!🚀🌟✨ </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">DevNavigates 🗺️</h1> </div> <p><strong>DevNavigates</strong> is a modern SaaS learning platform where developers can explore curated roadmaps, track their progress, and master new skills. Built with Next.js 14 App Router, MongoDB, Prisma, and NextAuth.</p> <div class="markdown-heading"> <h2 class="heading-element">Tech Stack</h2> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Layer</th> <th>Technology</th> </tr> </thead> <tbody> <tr> <td>Framework</td> <td>Next.js 14 (App Router)</td> </tr> <tr> <td>Database</td> <td>MongoDB Atlas</td> </tr> <tr> <td>ORM</td> <td>Prisma</td> </tr> <tr> <td>Auth</td> <td>NextAuth.js v4 (JWT + OAuth)</td> </tr> <tr> <td>UI</td> <td>Tailwind CSS + shadcn/ui</td> </tr> <tr> <td>Roadmap Visualization</td> <td>ReactFlow</td> </tr> <tr> <td>Animations</td> <td>Framer Motion</td> </tr> <tr> <td>Validation</td> <td>Zod</td> </tr> <tr> <td>Caching</td> <td>In-memory (Redis optional)</td> </tr> </tbody> </table></div> <div class="markdown-heading"> <h2 class="heading-element">Getting Started</h2> </div> <div class="markdown-heading"> <h3 class="heading-element">1. Clone and install</h3> </div> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>git clone https://github.com/dipanshurdev/DevNavigates.git npm install</pre> </div> <div class="markdown-heading"> <h3 class="heading-element">2. Configure environment variables</h3> </div> <p>Copy <code>.env.example</code> to <code>.env</code> and fill in the required values:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>cp .env.example .env</pre> </div> <p>Required variables:</p> <div class="highlight highlight-source-dotenv notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-v">DATABASE_URL</span><span class="pl-k">=</span><span class="pl-s">mongodb+srv://...</span> <span class="pl-v">NEXTAUTH_SECRET</span><span class="pl-k">=</span><span class="pl-s">your-secret-here</span> <span class="pl-v">NEXTAUTH_URL</span><span class="pl-k">=</span><span class="pl-s">http://localhost:3000</span></pre> </div> <p>Optional (for OAuth):</p> <div class="highlight highlight-source-dotenv notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-v">GITHUB_ID</span><span class="pl-k">=</span><span class="pl-s">...</span> <span class="pl-v">GITHUB_SECRET</span><span class="pl-k">=</span><span class="pl-s">...</span> <span class="pl-v">GOOGLE_CLIENT_ID</span><span class="pl-k">=</span><span class="pl-s">...</span> <span class="pl-v">GOOGLE_CLIENT_SECRET</span><span class="pl-k">=</span><span class="pl-s">...</span></pre> </div> <div class="markdown-heading"> <h3 class="heading-element">3. Set up the database</h3> </div> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> Push schema to MongoDB and generate Prisma client</span> npm run setup:prisma <span class="pl-c"><span class="pl-c">#</span> Seed with sample roadmaps and an admin user</span> npm</pre>… </div></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/dipanshurdev/devpath" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> 🛠️ The Tech Stack </h2> <ul> <li> <strong>Framework:</strong> Next.js (React) + TypeScript</li> <li> <strong>Visual Canvas:</strong> React Flow (for interactive nodes, edges, and canvas controls)</li> <li> <strong>Styling:</strong> Tailwind CSS + shadcn/ui</li> <li> <strong>Backend / Database:</strong> MongoDB PrismaDB(for roadmap dynamic fetching and resource collections)</li> </ul> <h2> 💡 Key Engineering Takeaways </h2> <h3> 1. Interactive Node Graph with React Flow </h3> <p>Instead of hardcoded SVGs or nested lists, React Flow allowed me to treat every technology milestone as an interactive graph node. Users can pan, zoom, and inspect dependencies between technologies before moving to the next phase of their journey.</p> <h3> 2. Attaching Curated Context to Every Node </h3> <p>A roadmap without resources is just a list of buzzwords. Each node dynamically surfaces:</p> <ul> <li>Key concepts to master</li> <li>Direct documentation links</li> <li>Curated articles and hands-on tutorials</li> </ul> <h2> 🔮 What’s Next? </h2> <p>I’m currently planning to add:</p> <ul> <li>Custom user progress tracking (marking nodes as "completed" or "in-progress")</li> <li>Community-contributed paths and customized stacks</li> </ul> <p>I would love to get your thoughts! Feel free to play around with the app, check out the repo, and leave your feedback or feature requests in the comments below.</p> showdev webdev react nextjs Dipanshu Rawat Sun, 04 Oct 2026 18:11:20 +0000 https://dev.to/dipanshurdev/pocketmentor-an-open-source-workplace-conversation-simulator-built-for-my-junior-batchmate-5676 https://dev.to/dipanshurdev/pocketmentor-an-open-source-workplace-conversation-simulator-built-for-my-junior-batchmate-5676 <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h2> What I Built </h2> <p>Starting out as a software engineer or junior manager is rarely bottlenecked by syntax or code—it's bottlenecked by uncomfortable conversations:</p> <ul> <li>Pushing back when a senior developer asks for an unrealistic 48-hour sprint turnaround.</li> <li>Explaining why tech-debt refactoring is necessary to a product manager focused purely on new features.</li> <li>Giving constructive, upward feedback without damaging relationships.</li> </ul> <p>My batchmate and friend was recently dealing with severe anxiety around their upcoming sprint planning meeting. They knew their team's deliverables were overscoped, but they didn't know how to defend the engineering reality without sounding confrontational.</p> <p>I built <strong>PocketMentor</strong> for them: a mobile simulator that lets early-career engineers and managers roleplay high-stakes workplace dialogues against an adaptive AI persona and receive actionable feedback on communication tactics.</p> <h2> Demo </h2> <ul> <li><p><strong>Live Demo / Preview:</strong> <a href="https://github.com/dipanshurdev/pocket-mentor" rel="noopener noreferrer">https://github.com/dipanshurdev/pocket-mentor</a></p></li> <li><p><strong>Walkthrough video:</strong><br> <iframe src="https://www.youtube.com/embed/fuwA1v3Kd_E" width="710" height="399"> </iframe> </p></li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3tcvjer1r5t3rp88vvko.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3tcvjer1r5t3rp88vvko.png" alt=" " width="231" height="502"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5h7oqxafiqy1jd7rw9q6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5h7oqxafiqy1jd7rw9q6.png" alt=" " width="230" height="501"></a></p> <h2> Code </h2> <p>The source code is open and accessible on GitHub:</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/dipanshurdev" rel="noopener noreferrer"> dipanshurdev </a> / <a href="https://github.com/dipanshurdev/pocket-mentor" rel="noopener noreferrer"> pocket-mentor </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">PocketMentor – Executive Communication Coach</h1> </div> <p>PocketMentor is a mobile simulator designed for early-career software engineers and junior managers to practice high-stakes workplace conversations (scope pushback, upward feedback, tech-debt defense).</p> <div class="markdown-heading"> <h2 class="heading-element">Next Gen Award Track Submission</h2> </div> <ul> <li> <strong>Monetization Engine:</strong> RevenueCat Test Store SDK</li> <li> <strong>Target Entitlement:</strong> <code>pro</code> </li> <li> <strong>Framework:</strong> React Native / Expo (TypeScript)</li> <li> <strong>Persistence:</strong> Local-first session history via AsyncStorage</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">RevenueCat Architecture</h2> </div> <ul> <li>Configuration &amp; SDK initialization: <code>services/revenuecat.ts</code> </li> <li>Dynamic Offering &amp; Package resolution: <code>components/PaywallModal.tsx</code> </li> <li>Real-time Entitlement checks &amp; feature gating: <code>App.tsx</code> </li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Local Setup</h2> </div> <ol> <li><code>npm install</code></li> <li><code>npx expo start -c</code></li> <li>Press <code>w</code> to run web preview or scan QR with Expo Go.</li> </ol> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/dipanshurdev/pocket-mentor" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> <h2> How I Built It </h2> <p>PocketMentor is designed around structured simulation loops powered by open-source AI:</p> <ol> <li> <strong>Scenario Definition:</strong> Pre-configured behavioral rubrics (scope pushback, tech-debt defense, upward feedback) establish clear constraints and realistic stakeholder personas.</li> <li> <strong>Open-Source AI Core:</strong> The simulation engine utilizes an open-weight reasoning model (<strong>Gemma</strong>) to maintain consistent persona fidelity, push back realistically against evasive answers, and evaluate conversational diplomacy.</li> <li> <strong>Evaluation Loop:</strong> At the end of each exchange, the engine critiques tone, clarity, and trade-off articulation rather than generic conversational fluency.</li> </ol> <h2> Why Does Open Innovation Matter? </h2> <ol> <li> <strong>Psychological Safety &amp; Data Privacy:</strong> High-stakes workplace simulations require vulnerability. Users roleplay sensitive scenarios involving internal team dynamics, stressful deadlines, and confidential work context. Relying on open-weight models ensures interactions remain private and out of third-party commercial training pools.</li> <li> <strong>Custom Behavioral Guardrails:</strong> Closed commercial models frequently default to overly accommodating, generic chatbot replies. Open-source models allow fine-tuned system boundaries so the counterparty persona realistically pushes back like an authentic manager or product owner.</li> <li> <strong>Accessibility:</strong> Career development tools shouldn't demand recurring paid subscriptions from students and junior engineers starting their careers.</li> </ol> <h2> Friend's Verdict </h2> <p>I handed PocketMentor to my friend to rehearse a real upcoming scenario: defending a sprint delay due to foundational database refactoring.</p> <blockquote> <p><em>"Most career advice tells you 'just be diplomatic,' which is useless in the moment. Rehearsing the exact back-and-forth and having the model challenge my excuses helped me restructure my actual talking points for sprint planning."</em></p> </blockquote> <h2> Prize Categories </h2> <ul> <li> <strong>Best Use of Gemma:</strong> Configured Gemma as the primary simulation and evaluation engine to drive dynamic stakeholder roleplay and actionable feedback.</li> </ul> devchallenge weekendchallenge hf26challenge