Freshworks Developer Docs

You now have a React meta app on Freshdesk with full-page ticket CRUD, a Crayons ticket sidebar, a custom React iparams page, a minimal react-redux store, and a packaged zip ready for the marketplace. Here’s where to go next.

Study Superstack

Superstack is an open-source Platform 3.0 reference app maintained by the Freshworks Developer team. Everything in this tutorial is a trimmed version of something Superstack already does — so once you’re comfortable with the basics, open Superstack and copy what you need.

What Superstack demonstrates

13 Freshdesk placeholders (full page, CTI global sidebar, ticket sidebar, ticket top navigation, ticket attachment, conversation editor, requester info, new-ticket requester info, ticket/time-entry/contact/company backgrounds, contact sidebar) plus a minimal Freshservice service_ticket.ticket_sidebar for install.
37 request templates across Freshdesk CRUD (tickets, contacts, companies, mailboxes, email settings, BCC), optional cross-product Freshservice templates, and external APIs (jokes, weather, random user).
Server Method Invocation (SMI) with two server functions (invokeFromClient, serverMethod) wired to the ticket sidebar and full-page Home.
Instance communication (client.instance.get / send / receive) between the full-page app and the ticket sidebar on the same browser tab.
7 event handlers — app install/uninstall, ticket create/update, conversation create, contact create/update.
Custom React installation parameters with inline validation and onboarding copy (the page you built is a two-field subset of this).
Redux Toolkit + react-redux with real slices, React Router for the full-page navigation, i18n in 6 languages, and a Jest test suite with coverage.
Three UI libraries side-by-side — Crayons, Material UI, Tailwind CSS — so you can compare styling options.

Tutorial → Superstack file map

Use this table when a Superstack feature catches your eye and you want to see exactly where it lives:

In this tutorial	In Superstack
manifest.json placements + requests	manifest.json
config/requests.json ticket CRUD	config/requests.json
config/iparams.html + React iparams	config/iparams.html, config/assets/components/Iparam.jsx, config/assets/components/main.jsx
Full-page ticket CRUD	app/components/ApiDemo.jsx (API Playground)
Ticket sidebar status / priority buttons	app/components/placeholders/ticketSidebar.jsx
Redux store + slice	app/store/index.js, app/reducer/counterReducer.js, app/components/Counter.jsx
Server-side code	server/server.js

Run Superstack alongside your tutorial app

git clone https://github.com/freshworks-developers/superstack.git
cd superstack
npm install
fdk run

Keep your tutorial app on port 10001 and Superstack on a different directory (or stop fdk run first) — then swap dev=true between the two to compare behavior.

Deepen the platform

Server Method Invocation — move privileged logic into server/server.js and call it with client.request.invoke. Start with Serverless apps.
More request templates — add contacts, companies, mailboxes, search, or third-party APIs to config/requests.json (still declared in manifest.json under modules.common.requests).
Data and interface APIs — explore client.data.get('contact'), client.interface.trigger('showModal', …), client.db.set/get, and client.instance.send/receive (all exercised in Superstack).
Events — add ticket / contact / conversation handlers to react to product activity.
Tests — write Jest tests against your reducers, hooks, and components, mirroring Superstack’s tests/.