🌎
Web Map
  • Web map
  • Denormalized Data
  • V2 web map
  • Customizable web map
  • Like
  • User profile
  • Wallet app
  • SEO
  • Search
  • The Wallet Web Application
  • V1 Implementation Timeline
  • React Coding Practices
  • Denormalization Migration
  • CSS and MaterialUI Guideline
  • Tile Server Specification
  • Search
    • Solr research
    • Config web map beta
Powered by GitBook
On this page
  • Github project:
  • Design:
  • Stories
  • Some UI/UX principle
  • Resources

Was this helpful?

User profile

PreviousLikeNextWallet app

Last updated 2 years ago

Was this helpful?

The pages and service let users register, log in, and edit their profile on the web map.

Github project:

Design:

On the web map, logged user can:

  • Like capture, planter, org

  • Set their profile: avatar, name

Stories

Story for sign-up

  • There is a sign-up button/link, by clicking it, the web map will bring the user to the signup page, and guide people to finish the registration.

    • The user can choose an email address + password to register.

    • The user can choose Gmail to register

    • The user can choose Facebook to register

    • The user can choose Github to register

  • After registration, the web map will present the status of the user logged in.

Story for login

  • There is a sign-in (login) button/link on the web map.

  • By clicking it, a login page shows up, and the user can fill out the form to log in, or by clicking the social media options to log in.

Story for like things

  • There should be a like button on capture, tree pages

  • By clicking the button, the web map adds one count of like

  • By clicking the button again,the web map reduces one count.

Story for profile modify

  • Once the user logged in, there is a button/link, by clicking it, app jumps to the profile page

  • The profile page presents the user's information.

  • User can edit their information:

    • User first name

    • User last name

    • User avatar

    • User bio

Story : forgot password

  • There is a button/link, by clicking it app jumps to forgot password page, and user can input their email address to reset their password.

Some UI/UX principle

  • We need to support both mobile and desktop devices.

  • For the web apps, we are considering that we can reuse this user profile feature in multiple apps ( we are not sure about this, maybe there are some difficulties) :

Resources

web map client:

admin panel:

wallet app:

The original web map design file:

The online version:

https://beta-map.treetracker.org/
https://admin.treetracker.org/
https://www.figma.com/file/YqfFmqTpo60j5g0OAcw9cx/Wallet-Web-App---Master-(Copy)?node-id=0%3A1&t=4y0mXFgFSUf9f6qs-0
https://www.figma.com/file/T8l81aGsnYD0fyhjrlUiZ5/Greenstand-Webmap?node-id=2497%3A9322&t=yjJ7vqWVW0IV3tMu-1
https://beta-map.treetracker.org/
Web map user profile • GreenstandGitHub
Logo