Hi 👋 This project is my personal blog. It's also a space for me to play around with technologies that I'm interested in. You'd probably be interested in it if you're into:
- NextJS
- Tailwind
- React Testing Library
- Storybook
- Github Actions
This application uses the Next.js framework. I like working with the Next framework because I think they're opinionated about the right things.
For styling I used Tailwind. I love using tailwind because it naturally keeps you from creating abstractions too early, and let's you get what you want on the page faster. Their docs are also great.
For icons I used OpenMoji. Randomly found them but I think they're cute as hell and super easy to work with.
For unit testing I used React Testing Library and Jest. I like that React Testing Library reinforces the idea of testing behavior and experience versus testing the internals of a component, I think that just makes sense. In the future I'd like to take a look at Cypress component testing for unit testing.
As a developer, CSS and styling scares me. You accidentally delete a random class name and suddenly your app looks like hot trash, and your pipeline is still green. I wanted a way to be able to verify that the changes I'm making aren't breaking my application styling unless they're intentional, and I wanted it to happen without me having to just stare at a browser (i mean).
I already had Storybook set up on my application, so I ended up adding snapshot testing to the storybook setup. It's nice because it can verify my components haven't changed. I can change the viewport to verify that the app is consistent across mobile, table, and web. It's some peace of mind we all need.
Accessibility is important when developing frontend applications, but a lot of the time it gets pushed off. I added an a11y test to my setup that uses storybook to make sure my components pass accessibility checks. It runs during my pipeline so I know my code is accessible before merging and deploying.
On commit, a hook runs prettier to format all the files in the commit. It's pretty sweet because I don't have to worry about how my code looks when I write it, it's always gonna be formatted consistently eventually.
On push, a github actions job is triggered. First i build the app and cache it (so i don't have to build it at every step). I run ESLint, unit tests, accessibility checks, and visual regression tests.
I use vercel for hosting, so on push to non-master branches, a preview is built and deployed. This is great for making sure that things look good before merging to master.
On pushes to the master branch vercel deploys the application to production. I'm a big fan of continuous delivery, and since i'm the only owner of this project adding continuous deployment to this application makes sense. Since building and testing are verified during pushes, and deployment processes are verified during pull request previews, production deployments really feel like "not a big deal", its great.
Clone the repository.
git clone https://github.com/katebrune/katebrune.net.gitSet node version.
nvm useInstall dependencies.
yarn installRun the application locally.
yarn devRun unit tests.
yarn testOpen Storybook.
yarn storybookRun visual regression tests.
yarn test:visual-regressionRun a11y tests.
yarn test:a11y