A place to describe all the nifty stuff used to build this site
Introduction
If you've ever worked on a web app whether you're a developer, UX designer, or Product Manager, there's a lot of things to consider even on a seemingly simple app like this. I find that looking at example code is sometimes more helpful so if you're not too interested in reading feel free to jump to the
Source CodeBuilding the App
1) Client Side vs Server Side Rendering
For blogs and similar type sites, server side rendering is great. Initial load is faster and it generally doesn't need much more tweaking for SEO. For heftier business type apps with a lot of complex logic, you may consider a client side rendered app using Webpack and Express.js instead. There are some differences to accommodate for between server side and client side rendering but the gap is narrowing. Each has its pros and cons
2) Building Method
There's a variety of ways to go about building a React app:
- Building from scratch using Webpack, Parcel, Rollup, or other bundlers out there.
- Cloning the numerous example template repos out in the wild
- Create React App
- Next.js
Whichever method you pick, make sure you know what you're trying to accomplish with the app and how you're going to integrate the backend server. Some methods are quicker to get up and running but leave less room for customization as they may be more opinionated.
For this site where the routing isn't too complicated, no authentication, and not a ton of business logic, Next.js was a no-brainer.
For more complex apps, things like authentication, permissions, backend server, API, database, nested routing, etc. need to be considered. For my work at Duetto, as it's a hospitality business with a lot of complex cases, I built a React app from scratch using Webpack and Express.js. Getting it built up took some more time but as a result, it is fully customizable and can deal with almost any situation thrown at it.
Deployments
Building the app is important and all but thinking about deployments is critical as well. After all, you can build the most beautiful app ever but if you're unable to get it deployed and in public view then it's quite useless. As I used Next.js to build this site, Vercel was the tool for deployments and it was truly a delight. Testable production instances get built and deployed on any pushes to any branch. Promoting any of those instances to production is available at a click of a button.
After having to deal with old versions of Jenkins and other in house built deployments, Vercel was by far the best experience I've had. And this is using the FREE version too!
I highly recommend trying out Vercel + Next.js especially for anyone trying to build out their own blogs. I don't currently have it in this iteration of this site yet but CMS integration was quite easy to do. I had used prismic.io as it has a GraphQL API endpoint
Having worked for Salesforce, I've tried Heroku in the past and while it was pretty hands off and easy as well, the free version will sleep after 30 minutes of inactivity. That means the first person to access the site after that 30 minutes of inactivity will see a very extended initial load time. Obviously this pricing model is to try and get users to upgrade to at least the hobby tier.
UI/UX
This is where the bulk of my time was spent thinking and coding. There are so many little details that go into making a web app that are seemingly insignificant but they really add up.
- Responsive design - making the experience as good in different screen sizes, even when on your phone. This not only requires different components for mobile vs desktop (like the menu) but also responsive font sizes and padding for different resolutions.
- The sticky table of contents you see to your right on desktop but hidden on mobile
- Scroll to top button that appears after a certain distance has been scrolled
- Theming - Allowing for ease of changing the theme whether it be spacing, color, dark mode, or any component style
- Smooth scrolling
- Transitions / Animations
- Meta Tags for search engines and social media previews
- Local storage - To maintain shallow memory of things on the client side like if the user is in dark mode or not
MUI
Of the component libraries I've come across, I've come to really like MUI, formerly known as Material UI.
It's really a full suite of components and tools that makes it really easy and quick to develop. It's got theming, darkmode, responsive media queries, and lots of components all of which are fully customizable. I've used mostly the defaults on this app with some tweaks here and there but it really is a powerful and flexible UI Library.
Testing and Automation
While I didn't include any testing automation for this site, for business apps it's important to always have unit testing as well as end to end testing. These days I've been using React Testing Library for unit testing and Cypress for end to end testing
Miscellaneous
IDE
For frontend development, I've tried Atom, Intellij / Webstorm, Sublime, and Visual Studio Code. My favorite as of now is Visual Studio Code. After using it on both Macs and PCs, It's performant, doesn't crash on me, and it's got lots of handy installable plugins
Lint
I always use eslint as it's a good way to find and fix issues with code immediately. Generally I like to use Airbnb's eslint config, but for this project I just went with the recommended typescript eslint.
Prettier
There was a time where I was perfectly content with using eslint as it can do some formatting along with its semantic analysis but now I use both Prettier and eslint. Here's this project's simple prettier config - not much different from the default
Typescript
This project is only using a simple typescript configuration but tsc init makes a comprehensive tsconfig.json file with pretty good description comments that you can customize to your liking if you run the init command:
npx -p typescript tsc --init
Sourcetree
It's not perfect and obviously doesn't have the full capabilities of all Git commands, but it's actually a pretty decent UI for Git. I highly recommend it for developers who are new to Git as it gives somewhat of a visual representation of what's going on. I still like to use it to this day as it simplifies certains actions into a couple of button clicks like merging the latest develop into my branch. Get it here