esa-web-deisgn

byENESI RUTH IZE

I want to redesign the registration/onboarding experience for my existing app: ESA — Excellent Students Academy IMPORTANT: Work with the EXISTING ESA app. Do not rebuild the website or change unrelated pages. Before making changes, inspect the existing login/signup implementation, authentication configuration, User entity, existing student/profile entities, dashboard route, branding, colors, typography, and components. ================================================== MAIN GOAL I want the signup experience to feel like a STUDENT REGISTRATION FORM, not a generic email/password form. The visible onboarding form should focus on collecting student information. However, DO NOT create an insecure custom authentication system. Keep Base44’s secure authentication underneath. Base44 currently requires email/password for its built-in registration, so if those credentials must still exist, keep them handled securely by the authentication system rather than storing passwords in my student profile. If email/password cannot be completely removed from Base44 authentication, do NOT fake or bypass authentication. Instead, make the student-information onboarding the main visual experience and keep the required authentication step as simple as possible. ================================================== ESA SIGN-UP PAGE DESIGN Create a polished registration page that matches the existing ESA branding. Header: ESA logo “Create Your Student Account” Supporting text: “Join Excellent Students Academy and start your learning journey.” The page should look professional, educational, modern and trustworthy. Do not make it childish. ================================================== STUDENT INFORMATION Collect: Full Name Username Country State / Region Class / Level School Name Student Type Date of Birth — optional Profile Photo — optional Required fields should be clearly marked. ================================================== CLASS / LEVEL Use a dropdown. Options: JSS 1 JSS 2 JSS 3 SS 1 SS 2 SS 3 College / University Nursing Student Other Make this easy to edit later. ================================================== STUDENT TYPE Dropdown: Secondary School Student College Student University Student Nursing Student Other ================================================== USERNAME Username must be unique. Check availability before submission. Display: ✓ Username available or: ✕ Username already taken Do not allow duplicate usernames. ================================================== COUNTRY AND STATE Country should use a searchable dropdown. State/Region should update appropriately based on the selected country where possible. Make sure Nigeria includes all Nigerian states and FCT. ================================================== PROFILE PHOTO Add an optional circular profile-photo upload. Text: “Upload Profile Photo” Allow: Select photo Preview photo Change photo Remove photo Make it work properly on mobile/iPhone. ================================================== CAPTCHA Add REAL Cloudflare Turnstile CAPTCHA verification near the bottom of the registration form. The CAPTCHA must actually be validated before registration/profile creation. Do not create a fake CAPTCHA. If the Turnstile credentials/configuration are not currently available in the ESA project, tell me what I need to configure instead of pretending the CAPTCHA is active. ================================================== AUTHENTICATION Inspect the current ESA authentication configuration first. Do not create a custom password system. Do not store passwords in StudentProfile. Do not bypass Base44 authentication. If Base44 requires email/password for account creation, preserve that authentication securely. Where possible, keep the email/password authentication portion visually separate from the student profile onboarding so the main experience feels like: Create Account ↓ Student Information ↓ CAPTCHA ↓ Account Creation ↓ ESA Dashboard Existing users must still be able to log in normally. ================================================== DATABASE Inspect the existing entities before creating anything. If ESA already has a student/profile entity, REUSE IT. If there isn’t one, create: StudentProfile Connect it securely to the authenticated Base44 user. Store: user ID full name username country state/region class/level school name student type date of birth if collected profile photo onboarding completion status created date Do not duplicate student profiles. ================================================== SUCCESS After successful registration: Display: “Welcome to ESA! 🎉” “Your student profile has been created successfully.” Then redirect automatically to the EXISTING ESA student dashboard. Make sure the dashboard displays the student’s correct profile information. ================================================== MOBILE DESIGN Optimize specifically for phones and iPhones. Requirements: One-column layout on mobile. Large touch-friendly fields. No horizontal scrolling. Comfortable spacing. Mobile-friendly dropdowns. Mobile-friendly photo upload. CAPTCHA must fit correctly. Registration button must be easy to tap. ================================================== VALIDATION Show friendly validation messages. Examples: “Please enter your full name.” “Please choose a username.” “That username is already taken.” “Please select your country.” “Please select your class.” “Please enter your school name.” “Please complete the CAPTCHA.” Do not expose technical/backend errors. ================================================== DO NOT BREAK EXISTING ESA Do NOT: Delete existing users. Delete existing student records. Delete the dashboard. Change existing course content. Change the homepage. Break the current login system. Create a second authentication system. Store passwords manually. Create fake CAPTCHA. Create duplicate database entities unnecessarily. Inspect first, then modify only what is necessary. Finally, test the complete flow: Registration → Student Information → Username Validation → CAPTCHA → Secure Authentication → StudentProfile Creation → ESA Dashboard Fix any errors before finishing. And fix the ai tool also so it works properly - https://preview--woodoo-prime-study-path.base44.app/login