OS Resume: Oversimplified Resume Builder

Create a professional resume in 15 minutes.

The resume builder features include a Tailwind CSS-based interface, intuitive drag-and-drop functionality to rearrange information easily, and robust form handling powered by Formik and Yup. Users can also customize their resumes with different fonts and template styles.

💻 Screens

Landing Page	Templates Page
Dashboard Page	Editor Page (Empty Resume)
Resume Editor (Form Updata/Create Resume Fields)	Resume Editor (Google Fonts)

Resume Editor (Manage Resume Sub Fields)

Requirements

node: v18.12.0

Getting Started

1. Install all dependencies:

npm install
# or
yarn

If you do not have yarn installed locally on your system, you will first need to install it with the following line:

npm install -g yarn

2. Goto Clerk Dashboard and create an application you will get the below mentioned credentials. (Step: 3)

3. Create a .env file in the root folder. Add these env configs...

   NEXT_PUBLIC_CLERK_SIGN_IN=<CLERK SIGN IN>
   MONGODB_URI=<MongoDB URI ending in /osresume>
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<CLERK PUBLISHABLE KEY>
   CLERK_SECRET_KEY=<CLERK SECRET KEY>

   Example: mongodb+srv://<user>:<password>@cluster0.b4w0r.mongodb.net/osresume?appName=Cluster0

   Note: The repo still supports the legacy NEXT_PUBLIC_MONOGO_URI variable for backward compatibility, but MONGODB_URI is the recommended name.

4. Seeder Script (Optional) Seed template/sample data with:

npm run seed

This inserts demo template content into MongoDB. It is optional for local development.

Template Development

Templates are defined in code and can also be synced into MongoDB as template records.

Add a New Template

1. Create the template component in components/templates/
2. Add a preview image or svg in public/templates/
3. Register the template in shared/utils/templateCatalog.js
4. Render the template in pages/editor/[id].js

Each built-in template entry in shared/utils/templateCatalog.js should include:

• title
• templateName
• customStyles

Example:

{
  title: 'Classic ATS',
  templateName: 'ClassicAts',
  customStyles: {
    font: 'Computer Modern Serif',
  },
}

Template Records in MongoDB

Built-in templates are automatically upserted into the resumes collection when the app requests:

/api/resumes?template=true

That means adding a template to shared/utils/templateCatalog.js is enough to make it appear in the app and create a template metadata row in MongoDB if it does not already exist.

Sample Template Content

Template metadata sync only creates the template resume record itself. If you want seeded sample content for a template, you must also update:

• shared/utils/demoData.js
• seeder.js

This is where demo personal, education, experience, extras, projects, and leadership data should be defined.

Enjoy

Support

Vishwajeet Raj – vishwajeet.netlify.app