futianshen / sol-pet-legends

Sol Pet Legends

Integrating a virtual pet breeding gameplay with a cashback app to create a mixed reality interaction model and a shopping experience that sns from web2 to web3.

Acknowledgements

• Yarn
• React
• Next.js
• Tailwind
• Radix
• shadcn
• Stitches
• Lucide React

Table of Contents ✨

• Installation
• Usage

Installation

To install and run Next.js Chrome Extension locally, follow these steps:

1. Clone this repository:

   git clone https://github.com/futianshen/sol-pet-legends.git

2. Navigate to project directory:

   cd sol-pet-legends

3. Install the dependencies using yarn:

   yarn

Usage

Usage Locally 🔥

Run the project:

yarn dev

This will run project on your localhost

http://localhost:3000/

Build and Import To Chrome 🔥

To build and import Next.js Chrome Extension to chrome browser, follow these steps:

1. rename the images in the following way:

import phantom from "@/public/images/phantom.png"

<img src={phantom.src} alt="phantom" />

to

import phantom from "@/public/images/phantom.png"

<img src={phantom.src.replace("_next", "next")} alt="phantom" />

2. Build the project:

   This will run prep and export to create new folder 'out/', and rename '_next' folder to 'next' (without underscore)

   yarn build

3. Open Google Chrome and go to chrome://extensions.

4. Enable the "Developer mode" toggle switch.

5. Click on "Load uncked" and select the out folder generated by the build process.

6. The Next.js Chrome Extension Starter should now be loaded as an uncked extension in Google Chrome.