A MERN-stack blogging-platform foundation with end-to-end JWT authentication, Google OAuth, and a resumable Firebase Storage profile-picture upload, built for individual bloggers who want to publish and manage their own content.
Master Blogmium is the authentication and media foundation for a blogging platform — built to own an end-to-end auth + upload pipeline from sign-up to authenticated profile-picture upload. It ships email/password + Google OAuth with JWT httpOnly-cookie sessions, Redux-persisted UI state, and a PrivateRoute-gated dashboard. Blog-post CRUD is the next milestone (not yet built); the Firebase resumable-upload feature was implemented and later stripped during a refactor.
Solo, self-directed learning project. Full-stack MERN: an Express/MongoDB REST API and a React/Redux SPA with Firebase Authentication and Firebase Cloud Storage. Currently an auth MVP for a planned blogging platform — blog-post CRUD is not implemented yet (the User model is the only collection).
I had built isolated React UIs and isolated Node scripts, but had never owned an end-to-end auth + media pipeline from sign-up to authenticated profile-picture upload. The gap was the glue work: cookie-based JWT sessions across a separate API origin, an OAuth provider callback, resumable file upload with real-time client-side progress, and Redux state that survives a hard refresh without re-hitting the API. (Learning gap, not a production pain point.)
ChallengeBuilding a polished file-picker UX with a real progress indicator — the default <input type='file'> is unstylable, and I wanted a circular ring tied to actual upload bytes, not a fake spinner.
FixHid the native input and used a useRef click-forward from a styled avatar preview; generated an instant preview with URL.createObjectURL, then wired Firebase's uploadBytesResumable snapshot (bytesTransferred/totalBytes) into state driving react-circular-progressbar. (Implemented across commits 7912282..521c96b, later stripped in HEAD during a refactor — DashProfile is currently a stub.)
ChallengeKeeping the user signed in across a hard refresh while keeping the JWT out of reach of JavaScript.
FixSplit storage by purpose: the token lives in an httpOnly access_token cookie the browser sends automatically (JS can never read it); the user profile lives in the Redux store, rehydrated from localStorage by redux-persist on boot.