A team announcements / shift-update board built with React — no build tooling required. React, ReactDOM, and Babel are loaded from a CDN and the JSX is transpiled right in the browser, so the whole app is just static files you can open directly or host on GitHub Pages.
Live Demo — enable GitHub Pages on this repo (Settings → Pages → deploy from main) and this link becomes real.
The KEWW listing calls out React as a preferred skill, and "communicate with teams" is core to what the platform does. TeamBoard is a small but complete React app around that idea: post an update, tag it by category (General / Shift Update / Urgent), pin the important ones, filter and search. It's meant to show comfort with React fundamentals — components, props, hooks, controlled forms, list rendering — not just static HTML/CSS/JS.
- Post an announcement (author, category, message)
- Pin/unpin so important updates stay on top
- Filter by category, search by keyword
- State persists across reloads via
localStorage - Fully responsive, light/dark mode aware
- React 18 (via CDN,
React.useState/useEffect) - Babel Standalone (in-browser JSX transpilation — no npm/webpack/vite needed)
- Plain CSS (custom properties, flexbox)
No install step — just serve the folder statically:
git clone https://github.com/<your-username>/teamboard-react.git
cd teamboard-react
npx http-server -c-1or simply open index.html directly in a browser.
In a production app this would be built with Vite/Create React App and a real bundler — this version intentionally skips the build step so it's trivial to clone, run, and deploy as static files.
teamboard-react/
├── index.html # loads React/ReactDOM/Babel from CDN, mounts app.jsx
├── app.jsx # all React components (Composer, AnnouncementCard, App)
├── style.css # design system shared look with my other projects
└── README.md
- Move to a proper build step (Vite) once the app grows past a single file
- Add a real backend (see my shift-swap-api project for a PHP REST API example)
- Role-based posting (only managers can post "Urgent")
Syed Rizvi — Computer Science major (AI minor), University of Houston. Background in Python/Java and hands-on technical support/documentation work at AZ Instruments, building out full-stack web projects like this one to apply that experience to software development.