/BT-2023-Project-Tech

Welcome to my repository for the matching app that I made for Blok Tech!

Primary LanguageEJS

BT-2023-Project-Tech

Table Of Contentes

💡 Concept

The application mainly focuses on enable users to find their favorite hip-hop albums. With the help of filters and a search function the user can look up a variety of hip-hop albums. When the user finds an album he/she seems to like, the user can click on the preview for some additional information about the album. The user is also able to like, delete or upload an ablum.

⭐ Features

Lazy Loading

Using the intersection obserever I implemented lazy loading for the image withing the album cards. When the card is within the view of the screen the album cover is being showed.

Delete

The user can delete an ablum by pressing on the bin within the album card. After pressing on the bin the user has to confirm if he/she is certain about their action.

Upload

The user is able to upload an album to the database by using the form. When the album is uploaded the user gets feedback. All the fields are requierd, so the user is unable to add an album without filling in all the fields.

Favorite

When the user presses on the empty heart the user adds that specific album to their favorites list. at the favorites page the user sees an overview of al their favorites albums. The user can remove an album ot their favorites list by clicking on a full heart.

Filter

Here the user can filter by genre and year of origin. When the data is filtered the user get an overview of albums that corresponds with the user preverences.

Search

Here the user can search by ablum title, artist name, genre and year. When the user search for something that doesn't correspond with data from the database, the app will give the user feedback. The user is also able to clear the search results by pressing the cross.

🔧 Installation

If you want to use the app locally, you can clone my repository with the following commands:

git clone https://github.com/samclarkb/BT-2023-Project-Tech

Then install al the dependancies

npm install

After that you can run the project with the foolowing command:

npm start

🔎 Recources

🔖 License

Copyright (c) 2021 Sam Clark Boot, MIT