Portfolio Project: Blogging App with React

Design and implement a passwordless sign up page with an email form, Bootstrap styling, customize it for app, and handle the success state as a warm up for application development.

Create the sign up page for the blogging app, with a sign up component in the pages folder, an email input, and a submit button that enables on input.

Build a React signup flow with useState for email, enable the submit button, post a JSON payload to api/users, prevent default, configure a proxy to backend, and apply bootstrap styling.

Learn how to style a React blogging app using Bootstrap and Sass, override Bootstrap variables, implement responsive layouts with grid and cards, and apply interactive button and card effects.

Learn to manage API progress in a React signup flow by showing a spinner, disabling the button during requests, and displaying a backend success message with Bootstrap alerts.

Refactor the signup form by extracting state and handlers into a use sign up hook. Return on submit, on change email, API progress, and success message with derived disabled value.

Introduce error handling strategies, including generic and backend validation errors, implement client-side validation with HTML built-in features, and create reusable components like app input, alert, and button for future pages.

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.

Teach handling 400 bad requests by reading the backend validation errors object, displaying the invalid email message beneath the input, and clearing it as the user edits.

Implement client-side validation without libraries using html input type email and disable browser validation, then handle validity in the sign-up submission to set local errors and stop backend requests.

Learn to extract reusable components from a signup form, including alert, button, and input, add props for variant and children, and organize exports for reuse across pages.

Build authentication pages with global state management and a navigation bar that reflects login state, showing logout when signed in and login or sign up when signed out.

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.

Create a responsive, always-expanded navigation bar component in a React app, using bootstrap styles and React Router links to enable smooth page navigation without full page reloads.

Learn to implement a React callback page that reads token and operation from query parameters, posts to a backend auth endpoint, and manages loading, success, and error states.

Extract the spinner into a reusable component, make it configurable via size and full props, and demonstrate using it in the app button and callback page with Bootstrap styling.

Implement global state management with a React context to render navigation bar layouts based on authentication, showing logout when logged in and signup when not.

Update the auth context by calling the set logged in mutation with the callback response's user data, triggering layout updates and a logout option in the navigation after sign-up.

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.

Portfolio Project: Blogging App with React guides building a login page by duplicating signup, wiring the use login hook, and handling email input, api progress, and success or error messages.

Modify the login callback page to check if the operation equals login and navigate to the home page after a successful auth request using React Router.

refactor the authentication callback page by extracting the logic into a use callback data hook, returning status and message through destructuring, and cleaning up imports before testing the flow.

Build the article page by creating, updating, and publishing articles with client-side and backend validation, toast notifications for errors, and a context-driven editor that streamlines data flow.

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 an article editor with title and content inputs, including placeholders and a responsive flex layout. Extract the editor as a reusable component (components/editor.js) and prepare the save functionality.

Demonstrates posting articles in a React blogging app by capturing title and content, sending a JSON payload to API articles endpoint, and saving or updating via PUT when ID exists.

Refactor the editor into two contexts, editor data context and editor mutator context, use a reducer to manage title, content, and ID, and wrap the editor with providers and hooks.

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.

Implement a progress indicator for publishing, saving, and updating articles in the blogging app by tracking API progress with use state, showing a spinner, and disabling the button during requests.

Demonstrates handling backend validation errors for title and content, updating the editor's error state, and adding client-side checks to require input before submit.

Learn to handle API request errors by managing a shared error state with a mutator and surfacing a danger toast for network or not found errors.

Implement article display features with a home page feed and pagination, fetch articles page by page, and an article view page. Enable user pages, editing, and publish functionality.

List articles on the blog homepage using a paginated API with zero-based pages and sorting by published date, and load more content by appending results.

Demonstrates a dynamic article view in a React blog app, routing by user handle and article id or slug, fetching data with a hook, and rendering title and content.

Create an article info component and article card that display the author, profile image, and publish date in the feed and article view; use time-ago formatting and show unpublished state.

Add a more articles component to the article view to fetch a user’s articles by handle, display up to three, and plan a responsive, paginated user feed.

Create a user page in a React blogging app that fetches and displays a specific user's articles via a feed component, using a handle parameter and dynamic URL.

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.

Implement file upload for blog articles, including article title images and images in content, with a reusable article title image component and toolbar image selection.

Add a markdown toolbar to the article editor, enabling bold, italic, strike-through, and code formatting with a ref-based content update and a state mutator.

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.

Add image enables a toolbar button to upload article images, uses a shared file upload utility, and inserts markdown image syntax with the uploaded file name.

Handle file upload errors by wrapping fetch in a try-catch for network failures and 400 validation errors; show messages about jpeg or png size limits in a toast and reset.

Develop a generic image selector component for the article editor and later for user profiles, integrating it with context, display via API assets, and delete with toast error handling.

Display article images at the top of cards and article views using a reusable AppImage component with a placeholder fallback for missing images, and ensure responsive visuals with object-fit: cover.

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.

Create a reusable profile card component that fetches and displays a user image and username on the profile page, with a bootstrap card layout and graceful loading states.

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.

Display the user name and image on the navigation bar by creating a user component that pulls data from the auth context, with bootstrap dropdown for user pages.

Implement a bootstrap-style dropdown in a React blogging app by building the dropdown structure, toggling visibility with a show state, and hiding the menu on outside clicks using useEffect.

Implement article reactions on cards and in the article view, updating counts and the current user's reaction, with filtering for liked and bookmarked articles and recency sorting, hiding on logout.

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.

Learn to implement article reactions in a React blogging app, including like, hot, and reading list, with counts, current user state, and synchronized display on cards and detail views.

Add a homepage filter component to filter articles by user reactions (like, hot, bookmarked) and pass the filter to the feed, defaulting to latest.

Hide user reactions and the filter after logout by checking the current user state; only show reactions when a user is logged in, and prevent actions while not logged in.