pjmanning / animali-web-app

Dashboard App for Animali Conservation Platform

Hey, doods & doodettes!

My name is PJ Manning - I'm a indie developer from New Jersey but have been living around the world for the past 10 years.
You can find me @pj_manning.

✍ Blog & Writing

Apart from coding, I also occasionally write articles on my life, travels, etc. - you can find my articles on my website at pjmanning.dev as well as on Medium and Twitter.

🔧 Technologies & Tools

📈 GitHub Stats

animali-web-app's Issues

Animal List View

https://gridjs.io/

• Sort by date

• Cell spacing

Install App button

https://medium.com/js-dojo/promoting-your-vue-js-pwa-installation-6bd112342c19

Grid enhancement

• Add images to cells (spacing issue)
• fix bug where id doesn't sort right

Mobile: Make the Search results wider

Add Multilingual Support

Focus on 2 languages first...
Spanish
French

Uncomment in header

Only do sidebar to start

Pagination on Animal page

Security rules

Ensure all data is secure

Click outside on profile dropdown

Firebase Extension: Stripe Subscription

• Set up extension

• Set up in stripe

Delete animal web app

Contact Potential First Clients

Lisa (western cape cheetah)

Mossel Bay Great White

Lisa/Hannah (lembongan/exmouth)

MWSRP

Earth Alliance

David Attenborough

Puma tracking california

Mountain Lion tracking california

Animal Sidebar animation issue

Animal Edit and Delete Screen

Search Bar

Search vuex store for animals?

Algolia? ehhh

PWA launch screen

nuxt-community/pwa-module#308

Fix once documentation comes out

Settings

• Date Founded
• Species select

Register/Start a Program (like shopify)

Login Authentication

For Login

• Remember me (setpersistence in fb ?)
• Add loading spinner
• Error handling

Make Profile Image Large (Animal Profile & Edit Page)

Edit the entire header section to make that info more sexy

Add Email in Flow on How to Upload Animals and Add Encounters

Password Reset (on login and in settings)

Add install the app button

In the sidebar add install the app like in coronavirus.app

https://www.youtube.com/watch?v=LWRdBywm4Zo
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs

Change Pricing, Login, Signup (on static site)

• Login/Register on the sign up page
• Static site login goes to...
• Static site register goes to...
• change pricing to basically say free while in beta/or for now/for non-profits - contact for account

Fix any mobile css bugs

V2 of Encounter Upload

A Revised and Better Way to Report Encounters.

This will include adding the ability to have a photo id software

• Specific instructions for species
• Mark Annotations
• Run Comparison and show results
  - [ ] If Yes - Add more photos
  - [ ] If NO match - ability to go back to markings, or submit new animal
  - [ ] Submit new animal give it a name
• Submit Encounter - ability to add other info (ie # of members in pod, resident populations, etc.) then on submit redirect to animal profile page

All submissions should be pending first for admin to approve - approved then shows up in map/dashboard/animal profile

Map View

• Sidebar

Animali Logo as SVG

font takes a bit to load - better to use an svg logo in the header

Allow outsiders to submit photos to program

All submissions should be pending first for admin to approve - approved then shows up in map/dashboard/animal profile

Animal View

• Map
• All Encounters
• First Encounter
• Last Encounter
• Bio

Register

Wait for tailwind css for step design for register

• Create page for register
  • Step 1
  • Step 2
  • Step 3
  • Step 4
• Set all initial data on sign up
• Create customer in stripe (https://console.firebase.google.com/u/0/project/animali-life/extensions/instances/firestore-stripe-subscriptions?tab=usage)
• Going to / redirects to /dashboard or /login if there's no user
• Login redirects to /dashboard
• Set empty project errors
• Error handling
• After register go to dashboard

Mobile Edits

mostly on add encounter

Transfer Tasks to From Animali-Web-App

Add Encounter

• Show Comparison of other animals in program
  - [ ] If Yes - Add more photos
  - [ ] If NO match - ability to Submit new animal and give it a name
• Submit Encounter - ability to add other info (ie # of members in pod, resident populations, etc.) then on submit redirect to animal profile page
• Upload Encounter photos
• Upload Data into Firebase
  • depending on animal add animal prefix and incremental number
• Everytime encounter uploaded increment animal 'totalEncounters' + 1

Apple Icon Rounded for PWA on Mac

Icon is fine on iOS but is square when I add it to mac.

Track View on Map View

Add tracking line when animal selected on the main map for that particular animals encounters

Make Global Loading Indicator

• On image upload (settings)
• while map is loading (map)
• while list is loading (list)
• during auth (login)

https://www.npmjs.com/package/vue-loading-overlay
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file=/nuxt.config.js
https://nuxtjs.org/examples/custom-loading/

Sidebar Animation issue

Buggy

Consider separating the layout from the components more

Navbar
Sidebar

Dashboard page

https://apexcharts.com/docs/vue-charts/

• Switch Data
• 3 pillars
• pie of new vs returning
• recent encounters
• change data based on switch
• filter data in each element
  • encounter block
  • animal block
  • contributor block
  • encounter list
  • new vs returning

Add Metric Tracking

Firebase Extension: Set Up Mailchimp

Set Up New Nuxt App from Vuexy Junk

Copy/paste over what you need slowly.

• Install firebase

• Assets (favicon & logo & font)

• Header

• Sidebar

Marketing Site Copy

• Copy to explain capabilities and use cases better
• Actual app use images

Payment? - Set Up Chargebee/Stripe for Public ForProfits

• triggered on public switch
  https://app.chargebee.com/login?forward=https://animali-test.chargebee.com/dashboards
• In settings - sets program live to true in firebase db
• What to do when user subscription ends - Redirect to /subscription choice page?

Show program on global Programs page if payment is active
Have chargebee link in settings

Search using ID as well

Apply for Algolia open source

https://www.algolia.com/for-open-source/

Add Algolia to nav search

• FB functions to add all new animals
• Nav search

Add 4 programs

• nyc humpback
• lembongan mantas
• maldives whale shark
• south africa great whites

Issue registering program

onAuthStateChanged currently has settimeout because registering needs time to set the user in firestore.

This causes a bug when refreshing page because it forces going to login until a user is found

Settings button on Navbar

Divider and pushed to bottom

https://tailwindui.com/components/application-ui/page-examples/home-screens

Set up on-boarding free-trial email campaign

3 emails
Use FB extension
mailchimp

• welcome people
• how to 'download' app
• ask for feedback and show personal touch