Skip to content

IanFH/quot-e

Repository files navigation

CS50 Final Project

Kindle Highlights Text Editor

Description: This website allows user to upload .txt files from their Kindle, containing highlights of books. The web app will clean up and allows reformating of highlighted texts.


Features:

  • Cleaning of uploaded highlights, either through a txt file or pasted text, allows reorganisation of data.
  • Highlights selector allows easy deleting of unwanted, accidental highlights.
  • Compile by title feature allows user to download title specific highlights as txt files.
  • Additional checkboxes allows the option to display the title, author, or details of the compiled highlights.

How To Use

  1. Visit our website at quot-e.herokuapp.com, and you will be taken to our welcome page
  2. Register for an account using the register button at the navigation bar.
  3. After successful registration, you will be redirected to the login page.
  4. Please log in to continue.
  5. After successful log in, you will be redirected to the cleaning page.
  6. Please ensure that your highlights format is the same as the one displayed.
  7. Press either the upload or paste button to open a dropdown where you can upload your txt file or paste your highlights respectively. Then press the submit button.
  8. After successful cleaning, you will be redirected to the formating page.
  9. If there are highlights you want to delete, select said highlights with the checkboxes on the right side of the table. Then press the delete button located at the bottom of the table.
  10. For compiling of the highlights, you can either use the checkboxes or the compile by title option at the bottom of the page.
  11. Take note the compile by checkboxes will only result in the title and highlight being compiled. For more specific request, please use the compile by title option.
  12. Your txt file should be downloaded automatically after the button is pressed.

Reflections

Why create this web app

I use the kindle on a daily basis. A good habit in order to remember concepts that resonates with me is by highlighting it. Kindle will store those highlight in a txt format which includes the title, author, details when I highlighted them, and finally the actual highlights. These additional details often makes the txt files very unreadable. If my highlights is only a sentence, these extra details will exceed the highlights themselves. Formatting it manually in notepad or microsoft word is a small inconvenience, but takes a decent amount of time. If you multiply that by the number of books I am reading, it becomes a very big hurdle that hinders me from reading back those highlights. It also makes me hesitant to read more books. Thus, I decided that I want to make a text processor web app that could help me remove the nonsense from the highlights. This allows me to easily copy paste the resulting text into apps like Anki, a flash card app, which allows easy revisiting of highlights


Why certain design choices

1. Username/Login/Register system

  • I originally wanted the website to be as simple as possible. This means not requiring a login system. However, I also wanted every user to have database of highlights that will not disappear, meaning in the backend
  • I was not sure whether cookies allows storage of database, but my limited knowledge only knows how to implement user specific database through the login system. So I decided to that instead
  • I decided against using any email address since the website is not very important
  • I decided to use a password so that random people cannot access usernames that is not theirs

2. Options on uploading vs pasting text

  • I think it is good to give the user options
  • Pasting specific text allows user to only give the text they want to provide to the website
  • Uploading is convenient since kindle gives you a txt files that you can upload straight away

3. Checkbox selection feature

  • I was considering an option to edit each highlight wordings, but I would like to keep it simple
  • Checkbox allows user to select the specific highlight they want to delete or compile. For example, I often mistakenly highlight a broken sentence because my hands lifted up from the kindle. This requries me to delete the highlight and re-highlight the correct full sentence. The old highlights however, is still recorded in the txt files. Hence, with this tool, I can remove those incomplete highlight and keep the correct ones
  • The select all checkbox allows user to easily delete all the table's content

Difficulties and things that I learnt

Moving from the CS50 Codespace to local Visual Studio code

  • Learnt how to pip install a lot of different software
  • Learnt how to use extension to preview SQL databases
  • Learnt Emmet to help with html formatting
  • Learnt how to set up a virtual environment

Creating the Navbar

  • Learnt how to stick a responsive navbar at the top of the page

Full background image of a html tag

  • Learnt how to use the CSS properties of background image and use view height to configure its size

Favicon not showing up

  • Learnt how to configure path which is accessible to flask for the favicon

Color of website

  • Found a color picker software and created a matching colour palete
  • Configured custom bootstrap color using CSS property. Although have not learnt SASS

Sending flash messages

  • Learnt how to configure categories for flashing messages in order to change html tag's class, thus changing its color and appearance

Uploading and dowloading of files

  • Learnt how to upload file and check for allowed format
  • Learnt how to configure path and send file back for download

Formating of pasted text

  • Learnt how to slice lists of pasted text in order to remove charater such as '\n' and '\r'
  • Learnt how to join lists of character into string using ''.join()

Formating of txt text

  • Learnt that you need to convert file.read() into string using str()
  • Learnt how to replace characters like " ' " = "\xe2\x80\x99" using str.replace()

Using multiple buttons in a single route

  • Learnt how to configure buttons to do different things

Selection button

  • Learnt how to get list of all selected checkboxes id
  • Learnt how to configure a select all checkboxes using javascript

Deployment of website

  • Learnt how to deploy website to Heroku using GitHub

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors