Remix

Make your own version of Jordan AI Tutor

Edit the prompt below and generate a customized version in seconds.

Original by Paul Jordan

Describe your app

JORDAN AI TUTOR — MASTER BUILD PROMPT 1

FOUNDATION, UI, NAVIGATION & CORE APP ARCHITECTURE

IMPORTANT

You are building a professional mobile-first AI education application called Jordan AI Tutor.

This is MASTER PROMPT 1 OF 4.

For this stage, focus ONLY on establishing the application’s foundation, visual design, navigation, authentication, database structure, student profile system, and core dashboard.

Do NOT attempt to build the complete AI tutoring engine, premium/credit system, or final publishing configuration yet. Those will be handled in later master prompts.

The application must be designed so that the remaining three master prompts can extend the existing project without rebuilding the foundation.

⸻

1. APP IDENTITY

Application name:

Jordan AI Tutor

Purpose:

Jordan AI Tutor is an intelligent learning platform designed to help students learn, understand, practice, and improve across major academic subjects.

The long-term application will support:

* Mathematics
* Physics
* English
* JSS students
* SSS students
* WAEC preparation
* NECO preparation
* JAMB preparation
* Tertiary-level learning
* AI-powered explanations
* Practice questions
* Quizzes
* Student progress tracking

For this first stage, create the foundation required for these features.

⸻

2. DESIGN DIRECTION

The application must look like a real professional AI education product, not a basic template.

Design personality:

* Modern
* Friendly
* Intelligent
* Premium-looking
* Slightly dramatic
* Youthful
* Clean
* Encouraging
* Easy to understand
* Mobile-first

Use a beautiful modern interface with:

* Rounded cards
* Soft shadows
* Smooth transitions
* Attractive icons
* Clear typography
* Strong visual hierarchy
* Spacious layouts
* Beautiful empty states
* Professional buttons
* Modern navigation
* Subtle animations where appropriate

The interface should feel exciting when a student opens it.

Use a sophisticated purple-based visual identity for Jordan AI Tutor, combined with suitable neutral/background colors.

Do not make the interface excessively colorful.

Keep it polished and readable.

⸻

3. MOBILE-FIRST REQUIREMENT

The primary target is mobile devices.

The application must work properly on:

* iPhone
* Android phones
* Small screens
* Medium screens
* Large screens

Make every page responsive.

Avoid:

* Horizontal scrolling
* Tiny text
* Overcrowded cards
* Buttons that are difficult to tap
* Elements extending outside the screen

Use touch-friendly controls.

⸻

4. APPLICATION STRUCTURE

Create the following main navigation structure:

Bottom navigation

1. Home
2. Learn
3. Practice
4. Progress
5. Profile

The navigation must be persistent and easy to use.

The active navigation item should have a clear visual indicator.

⸻

5. WELCOME / LANDING SCREEN

Create a beautiful first-time experience.

Show:

Jordan AI Tutor

Subtitle:

Your personal AI-powered learning companion.

Include a strong call-to-action:

Get Started

Also provide:

The welcome screen should communicate that the application helps students:

* Learn
* Practice
* Understand difficult topics
* Prepare for examinations

Keep the screen visually attractive but uncluttered.

⸻

6. AUTHENTICATION

Create authentication screens for:

Fields:

* Full name
* Email
* Password
* Confirm password

Fields:

* Email
* Password

Options:

* Remember me
* Forgot password
* Create account

Add proper validation.

Display friendly error messages.

Do not expose passwords.

Authentication should be structured so that the AI features and student data can later be connected securely.

⸻

7. STUDENT ONBOARDING

After registration, create a short onboarding process.

Ask the student for:

Name

Education level

Options:

* JSS
* SSS
* University/Tertiary
* Other

Academic goal

Examples:

* Improve my grades
* Prepare for WAEC
* Prepare for NECO
* Prepare for JAMB
* Understand difficult topics
* Practice questions
* General learning

Allow the student to continue without making onboarding unnecessarily complicated.

Save these preferences to the student’s profile.

⸻

8. HOME DASHBOARD

Create a professional student dashboard.

The dashboard should contain:

Greeting

Example:

Good morning, Jordan 👋

Use the student’s actual name dynamically.

Learning motivation

Display a short motivational message.

Example:

Keep learning. Every question you understand makes you stronger.

Quick actions

Create attractive cards/buttons for:

* Ask AI Tutor
* Start Learning
* Practice Questions
* Continue Learning

Subjects

Display subject cards for:

* Mathematics
* Physics
* English

Each subject should have:

* Subject icon
* Subject name
* Short description
* Progress indicator

These cards must be structured so future prompts can connect them to the actual tutoring system.

⸻

9. LEARN SCREEN

Create the foundation of the Learn section.

Show:

Choose a Subject

Cards:

Mathematics

Learn concepts, solve problems, and understand calculations step by step.

Physics

Understand physical principles, formulas, calculations, and real-world applications.

English

Improve grammar, vocabulary, comprehension, writing, and communication.

Allow additional subjects to be added later without redesigning the page.

⸻

10. PRACTICE SCREEN

Create the foundation for the future practice engine.

Display:

Practice & Improve

Include cards/placeholders for:

* Mathematics Practice
* Physics Practice
* English Practice
* Mixed Practice
* Examination Practice

Show a clean empty state if questions have not yet been generated.

Do not build the complete question-generation engine yet.

Prepare the interface for Master Prompt 2.

⸻

11. PROGRESS SCREEN

Create a professional learning progress dashboard.

Display:

Overall Progress

Use a visual progress indicator.

Subject Progress

Show:

* Mathematics
* Physics
* English

Each should have:

* Percentage
* Progress bar
* Questions completed
* Lessons completed

Use placeholder/default values where real data is not yet available.

The architecture must allow these values to become dynamic later.

⸻

12. PROFILE SCREEN

Create a student profile page.

Display:

* Profile picture/avatar
* Full name
* Email
* Education level
* Academic goal

Include settings/options for:

* Edit profile
* Change password
* Notification settings
* Learning preferences
* Help & Support
* About Jordan AI Tutor
* Log out

Make the page clean and professional.

⸻

13. DATABASE STRUCTURE

Create a scalable database structure.

At minimum, prepare entities/tables for:

Users

Fields:

* id
* full_name
* email
* profile_image
* education_level
* academic_goal
* created_at
* updated_at

Subjects

Fields:

* id
* name
* description
* icon
* active
* created_at

StudentProgress

Fields:

* id
* user_id
* subject_id
* lessons_completed
* questions_completed
* progress_percentage
* updated_at

LearningSessions

Fields:

* id
* user_id
* subject_id
* topic
* started_at
* completed_at
* status

Design relationships properly.

Do not duplicate user information unnecessarily.

⸻

14. SECURITY

Implement sensible security foundations.

Requirements:

* Secure authentication
* Password protection
* User-specific data access
* Users must only access their own private profile/progress data
* Validate form inputs
* Protect database operations
* Do not expose private credentials
* Do not place secret API keys directly in frontend code

Prepare secure locations for future AI API integrations.

⸻

15. COMPONENT ARCHITECTURE

Build reusable components for:

* Navigation bar
* Subject cards
* Progress cards
* Buttons
* Input fields
* Modal/dialog
* Loading indicators
* Error messages
* Empty states
* Profile sections
* Dashboard cards

Avoid duplicating UI code unnecessarily.

The project should remain easy to extend.

⸻

16. ERROR & LOADING STATES

Every major screen should have appropriate:

* Loading state
* Error state
* Empty state

Use friendly language.

Never show confusing technical errors to students.

Example:

Instead of:

“Database request failed.”

Use:

“Something went wrong while loading your learning data. Please try again.”

⸻

17. RESPONSIVE TESTING

Before considering this stage complete, test the interface at different mobile screen sizes.

Check:

* Login
* Registration
* Onboarding
* Home
* Learn
* Practice
* Progress
* Profile
* Navigation

Make sure nothing is clipped or overflowing.

⸻

18. PERFORMANCE

Keep the foundation lightweight.

Avoid unnecessary:

* Heavy animations
* Duplicate components
* Excessive database requests
* Unnecessary dependencies

The application should feel fast on ordinary mobile phones.

⸻

19. IMPORTANT BUILD RULE

Do not rebuild the project from scratch if an existing Jordan AI Tutor project already exists.

If the project already contains working components, preserve them where possible.

Extend and improve the existing architecture instead of destroying working functionality.

Do not remove existing working features without a clear reason.

⸻

20. FINAL QUALITY CHECK

Before finishing Master Prompt 1, verify:

* App opens correctly
* Welcome screen works
* Sign-up works
* Login works
* Authentication state works
* Onboarding works
* Student profile is saved
* Home dashboard works
* Bottom navigation works
* Learn screen works
* Practice screen works
* Progress screen works
* Profile screen works
* Database structure exists
* Student data is separated correctly
* Mobile layout works
* Buttons work
* Forms validate correctly
* Loading states work
* Error states work
* No major UI overflow exists

Do not move on to the features from Master Prompts 2–4 yet.

The goal of this stage is to create a stable, beautiful, scalable foundation for Jordan AI Tutor.

When this stage is complete, report what was successfully built, identify anything that could not be implemented, and leave the project ready for MASTER PROMPT 2 — AI TUTOR ENGINE.

Free to use. No credit card required.