React Popup Creator With Nextjs, Redux and Final Form

A service made with NextJS and Redux-Toolkit to create beautiful popups for your website.

Deployed at: https://popup-creator.vercel.app/

Used Technologies

• Nextjs, typescript
• React-final-form, Yup validation
• Redux-toolkit
• Next-redux-wrapper
• Storybook
• React Dropzone
• Jest for unit testing
• Husky for git hooks

Background Features

• Popups templates served from api/ dynamically via converting Tailwind React components to inlince CSS HTML
• Creating dynamic inputs with Final-form
• Validating constant and dynamic fields with YUP
• Syncing Final-form with Redux via FormSpy
• Persisting form information between tabs with Next-redux-wrapper
• Custom Multiselect component with cached values
• Content stored at CDN cloudinary
• Eslint, prettier for linting and formatting
• Linting and testing pre commit with Husky

Functionalities

• User selects a popup from templates list
• User selects color, size and position for popup
• User can change the content of popups
• User inputs protected with Yup validation
• User sets behavioural events for popup to appear
• User copies code and pastes scripts to a website