Vishwajeet Raj's Blog

Vishwajeet Raj's Blog

Introducing OS Resume (Oversimplified Resume Builder)

Introducing OS Resume (Oversimplified Resume Builder)

Clerk Hackathon Submission

Listen to this article

What problems does OS Resume solve?

One Resume Format (Consistency)
Many companies get a ton of resume's but most of those resumes get rejected just because they were poorly structured, alignment was not maintained, or maybe missed some vital information (assume Education, Career Objective, etc).

Having a resume format helps recruiters in locating specific information in specific spots on a candidate's resume. So, that they don't have to look at different spots to figure out where the email (or any other relevant information) is. It also ensures that the candidate knows what information is mandatory.

Quickly Make a Resume

Saving a lot of time, especially if you aren’t comfortable using design software or if you don’t have much experience with creating resumes.

helps you create a resume that’s professional, with an up-to-date design.

Demo

Landing Page (Route -> /)

image.png

Sign In Page Provided by Clerk

image.png

Sign Up Page Provided by Clerk

image.png

Password-less Sign In / Sign Up Provided by Clerk

image.png

Templates Page (Route -> /template)

Pick a template click create (redirect to Resume Editor)

Cancel will clear selection of Selected Template.

image.png

Resume Editor (Route -> /editor/:id)

Sidebars have relevent Icons which will open Drawers with forms to create/update/delete/reorder resume fields and subfields. image.png

Form to manage Resume Fields.

image.png

Change Default Fonts to your preferred Google Font

image.png

Manage Resume Sub Fields

image.png

Editor Demo πŸ’£

Dashboard

Resumes πŸ‘‡πŸ»you created will show up here.

image.png

Basic Flow of the Application

image.png

βš’ What did I use to build this? πŸ› 

  • React Framework: Next.js (Also it makes it easier to integrate Clerk Authentication).
  • Authentication: Clerk
  • Form Validations: Since there is a lot of form validations in this project. I figured it would be best to use Formik and Yup.
  • Drag and Drop: react-beautiful-dnd
  • Support for almost all Google Fonts: A JSON from Google Fonts.
  • UI Components: Material UI
  • CSS Framework: Tailwind CSS πŸ’™

🦾 Building OS Resume

  • Basic Setup (Next.js + Tailwind + Redux)
  • Added Onyx Template πŸŽ‰
  • Added Drawers, Forms, Buttons, Icons from Material UI
  • Form Validations via Formik & Yup and push data to Global State (Redux).
  • Added Dynamic Google Font Fetch.
  • Added react-beautiful-dnd for drag and drop to change the order of data in Resume fields.
    Ex: order of data in experiences block, maybe you want the 1st entry to shift to last entry.
  • Added Clerk Authentication
  • Added Eslint & Prettier
  • Added Database Support -> MongoDB (Next.js API Routes)
  • Added Seeder Script (Add Data in DB via script)
  • Added Landing Page, Template Page, Dashboard Page, and Template Cards (Component)
  • New Template Added (Trical) 🎊
  • API Integration for Forms (Resume Fields => Personal Data, Experience, Education, Extras)

🍾 Deployment

  • Vercel

πŸŽ– Future Scope

  • More Templates.
  • Load Demo Data
  • JSON Editor for generating resumes via JSON.
  • Clone an existing resume.
  • Public Link for Resumes ON USER PERMISSION

🎁 Key Takeaways

  • Setting Up Auth with Clerk.
  • Next.js Serverless functions.
  • Various Material UI Components Usage (props & states)

Clerk Authentication Implementing Authentication is important because it enables organizations to keep their networks secure by permitting only authenticated users (or processes) to access their protected resources. Adding more features like password-less login, email verification takes a whole lot of time. Adding Clerk to your Application takes care entire Authentication process in less than 5 minutes.

Live Link: osresume.vercel.app
Github: github.com/vishwajeetraj11/osresume

πŸ’πŸ»β€β™‚οΈ Support

Buy Me A Coffee

Vishwajeet Raj – vishwajeet.netlify.app

Check out my Instagram Page where i share JS code snippets and concepts.

#resume #hackathon #clerk #ClerkDev #ClerkHackathon

Β 
Share this