Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tolumide-ng/ascii-faces-emarket
A basic e-commerce application that utilize requestIdleCallback and IntersectionObserver
https://github.com/tolumide-ng/ascii-faces-emarket
Last synced: about 1 month ago
JSON representation
A basic e-commerce application that utilize requestIdleCallback and IntersectionObserver
- Host: GitHub
- URL: https://github.com/tolumide-ng/ascii-faces-emarket
- Owner: tolumide-ng
- Created: 2019-12-02T16:15:14.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T18:26:37.000Z (over 3 years ago)
- Last Synced: 2023-03-06T08:17:16.756Z (almost 2 years ago)
- Language: JavaScript
- Homepage: https://facesascii.herokuapp.com/
- Size: 2.51 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[Hosted on Heroku](https://facesascii.herokuapp.com/)
## Built With
1. React.js
2. TailwindCSS
## Features
1. A user can view all available products
2. Page Loads Using more data when the userAgent is idle using the RequestIdleCallback API
3. Pagination is detected using the Intersection Observer API
4. User can view a specific product and increase or reduce the size of such product before purchase
5. User can sort products by `size`, `price` or `id` of such products
6. Price of the products are displayed in dollars and number of days if the date of creation of such product is not past 7 days
## Getting Started
To get a local copy up and running follow these simple steps.
## Requirement
1. Please ensure you are connected to the internet
2. Ensure you set up your `.env` file as illustrated in Installation below
## Installation
1. Clone the repo
```
git clone https:://github.com/andela/demeter-ah-frontend.git
```
2. Create a Local `.env` file as explained in the `.env.sample` of this repo and add `NODE_ENV='development` to the file
3. Install NPM packages
```
npm install
```
3. Setup a `.env` file as illustrated in the `.env.sample` file, set `NODE_ENV='development'` to setup a development environment
4. Start the backend on one terminal
```
npm run start
```
5. Start the frontend on a second terminal
```
npm run dev
```
6. On your browser visit >>> http://localhost:8080/
## Acknowledgements
1. [developers.google - Using Request idleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)
2. [MDN - requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
3. [W3.org - requestIdleCallback](https://www.w3.org/TR/requestidlecallback/)
** Please Note:
==> This project currently have no support for older broswers that does not support requestIdlecallback