personal

For information on my journey to becoming a Software Engineer, check out my Medium article on Codeburst.

---

Tech Stack

• ⚛️ 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-components for easy CSS styling
• 📧 EmailJS for server-less contact form submissions direct to my inbox
• 🕸 Webpack for bundling all assets
• 🤖 Babel for backwards compatible compilation

Frontend

The frontend starts in main.js. The root of the React app is in App.jsx.

a word about ~

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

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.

Progressive Web App (PWA)

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 💯

React Google Recaptcha

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.