Skip to content

andrewvallejo/lettra_react

Repository files navigation

logo

Lettra

Lettra is a means for job seekers to reduce the time it takes to write a cover letter by selecting keywords to turn into variables, thus effortlessly changing all occurrences of any words.

Application is currently in its alpha stage.

Features

  1. Wordiables - These are words that are variables! click to expand
  • Words in the document with \ backslashes \ surrounding it will be a Wordiable.
  • Up to seven Wordibles can be created, each with its assigned color.
  • Colors are applied to each iteration of the word in the document.
  1. Wordiables Table - Easily see and change all of your Wordiables! click to expand

A table of the selected words will show the order in which the Wordibles first occur, how many times they appear on the document, and its associated color. Selecting a word from here will highlight the Wordiable from the document and allow you to update all occurrences at once. feature in progress!

Wireframe

Feel free to explore my wireframe and thoughts on Figma

lettra

Installation

You can visit Lettra's website or clone the repo.

  1. Clone the repo and update the dependency with your preferred package manager. (yarn, pnpm, etc.)

    git clone
    npm install
  2. Run the development environment to start the server.

    npm run dev
  3. Once started, visit localhost:3000 on your browser.

Usage

Insert your cover letter and then wrap backslashes (\) behind and in front of the words you want to convert into a Wordiable.(word variable)

For example: Dear OmniBark Hirer, should look like Dear \OmniBark\ Hirer,

Do this to each word you would like to swap out for another easily, up to seven unique words.

Every iteration of \OmniBark\ will now automatically have the corresponding color. The color will automatically change based on the order the Wordiables are seen within the document. (colors are ROYGBIV)

In the previous example, every iteration of \OmniBark\ will turn red. If you were to add a new wordiable anywhere ahead of \OmniBark\, then all of the Wordiables will shift colors accordingly.

For Example: \Dear\ \OmniBark\ Hirer,

In this example,\Dear\ (and any of the following iterations of the word) will turn red, and all instances of OmniBark will now be orange.

 Dear \OmniBark\ Hirer,
 I would love to work at \OmniBark\ because...

Roadmap

  • Add localStorage always to have your most recent Cover Letter.
  • Add "Paragraphiables" that will hold different variations of your CL.
    • Wordiables will be consistent in each stored paragraph to further increase the efficiency of creating versions of cover letters for when applying to companies with different core values or positions.
  • Add 'auto-detect Wordiables' feature that will try and determine which words are the ones the job-seeker would've chosen manually.

Technologies

React Badge Next.js Badge TypeScript Badge Sass Badge Vercel Badge


Created by Andrew Vallejo

04.26.22 - Hi there! I am creating this application to make developing cover letters as easy as possible. Many would argue that it would take me more time to complete this application than it would simply CMD+F and search & replace each occurrence of that word. That may be true to an extent, but this is dependent on how careful you are at editing. The tedious repetition of this task throughout many cover letters increases the likelihood of having a human error; therefore, sending a cover letter with incorrect roles and company names is high. I hope this application instills confidence in job seekers when updating their Cover Letters and convinces the recruiter that the job seeker wrote this letter uniquely just for them!


Follow me on Linkedin!

Or look at more of my work on Github