Near Journey

Near Journey
Multiplayer and NFT Reward
List of content
Browser Editor with Learning content
NFT minted to Wallet

Inspiration

It is a pain to learn from long lectures, videos, or documentation. Platforms that offer a gamified, interactive, and social learning experience can engage and retain more users.

A good example of a website that has applied this type of experience is CryptoZombies, one of the most popular websites for new developers to get into Web 3.

What it does

Near Journey is a website that allows newcomers to learn with practice and collaboration.

The website combines industry best practices in design and experience to allow the user to learn in an engaging way. It includes content for learning how to build on NEAR, as well as an online editor for testing knowledge directly in the browser.

We will begin with content from NEAR official examples, which can easily be expanded to include additional content. Markdown files are used for the guides and Javascript files for the starter and answer code. This approach allows anyone to easily contribute new content.

We implemented a multiplayer feature, allowing learners to play around with friends or other learners and solve challenges together.

At the end of the guide, the user can claim a random NFT as attestation of completion. The NFTs come from a collection of stunning relic images. The user can try to collect them all.

How we built it

We built it with the latest NextJS version 13, added TailwindCSS for styling. For the editor, we used Codemirror which also provides javascript autocompletion. Liveblocks for real-time presence and sync editor's code. Used near-api-js and near-wallet-selector for the user to connect to the website with a NEAR wallet and mint guide completion attestation NFT on the NEAR blockchain. The NFT image is stored on IPFS using nft.storage.

Challenges we ran into

I tried first with Monaco and then switched to Codemirror. It took a bit of time to resize the editor correctly to the layout.
We encounter issues using Near JS with typescript. Because of a type error, the app didn't build.
It is hard to find JS examples, and most advanced examples are written in Rust.

Accomplishments that we're proud of

Deploy a working mvp of an online multiplayer editor.
The Multiplayer editor allow the user to know how many people are online and what they are doing. Random Collectibles on completion. Read from static Markdown and Javascript files making it easy to add more content.

What we learned

Building and deploying contracts on Near.
Connect Near Wallet to the frontend.
Read and write Near contracts from the frontend. Mint NEAR NFT. Build and deploy a web editor. Implement real-time functionalities such as user presence and collaboration in the editor.
Next13 new AppDir page routing.

What is the future of Near Journey?

Add a user profile where the user can find his completed guides, achievements, and NFTs for completing guides. Add the ability for learners to chat and connect with like-minded people.
More guides to cover NEAR SDKs for smart contracts and frontend interaction.
Add a diff checker in the editors, allowing the user to easily see differences. NEAR SDK autocompletion. Add folders section to the editor. Private rooms for collaboration.