https://github.com/calebcadainoo/bejamas-ecommerce
An ecommerce implementationf for Bejamas (https://bejamas.io)
https://github.com/calebcadainoo/bejamas-ecommerce
cart ecommerce filters pagination price react-pagination reactjs
Last synced: about 2 months ago
JSON representation
An ecommerce implementationf for Bejamas (https://bejamas.io)
- Host: GitHub
- URL: https://github.com/calebcadainoo/bejamas-ecommerce
- Owner: calebcadainoo
- Created: 2021-03-25T14:58:50.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-02T23:42:06.000Z (about 4 years ago)
- Last Synced: 2025-02-15T23:44:41.045Z (3 months ago)
- Topics: cart, ecommerce, filters, pagination, price, react-pagination, reactjs
- Language: HTML
- Homepage: https://bejamas-cart.web.app
- Size: 2.24 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 1. Featured Product (complete)
One of the products should have a flag that it's a featured artwork. It should be displayed above the product list.
### 2. Product List (complete)
The product list should contain 4 artworks. After hovering over the image, you should display the "add to cart" bar.
Remember that some products have the bestseller flag.
### 3. Add to Cart (complete)
After clicking "Add to cart" in the cart icon in the header should appear the badge with the counter of elements in
the cart. Each 'Add to cart' action should open the cart dropdown with items. The dropdown should be also visible
after clicking the basket icon in the header. Clicking in the "Clear" button should remove items from the cart and
hide the dropdown.
### 4. Pagination (complete)
Products should be paginated. On one page should be 4 items. The pagination should show the current page. Hide
the 'prev' arrow on the first page and hide the 'next' arrow on the last page
### 5. Sorting (complete)
Implement 2 types of sorting: alphabetically or by price. Use basic HTML select. Clicking on arrows should change
the order to 'ascending' or 'descending'.
### 6. Filtering (completed)
Products should be filterable. You can filter products by multiple categories (multiple filters) and only one price
range (single filter). Using filters should affect the pagination. Try to build filter options dynamically (don't hardcode
them).
### 7. Web performance* (complete)
Optimise Your website using lighthouse reports. Try to achieve 80& score in web core vitals. (mobile and desktop)
### 8. API implementation*
Try to implement your own API using serverless functions or any other database tool. We prefer using GraphQL
databases (we use https://fauna.com/).
### Designs: (complete)
https://www.figma.com/file/wYrjKlxB3g80yge1kcahWx/Bejamas-Recruitment-task?node-id=7%3A376