This is a repository containing the Next.js version of the Four Peaks Surgery Center Website. The original version can be found here. This will also be the version that is used in production via Firebase hosting. The website administrator would need to access hosting information/analytics from the Firebase Console.
Because this project uses Next.js, almost all components needed to be remade. I chose to create this project using Typescript for my functional components, and ES6 JavaScript for the /pages directory. Not only does this version use React v18.0, it also has 60% fewer dependencies.
The original Four Peaks React App made heavy use of the component library React-Bootstrap and custom styling for it's components. All I can say about this project is that I was still getting used to all of the features Firebase had to offer, and I am not a designer. It had a single css file that contains 776 (unminified) lines of styles for the app.
The new Next.js project rests its styling-responsibility on Tailwind CSS. Many components are hand-made with the help of some specific, undocumented Codepens. The setup for Tailwind is grossly easy and makes things much easier for fresh component styling and development.
Having a nicely-styled webpage is nice to have on it's own, although current web standards are closer to classifying webpages as webapps on a performance and UX standpoint. To live up to this, the Next.js project has the option for dark-mode, along with heavy use of "react-spring" to provide a much more, app-like experience. Instead of things flashing on-screen the instant they load, they flow onto the screen with the useSpring hook to provide a natural experience, as compared to normal, linear animation timing.
For example:
Then, to integrate these springs into action, is as simple as adding animated. to the JSX inheriting element:
There is a better way to solve this as of the newest version of React Spring
Using Tailwind has been such a time and life saver. As someone who despises the look of a CSS file, it made my life much easier after learning for a few days. It provides so much readability into the component files, instead of seeing a classname I see exactly what the syntax says. (pb-4 is padding-bottom: 4em) and so on. Setup for Tailwind CSS in Next.js is less than 10 steps and solves too many issues to count. Thanks to the devs @tailwindcss!
The best part is my CSS file looks like this:
Though Next.js provides simple solutions for SSR (server side rendering), it is not needed for this project and wouldn't work without using Firebase Functions, which are not a free service; although static hosting is from Firebase Hosting.
Contrary to the strategies used in the previous project, this project makes heavy use of the Firebase Firestore REST API for data retrieval. Although insecure from a certain perspective, things that need to be stored and encrypted (names, numbers, contact info, etc...) are so using different strategies like RSA and custom.
Following the collection of the data, most of it is stored in the localStorage environment. The following pages store component rendering data in the localStorage environment: /users, /users/physicians, /services, /paperwork, /surgeons. There is one exception that is the /testimonials page, which stores data in the sessionStorage environment.
Given the current standards of having PWAs replace webpages, apps prefer to store userdata and other things in their own storage rather than asking an API for it every time it's needed. This makes switches between apps MUCH faster, saving up to 2s of loading on each page. Page changes feel smooth and natural without waiting for data to load and React Spring's styling.
Coming from the original vanilla React standpoint, there were a lot of things that, I hate to say it, they just worked. A lot of the problems come from the users functions. This would be anything after a user logged it. Not only was it lacking style-wise, it was not working correctly for the user roles. If a user was supposed to be an admin to have permissions to change info, everyone would get that option. Alongside a plethra of other bugs, new stuff needs to be usable, not a broken button.
The simplest way to put this in my opinion, is to blame it on Javascript's inability to sort further than 1 character of a string or number. I find a solution to this by creating a new set of unique values. The values are dates that are parsed out by converting the date to a number and then evaluating size. To make more sense of this, please see below.
A fundamental issue of web development is the time it takes to "paint" the webpage. This includes everything from caching HTTP requests, to storing custom API data inside the browser using its API, and customizing API responses with specific Firebase queries.
Below are examples of techniques used to save page-load time as well as differences between first page visit, and future:
Here is the result of the old request to the API (left) compared to the optimized time (right):
