🐠 Fishify Yourself

Discover Your Marine Alter Ego

Fishify Yourself is an interactive personality quiz application that maps user responses to marine personality profiles.

The project combines a data-driven weighted scoring system with an animated, underwater-themed interface. Instead of presenting a conventional quiz result, Fishify turns the final personality match into a staged visual experience with marine artwork, match percentages, ocean names, personality insights, compatibility connections, and animal-specific result environments.

Live Application | Source Code Repository

Overview

The application consists of three primary stages:

Landing Page
      |
      v
Personality Quiz
      |
      v
Weighted Score Calculation
      |
      v
Result Preparation
      |
      v
Animated Marine Reveal
      |
      v
Personalized Result

The current implementation contains 20 personality questions and 20 marine personalities.

Each answer can contribute different weighted scores to multiple animals. This allows the final result to emerge from the user's overall answer pattern rather than from a single question.

Core Features

Personality Quiz

The quiz contains 20 personality-based questions.

Each answer is associated with weighted scores for one or more marine personalities. Scores are accumulated throughout the quiz and evaluated after the final response.

The quiz includes:

• Question progression
• Answer selection
• Weighted score accumulation
• Animated transitions
• Progress tracking
• Result calculation
• Loading transition before the final reveal

Marine Personality System

Fishify currently contains 20 marine archetypes:

Animal	Personality
Octopus	The Curious Creator
Dolphin	The Ocean Spark
Whale	The Deep Thinker
Sea Turtle	The Gentle Voyager
Shark	The Ocean Challenger
Orca	The Ocean Leader
Manta Ray	The Free Spirit
Jellyfish	The Dreamy Drifter
Seahorse	The Tiny Dreamer
Clownfish	The Reef Friend
Penguin	The Loyal Heart
Sea Otter	The Joy Keeper
Squid	The Strategic Mind
Crab	The Reef Guardian
Starfish	The Balanced Soul
Nautilus	The Ancient Dreamer
Lobster	The Ocean Shield
Angelfish	The Ocean Artist
Manatee	The Gentle Giant
Coral	The Heart of the Reef

Each personality contains structured information including:

• Name
• Personality title
• Traits
• Description
• "Why You Got This" explanation
• Ocean fact
• Artwork
• Compatible personalities
• Contrasting personality

Deep Dive: System Architecture & Data Flow

Fishify separates the scoring system, application state, personality data, result presentation, and animation logic into distinct parts of the application.

This allows the visual experience to evolve without requiring the personality calculation system to be rewritten.

1. Weighted Scoring Engine

The personality calculation is handled separately from the presentation layer.

Each answer contains weighted contributions to one or more marine personalities.

Conceptually, the final score vector can be represented as:

$$ \vec{S} = \sum_{i=1}^{20} \vec{W}_{i,k} $$

Where:

• $\vec{S}$ represents the accumulated scores across the marine personalities.
• $i$ represents the question.
• $k$ represents the selected answer.
• $\vec{W}_{i,k}$ represents the weighted contribution associated with that answer.

A simplified representation of the scoring structure is:

{
  text: "Example answer",
  scores: {
    dolphin: 2,
    otter: 1
  }
}

When an answer is selected, its scores are merged into the current score state.

Conceptually:

for (const animal in answer.scores) {
  updated[animal] =
    (updated[animal] || 0) + answer.scores[animal];
}

After all questions have been answered, the accumulated scores are evaluated to determine the highest-scoring personality and the closest secondary matches.

This approach makes the personality system data-driven rather than embedding personality logic directly into the UI.

2. Result Calculation

The accumulated score object is passed to the result calculation utility.

The calculation determines:

1. Primary marine personality
2. Match percentage
3. Secondary personality matches
4. Secondary match percentages

The resulting payload is then stored locally and used by the result page.

This separation means the result interface does not need to know how the personality was calculated.

It only needs the resulting personality data.

3. Personality Data Layer

Marine personalities are centralized inside animals.js.

A personality follows a structure similar to:

{
  id: "dolphin",
  name: "Dolphin",
  title: "The Ocean Spark",
  image: dolphinImage,
  traits: [
    "Playful",
    "Social",
    "Energetic"
  ],
  description: "...",
  whyYouGotThis: "...",
  funFact: "...",
  compatibility: {
    friends: [
      "otter",
      "penguin",
      "clownfish"
    ],
    opposite: "jellyfish"
  }
}

The result component consumes this data dynamically.

There is therefore one shared result interface rather than separate result pages for every marine personality.

4. State Management

React state controls the quiz lifecycle.

The quiz currently tracks:

Current Question
      |
      v
Accumulated Scores
      |
      v
Loading State
      |
      v
Result Navigation

The result component separately tracks the reveal state so that the personality information does not appear immediately.

For example, the result begins with:

Discovering your ocean personality...

before transitioning into the marine reveal.

5. Result Reveal Sequence

The result page is deliberately staged.

Rather than rendering the final personality immediately, the interface builds toward the result.

The sequence is designed around:

Result Preparation
      |
      v
Countdown
      |
      v
Marine Emergence
      |
      v
Animal Artwork
      |
      v
Match Percentage
      |
      v
Personality Profile
      |
      v
Ocean Connections

Framer Motion controls the timing and transitions between these visual stages.

The reveal currently uses:

• Card scaling
• Opacity transitions
• Ripple animations
• Glow effects
• Reveal bubbles
• Animal artwork emergence
• Staggered text animation

The intention is to make the result feel like a reveal rather than a page load.

Animal-Specific Result Worlds

The result experience extends beyond the result card itself.

Each marine personality can have a distinct visual environment surrounding the card.

The existing ocean background remains unchanged, including the global bubbles and light-ray effects.

Animal-specific elements are layered around the result card rather than placed directly behind the primary content.

The environment also becomes active as part of the reveal instead of remaining at maximum intensity throughout the page.

This creates a transition from:

Generic Ocean
      |
      v
Animal Reveal
      |
      v
Animal-Specific Environment

For example, the Dolphin result uses a baby-blue and light-pink visual direction with softer, playful environmental effects.

The intent is not to create 20 completely different pages.

Instead, each personality receives its own visual atmosphere while remaining part of the same Fishify design system.

Marine Artwork

The initial version of Fishify used emoji as temporary representations for the marine personalities.

Version 1 replaces these placeholders with dedicated artwork.

The images are stored locally in:

src/assets/

and imported into the personality data.

For example:

import dolphinImage from "../assets/dolphin.png";

The personality object then references the imported asset:

image: dolphinImage

The result component can therefore render the appropriate artwork dynamically:

<motion.img
  className="animal-image"
  src={animal.image}
  alt={animal.name}
/>

This keeps asset selection inside the data layer rather than the presentation logic.

Personalized Results

The final result contains several layers of information.

Marine Identity

The selected animal and its personality title form the primary identity.

Match Percentage

The application displays the calculated percentage match between the user's answer profile and the selected marine personality.

Personality Profile

Each personality includes:

• Traits
• Description
• "Why You Got This"
• Ocean fact

Ocean Name

A custom ocean-themed name is generated based on the resulting animal.

Almost Was

The application also preserves the closest secondary matches.

These are displayed as:

Almost Was...

This provides additional context around the result rather than treating the personality match as a completely isolated outcome.

Ocean Connections

Each personality contains predefined relationships with other marine personalities.

The result displays:

You vibe with:
Compatible personalities

Different energy:
Contrasting personality

Compatibility relationships are referenced through animal IDs, allowing the application to resolve the corresponding personality objects dynamically.

Technical Stack

React

Used for the component-based application architecture, state management, and dynamic rendering.

Vite

Used as the development server and build tool.

JavaScript

Used for application logic, quiz state, scoring, personality data, and result processing.

React Router

Used for navigation between the landing page, quiz, and result views.

Framer Motion

Used for the application's animation system, particularly the quiz interactions and staged result reveal.

CSS

Used for layout, responsive behaviour, backgrounds, gradients, glass effects, glowing elements, and environmental styling.

Project Structure

src/
│
├── assets/
│   ├── angelfish.png
│   ├── clownfish.png
│   ├── corals.png
│   ├── crab.png
│   ├── dolphin.png
│   ├── jellyfish.png
│   ├── lobster.png
│   ├── manatee.png
│   ├── manta_ray.png
│   ├── nautilus.png
│   ├── octopus.png
│   ├── orca.png
│   ├── penguin.png
│   ├── sea-otter.png
│   ├── sea-turtle.png
│   ├── seahorse.png
│   ├── shark.png
│   ├── squid.png
│   ├── starfish.png
│   └── whale.png
│
├── components/
│   ├── BubbleBackground.jsx
│   ├── LoadingScreen.jsx
│   ├── ProgressBar.jsx
│   ├── QuestionCard.jsx
│   └── ResultCard.jsx
│
├── data/
│   ├── animals.js
│   └── questions.js
│
├── pages/
│   ├── Home.jsx
│   ├── Quiz.jsx
│   └── Result.jsx
│
├── utils/
│   ├── calculateResult.js
│   └── oceanNameGenerator.js
│
├── App.jsx
└── main.jsx

Yep — if you want the Running Locally section to feel like an actual professional GitHub README rather than a bare npm install tutorial, I'd expand it like this:

Running Locally

Fishify Yourself is a Vite-based React application and can be run locally with a standard Node.js environment. No backend server, database, or external API configuration is required for the current version.

Prerequisites

Before running the project, make sure the following are installed:

• Node.js
• npm
• Git
• A modern web browser

You can verify your Node.js and npm installations with:

node --version
npm --version

1. Clone the Repository

git clone https://github.com/AnyutaK/fishfy_yourself.git
cd fishfy_yourself

2. Install Dependencies

Install the project's dependencies using npm:

npm install

This installs React, React Router, Framer Motion, Vite, and the other packages required by the application.

3. Start the Development Server

Run the Vite development server:

npm run dev

Vite will display the local development address in the terminal. By default, this is usually:

http://localhost:5173

Open the address in a browser to launch Fishify Yourself.

The development server supports hot module replacement, so changes made to the source code are reflected in the browser without manually restarting the application.

4. Build for Production

To create an optimized production build:

npm run build

The production files will be generated inside the dist directory.

5. Preview the Production Build

The generated production build can be tested locally using:

npm run preview

Vite will provide a local URL where the production version can be viewed.

Project Structure

The main application code is organized into separate directories based on responsibility:

src/
├── assets/
│   └── Marine artwork and visual assets
│
├── components/
│   ├── BubbleBackground
│   ├── LoadingScreen
│   ├── ProgressBar
│   ├── QuestionCard
│   └── ResultCard
│
├── data/
│   ├── animals.js
│   └── questions.js
│
├── pages/
│   ├── Home.jsx
│   ├── Quiz.jsx
│   └── Result.jsx
│
├── utils/
│   ├── calculateResult.js
│   └── oceanNameGenerator.js
│
├── App.jsx
└── main.jsx

The application keeps personality data and quiz content separate from the presentation layer. This allows questions, animal profiles, compatibility relationships, and scoring behaviour to be modified without restructuring the main UI components.

Application Flow

The main user flow is:

Home
  ↓
Quiz
  ↓
Answer Selection
  ↓
Weighted Score Calculation
  ↓
Loading / Result Preparation
  ↓
Animated Result Reveal
  ↓
Marine Personality Profile

The quiz collects the user's responses and progressively builds the personality score. Once all questions have been answered, the scoring utility determines the strongest marine personality match and secondary matches before the result page is rendered.

Local Data and Persistence

The current version does not require a backend or database.

Marine personality profiles, questions, scoring weights, compatibility relationships, and other application data are stored within the frontend source code.

The completed quiz result is temporarily stored in the browser using localStorage. This allows the result page to retrieve the calculated personality after navigation.

localStorage.setItem(
  "fishifyResult",
  JSON.stringify(result)
);

This is intended for client-side persistence only and should not be considered server-side data storage.

Environment Variables

The current version does not require environment variables or API keys to run locally.

If external services are introduced in future versions, environment-specific configuration can be added through Vite's environment variable system.

Troubleshooting

If dependencies are missing or the application fails to start, try reinstalling the dependency tree:

rm -rf node_modules
npm install

Then start the development server again:

npm run dev

If Vite reports that the default development port is already in use, it will normally select another available port automatically.

Deployment

The application is deployed as a frontend application using Vercel. The same production build generated locally with:

npm run build

can be used to verify that the project is ready for deployment.

Live Application: fishify-yourself.vercel.app

Source Repository: GitHub Repository

Performance Considerations

The project contains a significant number of animated visual elements, particularly during the result reveal.

Several design decisions help keep the interface manageable.

Asset Loading

Marine artwork is stored locally, avoiding additional network requests to external image hosts during the result experience.

As the project grows, further asset optimization and selective preloading can be introduced to reduce perceived loading time.

Animation Scope

Animations are primarily applied to isolated visual elements rather than continuously animating the entire page.

This reduces unnecessary work while preserving the intended visual experience.

Layered Visual Effects

Effects such as glows, ripples, bubbles, and environmental elements are kept separate from the main content structure.

This allows the result card to remain visually and functionally independent from decorative animation layers.

Responsive Performance

The application is designed to remain usable on smaller screens where large numbers of simultaneous visual effects can become more noticeable.

Further optimization may be required as the environmental effects become more sophisticated.

State Persistence

The current result is stored in browser localStorage.

The quiz stores the calculated result after completion:

localStorage.setItem(
  "fishifyResult",
  JSON.stringify(result)
);

The result page retrieves this data after navigation.

This allows the result screen to operate without a backend or database.

The current implementation is intentionally client-side.

Technical Limitations

Fishify Yourself is currently a frontend application, which introduces several limitations.

Static Personality Content

The personality descriptions, traits, facts, and compatibility relationships are predefined.

The scoring is dynamic, but the written result content is not generated from the user's individual answers.

Manually Weighted Scoring

The personality system uses manually assigned answer weights.

The resulting personality therefore depends on the design of the questions and the distribution of those weights.

It should be viewed as an entertainment-oriented personality experience rather than a scientifically validated personality assessment.

Predefined Compatibility

Compatibility is currently stored directly inside the personality data.

The application does not yet derive compatibility mathematically from personality traits.

Client-Side Storage

Results are stored locally in the user's browser.

There is currently no:

• Backend
• Database
• Authentication
• User account system
• Cloud result storage
• Cross-device synchronization

Static Assets

Marine artwork is bundled with the frontend.

As asset resolution and environmental complexity increase, image optimization and more selective loading may become necessary.

Animation Performance

The result experience combines several simultaneous effects.

Lower-powered devices may experience reduced performance when multiple animations and CSS effects are active simultaneously.

Accessibility

The current design prioritizes the visual experience.

Accessibility can be further improved through:

• Better keyboard navigation
• More comprehensive semantic markup
• Improved screen-reader support
• Reduced-motion handling
• Additional contrast testing
• More descriptive accessible labels

Design Philosophy

The project is intentionally built around the idea that the result should feel like an experience rather than a database lookup.

The personality calculation itself is relatively simple.

The challenge is turning that calculation into something that feels personal.

The visual system therefore has three layers:

Ocean Environment
        +
Animal-Specific World
        +
Result Information

The ocean provides consistency across the application.

The animal world provides individuality.

The result card provides the actual information.

Keeping these layers separate makes it possible to add visual complexity without losing the core usability of the application.

Development Approach

Fishify uses a data-driven approach wherever possible.

Rather than writing separate UI logic for every animal, the application stores personality information in structured objects and allows reusable components to render that information.

This approach makes it relatively straightforward to:

• Add another personality
• Replace artwork
• Change personality descriptions
• Modify compatibility
• Adjust scoring weights
• Introduce new visual treatments

without restructuring the entire application.

Technical Skills Demonstrated

React and Application Architecture

• Component-based UI architecture
• React Hooks
• Dynamic rendering
• State management
• Reusable components
• Data-driven interfaces
• React Router navigation
• Separation of data and presentation
• Modular component structure
• Utility-based scoring logic
• Reusable result components

UI and Visual Design

• Responsive UI development
• Interactive interfaces
• CSS animations
• Glassmorphism
• Layered visual composition
• Dynamic result rendering
• Themed visual environments
• Custom marine artwork integration

Animation and Motion Design

• Framer Motion
• Sequential animations
• Scale and opacity transitions
• Animated reveals
• Floating elements
• Interactive visual effects
• Staged result presentation
• Layered environmental animation

Development and Deployment

• Git version control
• GitHub repository management
• Vercel deployment
• Production frontend deployment

Project Implementation

• Designed a 20-personality marine personality system.
• Built a weighted scoring system for personality matching.
• Developed a 20-question interactive personality quiz.
• Created dynamic result calculation and secondary result matching.
• Implemented personalized ocean identity generation.
• Built a compatibility system between marine personalities.
• Created an animated result reveal using Framer Motion.
• Replaced generic emojis with custom marine artwork.
• Developed animal-specific result environments.
• Built layered underwater visual effects using CSS.
• Deployed the application using Vercel.
• Structured the application into reusable React components.

Fishify V2

Fishify V2 will focus on making the personality system more sophisticated while expanding the result experience.

Advanced Personality Model

• Move beyond direct animal-based scoring toward a multi-dimensional personality model.

• Potential dimensions include:

  • Curiosity
  • Creativity
  • Social energy
  • Adaptability
  • Courage
  • Independence
  • Emotional sensitivity
  • Leadership

• These dimensions could be combined to generate more nuanced personality results.

Smarter "Why You Got This"

• Replace the mostly fixed personality explanation with a dynamically generated explanation based on the user's individual answers.
• The system could identify patterns in the user's responses and explain why those responses contributed to the final marine personality.

Multiple Result Card Styles

Introduce multiple visual versions of the same marine personality result.

Users could toggle between different result-card designs while keeping the same personality information.

Same Personality
       ↓
 ┌───────────────┐
 │   Card Style 1│
 └───────────────┘
       ↕
 ┌───────────────┐
 │   Card Style 2│
 └───────────────┘
       ↕
 ┌───────────────┐
 │   Card Style 3│
 └───────────────┘

The long-term goal is to support up to 100 visual variations for the same result, allowing users to explore different presentation styles without changing their underlying personality result.

Face-to-Marine Experimental Mode

• An experimental mode exploring whether a user's face could be used to generate a marine personality.

• Potential technologies include:

  • Computer vision
  • Face detection
  • Image processing
  • Machine learning
  • Image classification

• This feature would remain separate from the core personality quiz.

Ocean Personality Compatibility Chart

Expand the current compatibility system into a visual personality network showing relationships between all marine personalities.

Potential features:

• Compatibility scores
• Personality similarity
• Opposite personalities
• Interactive personality graph
• Marine personality clusters

Ocean Soundscapes

• Optional ambient soundscapes based on the user's result world.

• Potential environments include:

  • Deep ocean
  • Coral reef
  • Open ocean
  • Coastal water
  • Bioluminescent deep sea

• Audio would be optional and muted by default.

Expanded Animal-Specific Result Worlds

Further develop the environmental system with more sophisticated result-specific environments.

Potential additions include:

• Animated marine life
• Environmental movement
• Interactive particles
• Dynamic lighting
• Result-specific ambient effects
• More complex underwater backgrounds

Future Development Direction

Fishify Yourself is being developed as a frontend-focused project exploring:

• Interactive user experiences
• Personality-based scoring systems
• React architecture
• Animation and motion design
• Responsive UI
• Data-driven interfaces
• Creative visual design
• Interactive result systems
• Themed digital experiences

The immediate goal of V1 is to create a polished and visually engaging personality quiz. V2 will explore more advanced personalization, richer personality modelling, and a larger variety of interactive result experiences.

Built with 🌊, curiosity, and an unreasonable number of marine animals.