logo

Hom3Page [ReadMe]

Subject
Web3
Type
ReadMe
Technical Paper
Author
Tuck
Status
In progress
Published
1. TL;DR2. Supporting Products3. Technical Overview4. Build Phases4.1. Phases5. Project Structure5.1. File Structure5.2. Components6. Future Features7. Distributed Computing

1. TL;DR

Hom3Page pays homage to the 2005 project ‘The million-pixel homepage’, with a student selling each pixel for $1 to raise funds to go to college. This sold out and also spared on copy projects. The original homepage is still live. It shows a range of buyers, from personal use, bands, brands and advertising agencies.
Fast forward 18 years and a user's standard homepage has been replaced by a heavily curated news feed.  Another 10 years on, the metaverse is all around us.  As more of our lives are digitalised and moved into an electrical realm, consumers are looking for more enriching and entertaining ways to consume this media.  This is why the metaverse is inevitable.
Hom3Page will be one of the first widely confirmed metaverse wonders to see.  Built from the ground up to be fully web3 native, distributed and self-governed.  Its purpose is to create an intuitive and engaging homepage for the web3 user, showing it is possible to put the control into the hands of the adventurous and foresighted.
This is a fairly simple concept, a webpage with parts of the page sold as NFTs.  The owner of the NFT can control what is shown in that area.  But to build this into a thriving ecosystem we will need to construct a new way of decentralised image and web processing and bring online advertising into the web3 ethos. 
With the integration of decentralised and community-ruled marketing, we put the power back into the hands of the holders, giving them the decisions on who and what is displayed on the wall, as well as retaining the fees for the advertisements.

2. Supporting Products

Hom3Page will be a web app infusing NFTs on the Ethereum ecosystem. It is built using strong and common web frameworks and packages, based around javascript and node.js.
Frameworks
  • Node.js
  • Typescript
  • React & Next.js
  • Hardhat
  • Solidity
Packages
  • Ethers.js
  • e-labs_web3provider
  • Styled-Components
 
Services
  • Netlify
  • Github
  • Firebase
  • Alchemy
  • Heruko
The project will, for now, sit as a private mono-repo on Git Hub under the account e_labs-io.

3. Technical Overview

NFT & Blocks
The block NFTs will be the holder's access to the dashboard.  Each NFT is called a ‘block’, a ‘block’ of pixels.  Holding an NFT will allow the user to access the walls dashboard.  From the dashboard the holder will be able to configure and manage their block(‘s) and adverts.  But we will go onto the dashboard more later.
The block's NFTs will be based on ERC721(A) contract standard, creating 1 of 1 digital representation of each block.  They will be named via X, Y coordinates of their placement on the wall.  We will use a very specific metadata format to allow for max expansion and usage on the wall but also allow for 3rd party systems to grab data and display what they can.

Blocks

Each NFT represents a ‘block’ on the metawall. A block is a ‘block’ of 10x10 pixels, creating a 100px square surface to display. Blocks are the base of the wall. You only need to own one block to have access to all of the tools to monetise and design your block and the ability to vote and take part in community decisions.

Static Blocks

A static block refers to a block that has a traditional and single entity asset. This would be an image, video, gif and 3D object, they could even point it to an NFT they own. An item that should be the same from the day you upload it to the day you change it. These blocks can be integrated with links, these will activate interaction with any part of the block/collection. These assets would be stored on the IPFS, much like traditional NFT media.

Dynamic Blocks

Dynamic blocks are more complex but allow for a much richer environment. These are blocks that point to a website or app. They will be decentralised web pages that allow for greater feature inclusion. This can allow for dApps to be integrated, i.e. UniSwap could build an exchange UI directly into the wall. It can also allow for games, live-updating information like token prices of the gas price.
Each block will need to be built and deployed separately from a brand or product's website, making sure there is a standard throughout. Over time we and the community can build templates and frameworks for holders and advertisers to construct their block-face. Within the metawall webpage, we will have a global web3 connection, so users can connect and then have that data access via all the apps that require a wallet.

Block Data

The NFT data will be stored on a decentralised system, allowing the wall to live on past us. We will build, deploy and initially maintain a suite of tools to create the ecosystem. These will include all of the contracts for the blockchain, dashboard, advert system, block-face processing and block-face storage. ...Read More
The metadata will follow the standard ERC meta format for name, description, image (an API still-image of the output of the block) and also a dynamic link. We want to make keep the metadata as standardised and simple as we can so that it can be integrated by more people. The dynamic link will reference the block's absolute position on the wall output. This means we don't require a transaction on the blockchain to update the block-face.

Staking

We will introduce a staking method for token holders allowing them to take part in advertisement campaigns and management. Locking their block(’s) into the advertisement contract will return a non-transferable NFT representing their position. Holding this will allow them to access the ‘rental’ portion of the ecosystem, lending out their block's surface space for an income.

Block Collections

Blocks can be combined into collections, this wraps the blocks into a single NFT, fully reversible at any time. Wrapping the blocks will create a collection NFT, which represents all the blocks combined, making it easier for holders to stake manage their blocks.
The Wall
The wall is where all of the blocks are rendered together, ready for a user to view and interact with. The wall is made up of ‘blocks’, each block is 10x10 pixels, with the bottom left block being number 1 and then running right and starting again one layer up on the left.
The wall needs to allow for fast and simaltainus rendering of each block or collection of blocks, the passing of global props (web3 connections, in-wall messaging) between blocks and the wall's main structure.
The final scale of the wall is yet to be decided, each phase of the building will define a size to build to for testing. The wall should have easy zoom and moving features without inhibiting a user's interaction.

4. Build Phases

Each phase will be a separate branch on the Github repo. Once the phase has been tested and debugged it will be merged into the main branch and then the next phase branch can be created from that.
For each phase and each separate element in the ecosystem, tests need to be written. Whether these are script-based tests to run or a checklist of tests an alpha tester needs to perform. Document all testing and checks that should be done.

4.1. Phases

  1. Define
    1. Check over the current documentation and files, write a well documented breakdown of what you will do in this phase. This should be in the ‘PhaseBuildStratogy_01.md’
    2. Define tools & packages needed for each element. Write individual readme’s for element for what they need are are doing.
    3. Define any needed shared types, interfaces and classes in the ‘common’ directory.
    4. Define any outside API’s, protocols or services that will be needed
    5. Create the docs needed to keep track of how the system works by creating a series of documents.
      1. Create a detailed plan for phase 2 (prototype V2)
    6. Create all needed directories, install frameworks and packages and set up projects.
  1. Prototype V1
    1. Build a simple 1-page website with branding, FAQ & introduction to Hom3Page & Mint button
    2. Build a basic 10x10 block wall that can handle images and videos. Blocks do not need to combine at this point.
    3. Build a simple NFT (ERC721) contract for 100 tokens max with basic functions.
    4. Build any services that might be needed in the backend to support the other elements
    5. Build a simple dashboard that allows users to change the media on their block
    6. Document everything
  1. Prototype V2

    5. Project Structure

    5.1. File Structure

    hom3page/

├─ .smol-dev-js/
├─ common/
│  ├─ types/
│  ├─ constants/
│  │  ├─ metadata.json
│  │  ├─ chains.json
├─ docs/
│  ├─ services_and_apis.md
│  ├─ BuildPhases.md
│  ├─ PhaseBuildStratogy_01.md
├─ elements/
│  ├─ backend/
│  │  ├─ build/
│  │  ├─ src/
│  │  ├─ README.md
│  ├─ dashboard/
│  │  ├─ README.md
│  ├─ onChain/
│  │  ├─ README.md
│  ├─ wall/
│  │  ├─ README.md
│  ├─ website/
│  │  ├─ README.md
├─ spec/
│  ├─ README.md
│  ├─ NOTES.md
├─ .env

    5.2. Components

    Website [www.hom3page.co
    The website is a basic but well-styled marketing and access site. It will be the website in which you can access the wall, access the dashboard, check stats on the wall, mint blocks (a the start) and catch up on news, blogs and FAQ’s.
    Backend [www.api.hom3page.com]
    The backend is the engine that runs any services that we can keep away from the client. Account systems, analytics, API access, wall rendering etc.
    Wall [www.wall.hom3page.com]
    The wall is the heart of the project, it is the web app that displays and allows interaction with the NFTs in the wall configuration.
    Dashboard [www.portal.hom3page.com]
    The dashboard is for holders of the NFT, here they can manage their blocks and participate in the DAO.
    onChain
    This is the environment for EVM contract development. Using Hardhat this is the place to build contracts, tests and deployments.
    Docs
    This is the folder that the detailed technical documentation for each part of the product

    6. Future Features

     

    7. Distributed Computing

    Copyright 2022 E_Labs
    HOME
    WRITING
    ABOUT