React Blog Demo Site

Showcases the following:

Chat Application with live updates
CMS ( Content Management System ) Application with history
React Router Dom
Lazy Loading of Pages using React.Lazy and Suspense
Using React.memo
Using Callbacks
Using React Context
Using React Context Provider
Custom Hook to load blog posts from an API
Using Styled Component
Using React Query
Using Axios
Using Firebase ( Firestore, Auth, Messaging )
Notifications
Using CSS Animations ( transitions and keyframes )
Using CSS Scroll snap
Using vitest, jsdom, testing library, msw ( Mock Service Worker )
Using playwright for e2e ( end to end ) testing
Filter Blog Posts and highlight the filterText in the blog content, as it filters the list, it highligts the words
Dynamicly changing the base path based on the environment ( VITE_ environment variables from .env file based on environment)
Using github workflow to deploy to run tests before build and deploying to github pages
The workdflow caches the playwright browsers so the subsequent builds are substantially quicker

Name		Name	Last commit message	Last commit date
Latest commit History 87 Commits
.github/workflows		.github/workflows
public		public
src		src
test-results		test-results
tests/e2e		tests/e2e
.dockerignore		.dockerignore
.env.firebase		.env.firebase
.env.production		.env.production
.firebaserc		.firebaserc
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
eslint.config.js		eslint.config.js
firebase.json		firebase.json
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
index.html		index.html
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts