Scrolly GameJam

A small game created from a Solana dApp scaffold for the Scrolly x Superteam hackathon.

Responsive	Desktop

Getting Started

This is a Next.js project bootstrapped with create-next-app.

The responsive version for wallets and wallet adapter may not function or work as expected for mobile based on plugin and wallet compatibility. For more code examples and implementations please visit the Solana Cookbook

Installation

npm install
# or
yarn install

Build and Run

Next, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Features

Each Scaffold will contain at least the following features:

Wallet Integration with Auto Connec / Refresh

State Management

Components: One or more components demonstrating state management

Web3 Js: Examples of one or more uses of web3 js including a transaction with a connection provider

Sample navigation and page changing to demonstate state

Clean Simple Styling 

Notifications (optional): Example of using a notification system

A Solana Components Repo will be released in the near future to house a common components library.

Structure

The scaffold project structure may vary based on the front end framework being utilized. The below is an example structure for the Next js Scaffold.

├── public : publically hosted files
├── src : primary code folders and files
│   ├── components : should house anything considered a resuable UI component
│   ├── contexts` : any context considered reusable and useuful to many compoennts that can be passed down through a component tree
│   ├── hooks` : any functions that let you 'hook' into react state or lifecycle features from function components
│   ├── models` : any data structure that may be reused throughout the project
│   ├── pages` : the pages that host meta data and the intended `View` for the page
│   ├── stores` : stores used in state management
│   ├── styles` : contain any global and reusable styles
│   ├── utils` : any other functionality considered reusable code that can be referenced
│   ├── views` : contains the actual views of the project that include the main content and components within
style, package, configuration, and other project files

Creating Your Game

In order to change or create a new game, edit the index.tsx file in src/views/home/index.tsx:

// 👉 THIS IS THE ONLY PART YOU EDIT FOR THE JAM 👈
const GameSandbox: FC = () => {
  return (
    <div>
      Your No-Code Jam Game
    </div>
  );
};

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.