01Build
Prepare your project.
Start with AI project, a template, blank source, Git, or ZIP.
FAIBERWORKSPACE
The same store. Better every day.
Bring your existing source or start from a template. Refine the design, build the behavior, and review the result before publishing.
Review each step and decide what comes next.
khaneh-store / Cart.tsx
// Your store. Your source.
function CartSummary({ items }) {
const total = items.reduce(
(sum, item) =>
sum + item.price * item.quantity, 0
);
return <OrderSummary total={total} />;
}Control at every stepFiles, diffs, and check results
02Preview
See it and refine it.
Review appearance and behavior, then continue in the same project.
03Deploy
Publish with clear settings.
Review services, resources, and hosting costs before confirmation.
A practical example, from project to deployment
Interactive walkthrough · sample dataYour store. Your next step in Faiber.
You run Khaneh, a homeware store. Choose a stage to see the task, the workspace, and what to check.
NEW PROJECT
Where are you starting?
Project namekhaneh-store
SourceOnline shop
StorageFaiber cloud / Faiber Worker
Already on another platform? You need portable source or a compatible API; a website URL alone does not import the store.
main React + TypeScriptAn educational reconstruction; the exact UI can vary by release.
Step 1 of 8 · Projects
Bring your store into Faiber.
Select New project in Projects. For this example, choose Template, then Online shop. Name the project, review its execution location, and select Prepare project. AI project, Blank, Git repository, and Upload ZIP are other starting points.
You can explore in any order.
The complete example
Review the whole journey.
Our example is Khaneh, a homeware store. Each stage includes where to work, a sample request, and what to review.
01Bring your store into Faiber.Projects+
Projects → New project → Template
Select New project in Projects. For this example, choose Template, then Online shop. Name the project, review its execution location, and select Prepare project. AI project, Blank, Git repository, and Upload ZIP are other starting points.
My homeware store is called Khaneh. I am starting with Online shop. Once prepared, inspect the home page, catalog, cart, and customer sign-in, then explain what is ready.
Before continuing: Check cloud capacity. If preparation stops, read the reason and keep the draft. For local execution, check Faiber Worker connectivity and compatibility.
02Decide what to build before changing files.Plan+
Project → IDE → Plan
Open the project IDE and choose an available model. Ask Plan to inspect the source and sequence the work. Plan is read-only; switch to Design or Code to implement changes.
Read the store source and propose steps for categories, cart, and catalog management. Do not change any files yet.
Before continuing: Identify the existing backend and payment provider before replacing an integration.
03Make the store feel like your brand.Design+
Project → IDE → Design
Use Design with Preview to request a specific change: olive colors, readable product cards, and a better mobile layout. Changes belong to your actual project files.
Style Khaneh with olive green and a warm light background. Include image, name, price, and an add button on each card. Check mobile and RTL layouts.
Before continuing: Are images, prices, and purchase controls readable and usable on mobile?
04Turn a page into a shopping journey.Code+
Project → IDE → Code
Ask Code to implement categories, adding products, quantities, and cart totals. Try the result with specific products in Preview.
Implement the cart. Adding the same item should increase quantity. Support removal, totals, an empty state, and clear errors.
Before continuing: Check totals, unavailable products, and server-side price validation.
05Set up sign-in, data, and payments.Services+
Project → Manage / Services
Online shop includes sign-in, messaging, website data and forms, payments, and customer profile services. Configure and verify the Zarinpal gateway and SMS/OTP provider in Manage. Live payments and SMS sign-in need this setup first.
Inspect catalog and order data integration. Report the status and missing settings for Identity, Messenger, Profiles, and Payments. Keep secrets out of browser code.
Before continuing: The template uses Iranian rial (IRR) for checkout and receipts. If displaying toman, verify conversion and the amount sent to the gateway.
06Give every product accurate information.Manage+
Project → Manage
After provisioning, use Manage for products, categories, and stock. Review the schema and permissions before importing an existing catalog.
Review products by category and stock. List missing images or prices and show proposed bulk changes before applying them.
Before continuing: Distinguish sample and live data. Review price and stock changes before applying them.
07Try the store as a customer.Review+
Project → Preview / Terminal / Git
Walk from the home page through cart and payment results. Run Lint and Build, then review errors, mobile layouts, and Git changes separately.
Check category selection, cart add/remove, empty cart, and payment failure. Run Lint and Build. Report actual results and remaining issues.
Before continuing: A successful Build is not a payment test. Test the gateway in its sandbox environment too.
08Publish the version you have reviewed.Deploy+
Project → Deployment → Domain
Review resources, configuration, and the cost quote. After confirmation, follow Build, service status, and logs. A custom domain needs DNS configuration. Test checkout again on the final domain.
Show deployment settings, enabled services, and the cost estimate. Identify missing settings and DNS requirements. Start deployment after my confirmation.
Before continuing: Check the domain, HTTPS, and gateway callback. Continue future improvements in the same project.
One store. One project.Design, code, and catalog.
Design, code, and catalog.
Connected to your product.
From a button color to a product record, each task has its place. Explore three views of the same example store.
ProductCard.tsxMeh ceramic vase
680,000 toman
Product styleLayout GridGap 24pxRadius 16pxColor Olive
Your request
“Make the photo larger and place the price beside the add button.”
Review every change in Preview, source files, and project checks.See the complete store journey
Start the next change in your project.
Work in the browser, or use Faiber App for local folders and tools.