Technologies used
- Remix - React SSR Framework
- TailwindCSS - Styling
- MDX - Markdown Syntax Support + JSX
- Framer - Animation Library
- React Three - 3D Rendering
- Zod - Runtime Type Validation Library
- ESLint - Linting
- Prettier - Code Formatter
- fly.io - Hosting
- namecheap - Domain Name + DNS Configuration
Motivation
During my time at Indeed, I was mainly working on Frontend development work. I had the pleasure of working with a skilled UX Engineer who mentored me, and he was always able to answer any questions I had about Frontend technologies.
He introduced my to Epic React, an awesome course developed by Kent C Dodds. I started to follow Kent's development work and realize he was a strong proponent of a new React framework called Remix.
I decided to take the opportunity to try both Remix and Nextjs to develop my personal website. The Nextjs version is hosted on Vercel, and the current one is developed using Remix.
My goal is to make this website highly personalized, where I develop all UI components myself from scratch, try out new interesting Frontend technologies, and document my thoughts and learnings 😉
Inspiration
The website's design is constantly changing. I do enjoy browsing through other people's website to look out for certain quirks in their design. It could be nifty user experience and features such as animations or page layouts. If I like it, I will try my best to adopt and make my version of it!
Here are some sites that inspired me so far:
Why Remix?
In my opinion, I felt that Remix provided a greater developer experience. Here are the reasons:
1. Local development
Remix is faster, way faster than Nextjs, in terms of starting especially so on
my Windows OS workstation. The average startup time for npm run dev is 5s!
Whereas Nextjs might take 15 seconds or more, and this delay surfaces on each change that I make during local development, as well as slower navigation within the web app.
However, upon some research, it turns out that this might be an ongoing issue with the app router introduced in Nextjs 13, which supports React Server Components (RSC). Page router is fine apparently, but still feels slow on Windows.
2. Intuitive routing
Remix is built by the team that also developed React Router, it is built on top of it and comes shipped with all of React Router's features. All hooks and components from the react-router-dom library is re-exported in Remix.
Remix provides the ease of creating routes. For instance, we have a blog page at {BASE_URL}/blog:
- blog.tsx
- this is known as the layout route, you can add an Outlet component to render matching child route components, creating nested routes
- matches all routes with /blog, however content rendered in Outlet component depends on the matched child route (the corresponding matched /blog/child_route._index.tsx will be rendered)
- blog._index.tsx
- this is known as the index route, which is the default route component rendered when the parent route is matched exactly (i.e /blog/)
- blog.$slug.tsx
- this is known as a dynamic route, which will match any child routes of blog, and slug will represent the dynamic params of the current URL matched
These are the basic details of the types of routes Remix offers, for detailed readings, check out the following Remix articles:
3. Route-based SSR with Loaders and Actions
In Remix, route components are written together with server logic operations. Server logic operations are achieved via Loaders and Actions.
- Loaders: Perform the initial GET request on the server
- Actions: Used to perform PUT, POST and DELETE operations on the server
It is really cool to adopt this new approach, where server side logic and client UI rendering are contained within the same file. Remix's approach is route-based server side rendering, where every URL route for UI is also an exposed API route in the server.
4. Native support for MDX
I was impressed when I integrated MDX into my Remix application. It just worked straight out of the box, and can be used as a route component too!
However, there is a draw back as every MDX component has to be explicitly imported and rendered in a JSX component. This will be a big issue as the amount of MDX content grows, and if the MDX content is not fetched locally too, but from a remote server. This is why I used MDX bundler in my application, and I will share how I set it up soon too!
Nonetheless, still very cool that Remix supports MDX out of the box 👍
Possible Improvements
- MDX styling for code snippets and blog components
- CSS animations
- Implement searching/ sorting functionalities for blog posts