<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nikhil Pillai</title>
    <description>The latest articles on DEV Community by Nikhil Pillai (@techdevnikhil).</description>
    <link>https://dev.to/techdevnikhil</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3820434%2Fd7f25654-4c22-41d9-b0b9-ae6529672a1e.png</url>
      <title>DEV Community: Nikhil Pillai</title>
      <link>https://dev.to/techdevnikhil</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/techdevnikhil"/>
    <language>en</language>
    <item>
      <title>built a full-stack AI resume builder with React, Node.js and MongoDB</title>
      <dc:creator>Nikhil Pillai</dc:creator>
      <pubDate>Thu, 12 Mar 2026 13:39:36 +0000</pubDate>
      <link>https://dev.to/techdevnikhil/built-a-full-stack-ai-resume-builder-with-react-nodejs-and-mongodb-j17</link>
      <guid>https://dev.to/techdevnikhil/built-a-full-stack-ai-resume-builder-with-react-nodejs-and-mongodb-j17</guid>
      <description>&lt;p&gt;&lt;strong&gt;I built an AI-powered resume builder with React, Node.js and MongoDB&lt;/strong&gt;&lt;br&gt;
    While applying for jobs, I noticed that many resume builders either have limited customization, slow previews, or generate PDFs that don’t match what users see on screen.&lt;br&gt;
    I wanted to build a tool that solves those problems while also allowing users to import an existing resume and edit it quickly.&lt;br&gt;
    So I built ResumeBaker, a full-stack resume builder with AI-assisted resume import and clean PDF export.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What ResumeBaker does&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;ResumeBaker allows users to:&lt;/p&gt;

&lt;p&gt;• Import an existing resume PDF&lt;br&gt;
• Convert it into structured editable sections using AI&lt;br&gt;
• Edit the resume with a live preview&lt;br&gt;
• Switch between multiple resume layouts&lt;br&gt;
• Export a clean multi-page PDF&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The goal was to make resume editing fast and predictable without formatting issues.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tech stack&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The application uses a MERN-style architecture:&lt;/p&gt;

&lt;p&gt;Frontend : &lt;br&gt;
• React&lt;br&gt;
• Vite&lt;br&gt;
• React Router&lt;/p&gt;

&lt;p&gt;Backend : &lt;br&gt;
• Node.js&lt;br&gt;
• Express&lt;/p&gt;

&lt;p&gt;Database :&lt;br&gt;
• MongoDB&lt;/p&gt;

&lt;p&gt;AI + Parsing :&lt;br&gt;
• OpenAI API&lt;br&gt;
• pdfjs for extracting resume text&lt;/p&gt;

&lt;p&gt;PDF generation :&lt;br&gt;
• React-PDF&lt;br&gt;
• jsPDF&lt;br&gt;
• html2canvas&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key engineering challenges&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Parsing unstructured resumes&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Resumes often contain inconsistent formatting. I implemented a normalization pipeline that converts extracted text into structured sections like:&lt;/p&gt;

&lt;p&gt;experience&lt;/p&gt;

&lt;p&gt;education&lt;/p&gt;

&lt;p&gt;projects&lt;/p&gt;

&lt;p&gt;skills&lt;/p&gt;

&lt;p&gt;Unknown sections are stored as custom sections so information isn’t lost.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Keeping preview and PDF layouts consistent&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The application uses two rendering flows:&lt;/p&gt;

&lt;p&gt;• HTML-based preview for real-time editing&lt;br&gt;
• React-PDF components for final export&lt;/p&gt;

&lt;p&gt;This allows users to edit quickly while still producing structured multi-page PDFs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Managing complex form state&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Resume sections can be added, hidden, or reordered. The builder synchronizes structured form data with the preview layouts while avoiding unnecessary re-renders.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Features&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• Real-time resume editing with live preview&lt;br&gt;
• AI resume import from uploaded PDFs&lt;br&gt;
• Multiple resume layouts&lt;br&gt;
• Clean multi-page PDF export&lt;br&gt;
• Guest and authenticated user flows&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Links&lt;/strong&gt;&lt;br&gt;
Live demo&lt;br&gt;
&lt;a href="https://resume-baker.netlify.app" rel="noopener noreferrer"&gt;https://resume-baker.netlify.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GitHub repository&lt;br&gt;
&lt;a href="https://github.com/TechSwimmer/cv-Builder" rel="noopener noreferrer"&gt;https://github.com/TechSwimmer/cv-Builder&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Feedback welcome&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you try the project, I would love feedback on:&lt;/p&gt;

&lt;p&gt;• resume parsing accuracy&lt;br&gt;
• preview performance&lt;br&gt;
• PDF export UX&lt;/p&gt;

&lt;p&gt;I'm actively improving the project.&lt;/p&gt;

&lt;p&gt;Live demo&lt;br&gt;
&lt;a href="https://resume-baker.netlify.app" rel="noopener noreferrer"&gt;https://resume-baker.netlify.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GitHub repository&lt;br&gt;
&lt;a href="https://github.com/TechSwimmer/cv-Builder" rel="noopener noreferrer"&gt;https://github.com/TechSwimmer/cv-Builder&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Feedback welcome&lt;/p&gt;

&lt;p&gt;If you try the project, I would love feedback on:&lt;/p&gt;

&lt;p&gt;• resume parsing accuracy&lt;br&gt;
• preview performance&lt;br&gt;
• PDF export UX&lt;/p&gt;

&lt;p&gt;I'm actively improving the project.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>ai</category>
      <category>career</category>
    </item>
  </channel>
</rss>
