myna skin analysis page within user or admin dashboard
myna skin analysis page within user or admin dashboard
myna product page
myna home page

Inspiration

I previously built a fullstack web application using Next.js, tailwindcss, shadnui, materialui, mongoDB, websocket to be able to build a fullstack ecommerce web application. This ecommerce store has demo products that would allow users to be able to explore the website as a real ecommerce fullstack application. It has a fully loaded ecommerce store from admin and user dashboard, AES-256 grade for protecting the user's sensitive information, an integrated payment gateway for paying for the items in real time, users could make reviews, and other features.

What it does

The myna app allows users to be able to shop different skin care products with and without a AI skin care analysis. User's could make purchases, browse products, earn points for the purchases the person made, the person could subscribe to the plus version which include premium access to products, skin assessments, AI skin analysis that give user's recommended products based on the image analysis and the results. Note, it might not be accurate but it would be feasible numbers to work with in this app. The AI Skin Analysis would be feasible to all users and would be able to recommend the right products based on the AI Analysis of the images. The app has a admin dashboard where it would be able to create, read, update, and delete the products with real-time products and it could give real information, the AI Skin Analysis gives the user's an assessment based on the information and it determines recommended products with a score. There is a full functionality of authentication with appwrite.

How we built it

myna — skin analysis + beauty store A React Native (Expo) shopping app for the myna store. A selfie goes through YouCam AI skin analysis, which detects skin type and scores up to 16 concerns, then the app recommends products in real time. It has an admin dashboard with live analytics, two-step login, and an AI support assistant that hands off to a person.

App: Expo SDK 58 · React Native 0.88 · Expo Router · TypeScript (iOS, Android, web) Backend: Appwrite (Auth, TablesDB, Storage, Realtime, Functions) AI: YouCam skin analysis API, Claude (support assistant) or other LLM models

product layout: src/app/ screens (Expo Router: each file is a route) (tabs)/ Home · Shop · Skin scan · Bag · Account admin/ admin dashboard, orders, products, support inbox src/components/ shared UI src/context/ sign-in state and the live bag src/services/ data + live-update hooks (products, scans, orders, support, admin) src/lib/ Appwrite client, encryption, input sanitizing, recommendations, theme functions/myna-api/ the Appwrite Function (skin analysis, orders, encryption keys, support bot) scripts/ Appwrite setup, seed data, tests docs/ setup, troubleshooting, features, security

Challenges we ran into

I had to upgrade the appwrite to seed the entire application in the first place. If I did not upgrade the database in appwrite then I would not be able to sync all the products, functions, and information. It would have been a blank app that I could still use but need the paid version of this app.

Accomplishments that we're proud of

I was able to build something with my knowledge of reat-native, a database suich as appwrite, an API using youcam for the skin analysis, integrate similar features that I built from my myna website, and I was able to use AI assistant for this.

What we learned

I need to upgrade to the paid version of the appwrite to seed all the database information otherwise this would be an incomplete project. I was able to learn a lot from this project such as the use of the appwrite backend database, the use of the youcam API skin analysis with the OCR integration, I was able to learn how to use different commands in react-native for the use of build this ecommerce app based on the web version that I built using next.js, tailwindcss, shadnui, mongodb, websocket, AES-256 grade for stripe payment gateway in real time.

What's next for myna-skincare-app with AI assistant

Looking to redesign the navbar, integrate an actual real time payment gateway that doesnt allow the user to bypass the cart and not actually pay for the items. Add in plus and free version of the user's account with admin control. Upgrade the use of the AI chatbot for customer support such as machine learning and the use of the admin getting pinged for the customer ticket.

Payments: add Stripe PaymentSheet; create the PaymentIntent inside /order and mark the order paid from a Stripe webhook function.
Password reset & email verification: account.createRecovery / createVerification with a small web page for the redirect.
Push notifications on order status changes (Appwrite Messaging + an event-triggered function).
Progress tracking: chart a user's scores across scans (already stored per scan).
KEK rotation: a script that unwraps every profiles.wrappedDek with the old KEK and re-wraps with the new one.