House of DIY

👀 Check it out! hosted on Netlify 🔗

What tools did I use?

• 🥽 VueJS 3

I used this project to demo a basic VueJS project. It uses the Options API as it's the one I'm used to, having coded with VueJS 2 for some time.

It also uses components, Vue Router 4, and Pinia.

A feature I liked implementing is the filter tool.

🔍 See code excerpt

computed: {
    filteredArray() {
        let filtered = this.db
        if (this.filtering) {
            filtered = filtered.filter(e => e.availability == 'In stock')
        }
        if (this.query != '') {
            filtered = filtered.filter(e => e.name.toUpperCase().includes(this.query.toUpperCase()) || e.category.toUpperCase().includes(this.query.toUpperCase()))
        }
        if (this.currentCategory != '' && this.currentCategory != 'Select a category') {
            filtered = filtered.filter(e => e.category == this.currentCategory)
        }
        return filtered
    },
}

• 🖼 Axios and the Pexels API

The data you see in assets/data.js has been generated by ChatGPT. I wanted pictures on my web application, and I wanted to demo querying APIs so I used the Pexels API in a very simple way, using the name of the product.

🔍 See code excerpt

client.photos.search({ query: this.name, per_page: 1 }).then(photos => {
    this.imgUrl = photos.photos[0].src.medium
})

• 👩‍🎨 Bulma (CSS framework), SCSS (in my views and components), and media-queries for a basic responsive design.

---

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.