Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fatihycan/product-list


https://github.com/fatihycan/product-list

html5 javascript module-scss react responsive-design scss

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

# Product List App

Product List App, a React application, is an application where products are listed and users can view and select products. This project was created using React and SCSS.

## Features

- **ProductsList**: Products are displayed by the `ProductsList` component. Each product includes price, title and image.
- **Categories**: Products can be filtered by categories displayed via the `HeaderH` component.
- **Hamburger Menu**: The hamburger menu, visible on small screens, allows users to quickly access categories.
- **Product Cards**: Products are displayed on cards that grow with the hover effect and add a shadow.
- **Responsive Design**: Using SCSS, the application is designed to adapt to different screen sizes.

## Technologies

- HTML5
- React
- SCSS
- Javascript

# Product List App

Bir React uygulaması olan Product List App, ürünlerin listelendiği ve kullanıcıların ürünleri görüntüleyip seçebileceği bir uygulamadır. Bu proje, React ve SCSS kullanılarak oluşturulmuştur.

## Özellikler

- **Ürün Listesi**: Ürünler, `ProductsList` bileşeni tarafından görüntülenir. Her ürün, fiyat, başlık ve resim içerir.
- **Kategoriler**: Ürünler, `HeaderH` bileşeni aracılığıyla görüntülenen kategorilerle filtrelenebilir.
- **Hamburger Menü**: Küçük ekranlarda görünür olan hamburger menü, kullanıcıların kategorilere hızlı erişim sağlamasına olanak tanır.
- **Ürün Kartları**: Ürünler, hover etkisiyle büyüyen ve gölge eklenen kartlarda gösterilir.
- **Responsive Tasarım**: SCSS kullanılarak, uygulama farklı ekran boyutlarına uyum sağlayacak şekilde tasarlanmıştır.

## Teknolojiler

- HTML5
- React
- SCSS
- Javascript

https://github.com/user-attachments/assets/0deb1dec-30d9-48aa-a295-bf0520d19a53

[Live](https://fy-product-list.netlify.app/)