How I built CupBook

I have decided to document my projects on online platforms. Mainly to write down my progress, but also for anyone curious who is starting out with Vue and Tailwind.

One of the most valuable projects for me is Cupbook. Maybe because I didn't have to work on the design, since my designer friend took care of it, and I only had to take care of the development part.

The first step was to install Vue. Pretty easy and straightforward.
The process started with the creation of the navbar. I am in love with the style of this site, the bookshelves and cats create a sense of peace for book and cat lovers. The positioning of the SVG-s has been a bit challenging, but I learned how to cut SVG-s in my editor. A small victory for me. The positioning of the cat was my favorite part because I thought I couldn't pull it off that well. But the result was awesome. A little cat crawling over the search input. How cute is that?

Search is functional. Just type something and the result will appear. Below is the code written with Vue 3:

<script setup>
import {computed, ref} from "vue";
import photo03 from '@/images/photo03.jpeg';

const searchQuery = ref('');
const books = [
    {
        title: 'To kill a mockingbird',
        cover: photo03,
        author: 'Harper Lee',
        isBestseller: true,
    },
    ...
]

const filteredBooks = computed(() => {
    if (! searchQuery.value) return [];

    return books.filter(function (book) {
        return book.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
            book.author.toLowerCase().includes(searchQuery.value.toLowerCase())
    })
})
</script>

<template>
        <div>
            <img alt="logo" src="@/images/mace.svg"/>
            <input v-model="searchQuery"
                   type="text"
                   name="name"
                   id="name">
            <button></button>
        </div>

        <div v-if="filteredBooks.length" id="books">
            <div v-for="book in filteredBooks">
                <img alt="logo" :src="book.cover"/>
                <div>{{ book.title }}</div>
                <div>{{ book.author }}</div>
            </div>
        </div>

    </template>

Listing books and events on the home page was a piece of cake, especially when you have the design ready. I used CSS grid and flex utilities to position the books in different screen sizes.

Then I continued with the creation of the About Page. Here too, I used mainly grid and flex.

The last section was the Contact Page. It was created with forms and here I made validation errors with Vue.

After I finished the Desktop version, I switched to the mobile version of the site. The basic change was the part of the navbar, from which I removed the book SVG-s and put a simple hamburger menu which, when clicked, opens the menu of the page which consists of Home, Books, Events, About us, Contact.

The last step is to Lazy Load the images so that the page is performant and fast.

<img loading="lazy" src="@/images/photo24.jpeg">

It defers loading the image until it is needed.

Where did I encounter difficulty during the project?

The first difficulty was to make Search functional. The second was well-positioning the SVG-s.

What did I learn during the realization of the project?

• I learned how to make a functional Search. I used the filter() function of arrays in Javascript. I also used Vue model binding to link the search input with the search variable.

• I learned how to cut SVG-s in IDE (PhpStorm).

Here is a link to the CupBook Website and here is a link to the GitHub Repository

I hope you like it 😄.

Comments

[Geni Jaho]

Cool website :D

[Zachary]

Cool site! I did find a little bug. If you navigate to /about and then try to navigate to another link from the nav it will not work correctly. Looks like it is looking for an id field to navigate within the page.
ex. #books in the URL

[Ekemini Samuel]

Great work, thanks for sharing.

Also, designer friends are cool😎!