Reading Round-up — A React/Redux Application

For my final project as a student of Flatiron School’s Software Engineering program, I created a single-page application with a React and Redux frontend and a Rails API backend. I recently purchased a reading logbook for my mother. As an avid reader, she was eager to keep track of all of the books she reads and make notes about them for future reference. This inspired me to create an online version of such a logbook, Reading Round-up. The Reading Round-up application allows users to create, edit and delete books from their book list. Users also have the ability to sign up, log in and log out of the application.

Backend

The Rails API backend for Reading Round-up includes models for User and Book. A User has_many books and a Book belongs_to a user. A User’s attributes include name, username, and password. A Book’s attributes include title, author, date finished, and notes.

Frontend

Reading Round-up was created using create-react-app and incorporates Redux to manage state. The user’s experience is managed by the application’s various components. The main components I’d like to highlight are the BookList and BookCard components, which allow a user to view all of their logged books. The BookList component is a container component that takes in the list of books from state as props and renders book card components for each book if any books exist.

const BookList = (props) => {
    const bookCards = props.books.map(book => <BookCard book={book} key={book.id} />)
    return (
        <Container>
            <h1>My Book List</h1>
            <CardDeck>
                { bookCards.length > 0 ? bookCards : null }
            </CardDeck>
        </Container>
    )
}

The BookCard component is a stateless component in charge of displaying the book attributes.

const BookCard = ({ book }) => {
    return (
        book ?
        <Row className="mb-3 justify-content-center">
            <Col xs="auto" md="4">
                <Card border="primary" style={{ width: '18rem' }} >
                    <Card.Body>
                        <Card.Title>{book.attributes.title}</Card.Title>
                        <Card.Subtitle>{book.attributes.author}</Card.Subtitle>
                        <Card.Text>{book.attributes.date_finished}</Card.Text>
                        <Card.Text>{book.attributes.notes}</Card.Text>
                        <Card.Link href={`/books/${book.id}/edit`}>Edit this book</Card.Link>
                    </Card.Body>
                </Card> 
            </Col> 
        </Row>: 
        null
    )
}

The BookList and BookCard components provide an example of using a parent, container component to handle logic and pass down props to a child component to display information to the user.

I enjoyed using React/Redux to create an application that will be useful for book lovers. Additional functionality I envision for this application includes the ability to rate books and interact with other users to form book clubs or make reading suggestions. I look forward to expanding on this project in the future.