Frontend Dev: Create Flavor Flow, a React-component that allows user to make easy choices with a Tinderesque interface.

[RobertoHanas]

Objective:

Check out our app FixFood, designed to make family mealtimes a breeze, from planning to cooking (and everything in between).

To help suggest dishes that won’t end up on the “no thanks” list, we are working on a feature called Flavor Flow. Think of it like a fun game of Would You Rather, but for food! User makes choices between two delicious options in a simple This or That format, helping us learn more about their preferences. As the user picks their favorites, we’ll work our magic behind the scenes to suggest recipes that are perfectly tailored to their taste.

Here we have a rudimentary Flavor Flow Figma prototype, and here's a more modern but imcomplete set of Figma designs, that is a part of our Design System that defines our typography and graphical design.

Your job is to improve on our prototype. Implement a React application called “Flavor Flow” that matches our design system, as outlined in the provided Figma prototype.

Task Requirements

Assignment:

Implement an improved version of Flavor Flow using this repository as a starting point.

Deliverables:

• [ ] A React Component named ChoiceUI that implements the Flavor Flow interface
• [ ] Flavor Flow Quiz Page
  • Flavor Flow Algorithm: a simple ranking algorithm that compares two options at a time and continues ranking them until a complete ranking of all five options is established.
  • Use the ChoiceUI component to implement Flavor Flow interface
  • See prototype resource.
• [ ] Results Page to display the data of the Flavor Flow poll
  • Display the recipes in order of ranking

Tips for working:

• Check the Flavor Flow Figma Prototype.
• Try to take advantage of our incomplete Design System. Feel free to browse around
• Do your best to build the application in a way that it matches the design system.
• Speed up your work by using any tools you find available.

Starting point:

• A base application structure is provided: A shell for a React App can be found in the ./ff.web/ -directory of this repository. Use ./ff.web/src/App.tsx is your starting point.
• We use Atomic Design to organize our React Components. Components are organized into atoms, molecules, organisms, pages and templates. The components can be found in ./ff.web/src/components/. We will award points for structuring your components in this way.

Tech Stack:

• React + Typescript for creating interfaces.
• Vite module bundler for generating the React app
• Docker Desktop for a shared development environment

Styling:

• Use anything you find in our Design System for guidance.
• Animations: Implement animations to enhance the user experience, making the application feel more dynamic and engaging.
• You may choose to use a UI library (e.g., Material-UI, TailwindCSS) or plain CSS to style the application. Ensure that the design aligns with our design system. You can use either a UI library or plain CSS

How to start:

• [ ] Install Docker Desktop
• [ ] Clone this repo to your computer
• [ ] Run ./start.sh to start our development server on your computer
• [ ] Start Coding

What We’re Looking For:

• Technical Proficiency:
  • Your ability to create good code, create well-structured components, and implement features as outlined.
• Styling and Design Consistency:
  • Your ability to follow a design system and implement it using CSS or a UI library.
• Ability to Work with Others:
  • Work within an existing structure of code and tooling.
• User Experience:
  • The effectiveness and smoothness of the animations and the overall user experience.

Not everybody is great at everything. Focus on showcasing your own strengths.

Resources:

• Image assets for Recipes for your convenience.

• Flavor Flow Figma design

• Design System Figma File

• In case you face any problems, do not hesitate to contact via phone: +358 400 850 004 (Elina)

Compensation:

We understand that your time and expertise are valuable. Therefore, if we decide to use any part of the work you submit as part of this assignment, we will compensate you for it.

Please feel free to reach out if you have any questions or need further clarification. We look forward to reviewing your work and continuing the conversation.

[mipirine]

Not enough time anymore to solve environment related problems. Is this docker + storybook environment supposed to work in Windows without cache problems? (I tried usual tricks: Cntrl+F5, Disable cache in browser. )