Webster

---

Image editor with NFT markerplace. Edit your images, make them NFT and sell on our marketplace.

About app

---

App have 2 main modules: image editor and marketplace.

ImageEditor contain:

• Text module
• Shapes module
• Drawing module
• Adding image layers
• History (undo/redo)
• Guidelines
• Rotating and scaling layers
• Copy/Pasting objects
• Simple layering (bring to front / send to back)
• Zoom and pan
• Hot keys
• Progress saving
• Download resulting image

Marketplace providing opportunity to tokenize your drawings, make them NFT and sell to another people.

Technology stack:

• Backend: NodeJS, Express, KNEX
• Database: Postgresql
• Smart contracts: Solidity
• Frontend: Vue, TypeScript, SCSS, Fabric.js
• Bundler: Vite

Architecture:

• Server-API: REST and JSON-API specifications, MVC pattern
• Database-API: builder pattern
• Styles: BEM specification
• Authentication: Web3 Auth

Features:

• Creating projects, project - its your own workspace for specific image editing session
• Editing images
• Selling images as NFT
• Fully mobile responsive
• Incredible loaders, slow down your network just to face this beauty

Third-party services:

• Metamask + ethers.js for handling cryptocurrency transactions
• INFURA API - for uploading banner and NFT metadata to IPFS

---

Before start preparations

1. Database

---

start postgresql server and create empty data base 

# you can use docker compose file from the repo
- docker compose up -d

2. Setup the environment

---

• Deploy ImageNFT.sol from the contracts folder. (You can use Remix or whatever IDE you like)
• Create .env file for backend and for frontend. Check .env.example in each folder.

3. Installing dependencies and preparing database

---

cd server && yarn install && cd ../frontend && yarn install

4. Starting app

---

# start in different terminals or in daemon mode
# start from the dedicated folder (frontend || backend)

yarn start 	# for frontend
yarn dev 	# for backend