This take home assignment was used to demonstrate loading, searching, and linking to data. The included clients.json file is an example data store. Setting up a real database would be a good next step.
I chose Remix as my starting environment for the following reasons:
- It's a great way to build server rendered React apps. Support for other frameworks are coming soon (Vue, Svelte, etc.)
- Pages render very fast using Remix. You will notice I use prefetch="intent" to preload the data for the client pages. This achieves instant loads for the client routes.
- Searching is all handled through the querystring, allowing for bookmarking and sharing of searches easily.
- Best of all, you can disable JavaScript and this app still works! Just use the enter key when searching if you have JS disabled.
From your terminal:
npm run devThis starts your app in development mode, rebuilding assets on file changes.
First, build your app for production:
npm run buildThen run the app in production mode:
npm startNow you'll need to pick a host to deploy it to.
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of remix build
build/public/build/
When you ran npx create-remix@latest there were a few choices for hosting. You can run that again to create a new project, then copy over your app/ folder to the new project that's pre-configured for your target server.
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app