KAIMONOTE

Kazuma Kuramoto
2 min readApr 17, 2022

--

I built ReactJS+TypeScript project called “KAIMONOTE”.

screenshot

SiteURL : https://cheery-horse-4128f4.netlify.app/

Github : https://github.com/Kazumakr/Kaimonote

Overview

KAIMONOTE is a simple web application to save shopping list in order not to miss anything to buy.

Technical Specifications

ReactJS, TypeScript, Styled-Components, Netlify, Jest

Why I created this project

I wanted a shopping list app like this because I used to use the default note app on my smartphone to make lists when shopping.
And I wanted to make a simple application using typescript because I had only made pure react app.
I thought that creating a simple CRUD app like this was a good opportunity to try the test code.

Which problem this app solved

Prevent missing anything to buy. You don’t need to use paper or note app.

What I learned through this project

I reviewed how to create web application with TypeScript. Errors occurred several times when passing props, because I forgot to define interfaces. I felt I need to create more projects to get used to TypeScript. It was also a good review of testing with Jest.
For use on mobile devices, the item list was designed to be in edit mode by simply clicking on it. This has complicated state management. When adding a new item, the state was changed by clicking on another item, so I created state for switching to edit and add new mode

What I will do in the future

・Convert this to an android or ios app

--

--