Cyclopedya: QR Code Scanner for Books with Motoko

Welcome to Cyclopedya, a project designed to scan QR codes on books and fetch detailed information from the Open Library API. Built with Motoko, Cyclopedya utilizes HTTP outcalls to interact with Open Library, making it a robust and efficient tool for book enthusiasts and developers alike.

---

🏅 Certificate of ICP Developer

As proof of expertise, here's my ICP Developer Certificate, showcasing my knowledge and skills in Internet Computer development:

---

Recommended Setup

To ensure the best experience when scanning QR codes, especially if your PC's camera struggles to detect them, we recommend using the DroidCam app. It allows you to use your smartphone's high-quality camera as a webcam, significantly improving QR code detection and accuracy.

Download DroidCam here:

• Android
• iOS

---

Project Overview

By default, creating a new project adds this README and some template files to your project directory. You can edit these template files to customize your project and to include your own code to speed up the development cycle.

To get started, explore the project directory structure and the default configuration file. Working with this project in your development environment will not affect any production deployment or identity tokens.

Learn More

For additional resources:

• Quick Start
• SDK Developer Tools
• Motoko Programming Language Guide
• Motoko Language Quick Reference

---

Getting Started

Running the Project Locally

To test your project locally, use the following commands:

# Starts the replica, running in the background
dfx start --background --clean

# Deploys your canisters to the replica and generates your candid interface
dfx deploy

# Fast command to deploy and start
dfx start --background --clean && dfx deploy

# Restart and deploy in one step
dfx stop && dfx start --background --clean && dfx deploy

Running the Frontend

To test your frontend, use the following commands:

cd src/cyclopedya_frontend && npm start

Once the job completes, your application will be available at http://localhost:4943?canisterId={asset_canister_id}.

If you make changes to your backend canister, generate a new candid interface with:

npm run generate

It’s recommended to run this before starting the frontend development server. This command is also run automatically any time you execute dfx deploy.

For frontend changes, start a development server with:

npm start

This will launch a server at http://localhost:8080, proxying API requests to the replica at port 4943.

---

Frontend Environment Variables

If hosting the frontend code without using DFX, you may need to adjust settings to ensure the project doesn’t fetch the root key in production:

• Set DFX_NETWORK to ic if using Webpack.
• Replace process.env.DFX_NETWORK in the autogenerated declarations using your preferred method.
• Modify dfx.json to set:

  {
    "canisters": {
      "{asset_canister_id}": {
        "declarations": {
          "env_override": "your_string"
        }
      }
    }
  }

• Create your own createActor constructor.

---

Enjoy building with Cyclopedya and leveraging the power of Motoko and the Internet Computer! 🚀