/travel-packing-list

Travel packing list created with React Vite and design system Orbit.

Primary LanguageTypeScriptMIT LicenseMIT

Travel Packing List

Before going on a trip to Italy, I was looking for an online packing list, but all I found was a bunch of different packing lists in pdf format only. I got an idea to create my own packing list and eventually, an idea turned into a real Travel Packing List app. The final product turned out to be really useful, because you cannot forget to pack any important item into your suitcase, either for short weekend trips or longer travels.

Installation

  • open project Travel Packing List directly in your browser (Google Chrome recommended)
  • or clone project travel-packing-list from GitHub and run cd travel-packing-list && yarn install && yarn dev

Features

App Travel Packing List offers you many different possibilities of usage:

  • check items you have already packed
  • delete an item in case you will not need it
  • add a new item to the list
  • automatic capitalization of the new item
  • reset the whole list to default items
  • check all items on the list at the same time
  • uncheck all items on the list at the same time
  • store all items into LocalStorage
  • switch between English, Spanish and Slovenian version of the app
  • responsive design
  • a mobile version has a bottom navbar with list-icon buttons where click on each button scrolls to the corresponding list

Dependencies used in the project

  • vite, react and typescript
  • styled-components
  • @kiwicom/orbit-components
  • i18next and react-i18next
  • eslint with many eslint plugins
  • prettier
  • vitest with @testing-library

Sources