Overview
I started to explore front-end and web development. As a simple outcome of my exploration, I deployed image annotator based on bounding boxes.On this article, I’ll leave my studying, development and deployment memos until the product working.
Product
The one I developed and deployed is the image annotator with bounding box. You can give the input file which holds the image url list and bounding box’s labels. The image below is the sample of doing annoation.
For each images, you can choose the label and draw bounding boxes. If you want, you can add a note too.
Motivation
I’m a data scientist. Basically, I make a model, think about how to use that model and more frequently think about how to be able to avoid using model-based approach. Totally, I’m far from front-end and web-development.Every year, as my personal trial, I try something new to me. This year, I chose front-end. So, by using my vacation, I studied front-end things and somehow reached deployment.
Path to deployment
Set the goal
I set several conditions as a goal.- easy app
- simple design
- somehow deploy
- not stick to the latest technology
This time, as a first trial, I chose image annotator with bounding boxes as a theme. That’s because sometimes I encounter the situation I need to do manual annotation on image and all the time just by diposable scripts, I had dealt with it. So, I decided to make this as front-end-oriented app.
Technology selection
I developed things with typescript + React.I had almost no experience of javascript and other alt-js languages. I chose typescript for this development. It’s simply because I like the language with explicit types. About react, actually, I didn’t have big reason to choose. Just because I frequently heard the name.
For deployment, I used heroku. It is cheap and simple.
Study process
When I start something new, basically I use official document or academic paper. But this time, I tried video contents from Udemy. I used the following three courses.- The Web Developer Bootcamp
- React - The Complete Guide (incl Hooks, React Router, Redux)
- React - Learn React with Hooks by creating a Roguelike game
The second course is about React. I personally did this with typescript although the lectures are based on the vanilla javascript.
I used the third one just to check the another example of using React. But it was simple, short and fun.
Because the time is limited, sometimes I skipped the lectures. Even so, it was kinda fun to study based on video contents.
Development
Because this is the first app, I didn’t hesitate to compromise and the app is very simple. But even so, there are some points I felt difficult.The difficulty I felt is as below.
- design
- CSS
- assumption of user behavior
Anyway, although there are many problems such that duplicated methods are used and input validation is not enough and so on. Somehow it became something which looks working.
Deployment
I used heroku and 30 minutes were enough from registoring to connecting to git and deploy.Impression after this
Totally, I felt two types of difficulties. One is about design and user bahavior analysis which I wrote before. Another is app management after deployment.This time, the app is just for practice. But even so, I felt some difficulties when I think about the situation that I would develop something for monetizing. For example, this app is already on the web. Anybody can get access. But being different from usual blog service, it is hard to get certain evaluation from Google. (Of course, if the product has nice quality and satisfys some demand, the search rank would rise and more people would visit.)