React / Typescript / CSS / Emotion styling / Styled components / pnpm
Continuing to develop my Typescript and React skills, the Caesar Cipher tool explores using useReducer with type safety. This also includes creating a custom hook to encode the user input. The project also gave the opportunity to practice CSS-in-JS with libraries which I use professionally. I also learnt more about accessibility, for example applying the required ARIA tags to text areas and to custom controls.
- Convert plain text into encrypted text
- Numbers, special characters and letters with correct casing are displayed
- Control alphabet shift using increment / decrement buttons
- Maximum shift is set to 25
- Minimum shift is set to 0
- Hide and display alphabet shift controls
- Responsive design
- Applying accessibility as best as possible
- Setting up React using pnpm and vite - https://medium.com/@sahu.jyotirmaya26/creating-react-app-using-vite-and-pnpm-746bb0f9a0c2
- useReducer (React docs) - https://react.dev/reference/react/useReducer
- Coolors contrast checker - https://coolors.co/contrast-checker/000000-f08080
- Creating custom hooks (React docs) - https://react.dev/learn/reusing-logic-with-custom-hooks
- How to create React hooks -https://www.freecodecamp.org/news/how-to-create-react-hooks/
- useReducer in TS (Alex Bespoyasov) - https://www.newline.co/@bespoyasov/how-to-use-usereducer-with-typescript--3918a332