Noah Tigner's Portfolio Website
- Scaffold React / TypeScript project with Vite
- Configure Prettier
- Configure ESLint
- Configure Vitest
- Add new scripts to package.json & README
- Configure Husky pre-commit hooks
- Configure CICD for Github Pages
- quality.yml: Checks formatting, lints, and tests code
- codeql.yml: Checks for security vulnerabilities
- dependabot.yml: Checks for outdated dependencies
- deploy.yml: Builds and deploys to Github Pages
- Remove Vite placeholders
- Set up basic SEO and meta info
- Set up meta tags
- Set up Open Graph Protocol (OGP) tags and preview image. Open Graph Debugger
- Semantic HTML & ARIA roles
- Sitemap Generation
- webp images
- Choose color palette and font family
- Design System / Component Library
- Material UI ✅ -> Base UI ✅
Chakra UIMantineTailwind
- Build UI
- Intro or Hero section
-
Cardcomponent for portfolio items -
Timelinecomponent for experience / work history - Contact Section
- Contact Dropdown
- Contact Footer
- Optimization
- skeletons for sections and components
- optimize images
- lazy-load
sectionsroutes - lazy-load images
- Prefetch important routes when certain links are rendered
- Telemetry & Analytics
- Custom 404 Page (that works with Github Pages)
- Redirect invalid routes to 404 page
- Blog / Articles
- Markdown support
- Components:
- Basic components (Headings, Paragraphs, Lists, Links, Images)
- Quotes / Callouts
- Syntax highlighting for code blocks w/ MakrdownIt + Highlight.js
- Tags / Categories
- Server-side generation of article pages
- Pull data from Github???
- Test
- Unit / Component Testing
- Accessibility Testing
- Creating a Custom Github Pages 404 Page with React Router v7's Framework Mode
- React Conf 2025 Highlights
- Notes on Alex Petrov's Database Internals:
- Chapter 1 - Storage Engines Intro & Overview
- Chapter 2 - B-Tree Basics
- Chapter 3 - File Formats
- Chapter 4 - Implementing B-Trees
- Chapter 5 - Transaction Processing and Recovery
- Chapter 6 - B-Tree Variants
- Chapter 7 - Log-Structured Storage
- Chapter 8 - Distributed Systems Intro & Overview
- Chapter 9 - Failure Detection
- Chapter 10 - Leader Election
- Chapter 11 - Replication & Consistency
- Chapter 12 - Anti-Entropy & Dissemination
- Chapter 13 - Distributed Transactions
- Chapter 14 - Consensus
- Summary & Thoughts
- Notes on Alex Xu's System Design Interview:
- Introduction & Motivation
- Vol. 1 Chapter 1 - Scale From Zero to Millions of Users
- Vol. 1 Chapter 2 - Back-of-the-Envelope Estimation
- Vol. 1 Chapter 3 - A Framework for System Design Interviews
- Vol. 1 Chapter 4 - Design a Rate Limiter
- Vol. 1 Chapter 5 - Design Consistent Hashing
- Vol. 1 Chapter 6 - Design a Key-Value Store
- Vol. 1 Chapter 7 - Design a Unique ID Generator in Distributed Systems
- Vol. 1 Chapter 8 - Design a URL Shortener
- Vol. 1 Chapter 9 - Design a Web Crawler
- Vol. 1 Chapter 10 - Design a Notification System
- Vol. 1 Chapter 11 - Design a News Feed System
- Vol. 1 Chapter 12 - Design a Chat System
- Vol. 1 Chapter 13 - Design a Search Autocomplete System
- Vol. 1 Chapter 14 - Design YouTube
- Vol. 1 Chapter 15 - Design Google Drive
- Vol. 2 Chapter 1 - Proximity Services
- Vol. 2 Chapter 2 - Nearby Friends
- Vol. 2 Chapter 3 - Google Maps
- Vol. 2 Chapter 4 - Distributed Message Queues
- Vol. 2 Chapter 5 - Metrics Monitoring and Alerting Systems
- Vol. 2 Chapter 6 - Ad Click Event Aggregation
- Vol. 2 Chapter 7 - Hotel Reservation System
- Vol. 2 Chapter 8 - Distributed Email Service
- Vol. 2 Chapter 9 - S3-like Object Storage
- Vol. 2 Chapter 10 - Real-time Gaming Leaderboard
- Vol. 2 Chapter 11 - Payment System
- Vol. 2 Chapter 12 - Digital Wallet
- Vol. 2 Chapter 13 - Stock Exchange
- Summary & Thoughts
pnpm dev- Runs the app in the development mode.pnpm build- Builds the app for production to thedistfolder.pnpm preview- Serves the production build from thedistfolder.pnpm lint- Checks the source code for linting issues.pnpm lint:fix- Checks the source code for linting issues and fixes as many as possible.pnpm format- Checks the source code for formatting issues.pnpm format:fix- Checks the source code for formatting issues and fixes as many as possible.pnpm test- Runs Vitest and outputs a coverage report.