Resume Builder

➜ Maintain multiple versions of your resume
➜ Real time PDF previewer
➜ Drag & drop reordering

Live Demo Link

🎇 Inspiration:

Creating your resume is no easy task. Finding the perfect words to describe yourself and convey your experiences is already time consuming enough.

So why waste time struggling to figure out how to format a resume?
Just bring your creativity, and the Resume Builder will take care of the rest.

📋 Features:

1. Create & maintain multiple resumes.
2. Preview your changes in real time using the PDF previewer.
3. Add headings, bullets, and bold/italic text using markdown-like syntax.
4. Experiment with different layouts using the drag-and-drop feature.
5. Make copies of your resumes to never lose your previous versions.

📚 Accomplishments / What I Learned:

Markdown parser & lexer -

To implement features such as bold/italic text, bullet points, and headers, I wrote a custom markdown lexer & parser. The lexer takes in a string and converts the string into an array of predefined tokens.

The tokens are passed to the parser, where they are converted into an abstract syntax tree (AST). To make this conversion, the parser relies on a set of predefined rules to determine how the AST should be structured. The AST contains all the information required for the PDF generator to create the properly formatted PDF document.

 Lexer Code | Parser Code

ex: "**Some** Text" => 
    [TOK_BOLD , TOK_STRING, "Some", TOK_BOLD, TOK_STRING, "Text"] =>
    AST: { 
        "head": {
            "text": "Some",
            "bold": true,
            "italic": false,
            "bullet": false,
            "heading": "none",
            "next": {
                "text": " Text",
                "bold": false,
                "italic": false,
                "bullet": false,
                "heading": "none",
                "next": null
            }
        }
    }

Custom pdf generator -

Building the pdf generator was one of the most challenging aspects of this project. jsPDF provides many tools to position text down to the pixel. However, this meant that many of the higher level features, such as line wrapping, text alignment, page margins, indentation, and line spacing, had to be coded from scratch.

 PDF Generator Code

Authentication -

Using next-auth, I implemented signin using the google provider and stored the accounts on my MongoDB database. It is important to ensure user sessions are valid at all times to protect routes & prevent unauthorized access to API endpoints.

TypeScript -

One of my goals for this project was to learn many of the features TypeScript has to offer. I created custom types for my resume objects and for my API responses, among other things. This ensured uniformity accross my entire application, preventing incorrently structured data from being used.

While working with different npm packages, I frequently examined their type declaration files to gain a deeper understanding of the packages I used. As a result, I was able to always write highly strictly typed code, instead of resorting to bad practices like using the any type.

 My types file

🤖 Tech Stack:

   Next.js + TypeScript

Database: MongoDB
Authentication: next-auth
API: Express.js / Vercel Serverless Functions
Data Fetching: SWR
PDF generator: jsPDF
Styling Library: MUI

💡 Future Ideas:

1. PDF generator/parser:

   • support multiple pages
   • links ([text](http://a.com))
   • images (![alt](cat.png))

2. Allow pdfs to be viewed on a public link

   • toggle resumes between public/private.
   • changes to resume auto pushed to live link (if public)

3. Add ctrl-z/ctrl-y, ctrl-shift-z -> include undo/redo buttons on toolbar

4. MUI skeleton for loading states.

5. Tutorial (some kind of app walk through)

6. Terminal:

   • put resume reducer into context, so that commands can be sent from terminal.
     (the terminal will probably only work for the current active resume).
     (terminal cmds: open files/preview, CRUD for files/headers/sections/etc., save)

🚀 Running the App:

Prerequisites

1. NPM is required to run this project: Useful Resource

2. Vercel CLI (optional - used to host site on Vercel):

   npm i -g vercel

3. MongoDB database: Useful Resource

4. Google Cloud Platform project: Useful Resource

Installation

1. Clone the repo

   git clone https://github.com/pillious/Resume-Builder.git

2. Install NPM packages

   cd Resume-Builder
   npm install

3. Add environmen variables to .env file

4. Run app locally

   npm run dev

5. View app on localhost:3000.

---

Deployment:

1. Check production build for errors

   npm run build
   npm start

2. Deploy to Vercel

   vercel
   vercel --prod