About Us: Associate Software Developer Assignment - upliance.ai upliance.ai has built India's first AI cooking assistant. Designed for beginners, the upliance simplifies and automates all parts of cooking for yourself. We're on a mission to push the boundaries of what home appliances can do for young India. As a disruptive startup, we take pride in our unique approach, leveraging the power of AI to create hardware products that blend innovation with everyday utility. Directly collaborating closely with industry leaders like OpenAI and building fast. Please find details of the assignment here: React + Redux Form Builder Assignment 1. Objective Build a dynamic form builder using React, Typescript, MUI, and localStorage. Users should be able to: 1. Create dynamic forms with customizable fields and validations 2. Preview how a form behaves for the end user 3. View a list of saved forms 4. Persist all form configurations in localStorage (No backend required) x____x 2. Routes Route Description /create Build a new form by dynamically adding and configuring fields /preview Interact with the currently built form like an end user /myforms View all previously saved forms from localStorage x____x3. Form Builder (/create) Users should be able to: 1. Add new fields of the following types: a. Text b. Number c. Textarea d. Select e. Radio f. Checkbox g. Date 2. Configure each field with: a. Label b. Required toggle c. Default value d. Validation rules including: i. Not empty ii. Minimum/maximum length iii. Email format iv. Custom password rule (e.g., minimum 8 characters, must contain a number) 3. Mark fields as Derived Fields: a. Derived field computes its value based on one or more parent fields b. Users must: i. Select parent field(s) ii. Define a formula or logic for computation c. Example: Age derived from Date of Birth 4. Reorder or delete fields 5. Save the form: a. Prompt user for a form name b. Store the complete form schema in localStorage c. ⚠️Only save schema/configuration — storage of user input values is not required. x____x4. Preview (/preview) 1. Render the entire form as it would appear to an end user 2. All fields must: a. Support user input b. Validate input based on configured rules c. Show validation error messages appropriately 3. Derived fields should auto-update as their parent fields change x____x 5. My Forms (/myforms) 1. Display a list of all saved forms from localStorage 2. Each form entry should show: a. Form name b. Date of creation 3. Clicking a form should open its /preview page x____x 6. Evaluation Criteria 1. Code should be clean, modular, and easy to extend 2. predictable and organized state management 3. Handle edge cases and validation errors gracefully 4. TypeScript should be used effectively to enforce strong type safety and catch potential issues during development. 5. Preview must reflect validations and derived fields accurately 6. UI should be intuitive to use x____x 7. Submission ● A live deployed link (e.g., via Vercel, Netlify, etc.) ● A public GitHub repository ● Note: No authentication is required x____xDeadline: You have 2 days/48 hours to submit the assignment. Submission Format: Please submit using the provided google form link. Feel free to connect if you have any queries regarding the assignment.
I'll help you build a comprehensive React + Redux Form Builder application for the upliance.ai assignment. This will be a complete implementation with all the required features including dynamic form creation, field validation, derived fields, and localStorage persistence.
I've created a comprehensive React + Redux Form Builder application that meets all the requirements for the upliance.ai assignment. Here are the key features implemented:
Core Features Completed:
1. Three Main Routes:
/create- Dynamic form builder with field configuration/preview- Interactive form preview with validation/myforms- List of all saved forms
2. Form Builder (/create):
- ✅ All 7 field types: Text, Number, Textarea, Select, Radio, Checkbox, Date
- ✅ Field configuration: Label, Required toggle, Default value
- ✅ Comprehensive validation rules: Required, Min/Max length, Email, Password
- ✅ Derived fields with formula support (e.g., age calculation from date of birth)
- ✅ Field reordering and deletion
- ✅ Form saving with name prompt
3. Form Preview (/preview):
- ✅ Real-time form rendering as end-user would see
- ✅ Full validation with error messages
- ✅ Derived fields auto-update based on parent field changes
- ✅ Form submission handling
4. My Forms (/myforms):
- ✅ Display all saved forms from localStorage
- ✅ Show form name and creation date
- ✅ Click to preview functionality
- ✅ Form statistics (field count, types, etc.)
5. Technical Implementation:
- ✅ TypeScript with strong type safety
- ✅ Redux Toolkit for predictable state management
- ✅ Material-UI for professional UI components
- ✅ localStorage persistence (no backend required)
- ✅ Clean, modular, and extensible code structure
- ✅ Comprehensive error handling and validation
Key Highlights:
- Advanced Derived Fields: Supports complex calculations like age from date of birth
- Robust Validation: Multiple validation rules with custom error messages
- Intuitive UI: Clean Material-UI interface with drag indicators and visual feedback
- Type Safety: Full TypeScript implementation with proper interfaces
- State Management: Redux with proper actions and reducers
- Responsive Design: Works on all screen sizes
- Error Handling: Graceful error handling throughout the application
Usage Instructions:
- Create Forms: Add fields, configure validation, set up derived fields
- Preview: Test your forms with real-time validation and derived field calculations
- Save & Manage: Save forms with custom names and view them in My Forms
- Deploy: Ready for deployment to Vercel, Netlify, or any hosting platform
The application is production-ready and demonstrates advanced React/Redux patterns, TypeScript usage, and modern UI/UX principles. All data persists in localStorage as requested, and the code is clean, modular, and easily extensible.