Skip to content

Simple app for creating, editing and storing cards for a public speech or an interview on your mobile device.

License

Notifications You must be signed in to change notification settings

SW999/speech-cards

Repository files navigation

Logo Simple speech cards


Simple speech cards

License Version GitHub last commit

QR Code link for mobile

Why?

Many people, like me, experience anxiety or even fear when preparing for public speaking or interview. The reasons can be different and there are many ways to defeat such a fear.

Moreover, I noticed that from excitement I can forget part of the speech that I had learned and practised well before.

There are many simple techniques to deal with this problem. The easiest way is to prepare cards with a sequence of words or phrases that correspond to the particular sections of the speech. Speech cards.

How it works?

After you have prepared well your public speech or interview, you may need a little helper in order not to lose the thread and be more confident.

You may prepare such helper in some pieces of paper by pen or using this simple app. In the latter case, your mobile phone will be your assistant!

To do this you need create a new speech or interview and save it. Now it will be available in 2 versions: in the "My speeches" section from the browser local storage and as a separate file with the JSON extension.

You may also look at a speech cards example in the "Demo" section, which based on the wonderful article by Aytekin Tank.

Advantages:

  • Could be easily used on a mobile device to create, store and use speech cards,
  • No way to lose or forget your speech cards, because your mobile device is always with you. Am I right?
  • You may easily share prepared speech cards in JSON format with someone or to open it in a different device,
  • works offline! You may save it as the native app to your device,
  • No authorization required,
  • No remote storage is used for your projects - you store all data locally on your devices.

Tips:

  • Each card should be as simple as possible,
  • Should contain short clear heading,
  • Should contain main idea/ideas of current part of speech.

Technology Stack

Parcel React TypeScript React Router SASS Markdown ESLint Jest Testing-Library

  • Parcel web application bundler
  • React with TypeScript
  • Form validation with react-hook-form
  • SASS
  • Tests via Jest and @testing-library/react
  • progressive web application (PWA)

Besides, I've faced with an interesting issue with routing of SPA on GitHub Pages. Fortunately, I managed to find a brilliant solution by Rafael Pedicini. Thank you, Rafael, you helped keep the remains of my mind! 🙊

License

MIT © Siarhei Vaitehovich

TODO:

  • Add tests
  • Add form validation
  • Add color themes
  • Add edit mode for an existed speech
  • Add a QR code to start page only for desktop
  • Add confirmation modal
  • Create PWA
  • Add Open Graph meta tags

Done! ☀️