Summary

I have been reading a book to my daughter as a routine since she was 2 years old. After reading a book, I jot down her comments in a reading note provided by the city library. This note is made of paper, which makes it difficult to manage. So, I developed an application to store her book reviews in a database.

I named this application "RingsLog" and used modern web technologies to develop it. I referred to two tech articles written by Haruyasu Kaitori[1]. One article describes how to develop an authentification system[2] and the other discusses a method for creating a blog system[3].

Table of Contents

1.Background
2.Functions
3.Architecture
4.Django Model Diagram
5.Image Data Storage
6.Demonstration
7.Conclusion
8.Reference

1. Background

Reading books to children provides invaluable time for both parents and kids. It positively impacts children's education and also allows parents to learn new things, even from simple books. Most importantly, reading to kids makes us happy.

The region I live in has a large library that provides paper book logs for children to record their reading experiences. These logs include columns such as Date, Title, Author, and Comments, and can accommodate comments for up to 10 books. However, managing paper logs can be challenging and they can easily be lost. Therefore, I decided to develop "RingsLog," a web application for recording book comments.

I am a software engineer in the automotive industry, focusing primarily on the development of analyzers, control systems, simulation systems, and embedded systems. This project offers a valuable opportunity to learn how to develop a web application using modern technologies. Most of the functionality and web design are based on the information in the articles mentioned above[2][3].
The applications discussed in these articles, such as the blog application and authentication system, are similar to my "RingsLog". The key differences between these articles and my application are:

• Database table definition
• Fetch function for obtaining book information using the Google Books API
• Deployment of frontend to Vercel and backend to Render

2. Functions

• Create post
• Edit post
• Delete post
• Create a user account
• Change password
• Login
• Edit profile

3. Architecture

This image shows the architecture of RingsLog.

Frontend

The frontend is composed of Next.js, NextAuth.js, Tailwind CSS, shadcn/ui, and Cloudinary.

• Next.js: A React framework for building server-rendered or statically-exported web applications

• NextAuth.js: An authentication library for Next.js applications that handles user sign-in and sign-out

• Tailwind CSS: A utility-first CSS framework for designing custom user interfaces

• shadcn/ui: A library of UI components for building modern and stylish user interfaces

• Cloudinary: A cloud-based service for managing and delivering media assets like images and videos

Backend

The backend is structured using Django and Django REST Framework, with PostgreSQL for the production environment and SQLite for the development environment

• Django: A high-level Python web framework that enables rapid development of secure and maintainable websites

• Django REST Framework: A powerful and flexible toolkit for building Web APIs with Django

• PostgreSQL: An open-source, advanced relational database system known for its robustness, extensibility, and standards compliance

• SQLite: A lightweight, file-based database system designed for simplicity and efficiency

Typescript and Python have been used to develop this system.

4. Django Model Diagram

This diagram shows the database table relationships. The backend has two main tables: UserAccount and Post. The UserAccount table manages user information and is used for authentication purposes. The Post table is used for storing book reviews. Additionally, the system utilizes Django's built-in permission system

5. Image Data Storage

"RingsLog" utilizes Cloudinary for storing image data. Cloudinary is a cloud-based service that provides solutions for managing and optimizing media assets such as images and videos. Cloudinary offers the following features:

• Image and Video Storage: Securely store media assets in the cloud
• Media Optimization: Automatically optimize media for various devices and network conditions
• Transformation: Apply various transformations to media files, such as resizing, cropping, and applying filters
• Content Delivery: Deliver media via a global Content Delivery Network (CDN) to ensure fast load times

This image shows the dashboard provided by Cloudinary.

6. Demonstration

This short video demonstrates how the application works. The homepage of "RingsLog" displays book reviews posted by users. Authorized users can create, modify, read, and delete their own posts, while non-authorized users can only view the posts.

Users need to enter book information manually, but by utilizing the ISBN, the application automatically populates the text fields with relevant details.
Users can set an image as a thumbnail when creating a post.

7. Conclusion

In this post, I describe the application for storing book reviews. Modern web technologies were used to develop "RingsLog," and this experience allowed me to learn how to build a web application, giving me a better understanding of web engineering.

8. Reference

[1] https://github.com/haruyasu
[2] https://zenn.dev/hathle/books/next-drf-auth-book
[3] https://zenn.dev/hathle/books/next-drf-blog-book/viewer/00_first