For information on my journey to becoming a Software Engineer, check out my Medium article on Codeburst.
- ⚛️ React/React Refresh (HMR) for speed, scalability, and simplicity
- ️⚒️ RTK Query for cleaner Firebase queries and built-in caching
- 🔥 Firebase for painless deployment and realtime data storage/display
- 💅🏾
styled-componentsfor easy CSS styling - 📧 EmailJS for server-less contact form submissions direct to my inbox
- 🕸 Webpack for bundling all assets
- 🤖 Babel for backwards compatible compilation
The frontend starts in main.js. The root of the React app is in App.jsx.
The webpack config aliases ~ to mean "the root of the app". For example, you
can import db from '~/db/firebase' anywhere in the app, without worrying about
how many ..s to have in the relative path.
Fast Refreshing is enabled, using react-refresh as the Babel plugin and adding
plugins: [new ReactRefreshWebpackPlugin()] (along with
devServer: { hot: true }) to enable fast refreshing globally. The latter is
applied in webpack.config.js via the specific webpack plugin.
The React components will update in place after saving, without losing their state.
Google Chrome's Lighthouse is a great tool that has many audit categories. By following their tips, upon visiting my page, there is a service worker registered, which caches the root and all styles. It's also fun to see scores of 💯
I have implemented a form on /contact that sends submissions directly to my
inbox using emailjs. The Google ReCAPTCHA library helps verify a human's
(online) humanity to prevent bots from submitting the form. It uses ReCAPTCHA
v3, which is invisible.