Git Product home page Git Product logo

ecoverse-fe's Introduction

Ecoverse Frontend

This is the client side repo for Ecoverse, a metaverse representing real world forests, superimposing it with forestry operations data (tree density, species, CO2 emissions, etc.) and allowing purchase and sale of forest land tiles. The frontend of the dApp was made with the developer experience in mind: Next.js, TypeScript, ESLint, Prettier, Lint-Staged, VSCode, PostCSS, Tailwind CSS, Mapbox.

Requirements

  1. NodeJS version 16 and up
  2. Yarn (preferred)

Local Development

  1. Clone the project

  2. Install husky

    yarn prepare

  3. Install dependencies

    yarn

  4. Run local development

    yarn dev

Environment variables

  1. Create .env.local

  2. Include the following environment variables

    ENV_CONFIG=development | production
NODE_ENV=development | production

NEXT_PUBLIC_MAP_LONGITUDE=102.82019076691307 # you can change it to the location you want
NEXT_PUBLIC_MAP_LATITUDE=17.626501946609892 # you can change it to the location you want
NEXT_PUBLIC_MAP_INITIAL_ZOOM=5.9 # you can change it to the scale you want

# Initial values for the longitude, latitude and zoom are from the Sri Trang Group

NEXT_PUBLIC_CANDY_MACHINE_ID=your_candy_machine_id
NEXT_PUBLIC_THIRD_PARTY_SECRET=
NEXT_PUBLIC_BACKEND_URL=ecoverse_backend_url # check out the 'ecoverse-mock-be' repo
BACKEND_URL=ecoverse_apis_url # check out the 'ecoverse-apis' repo
BACKEND_USERNAME=master 
BACKEND_PASSWORD=secret
NEXT_PUBLIC_MAPBOX_KEY=your_mapbox_key


RECIPIENT_PRIVATE_KEY=wallet_private_key_of_recipient
COINMARKETCAP_API_KEY=your_coinmarketcap_api_key
COINMARKETCAP_BASE_URL=https://pro-api.coinmarketcap.com

ecoverse-fe's People

Contributors

jekiquin-bb avatar yoon-bbox avatar

Watchers

Michael Brink avatar

ecoverse-fe's Issues

[BUG] Web worker

Web worker

Web worker implementation is a little bit shaky. It is currently working now using custom hooks but having issues implementing more the one web worker.

  • Worker not defined when implementing more than one worker
  • Worker not define when invoking worker on another component

Possible solutions:

  • Adding a worker-loader on nextjs config file. Follow this
  • Making sure of the context where the worker was called or invoked. Worker context is only available where it is called (new Worker(...)). Using new URL(..., import.meta.url) works for worker file location.

[FEATURE] User Tiles

User Tiles

  • Save user tiles to backend
  • Display saved user tiles to frontend
    • Tiles from logged user
    • Tiles from other users
  • Tile selection
    • Project tiles
      • Same functionality
      • Disable selecting user tiles
    • User tiles
      • Display user tiles information
        • Ability of logged user to view all necessary information through my forests page
        • User tiles from other users can only show summary

[FEATURE] Implement react-map-gl

Mapboxgl currently implemented in the app is coming from sdk and everything was built from the core functionality

Implement a library called react-map-gl for easier development. This will help with creating wrappers for sources, layers, markers and providers. This will also eliminate the use of eventbus that was custom built just for emitting events from one component to another.

[FEATURE] Display Project Tiles

Display Project Tiles

  • Display tiles for each project
  • Users can only select tiles from project areas and nothing else
  • Admin can add project tiles through Frontend

[FEATURE] Map Search

Map Search

  • Replace the map search to only search for projects instead of any place in the world
  • Search can be using any of the strings from the database

[REFACTOR] Project Full Detail

Refactor

Refactor farm page

image

  • Remove Spha and carbon sequestered per day on FE

Reason for refactoring

  • Spha is used for internal calculation for sequestered carbon
  • Carbon sequestered per day is redundant. Already has per year value

Other information

  • Please see follow this link.
  • Only for balloonbox team

Affected files

  • pages/projects/[farmId]

[FEATURE] User Tiles on Map

User Tiles on Map

  • Display user tiles on the map
  • Add a popup on the user tiles
    • owned tiles - can see full details on another page
    • not owned tiles - just on popup

[FEATURE] Add farm/project markers

Add farm/project markers

Endpoints and Requests

  • Implement endpoint for getting all project information
  • implement endpoint for getting projects by bounds
  • implement endpoint for getting specific details for each project

Markers

  • implement markers on the map to indication location of projects
  • Dynamic markers where they will be added and removed based on the map bounds (visible on viewport) for enhanced map performance

[REFACTOR] Project Detail from Api

Project Detail from Api

  • Refactor all the project details coming from api
  • Refactor all the components that will be affected by the response from api

[BUG] Lint-staged Fix

Lint-staged

Issue

  • Husky not automatically installing after installing packages
  • Possible yarn incompatibility
    • prepare doesn't work on yarn 2

Possible solution

  • on package.json, replace prepack to prepare on the scripts object
  • Make sure that version of yarn is on v1.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.