Portfolio Project: Blogging App with SolidJS

Build a simple email signup form, send user input to the back end, and visualize progress with a spinner while handling success, plus customize bootstrap styling and proxy configuration.

Build a sign up page in solidjs, placing a sign up component under src/pages, with a single root div, a labeled email input, and a disabled submit button.

Use SolidJS signals to track email input, enable the sign-up button, and submit via fetch to a backend API with form submission and proxy/CORS handling.

Learn to style a blogging app using bootstrap: import css, customize primary color, apply utilities, and build a responsive layout with container, grid columns, offsets, and 3D button effects.

Disable the sign-up button during API progress to prevent multiple requests, use a signal to track progress with a conditional spinner, and show a backend message in a success alert.

Handle sign up error cases with client-side validation for invalid emails and backend validation errors, apply styling, and finish the sign up page error handling.

Implement robust error handling in the SolidJS blogging app signup form by displaying an offline fetch error, showing a danger alert, and clearing error messages on resubmission.

Handle backend validation errors in a signup form by checking response status codes, displaying the email error from the validation object beneath the input, and clearing it on edit.

Enable client-side validation by leveraging HTML input types and browser validation, show the error below the input, and prevent backend requests until the form passes validity checks.

Extract reusable components from the signup page into app alert, app button, and app input, organize them under a components folder, and prepare for handling error, success, and loading states.

Add new pages using Solid Router, implement login and sign up flows, persist state across restarts, and handle the registration callback and logout.

Set up solid router to manage home, sign up, and callback pages, wiring routes in index.js; add a navigation bar to ease page navigation and handle registration token with backend.

Create a reusable bootstrap navbar by adding a dedicated NavBar component and wrapping routes with a common layout. Include brand, home and sign-up links, plus a material icons logo.

Implement a callback page that reads token and operation from the URL, calls the backend on page open, and displays loading, success, or error states with alerts.

Extract the spinner into a reusable AppSpinner component for signup and button contexts. Use props to toggle size and full-width display for page load and callback states.

Create a global auth context in SolidJS to manage login state, wrap the app with an auth provider, and use a store to update the navigation bar in real time.

Refactor the auth context to pass an object containing the user and set function in the signup callback provider and destructure it for the navbar.

Persist the auth object to local storage on every change with createEffect, initialize the app from local storage using safe JSON parsing, and prepare for logout by cleaning up tokens.

Extract a logout component behind the nav link, call the backend logout API, and update the local auth state and local storage to reflect a signed-out user.

Create the login page by duplicating the signup page, connect to the login endpoint to send email, add validation, and display a login link in the navbar.

Implement a login callback that uses the solid router navigate to redirect authenticated users to the home page, differentiating login from registration and updating status messages accordingly.

Build a new article page with a title and content editor, a navigation link, and handle success and error cases of article submission with client-side and backend validation.

Add the article editor page to the blogging app with solidjs, set up routing for article/new, export the ArticleEditor component, and wire a post article link in navigation.

Implement an article editor page with title and content text areas, publish and save actions, and a flex-based layout that supports unpublished drafts and styling refinements.

Build a SolidJS blogging editor that captures title and content, saves articles to a backend with post requests, handles id-based updates, and enables publish via patch requests.

Add separate API progress trackers for save and publish actions in a SolidJS blogging app, using try/catch/finally blocks and loading indicators to reflect each operation’s state.

Learn to implement client-side validation alongside backend validation errors in a blog editor, display per-field error messages, and clear errors as users type, using a form and 400 backend responses.

Learn to implement a Bootstrap toast for network errors in a SolidJS blogging app, including show/hide logic, positioning, duration, and transitions for save and publish actions.

Explore building a blogging app interface that lists and displays articles, implements pagination and infinite scroll, and enables user-owned actions like edit, publish, and unpublish with an editor workflow.

Display the article list on the home page using backend pagination and sorting by published date, fetching with size and page parameters and appending results.

Implement infinite scroll by adding a window scroll listener to fetch the next page, and clean up the listener on unmount to prevent extra requests and boost performance.

Create an article view page in a blogging app, using dynamic routes (user handle and article slug) to fetch article data from the backend with a SolidJS resource and suspense.

Learn to implement suspense and error boundary in SolidJS, using a fallback spinner, optional chaining, and routing-aware placeholders to manage data fetch and error handling in a blogging app.

Add a more articles component to the article view, fetch author articles with SolidJS createResource, paginate to three items, and display them with suspense and error boundaries in responsive layout.

Create an author page in a SolidJS blogging app by reusing a feed component to fetch all articles or a specific user's articles via route params, with pagination.

Implement article info and article card components to show author, profile image, publish status, and time-ago formatted publish date in a blogging app with solidjs.

Learn to implement article editing by adding a link visible to owner, opening a preloaded editor with title and content, and handling loading, errors, and publish state via edit wrapper.

Learn to build and reuse a publish button as a shared component for article editor and view in SolidJS, handling publish state, API progress, and optimistic UI updates.

Build a custom editor toolbar in SolidJS, enabling bold, italic, code, and other markdown formatting by manipulating the selected text and updating content state.

Explore building a markdown parser with marked and marked highlight, enable code highlighting via highlight.js and atom one light CSS, render HTML safely, and prepare image upload features.

Enable image uploads in the blogging app by activating a file input with an image button, posting to the backend, and inserting markdown image syntax with the returned URL.

Learn to implement robust file upload validation in a SolidJS blogging app, enforcing JPEG or PNG under 1 mb and displaying toast errors for validation and network failures.

Introduce a reusable image selector component for the blogging app that uploads, previews, and deletes article images, shared with the article editor and backend requests.

Display article images with a reusable app image component, apply responsive layout adjustments, and implement fallbacks using placeholder images and precise height and rounding controls.

Introduce user edit functionality with a new edit page and navigation dropdown to update the user image and username, and move logout to the dropdown for a cleaner navigation bar.

Add a profile card to the author page by fetching the user with API users and route id, displaying the user's image, name, and handle alongside the article feed.

Build a user edit page with name and image fields, validate input, submit via API, update auth context, and return to the user profile.

Create a user section in the navigation bar for a blogging app with SolidJS, displaying the authenticated user's image and name with a reactive image source.

Build a bootstrap dropdown in a SolidJS navigation bar, toggle visibility with a show class, and wire profile, edit, and logout actions via signals, refs, and a window click listener.

Add reaction functionality with toggleable icons to articles, reusing components in article cards and content. Filter articles by reactions, reading list, hot, or liked to create personalized lists.

Introduces a reaction button component for articles that toggles reading list bookmarks and other reactions, posts to the API reactions with article id and category, and updates a reacted state.

Implement all reactions for a blog article card, including like, reading list, and hot with icons, colors, and counts; initialize state from article details and sync with backend responses.

Implement an article filter component with buttons for latest, reading list, hot, and like, wiring it to home and feed to fetch articles by reaction or published date.

Hide user reactions and show the reaction filter only for logged-in users, using solid js show blocks and ID checks to disable actions after logout.