DEV Community: Syakir

checkout out my latest post :D

Syakir — Tue, 27 May 2025 13:09:01 +0000

Syakir

May 27 '25

I Built My 1st AI SaaS, It's Not as Hard as You Think

#webdev #ai #javascript #startup

Comments 16

4 min read

I Built My 1st AI SaaS, It's Not as Hard as You Think

Syakir — Tue, 27 May 2025 13:06:44 +0000

Hey guys 👋, Syakir here!

Its been a while since my last post. I'm currently busy building app as an indiehacker. Now, i want to share about my latest project, Kattalog, an AI product photography SaaS.

🚀 Kattalog is live on Product Hunt today — check it out and share your feedback!

This project is not the first of its kind, since there's already some similar tools out there. But i'm still building it anyway for these reasons:

An experiment & learning journey to become an AI engineer & SaaS builder
The app target market are ecommerce sellers, and I worked in Ecommerce industry for the last 5 years
Based on the initial research, the market is not saturated yet
The competitor apps are mostly very technical (require detailed prompts), and i try to fix this with different approach (image to image)

How I Built Kattalog

The story begins about 3 months ago in the end of February 2025, when i had a chat with ChatGPT. I was chating about building another directory-site, like AlternateOSS, but for AI generated images. Initially, i was going to build an AI stock photos website.

I researched about it, also with ChatGPT, from the AI models to market competitions, and realize that it's not the type of product that i can build solo. Then, i ask ChatGPT to give me other ideas that fit my constraints, but still related to AI images with not-really saturated market. That's when i decide to built Kattalog, an AI product photography app.

Then, i tried the existing competitors to find my app value proposition. They gave me a lot of idea, but in the end i only focus to build only core features for MVP.

I started building it since early March 2025 and the MVP done and deployed by the beginning of this month, May 2025. Initially, i vibe-coded this project using Cursor. About 50% codes are generated by Cursor. I also generate and customize most of React components using v0.

I'm building it while having a full-time job, mostly in the morning before work (I'm an early bird). Cursor and v0 really helps alot here. They make the development significantly faster. Although, i still need to code manually for specific cases.

The main challenges when developing Kattalog is actually not coding, but finding the right AI models to use. I literally spend about 3 weeks researching about them.

I can't disclose which AI models i use for Kattalog, but i use several models from Replicate & Fal.ai. I didn't fine-tune or train my AI models for now, but i plan to do it later if it get some tractions.

That's why i said "It's not as hard as you think" in the title. lol.

You can also follow this approach to build your own SaaS. In fact, most AI Saas today use the publicly available models. So, start building your own AI project. It will be even easier if you use Cursor, even the free trial. It will help you a lot developing the prototype.

How Kattalog Works

The main functionality of Kattalog is replacing the product image background with studio-quality background with AI. Instead of doing expensive product photoshots, or photoediting, ecommerce sellers can just upload their product photo, and let Kattalog do the works.

Here are the high level flows:

User upload product images
Kattalog will process and remove the background
User open the product image with removed background in the editor
User then choose a background reference, and click generate
4 product images will be generated with new backgrounds.

You can find real examples of generated images here: https://kattalog.com/examples.

The main feature (background generation) is only available in paid plan. As a solo founder, i cant afford to make it free, since it cost me money to run it.

But if you're an ecommerce seller and wanted to try it, i can give you free access. Just let me know.

Apart from the paid feature, there are also free features available to use:

Background colors
Pre-generated backgrounds

The Stacks

The stacks i used are simple. I use my favorite framework Astro, but now in SSR mode

The Frontend:

✅ Astro
✅ React
✅ TailwindCSS
✅ Shadcn / Radix
✅ Konva.js for Image Editor

The Backend

✅ Astro SSR APIs
✅ PostgreSQL
✅ Drizzle
✅ BetterAuth
✅ Cloudlfare R2 for storage
✅ VPS & Self-hosted Coolify for deployment
✅ some AI models from Replicate & Fal.ai

I use Polar.sh for payment processor, since Stripe doesnt support my country (Indonesia)

The Real Challenges

The real challenges of building SaaS is not product development. It's product market fit. And, this is where i'm, looking for my first customers.

To be fair, i didn't market it yet extensively. But, I started it today by publishing it here. Tomorrow, i will also launch Kattalog in Product Hunt.

Wish me luck! :D

What do you think about this project?

If you have any feedback, please dont hesitate to put it in the comment below.

Thanks, happy building!

Just posted this article

Syakir — Tue, 18 Mar 2025 12:25:43 +0000

Top 10 AI Figma / Design to Code Tools to Build Web App Effortlessly

Syakir ・ Mar 18

#webdev #ai #beginners #programming

Top 10 AI Figma / Design to Code Tools to Build Web App Effortlessly

Syakir — Tue, 18 Mar 2025 12:24:49 +0000

Converting designs to HTML code has been a main, basic task for front-end developers. However, in today’s fast-paced development cycles, it's considered time-consuming and usually creates bottlenecks.

Fortunately, AI-powered tools can now automate this task, by converting designs from tools like Figma, Adobe XD, or even raw images into production-ready code in a few clicks.

For a Front-end developer like me, automating this task can significantly boost productivity. Converting a Landing page from design to code, usually take 3-4 hours. Some pages even need more time.

With help of an AI design-to-code tool, we can do it in just a few minutes. We can use these saved hours for other tasks.

Today, AI design-to-code tools moved from being nice-to-haves to must-have tools for developers and business to stay relevant.

With that in mind, I put together the best 10 AI design to code tools you can use to speed up your web app development workflows.

Before we explore every tool, here is the quick feature comparison for each tools:

Tool	Fidelity (pixel-perfect)	Code Quality	AI Capabilities	Fine-tuning with Chat Prompt	Code Export	Freemium Options
Anima	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Yes	Yes	Yes (Free tier)
Locofy	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	No	Yes	Yes (Free tokens)
Builder	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	No	Yes	Yes (Free tier)
Codia	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	No	Yes	Yes (Free tier)
v0	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	Yes	Yes	Yes (Free tier)
TeleportHQ	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	No	Yes	Yes (Free tier)
Dhiwise	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	No	Yes (Pro plan)	Yes (Basic plan)
CodeParrot	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	No	Yes	Yes (Free trial)
Fronty	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	No	Yes	Yes (Freemium)
UX Pilot	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	No	Yes (Standard plan)	Yes (Free credit)

Rating Explanations:

Fidelity (pixel-perfect): Based on how accurately the tool converts designs into code without losing details.
Code Quality: Reflects the cleanliness, readability, and maintainability of the generated code.
AI Capabilities: Strength of AI in generating code, handling complex designs, code personalization and providing additional features like interactivity.
Fine-tuning with Chat Prompt: Whether the tool allow users to refine or customize the generated code using AI-powered prompts or chat-based interactions.
Code Export: Whether the tool allows exporting the generated code.
Freemium Options: Availability of free tiers or trial versions for users to test the tool before committing to a paid plan.

Now, let’s dive deeper into each tool one by one.

1. Anima

Anima is an AI-powered design-to-code tool that bridge the gap between design and coding by converting designs from tools like Figma, Adobe XD, and Sketch into developer-friendly code.

It designed to empowers designers, developers and product teams to build website faster by generating clean code with frameworks of their choice.

By automating the conversion of designs into clean code, Anima enhances efficiency, reduces manual coding efforts, and accelerates the product development process

Anima key features include:

AI-Powered Code Generation: Utilize advanced AI to generate React code that integrates seamlessly with your existing project, maintaining consistency with your coding conventions and styles.
Responsive Design Support: Add breakpoints and define responsive behaviors within prototypes to ensure designs adapt to various screen sizes and devices.
Figma Plugin: Anima can be used directly in Figma, allowing designers to generate codes for their design directly.
Frontier: A VSCode Extension that bring Anima directly to VSCode, allowing developers to convert Figma design without leaving their workspace.
Live Collaboration: Sync prototypes directly from design tools, allowing designers and developers to work on the latest versions without manual file transfers.
Code Customization: Customize the generated code to align with your coding standards, ensuring the output is as familiar as if you wrote it yourself.

Getting Started With Anima

To get started with Anima, you can create a free account here. It offers a free tier with basic features.

You can start using Anima by using its Figma plugin. I personally tried it by converting this free Figma landing page template.

Once you open the design you want to convert, select a page or component, the Right click > Plugins > Anima. An Anima plugin window will open. There you choose your coding frameworks, responsive breakpoints, etc.

If you need more customization, click 'Open in Playground' button in the bottom left side.

You will be redirected to Anima Playground, where you can customize your generated codes, adding logic, and even make it as your workspace.

As you can see, Anima’s design-to-code tool generates pixel-perfect code, identical to the Figma design.

However, things like interactivity and event handling still require manual work. This is where the Playground prompt comes in to help

You can ask it to generate event handling function, code restructuring, optimization, etc. Imagination is your limit.

If something goes wrong because of your prompt, you can just undo it.

Once you're done, you can either download all your project codes, or publish it in Anima. They also have hosting service with custom domain options.

To access all powerful Anima feature and make it your workspace, you need to at least upgrade your plan to Pro.

Here are the Anima subscription plan details:

Free. Cost $0, suitable for hobby projects, prototypes, and testing.
Pro. Cost $24 per seat per month, designed for exporting code for full flows and website publishing.
Business. Starts at $150 per month, ideal for teams building at scale.
Enterprise. Custom pricing, tailored for mature teams needing secure and scalable solutions.

2. Locofy

Locofy is an AI-powered design-to-code platform that transforms Figma and Adobe XD designs into production-ready code, in frameworks like React, Next.js, Gatsby, Vue, Angular and even React Native.

Locofy enables designers and developers to collaborate seamlessly by generating responsive front-end code for web and mobile applications.

It promises to make Front-end development up to 10x faster than traditional approach.

Locofy leverages advanced AI to transform static designs into functional code efficiently. Its Key features include:

One-Click Code Generation: With Locofy Lightning, users can convert designs into code with a single click, utilizing Large Design Models (LDMs) for high-quality output.
Responsive Design Support: The platform ensures that generated code is responsive, adapting to various screen sizes and devices without additional modifications.
Reusable Components: Locofy enables the creation of reusable code components, promoting scalability and maintainability in development projects.
Live Preview and Prototyping: Users can instantly preview the generated code and interact with prototypes, facilitating quick iterations and refinements.

Getting Started With Locofy

Locofy has subscription plans based on LDMToken credits. All plans offer first free 1000 LDMTokens, and will need payment details on registration.

Here are their subscription plans.

Pay-As-You-Go (PAYG). Cost $0.050 per LDMtoken, with the first 1,000 tokens free.
Freelancers & Bootstrappers. Cost $250 billed annually (approximately $21/month), includes 5,550 LDMtokens at $0.045 per token, plus 1,000 tokens free.
Startups & Pros. Cost $500 billed annually (approximately $42/month), includes 13,300 LDMtokens at $0.038 per token, plus 1,000 tokens free.
Businesses & Agencies. Cost $1,000 billed annually (approximately $83/month), includes 33,200 LDMtokens at $0.030 per token, plus 1,000 tokens free
Enterprises. Custom pricing available with unlimited LDMtokens and seats.

To be able to get started for Free you can choose the Pay as You Go model and use your first 1000 LDMTokens.

3. Builder

Builder is a Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor, and an enterprise headless CMS.

Designed for both developers and non-developers, it helps teams accelerate digital projects by converting designs into code, enabling visual editing, and efficiently managing content across multiple platforms.

By using Builder, organizations can streamline workflows, reduce reliance on engineering resources, and bring ideas to production faster.

While it offers more than just Design-to-Code capabilities, its Design-to-Code features include::

Design-to-Code with multiframeworks support: Transforms Figma designs into clean, semantic code, supporting frameworks such as React, Vue, Angular, and more.
Component Mapping: Automatically reuses existing code components when available, ensuring consistency with your current codebase and reducing redundancy.
Custom Instructions: Allows developers to refine code output at the developer or team level, tailoring the generated code to match specific coding standards and preferences.
Responsive Design Support: Ensures that generated code is responsive, adapting to various screen sizes and devices without additional modifications.

Getting Started With Builder

To get started with Builder, you can sign up for a free account on their website.

Here are their subscription plans:

Free. Ideal for individuals and teams working on smaller projects, free for up to 10 users.
Pro. Designed for teams building larger projects, $19 per user per month with scalable usage options.
Enterprise. Tailored for organizations requiring more scale, control, and support, with custom pricing.

As your needs grow, you can choose from scalable pricing plans to move faster and fuel sustainable growth.

4. Codia

Codia is an AI-powered platform that transforms Figma designs into production-ready code for both web and mobile applications.

It can convert designs to pure HTML/CSS, Tailwind, React, Vue for web development, and iOS, Android, Flutter, Swift, SwiftUI, Objective-C, Java, Kotlin for mobile development.

Codia works as a plugin on Figma, where you can work and collaborate with other designers or developers

Its key features include:

AI-Powered Code Generation: Converts Figma designs into functional code, reducing development time and bridging the gap between designers and developers.
Multi-Platform Support: Generates high-quality, production-ready code for various web platforms, mobile apps, and the Flutter cross-platform framework.
AI-Powered Design Tools: Assists designers from conceptualization to final design, using advanced visual AI technology and large language models to understand and generate designs from textual or image inputs.

Getting Started With Codia

To begin using Codia, install the Codia Figma Plugin by searching for "Codia" in Figma's plugin menu or by visiting the plugin's page directly.

Once installed, open your design file, run the plugin, and select your target platform and framework.

The AI will then generate the corresponding code, which you can download or preview in CodeSandbox.

If you're going to use Codia for real world projects, the Free version might be not enough, since it's AI capabilities are limited.

Summarized from their pricing page for AI Design-to-Code, here are the subscription details for Codia:

Free. Free forever, ideal for students, educators, and freelancers, offering 30 AI code generations per day and 5 AI code export credits upon sign-up.
Starter. Designed for beginner developers at $29/ developer/month ($17 if paid anually), with unlimited AI code generations and 300 AI code export credits per month.
Pro. Tailored for professional developers and teams at $49/developer/month ($29 if paid anually), providing enhanced features and support.

5. v0

v0 is an AI-powered tool developed by Vercel specialized in Code generation based on user prompt.

With v0, You can generate a fully functional app simply based on prompts. It supports frameworks like React, Next.js, Tailwind, and Shadcn, with ability to preview the generated code.

v0 also offers a feature that converts images or designs into code to some extent, enhancing its versatility in design-to-code workflows.

Its key features include:

Generative UI: Create user interfaces by describing requirements, producing high-quality React code.
AI-Driven Code Generation: Utilize advanced AI technology to generate code, saving time and effort.
Compatibility: Seamlessly integrate with Shadcn UI and Tailwind CSS, ensuring easy adoption.
Customizable Options: Access multiple AI-generated interface designs that can be tailored to specific needs.
Rapid Prototyping: Facilitate quick iteration and testing of new product ideas.

Getting Started With v0

To begin using v0, visit the official website and sign up for an account. Once registered, you can input text descriptions or upload images/designs to generate corresponding components.

The platform provides real-time previews, allowing you to customize and refine the generated code before integrating it into your projects.

To convert design to code, you can select the 'import from Figma' button. Fill it with your Figma design selection link. It will import your design.

Note that the imported figma design size is limited based on your plan. For larger files, you might need to update your subscription plan

Here are their subscription plans:

Free. For individuals exploring the platform, priced at $0/month.
Premium. Offers higher messaging limits for $20/month.
Team. Designed for collaborative teams at $30/user/month.
Enterprise. Tailored for companies needing robust security and performance, with custom pricing[8].

6. TeleportHQ

TeleportHQ is an AI-powered collaborative front-end platform, offering a powerful visual builder to create and publish static and dynamic websites instantly.

It supports seamless collaboration with features like real-time code generation, Figma integration, and multiple frameworks supports like React, Next.js, Vue, and Angular.

It also offer hosting service for the project you develop there.

Its key features include:

AI-Powered Website Builder: Leverages OpenAI-generated code to create web pages based on user prompts.
Figma Integration: Converts Figma designs into functional code with direct import and further customization within TeleportHQ.
Real-Time Collaboration: Provides a shared workspace for designers and developers to work together in real-time.
Flexible Code Export: Allows exporting of final code in various JavaScript frameworks.
Advanced Customization: Offers control over design elements with an intuitive Style Inspector Panel and CSS classes.

Getting Started With TeleportHQ

To begin with TeleportHQ, visit their official website and sign up for a free account.

Once registered, you can start creating projects using their visual builder, import designs from Figma, and collaborate with team members in real-time.

Here are their subscription plans:

Free. Perfect for getting started, allows building, sharing, and publishing projects at $0 forever.
Professional. For teams needing collaboration on complex projects with custom domains, priced at $9/editor/month.
Agency. Tailored for agencies handling numerous projects with unique hosting needs; custom pricing is available.

For users seeking technical assistance, TeleportHQ offers dedicated support and training sessions ranging from $80 for a 1-hour session to $480 for an 8-hour session.

7. Dhiwise Design Converter

Dhiwise Design Converter is an AI powered tool to translate Figma designs into code for frameworks like React, Next.js, Flutter, and Shopify Liquid, with full support for responsive, modular code generation.

It helps developers save significant time by automating repetitive tasks, ensuring that the generated code is scalable, consistent, and ready for deployment across multiple devices.

It works as a plugin in Figma and an Editor in their website.

Its Key features include:

Figma to Code Conversion: Translate Figma designs into clean, modular code with automatic layer and component mapping.
Support for Multiple Frameworks: Tailored code generation for frameworks like React, Next.js, Flutter, and Shopify Liquid.
Automatic Responsiveness: Generates responsive layouts optimized for different screen sizes without additional coding.
Custom Design System Integration: Sync with popular design systems like Tailwind and Chakra for consistent styling.
Live Preview and Collaboration: Share interactive previews for real-time feedback from teams and stakeholders.

Getting Started With Dhiwise Design Converter

To get started, register on Dhiwise's platform, then link your Figma design file for automatic conversion.

Here are their subscription plans:

Basic. Free forever, allowing you to build unlimited apps, but you cant export them.
Pro. Priced at $149 per user per year (billed annually), it unlocks export code for 30 screens.
Enterprise. Offers custom pricing based on your specific needs, enabling export code for 1,000+ screens.

8. CodeParrot

CodeParrot is an AI-driven platform that transforms Figma designs and screenshots into production-ready front-end code, enabling developers to build stunning user interfaces quickly.

It supports various tech stacks, including React, Angular, Vue.js, and more, allowing seamless integration into existing projects.

CodeParrot works as VSCode Extension, allowing developers to use convert design to code without leaving their workspace.

Its key features include:

Figma to Code: Converts Figma designs into clean, production-ready code, streamlining the development process.
Screenshot to Code: Transforms screenshots into code, allowing developers to recreate designs from images.
Codebase Integration: Integrates with existing themes, components, and libraries, ensuring consistency with your project's coding standards.
AI Chat Assistant: Provides an AI-powered chat assistant to assist with code generation and troubleshooting.

Getting Started With CodeParrot

To get started with CodeParrot, you can directly install CodeParrot Extensition to your VSCode.

Then, Login with your Figma account to be able to Select your figma design directly from VSCode.

At this point, you will activate your free trial account. After 14 days, you will have to pay for their subscription plan to continue using it.

Here are their subscription plans:

Pro: At $19 per seat per month, this plan includes Figma to code, screenshot to code, custom themes, custom components, and an AI chat assistant.
Team: Priced at $39 per seat per month (minimum of 3 seats), it offers all Pro features plus integration with your project's theme, components, and coding standards.
Enterprise: This plan includes all Team features, on-prem deployment, and zero data retention. Pricing is available upon request.

9. Fronty

Fronty is an AI-powered tool that converts images into HTML and CSS code, enabling users to create websites quickly without any coding experience.

By just uploading an image, Fronty's AI analyzes the design and generates clean, standards-compliant HTML and CSS code within minutes.

Its key features include:

AI-Powered Image to HTML/CSS Conversion: Automatically transforms your uploaded images into clean, responsive HTML and CSS code
No-Code Online Editor: Offers an intuitive editor to customize and manage website content and generated codes.
Responsive and SEO-Friendly Design: Ensures that generated websites are mobile-friendly, optimized for search engines, and adhere to best practices for performance and accessibility.
Hosting and Custom Domain Support: Provides hosting services with features like custom domain attachment, regular backups, and high uptime, allowing users to publish their websites directly through Fronty.

Getting Started With Fronty

To begin using Fronty, visit their website and sign up for an account.

Once registered, you can upload an design image, and Fronty's AI will generate the corresponding HTML and CSS code.

You can then use the no-code editor to customize your website's content and design before publishing it online.

Fronty offers various subscription plans to accommodate different user needs. Here are their subscription plans:

Freemium. Free for up to 3 users, includes a free subdomain and limited hosting with Fronty branding.
Pro. Costs $4.52/monthly, supports up to 10 users, offers custom domain, no Fronty branding, and increased hosting.
Advanced. Priced at $9/monthly, suitable for up to 25 users, providing more hosting and all the features of the Pro plan.

For detailed information on each plan and to choose the one that best fits your requirements, please visit Fronty's pricing page.

10. UX Pilot

UX Pilot is an AI-powered UX/UI design platform that enables users to create high-fidelity designs and wireframes swiftly.

It's designed to assist UX professionals, product teams, and founders in generating high-quality designs efficiently, then convert them into functional codes.

While, it's mainly designed for designers, its design to code tool is quite powerful to reduce manual coding works.

Its key features include:

AI-Based UX Design Review: Provides actionable insights to enhance design quality.
Custom Workshop Generation: Generates tailored workshops to address specific UX challenges.
High-Fidelity UI Design Generation: Instantly creates pixel-perfect screens, expediting the design process.
AI Wireframer: Produces flexible wireframes for both desktop and mobile platforms, facilitating quick exploration of design concepts.
Image to HTML/CSS Conversion: Automatically converts images or designs into HTML/CSS code using AI, streamlining the transition from design to development.

Getting Started With UX Pilot

To begin using UX Pilot, visit their official website and sign up for a free account. The platform offers a free trial, allowing users to explore its features before committing to a subscription.

Here are their subscription plans:

Free. $0/month, offering a one-time allocation of 30 credits for up to 5 screens.
Standard. $12/month, providing 420 credits for up to 70 screens, including export to Figma and code.
Pro. $22/month, increasing the credit allocation to 1200 for up to 200 screens, unlocking unlimited screen flows, and image-to-design functionality.

Conclusion

We have discussed some of the best AI-powered tools that will convert your designs into clean, production-ready code. Such tools now power how developers and designers work together way faster and much more efficiently.

Of course, no tool is perfect, and AI-generated code might still need some refinements. However, the first tool on our list, Anima, offers a chat-based prompting feature for advanced code iteration and customization after conversion with live preview.

That’s why we ranked it first as it’s the only design-to-code tool with this feature and the most comprehensive set of capabilities overall.

If you want to optimize your workflow, this is the time to look into such tools. Give them a try, see what works for you, and start building faster.

And if you've used one, share-what did work, what didn't, and what surprised you most!

[Boost]

Syakir — Wed, 05 Feb 2025 22:49:16 +0000

Remix Tutorial: Building A Simple Contact App With Strapi as Backend

Syakir for Strapi ・ Feb 5

#javascript #webdev #react #beginners

Remix Tutorial: Building A Simple Contact App With Strapi as Backend

Syakir — Wed, 05 Feb 2025 12:02:47 +0000

Introduction

In this Remix tutorial, we’ll walk through how to build a simple contact app using Remix for the frontend and Strapi headless CMS as the backend. You’ll learn how to set up both tools, connect them, implement CRUD operations and create a working application step by step.

Prerequisites

Before starting this Remix tutorial, make sure you have the following:

Node.js and npm installed on your machine (v18 or later recommended).
A basic understanding of HTML, CSS and JavaScript.
Git installed for version control.
A code editor, like VS Code.

What you'll learn

In this tutorial, you will learn:

How to set up a Remix project and understand its core features.
Setting up Strapi as a backend and integrating it with Remix.
Implementing CRUD functionalities (Create, Read, Update, Delete) for a simple contact management app.
Using Zod for form validation and useNavigate for navigation actions.
Adding advanced features like search, sorting, pagination, and favorite functionality.
Handling errors, creating a 404 fallback, and improving user experience with loading states and debouncing.
Exploring additional improvements such as highlighting selected contacts and using useFetcher for better interactions.

What we're building

In this tutorial, we’ll build a simple contact management app with features:

Contact List and Detail View: Display all contacts and view details for each contact.
CRUD Operations: Add, edit, update, and delete contact information seamlessly.
Favorite Marking: Mark contacts as favorites for easier organization.
Search Functionality: Implement real-time search
Error Handling and 404 Pages: Handle missing data and server errors gracefully with custom fallback pages.
Enhanced User Experience: Add features like loading states and highlighting selected contacts.

Getting Started with Remix

Remix is a React-based framework for building fast, dynamic web apps with seamless server and client rendering. It simplifies routing, data loading, and error handling while focusing on performance, web standards, and accessibility

Setting up Remix project

To make it simple, we will refer to the official remix documentation to setup remix project.

We will also use the official remix tutorial project. Later, we will integrate this tutorial project with Strapi as backend.

First, let's create a project folder remix-strapi, and open it in the Terminal. This folder will contains 2 forlders for remix (frontend) and strapi (backend).

Before setting up remix and strapi backend, we will initialize git repository in this folder:

git init

Then, set up a remix project by running this command:

npx create-remix@latest --template remix-run/remix/templates/remix-tutorial

It will prompt you with some questions in your terminal

Need to install the following packages:
create-remix@2.15.1
Ok to proceed? (y) y


 remix   v2.15.1 💿 Let's build a better website...

   dir   Where should we create your new project?
         ./remix

      ◼  Template: Using remix-run/remix/templates/remix-tutorial...
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./remix
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

We named the project folder remix. Select No for Git repository initialization, as we have already initialized Git in the parent folder, remix-strapi.

Now let's open remix-strapi in VSCode. You'll find a remix folder inside. Under the remix folder, there will be an app folder where application code is located.

root.tsx is the entry point of the application. We will refer to this as the "Root route"
data.ts store the functions related to data operations
app.css is the main CSS file for styling the app.

Now, let's run our Remix app. Right-click on the remix folder and select Open in Integrated Terminal. This will open the terminal in your VSCode.

Run the command below:

npm run dev

The Remix app will start on localhost:5173, but you will see an unstyled page.

This is because we haven't imported the app.css file in root.tsx.

Importing CSS in Root route

Let's import the app.css in root.tsx by adding the code on lines 9–13 as shown below.

import {
  Form,
  Links,
  Meta,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import type { LinksFunction } from "@remix-run/node";
import appStyleHref from './app.css?url'
export const links: LinksFunction = () => [
  { rel:"stylesheet", href: appStyleHref }
]

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">
        ...
        </div>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Refresh the app, and it will render the styles.

Click on a contact in the list, and you will see a 404 Not Found page. This happens because we haven't set up the routes for it.

Creating Routes in Remix

Now, let's create a new folder named routes to store all the page routes we plan to add.

We'll start by creating a /contacts route.

Then, we have to add the <Outlet /> component in the root.tsx to render the route component.

import {
  Form,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import type { LinksFunction } from "@remix-run/node";
import appStyleHref from './app.css'
export const links: LinksFunction = () => [
  { rel:"stylesheet", href: appStyleHref }
]

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">
        ...
        </div>

        <div id="detail">
          <Outlet />
        </div>

        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

First, we need to import Outlet from @remix-run/react, as shown on line 5 in the code above. Then, use the <Outlet /> component, as shown on lines 30–32 in the code above.

You see that it now renders the ContactsRoute component.

However, this is just a static route. Static routes are used to display static content in your web application.

If you click a contact in the sidebar, you will still see a 404 Not Found error page. This is because it's expecting a dynamic route.

To create a dynamic route, simply rename the file contacts.tsx to contacts.$contactId.tsx.

Now, click a contact in the sidebar again. This time, it won't render the 404 Not Found error page.

The number 1 in /contacts/1 will be passed as the $contactId parameter to the ContactsRoute component. We'll use it to fetch contact data in the next step.

Setting up Contact Detail Page

Before we work on the data fetching, let's now create a proper component for contact detail page first.

Change all codes in the contacts.$contactId.tsx component with this code.

import { Form, Link } from "@remix-run/react";
import type { FunctionComponent } from "react";

import type { ContactRecord } from "../data";

export default function Contact() {
  const contact = {
    first: "Your",
    last: "Name",
    avatar: "https://placecats.com/200/200",
    twitter: "your_handle",
    notes: "Some notes",
    favorite: true,
  };

  return (
    <div id="contact">
      <div>
        <img
          alt={`${contact.first} ${contact.last} avatar`}
          key={contact.avatar}
          src={contact.avatar}
        />
      </div>

      <div>
        <h1>
          {contact.first || contact.last ? (
            <>
              {contact.first} {contact.last}
            </>
          ) : (
            <i>No Name</i>
          )}{" "}
          <Favorite contact={contact} />
        </h1>

        {contact.twitter ? (
          <p>
            <a
              href={`https://twitter.com/${contact.twitter}`}
            >
              {contact.twitter}
            </a>
          </p>
        ) : null}

        {contact.notes ? <p>{contact.notes}</p> : null}

        <div>
          <Link to={`/contacts/${contact.documentId}/edit`} className="buttonLink">Edit</Link>

          <Form
            action="delete"
            method="post"
            onSubmit={(event) => {
              const response = confirm(
                "Please confirm you want to delete this record."
              );
              if (!response) {
                event.preventDefault();
              }
            }}
          >
            <button type="submit">Delete</button>
          </Form>
        </div>
      </div>
    </div>
  );
}

const Favorite: FunctionComponent<{
  contact: Pick<ContactRecord, "favorite">;
}> = ({ contact }) => {
  const favorite = contact.favorite;

  return (
    <Form method="post">
      <button
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </Form>
  );
};

In the code above,

We use a dummy contact data, stored it in contact variable.
In the component markup, we render contact fields in UI.
We added a Favorite component, Edit and Delete button. For now, they dont have any functionality yet. We will implement theme later in this tutorial.

The code will render this page. It's currently displaying a dummy contact, but soon we'll make it load the actual contact based on the ID in the URL.

Using Loader Function to Load Data

Before using real data, we'll use the dummy contact data stored in data.ts.

Let's go back to root.tsx. We'll load the contact list in the sidebar from the dummy data.

First, import the getContacts function from ./data.ts and use it in a loader function.

Then, loop through the fetched contacts data inside the <nav> element in the sidebar.

Here is the updated root.tsx.

import {
  Form,
  Link,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { type LinksFunction } from "@remix-run/node";
import appStyleHref from './app.css'
import { getContacts } from "./data";
export const links: LinksFunction = () => [
  { rel:"stylesheet", href: appStyleHref }
]

export const loader = async () => {
  const contacts = await getContacts();
  return { contacts }
};

export default function App() {
  const { contacts } = useLoaderData<typeof loader>();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">
          <h1>Remix Contacts</h1>
          <div>
            <Form id="search-form" role="search">
              <input
                id="q"
                aria-label="Search contacts"
                placeholder="Search"
                type="search"
                name="q"
              />
              <div id="search-spinner" aria-hidden hidden={true} />
            </Form>
            <Form method="post">
              <button type="submit">New</button>
            </Form>
          </div>
          <nav>
            {contacts.length ? (
              <ul>
                {contacts.map((contact) => (
                  <li key={contact.id}>
                    <Link to={`contacts/${contact.id}`}>
                      {contact.first || contact.last ? (
                        <>
                          {contact.first} {contact.last}
                        </>
                      ) : (
                        <i>No Name</i>
                      )}{" "}
                      {contact.favorite ? (
                        <span>★</span>
                      ) : null}
                    </Link>
                  </li>
                ))}
              </ul>
            ) : (
              <p>
                <i>No contacts</i>
              </p>
            )}
          </nav>
        </div>

        <div id="detail">
          <Outlet />
        </div>

        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

The loader function should be explicitly exported as loader to work.

It returns the contacts from the dummy data, allowing us to fetch it using useLoaderData in the main component.

Refresh the page, it will render the contact list in the sidebar.

Loading Single Contact based on Id param

Now, we're going to fetch contact data based on the id param in the url.

We just need to add another loader function, but this time with contactId parameter

import { Form, useLoaderData } from "@remix-run/react";
import type { FunctionComponent } from "react";

import { getContact, type ContactRecord } from "../data";
import type { LoaderFunctionArgs } from "@remix-run/node";
import invariant from "tiny-invariant";

export const loader = async ({
  params,
}: LoaderFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const contact = await getContact(params.contactId);
  if (!contact) {
    throw new Response("Not Found", { status: 404 });
  }
  return { contact };
};

export default function Contact() {
  const { contact } = useLoaderData<typeof loader>();
  return (
    <div id="contact">
        ...
    </div>
  )
}

In the code above:

The loader function has a { params } argument that contains the contactId parameter from the URL.
invariant is a utility function used to verify whether the contact ID parameter exists in the URL.
The getContact function from /data.ts is used to fetch individual contact data based on the contactId parameter. If the contact is not found, it returns a Not Found error.
In the main component, we replace the dummy contact with useLoaderData. There are no changes to the component markup.

Setting Up Strapi as Backend

Strapi is an open-source headless CMS designed to simplify content management and API creation for developers. It offers an intuitive admin panel, allowing users to create custom content types and manage data seamlessly while supporting RESTful and GraphQL APIs for flexible integration with any frontend framework.

We will use Strapi backend to store our contacts data and fetch it in remix app.

Add Strapi to the Project

First, let's set up the Strapi project.

Navigate to the root project folder, remix-strapi, in your terminal. If your terminal is currently in the remix folder, you can switch to the remix-strapi folder by running cd ../.

Once in the remix-strapi folder, run:

npx create-strapi@latest my-strapi-project

It will prompt you with some questions again

Need to install the following packages:
create-strapi@5.5.1
Ok to proceed? (y) y


 Strapi   v5.5.1 🚀 Let's create your new project


We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. Skip
? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? No

 Strapi   Creating a new application at /Volumes/Work/Labs/remix-strapi/my-strapi-project

   deps   Installing dependencies with npm
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated mailcomposer@3.12.0: This project is unmaintained
npm warn deprecated buildmail@3.10.0: This project is unmaintained
npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

added 1372 packages, and audited 1373 packages in 3m

200 packages are looking for funding
  run `npm fund` for details

4 low severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

       ✓  Dependencies installed

 Strapi   Your application was created!
          Available commands in your project:

          Start Strapi in watch mode. (Changes in Strapi project files will trigger a server restart)
          npm run develop

          Start Strapi without watch mode.
          npm run start

          Build Strapi admin panel.
          npm run build

          Deploy Strapi project.
          npm run deploy

          Display all available commands.
          npm run strapi

          To get started run

          cd /Volumes/Work/Labs/remix-strapi/my-strapi-project
          npm run develop

In the terminal prompt above:

I skipped the Strapi Cloud free trial registration since we will use the project locally for demo purposes only.
Chose SQLite for the database.
Started with no structure or data examples.
Selected TypeScript.
Used npm as the dependency manager.
Skipped Git initialization since we already initialized Git in the parent folder.

Now, let's run our Strapi project. In the terminal, navigate to the Strapi project folder my-strapi-project using cd my-strapi-project.

Then, run npm run develop.

Strapi will open at http://localhost:1337/. Since this is a new installation, you'll need to register an admin user before logging into the Strapi dashboard.

Once registered, you will be logged into the Strapi dashboard.

Take some time to explore Strapi's features and familiarize yourself with the dashboard.

Some core features you should explore:

Content-Type Builder: Use this to build content types based on your needs. There are three types of content you can create:
- Collection Type
- Single Type
- Component

By default, Strapi provides an existing user collection.

Content Manager: Manage your content here—create, update, or delete entries after setting up your collection or other content types.
Media Library: Store and manage images, videos, and other media that will be used in your content.

Create Contact Collection on Strapi

Before storing contacts in Strapi, we need to create a Contact collection.

Navigate to the Content-Type Builder and create a new Contact collection.

You will be prompted to select fields for the newly created Contact collection.

We will create the Contact fields based on the ContactMutation type, which you can find in ./data.ts in your Remix project, excluding the id column.

type ContactMutation = {
  id?: string;
  first?: string;
  last?: string;
  avatar?: string;
  twitter?: string;
  notes?: string;
  favorite?: boolean;
};

All fields we created have the Text (Short text) type, except for notes, which is Text (Long text), and favorite, which is Boolean.

Save the collection, and now we can start adding contact data to Strapi.

Navigate to the Content Manager menu. Select the Contact collection and choose Create new entry.

You can use the dummy contacts from ./data.ts in your remix project and save them to the Contact collection.

Implementing CRUD Functionalities for Contact

Now, we are going to use the Contact collection as the data source for our Remix app.

Before that, we need to expose the Contact collection to the public API.

In the Strapi dashboard, go to Settings > scroll to Users & Permissions Plugin > select Roles > Public.

On the Permissions section, click on Contact and Select all permissions.

This will make your Contact collection accessible for Create, Read, Update, and Delete (CRUD) operations via API endpoints .

Go to http://localhost:1337/api/contacts. It will return your contact list in JSON format.

{
    "data": [
        {
            "id": 2,
            "documentId": "dva2ab16hv3bzq9s5onbxgvb",
            "first": "Shruti",
            "last": "Kapoor",
            "avatar": "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
            "twitter": "@shrutikapoor08",
            "notes": null,
            "favorite": null,
            "createdAt": "2024-12-12T08:21:21.633Z",
            "updatedAt": "2024-12-12T08:21:21.633Z",
            "publishedAt": "2024-12-12T08:21:21.657Z"
        },
        {
            "id": 4,
            "documentId": "y1s5z2oqmmppu1d9n7wmelc9",
            "first": "Ryan",
            "last": "Florence",
            "avatar": "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
            "twitter": null,
            "notes": null,
            "favorite": true,
            "createdAt": "2024-12-12T08:21:41.582Z",
            "updatedAt": "2024-12-12T08:21:41.582Z",
            "publishedAt": "2024-12-12T08:21:41.587Z"
        },
        {
            "id": 6,
            "documentId": "fnpqe7u1pm70bkcx6yjzahq7",
            "first": "Oscar",
            "last": "Newman",
            "avatar": "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
            "twitter": "@__oscarnewman",
            "notes": null,
            "favorite": null,
            "createdAt": "2024-12-12T08:22:03.956Z",
            "updatedAt": "2024-12-12T08:22:03.956Z",
            "publishedAt": "2024-12-12T08:22:03.961Z"
        },
        {
            "id": 11,
            "documentId": "n6yoo2mil4a36kpia4qy2x03",
            "first": "Muhammad",
            "last": "Syakirurohman",
            "avatar": "https://devaradise.com/_astro/syakir.JYhBotXK_1ltmJh.webp",
            "twitter": "@syakirurohman",
            "notes": null,
            "favorite": true,
            "createdAt": "2024-12-13T23:47:36.654Z",
            "updatedAt": "2024-12-13T23:58:48.752Z",
            "publishedAt": "2024-12-13T23:58:48.758Z"
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 4
        }
    }
}

Fetching All Contacts from Strapi

Previously, our data source for the contact list was dummy data stored as a variable in data.ts.

Now, we will refactor data.ts to fetch the Contact collection from Strapi.

Rename data.ts to data.server.ts. This ensures it runs only on the server side. Make sure to update all import statements for data.server in other files accordingly.
We add documentId field to ContactMutation type since every data from Strapi version 5 is automatically added this field. The documentId will be used to get contact detail from Strapi.
Refactor the data.server.ts by removing all code related to dummy data. Clear all function bodies and add a STRAPI_BASE_URL variable to store the Strapi API base URL.

type ContactMutation = {
  id?: string;
  documentId?: string;
  first?: string;
  last?: string;
  avatar?: string;
  twitter?: string;
  notes?: string;
  favorite?: boolean;
};

export type ContactRecord = ContactMutation & {
  id: string;
  createdAt: string;
};

const STRAPI_BASE_URL = process.env.STRAPI_BASE_URL || 'http://localhost:1337'

export async function getContacts(query?: string | null) {
}

export async function createEmptyContact() {
}

export async function getContact(id: string) {
}

export async function updateContact(id: string, updates: ContactMutation) {
}

export async function deleteContact(id: string) {
}

To fetch all contacts from Strapi, let's redefine the getContacts function.

export async function getContacts(query?: string | null) {
  try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts")
    const json = await response.json()
    return json.data as ContactMutation[]
  } catch (err) {
    console.log(err)
  }
}

After that, go to root.tsx. Make sure you change the import source for getContacts function.

import { getContacts } from "./data.server";

Save and reload your app homepage. You will see that now it fetch the contacts from Strapi.

Fetching Single Contact

Since we have refactored data.ts, the contact detail page is temporary not working. So, let's fix it so it gets the contact data from Strapi contact.

Still in the root.tsx, Scroll to the nav tag where we iterate the contacts variable, change the ${contact.id} to ${contact.documentId}

...
<nav>
    {contacts?.length ? (
      <ul>
        {contacts.map((contact) => (
          <li key={contact.id}>
            <Link to={`contacts/${contact.documentId}`}>
              {contact.first || contact.last ? (
                <>
                  {contact.first} {contact.last}
                </>
              ) : (
                <i>No Name</i>
              )}{" "}
              {contact.favorite ? (
                <span>★</span>
              ) : null}
            </Link>
          </li>
        ))}
      </ul>
    ) : (
      <p>
        <i>No contacts</i>
      </p>
    )}
</nav>
...

This will change the contactId param in contact detail page.

Navigate to data.server.ts and redefine the getContact function as follows

export async function getContact(documentId: string) {
    try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts/" + documentId);
    const json = await response.json()
    return json.data
  } catch (err) {
    console.log(err)
  }
}

In ./routes/contacts.$contactId.tsx, make sure you change the import source for getContact function to ./data.server.

import { getContacts } from "./data.server";

Save and reload the app. Click on a contact in the contact list, and it should render the contact detail page with data fetched from Strapi.

Create Contact Functionality

Next, let's add the Create Contact functionality.

We already have a New button beside the search field in the sidebar. Currently, clicking it returns a 405 error.

Now, let's change this button to a link that redirects to the create page.

In root.tsx, locate the following code:

...
<Form method="post">
  <button type="submit">New</button>
</Form>
...

Change it to

<Link to="contacts/create" className="buttonLink">Create</Link>

Add this CSS style to app.css to style the Create link

.buttonLink {
  font-size: 1rem;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.2), 0 1px 2px hsla(0, 0%, 0%, 0.2);
  background-color: white;
  line-height: 1.5;
  margin: 0;
  color: #3992ff;
  font-weight: 500;
  text-decoration: none;
}

Now, let's create a new page component form Create contact page.

Add new file in routes folder ./routes/contacts.create.tsx. Copy and paste this Create form component.

import { useNavigate, Form } from "@remix-run/react";

export default function CreateContact() {
  const navigate = useNavigate();

  return (
    <Form method="post">
      <div className="create-form-grid">
        <FormInput
          aria-label="First name"
          name="first"
          type="text"
          label="First name"
          placeholder="First"
        />
        <FormInput
          aria-label="Last name"
          name="last"
          type="text"
          label="Last name"
          placeholder="Last"
        />
        <FormInput
          name="twitter"
          type="text"
          label="Twitter"
          placeholder="@jack"
        />
        <FormInput
          aria-label="Avatar URL"
          name="avatar"
          type="text"
          label="Avatar URL"
          placeholder="https://example.com/avatar.jpg"
        />
      </div>
      <br/>
      <div className="input-field">
        <label htmlFor="notes">Notes</label>
        <textarea id="notes" name="notes" rows={6} />
      </div>

      <div className="button-group">
        <button type="submit">Create</button>
        <button type="button" onClick={() => navigate(-1)}>
          Cancel
        </button>
      </div>
    </Form>
  );
}

function FormInput({
  type,
  name,
  label,
  placeholder,
  defaultValue = "",
  errors,
}: Readonly<{
  type: string;
  name: string;
  label?: string;
  placeholder?: string;
  errors?: Record<string, string[]>;
  defaultValue?: string;
}>) {
  return (
    <div className="input-field">
      <div>
        <label htmlFor={name}>{label}</label>
        <div>
          <input
            name={name}
            type={type}
            placeholder={placeholder}
            defaultValue={defaultValue}
          />
        </div>
      </div>
      {errors && errors[name] &&
        <ul>
          {errors[name].map((error: string) => (
            <li key={error} className="input-error">
              {error}
            </li>
          ))}
        </ul>
      }
    </div>
  );
}

Add this CSS blocks to ./app.css as well for styling.

.button-group {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.input-field input, .input-field textarea {
  width: 100%;
  display: block;
}

.input-error {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.create-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.root-error {
  background: red;
  color: white;
  padding: 6rem;
}

.contact-error {
  padding: 6rem;
}

Save the filees, and navigate to Create contact page by clicking on Create button.

Before proceeding further, let's understand how the Remix <Form> component works.

The native HTML <form> have at least two attributes: action and method. Upon submission, the form sends an HTTP request to the URL specified in the action attribute using the HTTP method defined in the method attribute.

If the action attribute is not defined, it will send the request to the same page.

The Remix <Form> component follows the same approach. Any Remix route can have an action function to handle the form request sent to that route.

A Remix action is a special function in your route file that manages data mutations, such as creating, updating, or deleting data, triggered by form submissions or specific server requests.

Remember the loader function we used to fetch data? The action function is similar, but it is used for data mutation. It also has to be explicitly named action in your route file.

You also don't have to manually control the state of each field. Remix <Form> uses the standard Web API (FormData) to handle forms. Just make sure that all form fields have name attributes.

Now, let's add the codes to handle the Contact form submission.

First, go to the data.server.ts. Change the createEmptyContact function to createContact and add the codes to add new record to Strapi Contact collection.

// in ./data.server.ts
export async function createContact(data: Record<string, unknown>) {
  try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ data }),
    });
    const json = await response.json()
    return json.data
  } catch (err) {
    console.log(err)
  }
}

In the code above, we use the same fetch function to connect to the Strapi API. This time, we specify the "POST" method and include the data in the request body.

Now, return to ./routes/contacts.create.tsx and add the action function.

import { useNavigate, Form } from "@remix-run/react";
import { type ActionFunctionArgs, redirect } from "@remix-run/node";
import { createContact } from "./../data.server";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  const newEntry = await createContact(data);

  return redirect("/contacts/" + newEntry.documentId)
}

export default function CreateContact() {
    // nothing changed in this block for now
    //...
}

In the code above, we added the action function for this route. Here's how it works:

The form submission data is captured in the { request } parameter.
The createContact function is called to add a new record to the Strapi Contact collection using the submitted form data.
If the contact creation is successful, it redirects to the detail page of the newly created contact using the redirect function provided by Remix.

Save your changes and reload the app. Try adding new contact and see how it works.

Form validation with Zod and Remix

Although we have added the Create contact functionality, it doesnt have the form validation. You still can input anything without check.

Even if you submit a blank input, it will still create a new contact.

So, in this section we will add form validation using Zod.

Zod is a TypeScript-first library for schema declaration and validation, offering a simple API to define, parse, and validate data structures with runtime type safety. It supports detailed error handling, and is ideal for validating inputs, APIs, and complex data in modern applications.

Install Zod in your Remix project by running:

npm i zod

Make sure you execute this command in the remix folder via terminal.

Next, import zod into contacts.create.tsx and define a schema within the action function.

import { useNavigate, Form } from "@remix-run/react";
import { type ActionFunctionArgs, redirect } from "@remix-run/node";
import { createContact } from "./../data.server";
import * as z from "zod";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);

  const formSchema = z.object({
    avatar: z.string().url().min(2),
    first: z.string().min(2),
    last: z.string().min(2),
    twitter: z.string().min(2),
  });

  const validatedFields = formSchema.safeParse({
    avatar: data.avatar,
    first: data.first,
    last: data.last,
    twitter: data.twitter,
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: "Please fill out all missing fields.",
      data: null,
    }
  }

  const newEntry = await createContact(data);  
  return redirect("/contacts/" + newEntry.documentId)
}
export default function CreateContact() {
// Nothing changed yet here
//...
}

In the code above:

We introduced the formSchema variable, which defines the validation rules for each field in the Create contact form.
We parse the input data from the Create contact form request using formSchema.safeParse() and store the result in the validateFields variable.
We added a conditional check: if validateFields is unsuccessful, the action function returns an error object and halts the execution of the createContact function.

Save your changes, and try adding a contact again with blank inputs.

You will notice that it's not creating a new contact anymore. The form is actually returning errors from zod validation.

Now, let's show these error messages in our contact form.

In the same file contacts.create.tsx, within the the component function CreateContact:

import { useNavigate, Form, useActionData } from "@remix-run/react";
import { type ActionFunctionArgs, redirect } from "@remix-run/node";
import { createContact } from "./../data.server";
import * as z from "zod";

export async function action({ request }: ActionFunctionArgs) {
  // nothing changed here
}
export default function CreateContact() {
  const navigate = useNavigate();
  const formData = useActionData<typeof action>()

  return (
    <Form method="post">
      <div className="create-form-grid">
        <FormInput
          aria-label="First name"
          name="first"
          type="text"
          label="First name"
          placeholder="First"
          errors={formData?.errors}
        />
        <FormInput
          aria-label="Last name"
          name="last"
          type="text"
          label="Last name"
          placeholder="Last"
          errors={formData?.errors}
        />
        <FormInput
          name="twitter"
          type="text"
          label="Twitter"
          placeholder="@jack"
          errors={formData?.errors}
        />
        <FormInput
          aria-label="Avatar URL"
          name="avatar"
          type="text"
          label="Avatar URL"
          placeholder="https://example.com/avatar.jpg"
          errors={formData?.errors}
        />
      </div>
      <br/>
      <div className="input-field">
        <label htmlFor="notes">Notes</label>
        <textarea id="notes" name="notes" rows={6} />
      </div>

      <div className="button-group">
        <button type="submit">Create</button>
        <button type="button" onClick={() => navigate(-1)}>
          Cancel
        </button>
      </div>
    </Form>
  );
}
//...

In the code above:

We use useActionData to fetch the form request result and assign it to the formData variable. useActionData is imported from @remix-run/react.
We pass the formData?.errors to the FormInput component's errors attribute. FormInput will handle and display the error messages.

Save your changes and try submitting blank inputs again in Create contact form. It will now showing the error messages.

Update Contact Functionality

In this section, we are going to add update contact functionality.

First, let's create a new file in /routes folder, named contacts.$contactId_.edit.tsx

Note the weird _ in $contactId_. By default, routes will automatically nest inside routes with the same prefixed name. Adding a trailing _ tells the route to not nest inside app/routes/contacts.$contactId.tsx. You can read more about this in the Route File Naming official docs.

For the sake of brevity, we will use the same component and form validation we added in contacts.create.tsx.

So, copy all the codes in contacts.create.tsx and paste it to contacts.$contactId_.edit.tsx.

Then, make this changes

import { useNavigate, Form, useActionData, useLoaderData } from "@remix-run/react";
import { type ActionFunctionArgs, LoaderFunctionArgs, redirect } from "@remix-run/node";
import { updateContact, getContact } from "./../data.server";
import * as z from "zod";
import invariant from "tiny-invariant";

export const loader = async ({
  params,
}: LoaderFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const contact = await getContact(params.contactId);
  if (!contact) {
    throw new Response("Not Found", { status: 404 });
  }
  return { contact };
};
export async function action({ params, request }: ActionFunctionArgs) {
  invariant(params.contactId, "Missing contactId param");

  const formData = await request.formData();
  const data = Object.fromEntries(formData);

  const formSchema = z.object({
    avatar: z.string().url().min(2),
    first: z.string().min(2),
    last: z.string().min(2),
    twitter: z.string().min(2),
  });

  const validatedFields = formSchema.safeParse({
    avatar: data.avatar,
    first: data.first,
    last: data.last,
    twitter: data.twitter,
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: "Please fill out all missing fields.",
      data: null,
    }
  }

  const updatedEntry = await updateContact(params.contactId, data);  
  return redirect("/contacts/" + updatedEntry.documentId)
}
export default function EditContact() {
  const navigate = useNavigate();
  const { contact } = useLoaderData<typeof loader>();
  const formData = useActionData<typeof action>();

  return (
    <Form method="post">
      <div className="create-form-grid">
        <FormInput
          aria-label="First name"
          name="first"
          type="text"
          label="First name"
          placeholder="First"
          defaultValue={contact?.first}
          errors={formData?.errors}
        />
        <FormInput
          aria-label="Last name"
          name="last"
          type="text"
          label="Last name"
          placeholder="Last"
          defaultValue={contact?.last}
          errors={formData?.errors}
        />
        <FormInput
          name="twitter"
          type="text"
          label="Twitter"
          placeholder="@jack"
          defaultValue={contact?.twitter}
          errors={formData?.errors}
        />
        <FormInput
          aria-label="Avatar URL"
          name="avatar"
          type="text"
          label="Avatar URL"
          placeholder="https://example.com/avatar.jpg"
          defaultValue={contact?.avatar}
          errors={formData?.errors}
        />
      </div>
      <br/>
      <div className="input-field">
        <label htmlFor="notes">Notes</label>
        <textarea id="notes" name="notes" rows={6} defaultValue={contact?.notes} />
      </div>

      <div className="button-group">
        <button type="submit">Update</button>
        <button type="button" onClick={() => navigate(-1)}>
          Cancel
        </button>
      </div>
    </Form>
  );
}

// nothing change in FormInput component
function FormInput(){
    ///...
}

In the code above:

We added a loader function to load the existing contact, similar to the one in contacts.$contactId.tsx.
In the action function, we included params in the arguments to fetch params.contactId. This will be passed to the updateContact function as an argument.
We renamed the component to EditContact. Using useLoaderData, we accessed the loaded contact data and prefilled the contact fields in <FormInput> and <textarea> by setting their defaultValue attributes.

The Update Contact page now renders a contact form with prefilled information. However, the update contact functionality is not working yet.

We still need to implement the API call to Strapi in the updateContact function within ./data.server.ts. Update the updateContact function as follows:

//...
export async function updateContact(documentId: string, updates: ContactMutation) {
  try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts/" + documentId, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ data: { ...updates} }),
    });
    const json = await response.json();
    return json.data;
  } catch (error) {
    console.log(error);
  }
}
//...

In the code above, we use the same fetch function to connect to the Strapi API. This time, we specify the "PUT" method and include the updated data in the request body.

Save your code, and try updating a contact. It should be working now.

Implement Delete Contact Functionality

As we have added create and update contact functionality, let's also implement the delete contact functionality.

Earlier, in the contact detail page contact.$contactId.tsx, we added a delete button wrapped in the Remix <Form> component.

<Form
    action="delete"
    method="post"
    onSubmit={(event) => {
      const response = confirm(
        "Please confirm you want to delete this record."
      );
      if (!response) {
        event.preventDefault();
      }
    }}
    >
    <button type="submit">Delete</button>
</Form>

Upon clicking the Delete button, it prompts a native browser alert to confirm your action.

If you confirm, the form will submit a request to /contacts/${documentId}/delete, as defined in the action attribute, and throw a 405 error.

This happened because we haven't created a delete route yet to handle this request.

Let us now create a new route file named contacts.$contactId.delete.tsx inside /routes folder.

In Remix, we can have a route that only handles a request, without a UI. This is what we will do with the delete route.

We only need to add an action function to handle the delete request.

import { type ActionFunctionArgs, redirect } from "@remix-run/node";
import invariant from "tiny-invariant";
import { deleteContact } from "../data.server";

export const action = async ({ params } : ActionFunctionArgs ) => {
  invariant(params.contactId, "Missing contactId param");
  await deleteContact(params.contactId);
  return redirect("/contacts")
}

In the code above:

We check the params.contactId with invariant, as we also do in contact detail page and update contact action.
We called deleteContact from ./data.server to execute the delete contact functionality
If deletion success we will redirect the page route to /contacts

In the ./data.server.ts, we also need to update the deleteContact function as follows:

//...
export async function deleteContact(documentId: string) {
  try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts/" + documentId, {
      method: "DELETE",
    });
    const json = await response.json();
    return json.data;
  } catch (error) {
    console.log(error);
  }
}
//...

In the code above, we call the Strapi endpoint /api/contact/${documentId} with the DELETE method to delete the contact with the corresponding documentId. The documentId matches the contactId used in the URL.

Save your code and try deleting a contact. If successful, you will be redirected to the /contacts page.

You'll notice it shows a 404 Not Found error because we don't have a route page for /contacts.

Setting up Fallback page when no contact selected

Let's add a simple component for the /contacts route.

Create a new file named contacts_.tsx in the /routes folder and paste this simple component:

export default function Contacts() {
  return (
    <div>This will show up when no items are selected</div>
  )
}

Don't forget the _ in the contacts_.tsx filename. It's necessary to prevent it from being rendered in its child routes (e.g., /contacts/${contactId}).

Now, the /contacts route should display like this:

Handling Error in Remix

In real-world applications, errors are inevitable, such as when a requested page is not found.

By default, Remix provides a basic 404 Not Found error page to handle such scenarios.

We can customize this error handling by creating and exporting a component named ErrorBoundary in any route page where we want to manage errors.

Let's try this by adding ErrorBoundary component in root.tsx to customize root error boundary.

export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <html lang="en">
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <div style={{ padding: '3rem'}}>
          <h2>Oh no! Something went wrong</h2>
          {
            isRouteErrorResponse(error) && <div>
              <div><strong>{error.status} Error</strong></div>
              <div>{error.data}</div>
              <br/>
              <Link to="/" className="buttonLink">Go back to home</Link>
            </div>
          }
        </div>
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
// nothing changed here
}

Dont forget to add ErrorBoundary and isRouteErrorResponse to the import code.

import {
  Form,
  isRouteErrorResponse,
  Link,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
  useRouteError,
} from "@remix-run/react";

//...

Now, save the file and try accessing the app with a random URL. The custom error boundary we just implemented will be displayed.

Apart from root.tsx, we can also add a custom error boundary to any route.

So, let's add an error boundary again to contact detail page.

In contacts.$contactId.tsx, add the following codes above the Contact() component

export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div style={{ padding: '3rem'}}>
      <h2>Oh no! Something went wrong</h2>
      {
        isRouteErrorResponse(error) && <div>
          <div><strong>{error.status} Error</strong></div>
          <div>{error.data}</div>
          <br/>
          <Link to="/" className="buttonLink">Go back to home</Link>
        </div>
      }
    </div>
  );
}

Dont forget to import ErrorBoundary and isRouteErrorResponse from @remix-run/react as well, so the updated import code is as follows:

import { Form, isRouteErrorResponse, Link, useLoaderData, useRouteError } from "@remix-run/react";

In the loader function in contact.$contactId.tsx, there is an error thrown when the contact is not found in the Strapi API.

//...
export const loader = async ({
  params,
}: LoaderFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const contact = await getContact(params.contactId);
  if (!contact) {
    throw new Response("Not Found", { status: 404});
  }
  return { contact };
};
//...

The "Not Found" text on line 8 in the code above will be passed to error.data in the ErrorBoundary component.

Change "Not Found" to "Contact Not Found".

Save the file, then access a contact detail page using a nonexistingid. The error page will now display as follows:

Mark Contact as Favorite

In the contact detail page, contact.$contactId.tsx, we have already included a <Favorite> component.

const Favorite: FunctionComponent<{
  contact: Pick<ContactRecord, "favorite">;
}> = ({ contact }) => {
  const favorite = contact.favorite;

  return (
    <Form method="post">
      <button
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </Form>
  );
};

The <Favorite> component is functioning as a form. When you click the star icon, it sends a POST request to the contact detail page. This request contains a favorite field with a value of true or false, as specified in the button's name and value attributes.

Currently, it does nothing because we haven't handled this request. To make it functional, we need to add an action function to contact.$contactId.tsx that updates the favorite field of the contact.

For this, we will reuse the same updateContact function that we utilized in the Update Contact page.

//...
export async function action({ params, request} : ActionFunctionArgs ) {
  invariant(params.contactId, "Missing contactId param");
  const formData = await request.formData();
  return updateContact(params.contactId, {
    favorite: formData.get("favorite") === "true"
  })
}

//...

Dont forget to also import ActionFunctionArgs and updateContact.

// other imports
// ...

import { getContact, updateContact, type ContactRecord } from "../data.server";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";

//...

Save your changes, and try to favorite or unfavorite the contact. You will see that now you can star or unstar a contact.

Search Functionality

The search form has been part of the UI since the beginning of this tutorial, but its functionality hasn't been implemented yet.

Before we proceed to implement it, let’s take a closer look at the Strapi API used to fetch the contact list, specifically the GET /api/contacts endpoint.

If you access this endpoint in your browser locally at http://localhost:1337/api/contacts, you will receive a JSON response.

{
    "data": [
        {
            "id": 34,
            "documentId": "y1s5z2oqmmppu1d9n7wmelc9",
            "first": "Ryan",
            "last": "Florence",
            "avatar": "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
            "twitter": null,
            "notes": null,
            "favorite": false,
            "createdAt": "2024-12-12T08:21:41.582Z",
            "updatedAt": "2024-12-18T12:50:16.890Z",
            "publishedAt": "2024-12-18T12:50:16.896Z"
        },
       // ...other contacts
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 4
        }
    }
}

At the end of the JSON response, you’ll notice a meta field containing a pagination object.

By default, Strapi limits the response from collection list APIs, such as GET /api/contacts, to a maximum of 25 rows, as indicated by the pageSize property. Additionally, the results are sorted by the updatedAt field in ascending order.

If our contact list contains more than 25 rows, the sidebar won't display all the contacts. In real-world applications, this scenario is typically addressed by implementing pagination logic.

For simplicity, we'll modify the API query to increase the pageSize to 50. Additionally, we'll sort the contact list by the createdAt field in descending order so that the newest contacts appear at the top of the list.

After that, we will implement the search filter by keyword.

All these functionalities will be achieved by passing query parameters to the Strapi endpoints, like this:

/api/contacts?sort[0]=createdAt:desc&filters[first][$contains]=syakir&filters[last][$contains]=syakir&pagination[pageSize]=50&pagination[page]=1

As you can see, the URL is not human-readable. To simplify this process, we will use the qs library to pass the query parameters in JSON format. The library will automatically build the query string in URL format based on the JSON object we provide.

You can learn more about this in the Strapi interactive query builder.

Run the following command to install the qs library in your Remix project. Make sure you're in the remix folder in your terminal:

npm i qs
npm i @types/qs --save-dev

Go to ./data.server.ts. In the top of file, import qs.

import qs from "qs"

Then, update getContacts function.

//...
export async function getContacts(q?: string | null) {
  const query = qs.stringify({
    sort: 'createdAt:desc',
    filters: {
      $or: [
        { first: { $contains: q }},
        { last: { $contains: q }},
        { twitter: { $contains: q }},
      ]
    },
    pagination: {
      pageSize: 50,
      page: 1,
    },
  })

  try {
    const response = await fetch(STRAPI_BASE_URL + "/api/contacts?" + query)
    const json = await response.json()
    return json.data as ContactMutation[]
  } catch (err) {
    console.log(err)
  }
}
//...

In the code above, we implemented a query builder to:

Sort the contact list by the createdAt column in descending order.
Filter contacts based on keywords contained in the first, last, and twitter fields.
Set the pagination pageSize to 50.

At this stage, sorting by createdAt and increasing rows limit per page to 50 is functional. You can test it by adding a new contact, which will appear at the top of the list.

The search functionality, however, is not yet working. We still need to pass the search keyword from the search form to the getContacts function.

Go to ./root.tsx. Update the codes as follows.

import {
  Form,
  isRouteErrorResponse,
  Link,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
  useRouteError,
  useSubmit,
} from "@remix-run/react";
import { LoaderFunctionArgs, type LinksFunction } from "@remix-run/node";
import appStyleHref from './app.css?url'
import { getContacts } from "./data.server";
export const links: LinksFunction = () => [
  { rel:"stylesheet", href: appStyleHref }
]

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return { contacts, q }
};

export function ErrorBoundary() {
    // nothing changed in error boundary
}

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const submit = useSubmit();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">
          <h1>Remix Contacts</h1>
          <div>
            <Form id="search-form" role="search" onChange={(e) => submit(e.currentTarget)}>
              <input
                id="q"
                aria-label="Search contacts"
                placeholder="Search"
                type="search"
                name="q"
                defaultValue={q || ''}
              />
              <div id="search-spinner" aria-hidden hidden={true} />
            </Form>
            // nothing changed after this code            
        </div>
        //... other codes
      </body>
    </html>
  );
}

In the code above:

The loader function was updated to extract the ?q= query parameter from the URL, which contains the search keyword from the search form, and assigns it to the q variable.
The q variable was included in the return value so that it can be used to synchronize the search form field with the q query parameter in the URL.
The useSubmit hook was used in the App() component to handle submission from the search form. This hook was assigned to the onChange event handler in the search form, enabling real-time submission of the search request when the search input changes.

Now, try the search input—it should work in real-time!

Add loading state to Search

When user internet connection is slow, you'll notice that there will be some delay or lag in search funtionality. You can simulate this by changing the internet connection speed to 3G in Devtools > Network Tab in your browser

To handle the waiting state for the Strapi API to respond, we'll add the loading state to search form.

We will also refactor a bit on how we submit the search form request. Our search functionality is creating a lot of history stack because it push a new route in every keystroke, when we submitted the form.

So, we will use replace method to solve this.

In root.tsx, update the App component function.

// add new import `useNavigation`
import {
  Form,
  isRouteErrorResponse,
  Link,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
  useNavigation,
  useRouteError,
  useSubmit,
} from "@remix-run/react";
//.. other imports

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // nothing changed here
}

export function ErrorBoundary() {
    // nothing changed here
}

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const submit = useSubmit();
  const navigation = useNavigation();
  const searching = navigation.location && new URLSearchParams(navigation.location.search).has("q");

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">
          <h1>Remix Contacts</h1>
          <div>
            <Form id="search-form" role="search" onChange={(e) => {
              const isFirstSearch = q === null;
              submit(e.currentTarget, {
                replace: !isFirstSearch,
              });
            }}>
              <input
                id="q"
                className={searching ? 'loading' : ''}
                aria-label="Search contacts"
                placeholder="Search" 
                type="search"
                name="q"
                defaultValue={q || ''}
              />
              <div id="search-spinner" aria-hidden hidden={!searching} />
            </Form>
            <Link to="contacts/create" className="buttonLink">Create</Link>
          </div>
          //... other codes, nothing changed here
        </div>
          //... other codes, nothing changed here
      </body>
    </html>
  );
}

In the code above:

useNavigation was imported to access the navigation state, which will be used to evaluate a loading state.
A searching variable was declared to evaluate the presence of a query parameter and the navigation state. This variable is used to determine if the search is currently loading.
The onChange function for the search form was updated to ensure that the submit function replaces the existing browser history stack instead of pushing a new one with each keystroke.
The searching variable was applied to conditionally add a loading class to the input field and to toggle the visibility of the search spinner.

Save the changes and test the search feature again on a slow connection to observe the loading state in action.

Project Review and Challenges

We have implemented a fully-functional contact app with Remix as Front-end and Strapi as backend. You can create, update, delete and search the contact data from strapi directly in our app.

But, the project is far from perfect. There is always some room for improvement

In a real-world app, you might want to optimize your app for better user experience. So, i want you to implement these challenges to optimize our contact app.

The answer for these challenges are still included in project code in Github, but i want you to be more creative and solve the problem on your own.

I will provide some hints and related links to the official remix documentation

Implement debounce in search functionality

In the current search contact functionality, the app makes an API call to Strapi each time the user types a letter in the search input. For instance, when searching for the name Jane, the app will actually search for J, Ja, Jan, and Jane.

In a real-world application, this behavior can lead to unnecessary operations and resource wastage.

Your task is to optimize this by ensuring the search form only hits the Strapi API endpoint after the user stops typing in the search input, rather than on every keystroke.

Hint:

Refactor the search form's onChange function to implement a JavaScript debounce mechanism.

Highlight Selected Contact in sidebar

When a contact is selected and the contact detail page is opened, the sidebar contact list does not indicate which contact is currently selected.

Your task is to highlight the selected contact. We already have the active class for the selected contact link and the pending class for transitions. Apply these two classes conditionally to the contact link.

Hint:

Use the Remix NavLink component to access the active and pending states.

Using useFetcher for Favorite / Unfavorite Contact

Currently, when you click to favorite or unfavorite a contact, the app performs a form submission and refreshes the page.

Your task is to prevent the page from reloading or submitting the form natively by using Remix's useFetcher in the favorite form component.

Link:

useFetcher documentation

Handling Error from Backend

We are already handling errors using the ErrorBoundary component. However, the error messages and statuses are either default Remix messages or those defined in the action function.

Your task is to handle errors originating from Strapi and display the Strapi error message in the ErrorBoundary component.

Hint:

Throw the error inside the catch block in the function located in ./data/server. Include the Strapi error message in your error object.

Link:

Remix Error Handling Documentation

Project codes

You can find complete project codes in this link: Github repository.

Conclusion

We have successfully built a fully functional contact management app using Remix for the front end and Strapi headless CMS as the backend. The app enables users to create, update, delete, and search data in real-time, providing a solid foundation for your future project.

Throughout the development process, we implemented Remix key features such as dynamic route handling, state management, error boundaries, and API integration.

Next, you should keep practicing what you have learn here by creating your own project, and improvise it. Make the official documentation your friend.

Follow the Strapi blog for more exciting tutorials and blog posts like this

11+ Best Open-source Web Analytics, Alternatives to Google Analytics 🚀

Syakir — Mon, 18 Nov 2024 11:44:39 +0000

Hi Guys,

Today i'm going to start a listicle series of open source tools alternatives to popular software.

The list is basically a mirror of my new website AlternateOSS. It's a directory of open source alternatives to popular software.

Today, i will share about Web analytics tools, alternatives to google analytics. The original list is here https://alternateoss.com/category/web-analytics/open-source/. You can explore the tools there for better navigation 🌟

Web Analytics focuses on tracking and analyzing website visitor behavior, including page views, traffic sources, user flows, and conversion metrics. It helps businesses understand how users interact with their website, optimize user experience, and improve marketing performance through tools like Google Analytics.

The list below is a curated list of open source only web analytics tools, ranked based on relevancy and feature completeness as a web analytics tool.

1. Matomo

Take control of your website's analytics with a powerful platform that ensures complete data ownership and respects user privacy without compromise

Matomo is a robust web analytics solution designed to give users full control over their data while providing insightful analytics. Unlike traditional platforms, Matomo allows for 100% data ownership, ensuring that all user interactions and metrics are stored securely and privately. Its user-friendly interface simplifies navigation, making it easy for anyone to access the information they need to enhance website performance.

Matomo is best used for

E-commerce Websites: Ideal for online stores needing detailed insights into customer behavior.
Privacy-Conscious Organizations: Suitable for businesses that prioritize ethical data practices.
Content Publishers: Great for blogs and news sites looking to track audience engagement effectively.

Category: Web Analytics

Github (⭐ 19.9k stars) Home page 📑

2. Plausible

Experience a seamless transition to user-friendly analytics that respect privacy rights while delivering essential insights for your website

Plausible is a lightweight and open-source web analytics tool designed to provide clear insights without compromising user privacy. With a focus on simplicity, it allows users to monitor site traffic and key metrics on a single page, eliminating the clutter often associated with traditional analytics platforms. Its cookie-free approach ensures compliance with privacy regulations such as GDPR and CCPA, making it an ideal choice for those prioritizing data protection.

Plausible is best used for

Small Business Websites: Perfect for small enterprises needing straightforward analytics without complexity.
Privacy-Conscious Organizations: Ideal for businesses that prioritize user privacy in their data collection practices.
Marketing Campaign Analysis: Useful for tracking the effectiveness of various marketing initiatives through UTM parameters.

Category: Web Analytics

Github (⭐ 20.5k stars) Home page 📑

3. Umami

Collect and analyze your website data effortlessly while ensuring compliance with privacy laws and maintaining user anonymity

Umami is a straightforward web analytics platform designed to simplify the process of collecting and interpreting web data. It focuses on essential metrics, allowing users to gain insights without the complexity of traditional analytics tools. By prioritizing visitor privacy, Umami ensures that all collected data is anonymized, making it impossible to identify individual users.

Umami is best used for

Small Business Analytics: Ideal for small businesses needing simple yet effective web tracking.
Privacy-Conscious Websites: Suitable for organizations prioritizing user privacy in their data practices.
Self-Hosted Solutions: Great for tech-savvy users looking to maintain full control over their analytics.

Category: Web Analytics

Github (⭐ 22.9k stars) Home page 📑

4. Fathom Analytics

Experience insightful analytics that prioritize user privacy and ease of use without the complexity of traditional tools

Fathom provides a straightforward analytics solution that simplifies tracking website performance while ensuring user privacy. It allows users to set up a single line of code on their website, enabling real-time data collection without the need for extensive technical knowledge. The platform blocks bots and spam traffic, ensuring that only genuine visitor data is captured, which enhances the accuracy of insights.

Fathom Analytics is best used for

Website performance analysis: Monitor traffic and user behavior on websites.
Campaign tracking: Measure the effectiveness of marketing campaigns.
User interaction insights: Understand how users engage with site elements.

Category: Web Analytics

Github (⭐ 7.7k stars) Home page 📑

5. Openpanel

Experience a new standard in data analytics with a solution that prioritizes clarity, affordability, and user privacy while delivering comprehensive insights

Openpanel is an innovative analytics platform designed to provide users with a seamless experience in tracking and understanding their data. By merging the robust capabilities of Mixpanel with the simplicity of Plausible, it offers a unique approach to analytics that emphasizes ease of use without sacrificing depth. Users can access real-time event tracking, allowing them to monitor user interactions as they happen and gain immediate insights into their applications or websites.

Openpanel is best used for

Startups and Small Businesses: Ideal for teams needing an affordable yet powerful analytics solution.
Mobile App Development: Perfect for developers looking to integrate analytics into their React Native apps.
Data-Driven Decision Making: Great for organizations aiming to leverage user insights for strategic improvements.

Category: Web Analytics,Product Analytics

Github (⭐ 3.1k stars) Home page 📑

6. Open Web Analytics

Gain insights into how visitors engage with your websites and applications while maintaining complete control over your data

Open Web Analytics (OWA) is a free, open-source web analytics tool that enables users to track and analyze visitor behavior on their websites and applications. Designed for flexibility, OWA allows you to run the software under your own domain, ensuring that you maintain full ownership of your data. Its customizable framework makes it easy to adapt the tool to meet specific analytical needs.

Open Web Analytics is best used for

Website Performance Tracking: Ideal for businesses needing detailed insights into user behavior.
Custom Analytics Solutions: Perfect for developers looking to tailor analytics to specific requirements.
Privacy-Conscious Organizations: Suitable for those prioritizing data protection and compliance.

Category: Web Analytics

Github (⭐ 2.5k stars) Home page 📑

7. Ackee

Experience a powerful, privacy-focused analytics solution that runs on your own server, ensuring complete control over your data

Ackee is an open-source analytics platform designed for users who value privacy and simplicity. It operates on your own server, allowing you to track website traffic without the use of cookies or unique user identifiers, thereby ensuring data anonymization. The interface is minimalistic and user-friendly, providing essential insights like views, referrers, and visit durations without overwhelming users with unnecessary complexity.

Ackee is best used for

Website traffic analysis: Monitor visitor behavior and engagement on personal or business websites.
Privacy-conscious analytics: For organizations that prioritize user privacy in their data collection practices.
Multi-domain management: Track performance across multiple sites or applications seamlessly.

Category: Web Analytics

Github (⭐ 4.3k stars) Home page 📑

8. Pirsch

Discover a cookie-free, privacy-focused analytics solution designed to provide valuable insights while ensuring compliance with data protection regulations

Pirsch is a web analytics platform that allows users to track website performance without the use of cookies or personal data collection. It offers a straightforward setup process, enabling users to integrate it into their sites quickly with minimal technical expertise. The platform is designed with privacy at its core, ensuring compliance with GDPR, CCPA, and other regulations while providing real-time data on user interactions and website performance.

Pirsch is best used for

Website performance monitoring: Analyze traffic patterns and user behavior on websites.
Privacy-focused analytics: For organizations prioritizing compliance with data protection laws.
Collaborative analytics management: Enable teams to work together on data insights efficiently.

Category: Web Analytics

Github (⭐ 921 stars) Home page 📑

9. Litlyx

Unlock powerful insights into user behavior and website performance while ensuring compliance with data protection regulations

Litlyx is a cutting-edge analytics platform that prioritizes user privacy by offering cookie-less tracking and full GDPR compliance. With a simple setup that requires only a few lines of code, users can quickly start monitoring web analytics, conversion funnels, and custom events without the complexity often associated with traditional tools. The platform is designed for developers and marketers alike, providing robust cybersecurity measures and AI-driven insights to enhance decision-making.

Litlyx is best used for

Web performance tracking: Monitor and analyze website traffic and user behavior.
Conversion optimization: Identify and enhance conversion funnels for better results.
Privacy-focused analytics: For organizations committed to protecting user data.

Category: Web Analytics

Github (⭐ 768 stars) Home page 📑

10. Offen

Experience insightful web analytics that prioritize user privacy and compliance while providing actionable data for decision-making

Offen is an innovative analytics tool designed to help businesses track user interactions without compromising privacy. By utilizing a cookie-less approach, it ensures compliance with regulations like GDPR while offering a clear and intuitive interface for monitoring website performance. Users can quickly set up tracking with minimal technical knowledge, enabling them to focus on analyzing data rather than managing complex configurations.

Offen is best used for

Website performance monitoring: Analyze user behavior and traffic patterns effectively.
Privacy-centric analytics: Ideal for organizations focusing on user data protection.
Collaborative data analysis: Enable teams to work together on insights and strategies.

Category: Web Analytics

Github (⭐ 877 stars) Home page 📑

11. Posthog

Unlock insights and enhance your product development with a comprehensive suite of analytics tools designed to empower teams in understanding user behavior and driving growth

PostHog is a powerful platform designed for product analytics, enabling teams to analyze user behavior through features like funnels, session replays, and retention tracking. It provides a cohesive environment for capturing and interpreting data, allowing businesses to make informed decisions based on user interactions and trends. With its open-source foundation, PostHog offers flexibility and adaptability for various product needs.

Posthog is best used for

Startup Growth: Ideal for early-stage companies needing robust analytics without high costs.
Feature Development: Use feature flags to test new functionalities safely.
User Feedback Collection: Conduct in-app surveys to understand user needs better.

Category: Product Analytics, Web Analytics

Github (⭐ 22.0k stars) Home page 📑

12. Countly

Unlock valuable insights into user behavior across your digital products while ensuring data privacy and compliance with regulations

Countly is a versatile product analytics solution designed to track and analyze user interactions across mobile, web, and desktop applications. By providing detailed insights into user journeys, Countly helps businesses understand how users engage with their products from acquisition to advocacy. Its privacy-centric approach ensures that all data is collected ethically, allowing organizations to comply with regulations such as GDPR while still gaining actionable insights.

Countly is best used for

User Engagement Strategies: Useful for marketing teams looking to enhance user retention through targeted notifications.
Mobile App Development: Ideal for developers seeking detailed insights into app performance and user engagement.
Product Improvement Initiatives: Great for product managers aiming to prioritize features based on user feedback and behavior.

Category: Product Analytics, Web Analytics

Github (⭐ 5.6k stars) Home page 📑

13. Aptabase

Aptabase offers seamless data collection and insightful analytics while ensuring complete user anonymity and compliance with privacy regulations

Aptabase is an innovative analytics platform that provides an open-source alternative to traditional tracking tools like Google Firebase Analytics. It enables developers to implement analytics quickly, creating a visually appealing dashboard in seconds. By focusing on anonymized data collection, Aptabase enhances privacy and reduces compliance burdens.

Aptabase is best used for

Mobile App Development: Ideal for developers seeking simple yet effective analytics solutions.
Privacy-Conscious Projects: Perfect for organizations prioritizing user data protection.
Startup Growth: Suitable for startups needing scalable analytics without upfront costs.

Category: Product Analytics, Web Analytics

Github (⭐ 959 stars) Home page 📑

Do you know other open source web analytics tools worth mentioning here? Don't hesitate to submit it in the comment. I might also list it to AlternateOSS for free.

Thanks. Hope the list helps. Stay tune next week 🚀

I Built AlternateOSS, A Directory of Free, Open-source Alternatives to Popular Software 🚀🔥

Syakir — Wed, 06 Nov 2024 14:12:07 +0000

Hey guys 👋, Syakir here!

Its been a while since my last post. I skipped my weekly blog posts because i have been busy working on a new project since a couple weeks ago. And now i want to share it with you.

I'm currently building AlternateOSS, a website directory that sharing free, open-source alternatives to popular softwares.

I am interested in the open source world, and started looking for open source alternatives for the tools i have used. Then, im thinking about creating directory for someone like me. I found similar existing projects on the internet, but i want to do it in more organized, and relevancy-oriented list.

I collected 100+ softwares so far and share them with category organization.

The Stacks

The stacks i used are simple. For now, it's fully static. I might convert them full-stack project later when the project become too big.

✅ Astro
✅ TailwindCSS
✅ Shadcn / Radix
✅ Markdown
✅ Fully-static, NO Database
✅ Cloudflare pages

Highlighted Features

Some hightlighted features that i think its cool, and you might interested to implement them to your project as well.

Smooth Navigation with View Transition

The View Transition API enables smooth animated transitions between pages/states in web applications.

It captures the "before" and "after" states of elements
Automatically creates animations between these states
Works with both same-origin navigations and DOM updates

It makes the website really smooth. If it implemented in static website, it feel like it has no loading at all.

I implemented it easily with Astro View Transition. I just need to add a <ViewTransition /> tag and transition:name directives in every element i want to animate.

*Note that the View Transition API is only working on Chromium based browsers. It currently not supported by Firefox.

Static, Instant Search

I build a fully static instant search with:

Astro Static Endpoint, where i store all search data in formatted json array: https://alternateoss.com/api/search.json
LocalStorage, the search.json will only loaded once, and then stored to local storage, until the new version is available. From there, i simple use javascript array .filter method for search
cmdk & Shadcn Command for search input UI

Of course, This static instant search feature is not scalable. But, with the help of ChatGPT, i calculated that this method will still reliable until i reach 10k rows in search.json, with file size around 2MD.

It will takes years to reach that number if i just input the softwares manually

Ranked Alternatives Based on Relevancy & Feature completeness

Last, but not least. This might be the important feature that distinguish AlternateOSS with other similar project. I ranked every tools not based on its github stars or popularity, but mainly based on use cases / category relevancy and manual review for feature completeness / tool quality.

For instance, we have some Google Analytics alternatives:

Posthog: Category -> Product Analytics, Web analytics
Umami: Category -> Web analytics
Plausible: Category -> Web analytics
Matomo: Category -> Web analytics

Google analytics itself fall under 'Web analytics' category.
The alternatives rank will put the main tools with main category Web Analytics first before other categories.

So, in this case, Posthog will rank lower even though it has more complete features than other tools in the list. While Umami, Plausible, and Matomo will be ranked based on manual review by myself.

What do you think about this project?

If you have any feedback, please dont hesitate to put it in the comment below.

Thanks, happy coding!

7 Best SaaS Boilerplates to Lauch Your SaaS Startup Faster 🚀

Syakir — Thu, 03 Oct 2024 10:28:20 +0000

Checkout the original page to sort the boilerplate based rating, popularity & price ✨

Hi there 👋. I'm Syakir, a Front-end engineer.

In this page, i curated premium SaaS boilerplates from various vendors with top features and design to help you choose the right template for your Saas startup.

I browsed and researched these boilerplates, then summarize what they offer, what stacks do they use, and rate them so you can quickly decide your choice.

Each rating is my personal opinion after went through all of them. I rated them based the feature completeness, unique features, developer friendly (based on docs) and overall design.

The links in this list are affiliate links, meaning that I may earn a small commission at no extra cost to you. This supports my work in providing curated resources like this one.

I hope this list helps and save your time to research them.

Cheers 🥂.

1. Supastarter By Jonathan Wilke

💲 Price: $299 , ⭐ Rating: 4.87/5 (Editor rating)

🍔 Features:

Feature rich, multi-stack starterkit: Next.js, Nuxt & SvelteKit
Supastarter setup: Landing Page, Blog, Docs, Analytics, Newsletter, Auth, Dashboard, Payments, Transaction Emails, Multilanguage, Multitenancy, Database + ORM, and AI Adapter for your SaaS
Unique features: Multitenancy, AI Adapter
Multiple stack options for each feature
Exclusive discord server for support, updates and community
Monorepo & Modular architecture allows you to easily add and remove features

Get it here 🚀

2. Saasrock By Alexandro Martinez

💲 Price: $149 , ⭐ Rating: 4.85/5 (Editor rating)

🍔 Features:

25+ Pre-built essential SaaS features: Admin dashboard, App portal, Stripe Subscriptions and Payments, Blog, Page Builder, Knowledge Base, Workflows, Analytics, Internationalization, Entity Builder, Email Marketing, Notifications, Onboarding, Feature Flags, Cache and Metrics.
Unique features: Page builder, Workflows, Onboarding, Feature flags, Cache and metrics
An all in one SaaS Starter kit
30+ Ready to use components & page blocks

Get it here 🚀

3. Saasykit By Ahmad Mas

💲 Price: $199 , ⭐ Rating: 4.83/5 (Editor rating)

🍔 Features:

Available in 2 repos: Saasykit and Saasykit tenancy
SaaSykit setup: Landing Pages, Payments, Blog, SEO, Auth, Dashboard, Analytics, Product Roadmap, Emails, Database, Multitenancy, Invoice generators, Transaction report, and UI components for your SaaS
Unique features: Multitenancy, Invoice generator, Comprehensive product pricing (subscripion, one-time payment, discount system), and transaction report
Developer friendly with Coding best practices
Discord support and lifetime updates

Get it here 🚀

4. Shipped By Luca Restagno

💲 Price: $157 , ⭐ Rating: 4.8/5 (Editor rating)

🍔 Features:

Shipped setup: Landing Pages, Blog, SEO, Auth, Dashboard, Payments, Emails, Database with Prisma ORM, Analytics, Waiting list, pre-sale page, affiliate program page, Chrome extension, Customer support chat, and UI Components for your SaaS
Unique features: Waiting list & Presale page, Affiliate program page, Chrome extension
2 UI Libraries for UI components
Discord community and lifetime updates

Get it here 🚀

5. Larafast By Serg

💲 Price: $199 , ⭐ Rating: 4.75/5 (Editor rating)

🍔 Features:

Available in TALL (Tailwind, Alpine.js, Laravel, Livewire) and VILT (Vue, Inertia, Laravel, Tailwind)
Larafast setup: Landing Page, Blog, SEO, Auth, Dashboard, Payments, Emails, Database, Waiting list page, and Open AI Adapter for your SaaS
Unique features: Open AI Integration
30+ DaisyUI Theme

Get it here 🚀

6. ShipFast By [Marc Lou][https://x.com/marc_louvion]

💲 Price: $169 , ⭐ Rating: 4.7/5 (Editor rating)

🍔 Features:

An exclusive community of 4.5k+ makers
19+ Ready to use components / blocks
ShipFast setup: SEO, Database, Emails, Payments, Auth, Customer Support, Error handling, and Analytics for your SaaS
Available in Typescript & Javascript version
Available in App & Page router

Get it here 🚀

7. SaaSBold By Musharof

💲 Price: $149 , ⭐ Rating: 4.7/5 (Editor rating)

🍔 Features:

SaaSBold setup: Landing Pages, Blog, SEO, Auth, Dashboard, Analytics, Payments, Emails, Database, Internalization, AI Integration, and UI components for your SaaS
Unique features: AI Integration, User Dashboard, Design & style guide in Figma
Discord support and lifetime updates

Get it here 🚀

How do you manage tasks when you have a lot of todos?

Syakir — Sat, 28 Sep 2024 05:26:25 +0000

Hi guys,

I'm struggling how to manage my tasks since a couple weeks ago. Its one of a reason i dont post new article recently.

Please share your experiences or opinions how do you manage your tasks when you have a lot of todos?

Thank you.

Build or Not Build?

Syakir — Fri, 20 Sep 2024 04:40:26 +0000

Hi guys,

So, yesterday, i did a keyword research for my next content for my blog, and i found a low competition keyword with high search volumes + a lot of sub keywords with relatively high search volumes as well.

Then, instead of making content from it, i'm thinking to build an entire website for this keyword. It's possible to build it as a full static website.

So, i research further.

I found out that there are already some websites with exact contents and very similar features that i want to build. 1 of these websites has really nice UX and went viral. But its still young website (less than a year old).

So, my question is, should i build this website?
I feel demotivated when seeing all these existing websites.

I really appreciate any suggestion / comment.

Thanks

17 Best Free React Admin Template 2024 to Speed up Your Web App Development 🚀

Syakir — Thu, 12 Sep 2024 12:44:31 +0000

Checkout the original page for template sorting and filtering feature ✨

Hi there 👋. I'm Syakir, a Front-end engineer.

Last week, i shared a post of curated premium react admin templates.

Today, i want to share the free version of it.

I browsed and researched these templates, then summarize what they offer, what stacks do they use, and rate them so you can quickly decide your choice.

All of them are using React 18+, and are latest updated this year. So rest assured, i don't list an outdated template.

Some templates also provide the pro version, which i linked with my affiliate links. I may earn a small commission at no extra cost to you if you decide to buy the template from this link. This supports my work in providing curated resources like this one.

I hope you find what you're looking for, and speed up your app development process with any template you choose here.

Cheers 🥂.