Perspective Funnel Preview is a tool for customers to preview their funnel designs. It works smoothly on both mobile and desktop platforms.
desktop.mp4
mobile.mov
When I started this project, I focused on creating the schemas and types for the funnel data first. Once that was solid, I built the components for each block type and used Storybook to view them visually. Also this makes it easier for designers, product managers, and other developers to see how the components looked in different scenarios.
Next, I sketched the UI using Excalidraw, focusing on mobile first design and then adapting it for desktop. From there, I started building the components and pages in the app.
When it came to uploading a JSON file, I wanted to ensure users have the flexibility to choose what works best for them. Whether it’s drag and drop, uploading via URL, or using a file input. The more options, the better.
I used Dummy JSON to generate a JSON URL for testing in the input field.
A big challenge was handling validation. I had to create a custom schema for checking data and providing clear error messages. I took inspiration from how VS Code and React show errors.
The goal is to create a preview tool that doesn’t just showcase the funnel but also gives a sense of how smooth and easy it is to use Perspective. I signed up for Perspective's 14 day free trial to explore and play around with it. That’s when I got the idea.
✨ It should resemble Perspective's own design system. ✨
While this tool is just a preview, it gives customers a glimpse of how their funnels could look in the actual Perspective app when creating them.
First impressions are really important. When you see something sleek, polished, and outstanding, you’re less likely to leave the page immediately, you’ll want to stay and explore more.
-
Mobile Design:
-
Desktop Design:
- Drag and drop JSON files or upload via a URL.
- Validates the JSON against a custom schema.
- Clear error messages with line numbers and code snippets.
- Supports multiple block types:
- Text Block: Customizable text, alignment, color, size, and weight.
- Image Block: Supports alt text, radius, and source URL.
- Button Block: Configurable text, colors, and corner styles.
- List Block: Styles include numbered, bullet, or no list at all.
- Upload via a URL
- Upload via a file input
- Drag and drop JSON files
- Live rendering of JSON funnels in mobile and desktop views.
- Toggle between views to test responsiveness.
- Detailed validation errors in an easy to read accordion.
- Code snippets with highlighted lines to quickly spot problems.
- Lists all funnel pages for quick navigation.
- Tabs to switch between pages and JSON upload view.
- Has required fields (name, bgColor, pages)
- Name is a string
- Pages is an array
- Background color is valid format (hex, rgb, rgba, "white", CSS names, HSL/HSLA)
- Each page has id and blocks
- Blocks is an array
- Page ID is string
- Page order validation (first page starts with text, no empty pages)
- Navigation flow validation (buttons between pages)
- Each block has id and type
- Type is one of: text, image, button, list
- Block ID is string
- Unique IDs across all blocks validation
- Block order validation per page
- Has text, color, align properties
- Color is valid format (including all CSS colors & HSL)
- Has src property
- Src is string
- Has text, color, bgColor
- Colors are valid formats (including all CSS colors & HSL)
- Has items array
- Each item has id, title
- Optional description and src for items
- Unique IDs across list items
- Basic error grouping by type (ID, Page Structure, etc.)
- Detailed error messages with paths
- Next.js (Framework)
- Zod (For schema validation)
- Framer Motion (For animations)
- Storybook (For component visualization)
- Tailwind CSS (For styling)
- TypeScript (For type safety)
- React Dropzone (For file uploads)
- Lucide Icons (For UI icons)
I haven’t added testing to this project yet, but here’s how I would approach it:
-
Validation:
- Check if the validation function works for both valid and invalid JSON files.
- Test edge cases like missing fields, duplicate IDs, or invalid color formats.
-
Error Messages:
- Make sure error messages are clear and point to the correct paths and line numbers.
- Verify that code snippets highlight the correct lines for each error.
-
UI Components:
- Test if components render properly with different data.
- Check how the app handles edge cases, like empty pages or unsupported block types.
- Ensure the app works well on both mobile and desktop.
-
File and URL Uploads:
- Test drag and drop JSON file uploads.
- Make sure errors are handled correctly for invalid JSON or unsupported URLs.
- Jest: For testing validation functions and other logic.
- React Testing Library: For testing UI components and user interactions.
- Cypress: For E2E testing, like uploading JSON, rendering funnels, and navigating between pages.
This would make the project more reliable and give more confidence when shipping it to customers.
- Clone the repo:
git clone https://github.com/your-repo/perspective-funnel-preview.git
- Install dependencies:
npm install
- Run the app in development mode:
npm run dev
- To preview components in Storybook:
npm run storybook
If I had more time, I would take my time to improve the following:
- Add maximum JSON file size limit.
- XSS prevention in text fields.
- Stricter URL format validation.
- Whitelist of allowed domains.
- Protocol validation (http/https only).
- Image URL format validation.
- Add validation suggestions.
- Add a loading skeleton for blocks.
- Add a copy button for validation errors.
- Improve transitions between mobile and desktop views.
- Provide more visual feedback for errors or empty states.
- Simplify the validation error UI for better clarity and ease of use.
- Add suggestions for validation errors, like what can be changed or fixed.