The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Related tags

Learning resource fakebooks-remix
Overview

Remix Fakebooks App

This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an arbitrary delay of 40-100ms whenever accessing "invoice data" to simulate querying a real database.

This inteded to be used to compare from a fairly standard client-rendered app. The sister repo to this one can be found at kentcdodds/fakebooks-cra.

The main objective of this comparison (currently) is to demonstrate the UX and DX difference between the two approaches in regards to data loading. Test out the initial page load as well as switching between different pages.

Please do dig into the code and compare the level of complexity. Keep in mind that a CRA app is only half the story. You need a backend. This Remix app's backend is used to handle that for the CRA version.

Another thing to keep in mind is that this app doesn't handle mutations (yet?). Adding mutation support would drastically complicate the CRA implementation, but would be a pretty simple thing to handle for Remix.

You might also like...

New Discord.JS v14 Slash and Prefix Commands handler with Events. Check it out now!

New Discord.JS v14 Slash and Prefix Commands handler with Events. Check it out now!

Discord.js v14 Command-Handler Commands, Events, Permissions and Cooldown Handlers for Discord.js v14 bot ~ Made by Lynx Discord.js v14 (dev version)

Dec 19, 2022

The Space Traveler's Hub is an application where users can check out availble space rockets and book them or cancel the previously made booking. Also users can find a list of current missions along with their brief description and can join the selected mission or leave the mission the user joined earlier.

Space-Travelers-Hub The Space Traveler's Hub is an application where users can check out available space rockets and book them or cancel the previousl

Sep 22, 2022

The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.

The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.

Awesome Estate The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured

Sep 14, 2022

RWP stands for Roblox web panel, it's a code snippet that you can run via developer console or the provided Google Chrome extension to try out early

RWP stands for Roblox web panel, it's a code snippet that you can run via developer console or the provided Google Chrome extension to try out early

RWP stands for Roblox web panel, it's a code snippet that you can run via developer console or the provided Google Chrome extension to try out early Roblox site features before they're officially out without any programming experience.

Nov 28, 2022

A bare-bones example Shopify app build with remix.run

Remix Shopify App A bare-bones Shopify app build with Remix Not supported by or affiliated with Shopify Create .env Add API_KEY to .env Add API_SECRET

Jan 5, 2023

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Dec 17, 2022

BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co

Dec 31, 2022

Run a command, watch the filesystem, stop the process on file change and then run the command again...

hubmon Run a command, watch the filesystem, stop the process on file change and then run the command again... Install You can install this command lin

Jul 30, 2022

GitHub starter project link: https://github.com/buildspace/waveportal-starter-project

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Jun 5, 2022
Comments
  • Missing site meta description

    Missing site meta description

    Normally not a big deal for a demo, but in this case the sister app fakebooks-cra has a meta description set in the static html so it receives a higher Lighthouse score for SEO. Adding a description to the root of this project would be a more even comparison.

    Lighthouse dings SEO score due to a missing meta description

    CleanShot 2022-05-06 at 14 53 07

    opened by drewjs 1
Owner
Kent C. Dodds
Improving the world with quality software · Husband, Father, Latter-day Saint, Teacher, OSS · @remix-run · TestingJavaScript.com · EpicReact.Dev · Be Kind
Kent C. Dodds
GitHub https://fakebooks-remix.fly.dev/sales/invoices
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
nest연습용 (w. https://github.com/seuiggi, https://github.com/okysky1121)

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

이름 2 Oct 5, 2022
The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate application for learning out how to build, run and deploy a multi-container environment (docker-compose).

foodtrucks-app-docker-compose The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate applic

Selçuk Şan 3 Oct 24, 2022
Relay setup automation for CRA, Next.js and Vite

create-relay-app Easy configuration of Relay.js for existing projects Motivation Setting up Relay can be quite time consuming, since there are many se

Tobias Tengler 39 Dec 19, 2022
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022
A mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases.

This is a mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases. It also has a details page to check for the statistics for each region/state if available.

Solomon Hagan 7 Jul 30, 2022
Generally free coding Resources for all! Check it out and don't forget to give it a star ⭐️

A-Z Coding Resources This website is built using Docusaurus 2, a modern static website generator. Installation yarn install Local Development yarn sta

Hulya Karakaya 72 Jan 2, 2023
Have you always wanted to check if someone has checked out your story or not?

InstaStoryChecker - Search in your story viewers Have you always wanted to check if a certain person has checked out your story or not and you had to

Mohammad Saleh 4 Jul 7, 2022
Code in Solidity like a PRO with Egor Gavrilov. Check out YouTube channel ▶️

Code in Solidity like a PRO with Egor Gavrilov Check out YouTube channel youtube.com/EgorGavrilov Tutorials Perfect Solidity Stack It's easy to get st

Egor Gavrilov 53 Dec 19, 2022
Check out my Portfolio!!!

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jieun (aka Jenna) 2 Jun 10, 2022