Welcome Test Subject #1337!
Today challenge is about creating the next evolution of Funnel previews for Perspective:
Perspective Funnel Preview
It's gonna be fast, robust and beautiful. Here's the challenge:
We want our users to be able to preview their funnels. For this we need a new, standalone React or Next.js app that should run smoothly on any Desktop browser. Having it fully functional on mobile browsers would be a plus, but is not necessary for now. Using TypeScript is optional.
The final app should be hosted online. We recommend https://vercel.com/ for free and quick hosting!
As a user I want to be able to select a funnel JSON file from my computer and generate a mobile preview of my funnel from it to see how it would look like on my phone or an average mobile viewport (e.g. 375x600px). I also want to be able to navigate between the different funnel pages. However, the funnel preview itself does not have to be interactive, e.g. clicking a button within the funnel does nothing, it's just displayed. Also, I want to be able to select another funnel JSON file without having to reload the page.
The funnel data in this case is a (very) raw JSON file containing only some key information about the funnel and its content. Use this example for development:
{
"name": "My awesome funnel",
"bgColor": "#F5F5F5",
"pages": [
{
"id": "b6b05e20d3a1486585bb889b3c5b6e9f",
"blocks": [
{
"id" : "b5e08d664867419a85c40d333ca4a00e",
"type": "text",
"text": "Welcome!",
"color": "#202020",
"align": "center"
},
{
"id": "9f2f25ad177843b6b7fc81811b4f0456",
"type": "image",
"src": "<https://images.unsplash.com/photo-1598182198871-d3f4ab4fd181?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80>"
},
{
"id" : "b5e08d664867419a85c40d333ca4a123",
"type": "text",
"text": "Check out our awesome menu!",
"color": "#202020",
"align": "center"
},
{
"id": "6dc5ca19c11d4314bba0905de6c9dc07",
"type": "list",
"items": [
{
"title": "Drinks",
"description": "Tshhh... Ahhhhh!",
"src": "<https://img.icons8.com/0076FF/win10/247/kawaii-soda>"
},
{
"title": "Icecream",
"description": "Cool down ...",
"src": "<https://img.icons8.com/0076FF/win10/247/kawaii-cupcake>"
},
{
"title": "Taccos",
"description": "... to heat up",
"src": "<https://img.icons8.com/0076FF/win10/247/kawaii-taco>"
}
]
},
{
"id": "218fb0f6146b4728ad0b19e3b1084awd",
"type": "button",
"text": "Nice Menu!",
"color": "white",
"bgColor": "#0076FF"
}
]
},
{
"id": "5b42cc0dc973441e9c83a1970bbaf810",
"blocks": [
{
"id": "0879f6c1d6b94be7b61d3c99543713a1",
"type": "text",
"text": "Thanks for stopping by!",
"color": "#202020",
"align": "center"
},
{
"id": "9f2f25ad177843b6b7fc81811b4f090c",
"type": "image",
"src": "<https://images.unsplash.com/photo-1578986568501-a6c637652d24?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80>"
},
{
"id": "218fb0f6146b4728ad0b19e3b1084a16",
"type": "button",
"text": "Visit our website!",
"color": "white",
"bgColor": "#0076FF"
}
]
}
]
}
As you can see the funnel consists of multiple pages (see User Story) with each page consisting of multiple "blocks". In our case we only support 4 blocks: Text, Image, Button and List. No other blocks need to be supported!
Each block has certain properties that should be represented in their design. However, there are no rules on the individual block design so you are free to design the look of each block as you'd like to see it! For testing we will just adjust the values of the blocks properties and add/remove blocks or pages.
After you're done we will evaluate the following things of your app: