# Introducing OS Resume (Oversimplified Resume Builder)

> OS Resume is an oversimplified resume builder that helps students and professionals create professional resumes quickly and for free.

By Vishwajeet Raj · 2021-07-22 · https://vishwajeet.co/blog/introducing-os-resume

---

## What problems does OS Resume solve?

### One Resume Format (Consistency)

Many companies receive a ton of resumes, but most of those resumes get rejected because they are poorly structured, alignment is inconsistent, or they miss vital information (such as Education, Career Objective, etc.).

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

### Quickly Make a Resume

**It saves a lot of time**, especially if you aren't comfortable using design software or if you don't have much experience creating resumes.

**It helps** you **create a resume** that's **professional** and has an **up-to-date design.**

## What did I use to build this?

- **React Framework**: **Next.js** (it also makes it **easier** to **integrate Clerk authentication**).
- **Authentication**: **Clerk**
- **Form Validation**: Since there is a lot of form validation 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 fetching.
- Added react-beautiful-dnd for drag and drop to change the order of data in resume fields.
- **Added Clerk Authentication**
- Added ESLint & Prettier
- Added Database Support → MongoDB (Next.js API Routes)
- Added a seeder script (to add data to the DB via a 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 links for resumes with user permission

### Key Takeaways

- Setting up auth with Clerk.
- Next.js Serverless functions.
- Using various Material UI components (props and state)

**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 and email verification takes a whole lot of time. Adding Clerk to your application takes care of the entire authentication process in less than 5 minutes.

- **Live**: [osresume.vercel.app](https://osresume.vercel.app)
- **GitHub**: [github.com/vishwajeetraj11/osresume](https://github.com/vishwajeetraj11/osresume)