Portfolio Project: Blogging App with React

Add network error handling to the sign up flow by wrapping the fetch in a try/catch, showing a generic error message, and resetting API progress to re-enable the button.

Create and connect home, sign up, and callback pages using React Router Dom, and implement a shared app layout with an outlet and a navigation bar.

Persist authentication state by storing the auth object in local storage with useeffect and updating it on changes, then parse the value on startup to retain the user after refresh.

Implement a logout feature in a React blogging app by adding a logout mutator and a navigation component that calls the backend logout endpoint and clears cookies and local storage.

Add an article editor page to the blogging app, organize an article directory under pages, expose the article/new route with a login-protected navigation link, and implement the editor layout.

Implement a reusable publish button for blog articles, toggle publish state with a patch request using the article id, and connect it to the editor context for cross‑page use.

Develop an article edit workflow in a React blogging app: add edit action on the article view, initialize the editor with existing data, and enforce author-based access.

Introduce a publish button and preview link in the article editor, using the article id and editor context to update and reflect published or unpublished status for the logged-in user.

Learn to parse markdown in a React blogging app using marked and highlight.js to render formatted content with syntax highlighted code blocks in the article view.

Implement user edit functionality in blogging app, adding an edit button on profiles to update username and image, with changes reflected in the navigation bar and a user actions area.

Implement a user edit page with profile image and name editor, guarded by auth and routed via react-router. Submit updates with put, handle validation, and update the user context.

Build a React reaction button for a blogging app, post to API reactions, and reflect like, hot, and reading list states in the article card using material icons.