Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andyrids/svelte-isbn-reader
Work in progress. JAMStack ISBN barcode reader and search application, using Netlify functions (ISBN DB API), Svelte, Snowpack & Quagga.js barcode reader library
https://github.com/andyrids/svelte-isbn-reader
isbn13 isbndb jamstack netlify-functions quaggajs sveltejs
Last synced: about 2 months ago
JSON representation
Work in progress. JAMStack ISBN barcode reader and search application, using Netlify functions (ISBN DB API), Svelte, Snowpack & Quagga.js barcode reader library
- Host: GitHub
- URL: https://github.com/andyrids/svelte-isbn-reader
- Owner: AndyRids
- License: mit
- Created: 2021-02-18T16:38:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-19T15:00:05.000Z (almost 4 years ago)
- Last Synced: 2023-09-01T17:33:29.731Z (over 1 year ago)
- Topics: isbn13, isbndb, jamstack, netlify-functions, quaggajs, sveltejs
- Language: Svelte
- Homepage:
- Size: 116 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/svelte-isbn-reader/deploys)
# Svelte ISBN barcode scanner and search App ([view site](https://svelte-isbn-reader.netlify.app/))
Work in progress.
TODO:
* Change API to OpenLibrary from ISBN DB
* Add library feature
* Add user settings feature
* Store library and user settings (IndexedDB or FaunaDB)
* Fix browser compatability issues
JAMstack ISBN barcode reader and search app, using [ISBN DB](https://isbndb.com/) API for fetching book information, from ISBN or author name. [Netlify functions (AWS Lambda)](https://docs.netlify.com/functions/overview/) are used to connect the frontend with the backend APIs. [Snowpack](https://www.snowpack.dev/) was used as the build tool.
NPM packages can be installed after clone by running:
```npm
npm install
```
Note:
To enable use without Netlify CLI, I've left the original API fetch function in src/api/no-functions, which can be used by
changing the API function like so, in ScannerISBN, SearchAuthor & SearchISBN components (src/components - scanning & searching):
* from: ```import getBookDetails from '../../api/getBookDetails';```
* to: ```import getBookDetails from '../../api/no-functions/getBookDetails';```
.env file will then need: SNOWPACK_PUBLIC_ISBN_DB_KEY=45341_...
Otherwise...
Build requires [Netlify CLI](https://docs.netlify.com/cli/get-started/).
* ```npm install netlify-cli -g```
Install Netlify CLI.
* ```netlify login```
Authorise Netlify CLI with Netlify account.
* ```netlify init```
Create and Connect a Netlify site. I connected manually intially, during development and later
connected the site to a GitHub repo.
* ```netlify.toml```
Development & build settings are already entered, with comments, in the netlify.toml file.
* ```.env & evironment variables```
Environment variables were set in a .env file and in the Netlify site build & deploy settings: ISBN_DB_KEY=YOUR_KEY
```
ISBN_DB_KEY=45341_...
```
* ```netlify dev```
Calls npm run dev and serves the Svelte app at http://localhost:8888. Snowpack dev server (npm run start), uses
http://localhost:8080 and Netlify CLI acts a proxy for the netlify functions. netlify.toml shows this in the
settings under ```[dev]```.
## Available Scripts
### netlify-dev
Runs the Netlify development server (http://localhost:8888) and acts as a proxy for the netlify functions and the
Snowpack app in development mode (http://localhost:8080).
### npm start
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
### npm run build
Builds a static copy of your site to the `build/` folder and uses Rollup to bundle.
**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/master/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. This App uses snowpack-plugin-rollup.