feat: integrate create application API in onboarding form

[MayankBansal12]

Date: 25-01-2026

Developer Name: @MayankBansal12

---

Issue Ticket Number:-

• feat: integrate APIs in onboarding form for create application #1140

Description:

• Integrated APIs to create application with onboarding form
• Add get application, image upload and create application APIs

Is Under Feature Flag

• Yes
• No

Database changes

• Yes
• No

Breaking changes (If your feature is breaking/missing something please mention pending tickets)

• Yes
• No

Is Development Tested?

• Yes
• No

Tested in staging?

• Yes
• No

Add relevant Screenshot below ( e.g test coverage etc. )

demo

Screencast.from.2026-01-27.00-49-26.online-video-cutter.com.mp4

[cloudflare-workers-and-pages]

Deploying www-rds with    Cloudflare Pages

Latest commit:	e8c6f83
Status:	✅  Deploy successful!
Preview URL:	https://9313702a.www-rds.pages.dev
Branch Preview URL:	https://feat-integrate-onboarding-fo.www-rds.pages.dev

View logs

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

The changes implement a complete application submission workflow with server-side image upload validation, remote application data loading and prepopulation, and form submission with API integration. Three new API endpoints are added to support profile image uploads, retrieving existing applications, and creating new applications. Client-side enhancements include file validation, async handling, and comprehensive error and success notifications via toast messages.

Changes

Cohort / File(s)	Change Summary
Profile Image Upload Enhancement app/components/new-join-steps/new-step-one.js	Made handleImageSelect async; added client-side validation (file existence, image type, size ≤ 2MB); replaced direct FileReader with FormData POST to server; extracts imageUrl from response; updates profileImageUrl, profileImageBase64, and imagePreview; shows success/error toasts; added error handling and loading state reset in finally block
Application Workflow Implementation app/components/new-stepper.js	Added loadExistingApplication() to fetch application data via API; added prepopulateFormFromApplication() to restore form state from existing data; converted handleSubmit() to async and integrated server submission with CREATE_APPLICATION_URL; added collectAllStepData() to aggregate step data from localStorage; added clearAllStepData() to clean up localStorage after successful submission; introduced loading state, application data caching, and toast-based notifications for success/error scenarios
API Constants app/constants/apis.js	Added PROFILE_IMAGE_UPLOAD_URL for profile image uploads; added GET_APPLICATION_URL(userId) function to build application retrieval URLs; added CREATE_APPLICATION_URL for application submission

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Client as Client (Browser)
    participant Server as API Server

    User->>Client: Visits application form
    Client->>Server: GET /applications/:userId
    Server-->>Client: Return existing application data
    Client->>Client: Prepopulate form fields<br/>from application data
    Client-->>User: Display populated form

    User->>Client: Select profile image
    Client->>Client: Validate file<br/>(type, size ≤ 2MB)
    User->>Client: Modify form fields
    User->>Client: Click submit

    Client->>Server: POST /applications<br/>(step data, user info)
    Server-->>Client: Success response
    Client->>Client: Clear localStorage<br/>step data
    Client-->>User: Show success toast<br/>Advance application flow

    alt Submission Error
        Server-->>Client: Error response
        Client-->>User: Show error toast
    end

Loading

sequenceDiagram
    participant User
    participant Client as Client (Browser)
    participant Server as API Server

    User->>Client: Upload profile image
    Client->>Client: Validate file<br/>(exists, is image, ≤ 2MB)
    
    alt Validation Error
        Client-->>User: Show error toast
    else Validation Success
        Client->>Server: POST /upload-image<br/>(FormData with image)
        Server-->>Client: Return {picture/url: imageUrl}
        Client->>Client: Update profileImageUrl<br/>profileImageBase64<br/>imagePreview
        Client-->>User: Show success toast
    end

    alt Network/Exception Error
        Server-->>Client: Network error
        Client-->>User: Show generic error toast
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• AnujChhikara
• iamitprakash

Poem

🐰 Hops with glee through code so bright,
Image uploads now done just right!
Applications saved and loaded anew,
With toasts and validation too!
The form remembers, no need to redo!
🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title mentions 'create application API' which is a core part of the changes, but omits the equally important 'get application' and 'profile image upload' APIs that are also integrated.
Description check	✅ Passed	The pull request description relates to the changeset by describing API integration for application creation and image uploads, which aligns with the file changes shown.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/integrate-onboarding-form

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@app/components/new-join-steps/new-step-one.js`:
- Around line 124-129: After handling image upload in the catch/finally block,
reset the file input value to allow re-selecting the same file; replace or add
to the finally block a line that clears the DOM input via this.fileInput (not
this.fileInputElement) so the input value is set to '' after upload
errors/success—locate the upload error handling around this.isImageUploading and
the mounted hook where this.fileInput is assigned from this.$refs.fileInput to
implement the reset.

In `@app/components/new-stepper.js`:
- Around line 259-274: collectAllStepData currently calls JSON.parse directly on
values from getLocalStorageItem (using STEP_DATA_STORAGE_KEY.stepOne..stepFive),
which will throw on malformed JSON; fix by adding a small safe JSON parse
wrapper (e.g., safeParseJSON) or wrap each JSON.parse in try-catch to return an
empty object on error and optionally log the parsing error via console.error or
a logger; update collectAllStepData to use that wrapper for
stepOneData..stepFiveData so corrupted localStorage doesn't break submission.
- Around line 71-131: The step components read localStorage only once in
BaseStepComponent (constructor), causing a race when
prepopulateFormFromApplication writes STEP_DATA_STORAGE_KEY.* via
setLocalStorageItem asynchronously; update the design so step components react
to later prepopulation by either: 1) passing the prepopulated objects
(stepOneData..stepFiveData from prepopulateFormFromApplication) directly into
the step components instead of relying on localStorage, or 2) adding a
lifecycle/reactive hook in BaseStepComponent to re-read localStorage (or
subscribe to a shared state service) when inputs change or when a storage-update
event is emitted, ensuring components refresh their state after
prepopulateFormFromApplication completes.