To Read List: Sinatra React Project

Mark Quayle
2 min readNov 27, 2021

An app that is a convenient way to keep track of the ever growing list of books on your to read list. The idea is to be able to add a book that you want to read down the line and to delete books that you have finished.

Backend: The database was created using Sinatra. There are two models: Author and Book. The Book model belongs to the Author model and the Author model has many books. The backend has two migration files to create the tables of both Author and Book. The table for Author is simply the authors name and when the table was created. The table for Book has the title, the author, the author ID, the genre, and when it was created. The backend has a seeds file that allows a user to start from the same point of reference as I when they are running this app on their own. The seed data adds 10 books to give everyone a jumping off point. The app controller has functions to get data, create data, and delete data. Three of the four basics of CRUD and the three that were relevant to the creation of this app.

Frontend: The frontend is a basic react app created with the Create-React-App call. The frontend has five components. App, Header, ReadingList, BookCard, ReadingForm. The App component holds essentially all the information and functions. The functions are then passed down to other components. The Header is just a header for my personal structural preference. The ReadingList is where all books are listed. BookCard are the individual books to be displayed on the page. The reading form is the form that allows the user to add a new book to their list.

--

--

Mark Quayle

This blog will just be about programming. Technical, research, thoughts, whatever may come to mind.