This post will be the first part of the series on how I will create the entire application. So I will start with a boring introduction about the motivation for this series.
I have chosen Supabase to store my data as it allows me to focus on the Frontend part due to Supabase's easy-to-use API. You can use any provider of your choice, or you can even create your custom backend.
This part of the series will focus on how to use Remix for CRUD operations.
Basic overview of the app
The Vocabulary section will consist of lists of words that are publicly available and a protected admin route to perform a CRUD operation.
Here are the properties we need for each word:
name: the word itself
type: the type of the word (noun, verb, adjective, etc.)
definitions: an array of definitions
sentences: an array of how I would use the word in a sentence
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import{LiveReload,Meta,Outlet,Scripts,ScrollRestoration,useCatch}from"remix";exportdefaultfunctionApp(){return(<Document><Layout><Outlet/></Layout></Document>);}functionDocument({ children, title,}:{ children:React.ReactNode; title?:string;}){return(<htmllang="en"><head><metacharSet="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1"/>{title ?<title>{title}</title>:null}<Meta/></head><body>{children}<ScrollRestoration/><Scripts/>{process.env.NODE_ENV==="development"&&<LiveReload/>}</body></html>);}functionLayout({children}:React.PropsWithChildren<{}>){return(<article>{children}</article>);}exportfunctionCatchBoundary(){let caught =useCatch();let message;switch(caught.status){case404: message =<p>This is a custom error message for 404 pages</p>break;// You can customize the behavior for other status codesdefault:thrownewError(caught.data|| caught.statusText);}return(<Documenttitle={`${caught.status}${caught.statusText}`}><Layout><h1>{caught.status}: {caught.statusText}</h1>{message}</Layout></Document>);}
Re-create file index.tsx file under app/routes folder.
As I plan to create multiple mini-apps in this project, I'll redirect / to /words, for now.
The code below will ensure we don't need to manually navigate to /words every time we open the root page.
If you are not using Supabase, replace the Supabase API calls with your choice.
fetch list of words using Remix's loader
app/routes/words.tsx
12345678910111213importtype{LoaderFunction}from"remix";import{ supabase }from"~/libs/supabase-client";import{Word}from"~/models/word";exportconst loader:LoaderFunction=async()=>{const{ data: words }=await supabase.from<Word>("words").select("id,name,type");// We can pick and choose what we want to display// This can solve the issue of over-fetching or under-fetchingreturn words;};
Create a React component to display the list of words
app/routes/words.tsx
123456789101112131415161718192021222324import{ useLoaderData,Link}from"remix";// export const loader ...exportdefaultfunctionIndex(){const words =useLoaderData<Word[]>();return(<div><h1>English words I learned</h1><ul>{words.map((word)=>(<likey={word.id}><div><Linkto={`/words/${word.id}`}>{word.name} | {word.type}</Link></div></li>))}</ul></div>);}
The code above will fetch the data from Supabase and display it in a list.
Create the word details page
Create a file named $id.tsx under app/routes/words folder.
The image below shows that it still won't show even after creating the /words/[id] route.
Adding a router Outlet
We need to add an Outlet inside our Words Index component to fix the above issue.
app/routes/words.tsx
1234567891011121314151617181920212223242526import{/*other imports*/,Outlet}from"remix";// export const loader ...exportdefaultfunctionIndex(){const words =useLoaderData<Word[]>();return(<div><h1>English words I learned</h1>{/* To put the list and outlet side by side */}<divstyle={{ display:"flex", justifyContent:"space-between"}}><ul>{words.map((word)=>(<likey={word.id}><Linkto={`/words/${word.id}`}>{word.name} | {word.type}</Link></li>))}</ul><Outlet/>{/* <-- this is where $id.tsx will render */}</div></div>);}
After clicking on a word, $id.tsx route will render on where we put the Outlet.
Delete a word
Since we're already on the /words/$id page, let's proceed with deletion first
The image shows a message that we did not define any action to handle the submit event.
Delete the word in the database using Remix's action
app/routes/words/$id.tsx
1234567891011121314151617import{/*other imports*/, redirect}from"remix";importtype{/*other imports*/,ActionFunction}from"remix";exportconst action:ActionFunction=async({ request, params })=>{const formData =await request.formData();if(formData.get("_method")==="delete"){await supabase.from<Word>("words").delete().eq("id", params.idasstring);returnredirect("/words");}};// ...rest of the code
After we click on the delete button, the word hello will be deleted from the database, and the page will redirect to the /words page.
Explanation:
We created a form with a hidden input field named _method with value delete.
When the submit button is clicked, the action handler will trigger in the server.
Inside the action handler, we check if the _method is delete.
If it is, we delete the word from the database.
Redirect to /words route.
Why go through all this trouble?
It just happens that this approach does not need any JavaScript to run(try it on your browser).
This means our app is interactive even before we load the JavaScript from the server.
Create a new word entry
Now we don't have anything on the list; let's create the route to handle creation.
Create a button in the /words route that will navigate to /words/add
We can use the useNavigate hook here, But for this blog, I'll show you how we can perform the entire CRUD operations without using any JavaScript on the client-side.
app/routes/words.tsx
1234567891011121314151617import{/*other imports*/Form}from"remix";// export const loader ...exportdefaultfunctionIndex(){// const words ...return(<div><h1>English words I learned</h1><Formmethod="get"action={"/words/add"}><buttontype="submit">Add new word</button></Form>{/* previous contents */}</div> );}
Create the add new word route
To avoid a 404 page, let's create the /words/add route.
After clicking on the Submit button, the word will be added to the database, and the page will redirect to the /words/$id page.
I'm not sure if you noticed, but we haven't used any JavaScript code on the Frontend, yet it could complete the intended task.
We only used an HTML form as it was initially used to handle validations and perform the submission.
This is what I like about Remix; we can focus on the web fundamentals to become a better Web developer instead of making some workarounds.
Edit a word entry
Now, to handle the missing operation in our CRUD app, let's add the ability to modify an existing entry.
Create a file named edit.$id.tsx under app/routes/words
When we add a . between words, it will transform to / in the URL.
The above example will result in words/edit/[id].
Create a form for editing the word
Refactoring
Since the edit form is very similar to the add form, we can reuse the same form with additional checks to determine if we are adding or editing.
That's a lot of code; however, we can reap the benefits of simplifying the code in add.tsx and edit.$id.tsx.
Update routes/words/add.tsx
app/routes/words/add.tsx
12345// other code...exportdefaultfunctionAddWord(){return<WordForm/>;}
Create routes/words/edit.$id.tsx
app/routes/words/edit.$id.tsx
123456789import{ useLoaderData }from"remix";importWordFormfrom"~/components/WordForm";import{Word}from"~/models/word";exportdefaultfunctionEditWord(){const data =useLoaderData<Word>();return<WordFormword={data}/>;}
Now, we have a reusable form. If we have to make a style change, we can update the WordForm component, reflecting the change on both routes.
NOTE: I'm extracting everything to WordForm.tsx since it is applicable in my use case.
Create a loader for the word details
In order for the edit form to be populated with the existing data, we need to create a loader.
Create a button in the /words/$id page to edit a word
app/routes/words/$id.tsx
1234567891011121314// ...exportdefaultfunctionWord(){// const word ...return(<div>{/* other code... */}<Formmethod="get"action={`/words/edit/${word.id}`}><buttontype="submit">Edit</button></Form></div>);}
The image below shows the pre-filled form depending on the content of id in the URL.
Add an action handler
To handle the form submission, we need to add an action handler.
After modifying some fields and clicking the submit button, the page will redirect to the /words/$id page with the updated data.
Add indicator for state transition
By utilizing the useTransition hook, we can add or change something on the screen depending on the route's state.
.tsx
123456import{" useTransition } from "remix";"// Somewhere in the route's compnentlet transition =useTransition();<div>... State: {transition.state}</div>
We can replace the text states below with global loading indicator, local component spinner, disabling elements, etc.
Extra Demo: CRUD operations without JavaScript
Here's proof that we can perform the CRUD operations without using any JavaScript on the client-side(as indicated by errors in the network tab).
Take note that I also simulated a slower network connection, yet the performance is not that terrible.
I'm not saying we should not use JavaScript on the client-side, as JavaScript can do some cool stuff to help with user experience.
For instance, you might notice that the states were stuck in idle.
Conclusion
So far, I'm having a positive experience with the framework. Of course, I'm still learning, but I'm enjoying the process.
I'm starting to agree with the Remix team said that if we become better with Remix, we become better with the Web.
Working with Remix allows me to refresh my HTML skills that are almost diminishing due to too much dependency on JavaScript.
I'm looking forward to using more of their features in the next iteration of this app.
