Solid JS & Firebase - Complete Guide to X(Twitter) Clone

Initialize a Solid JS TypeScript project from GitHub templates, install dependencies with npm or pnpm, and set up a project folder to run the twitter-like app with Firebase.

Open and configure a Solid JS project in Visual Studio Code, and install key extensions like Tailwind, IntelliSense, PostCSS, and Prettier to prepare the project structure for coding.

Create the entry files for a Solid JS app by adding an index file, importing render, and mounting a hello world component to the root element with basic TypeScript typing.

Learn how to initialize and integrate Tailwind CSS in a Solid JS project, install dependencies, configure Tailwind, import index.css, and apply Tailwind utilities to build the layout.

Copy the prepared layout from the GitHub repository, install Tailwind CSS forms and Solid Icons, and run the dev server to view the layout in your browser.

Uncomment and import solid icons for each navigation item, integrate a bottom popup user menu, and render a logged-in user display with a popup component.

Build the base layout for the twitter clone using Solid JS, integrate icons, and refactor into modular components—layout, left and right sidebars, pop up, messenger, and glide post components.

Refactor the base layout into modular components by creating a main sidebar and a trends sidebar, organizing them under a components folder with proper imports for cleaner code.

Explore building a trends sidebar with a data-driven array of trend objects, including category, content, and the glide count, and render them by iterating through the data.

Learn to render a list in solid js with the for component by iterating a trends array, displaying each trend's category and glide count in JSX.

Create and use layouts as reusable components that wrap content with a main layout, pass children via props, and render dynamic components like hello and goodbye inside a shared wrapper.

Organize your app with a main layout that provides reusable left and right sidebars. Render page-specific content as children to adapt the home and profile pages without duplicating layout.

Demonstrate reactivity in solid js by creating a signal to capture input with onInput, store it, and display the value in real time.

Create a glide function in a Solid JS UI that captures input as content, clears the text area on submit, and appends each new glide to the glides array.

Demonstrate inserting a new glide as the first item in the glides array, and enrich it with user info, avatar, date, and like/responses counters using solid js.

Create a new glide post component to separate the content of the glide post, place it in the components folder, and render glides by iterating the glide array.

Create and import typed glide and user interfaces, move types to a separate file, and pass a fully typed glide through props into the glide post component.

Create intermediate getters for the glide post and user data to shorten access from props, enabling concise expressions like user.avatar and nickname.

Define a multi-screen architecture with home, login, and register screens inside a screens folder, then prep for a router to render views based on the URL.

Build login and register layouts for the solid js app using GitHub-provided forms, switching between login and register views on the home screen; next, implement a router for URL-based navigation.

Fix routing changes by installing router version 0.5.1 or applying the latest changes, including removing outlet and using props.children with the out provider.

Wrap the application in the Solid JS router, install and import the router, then define routes for home, login, and register to render the corresponding screens.

Learn how to implement lazy loading in solid-js to load the home screen immediately while login and register screens load on demand.

Build main navigation in a solid app by converting the sidebar to a dynamic, icon-driven link array (home, profile, discover) with routes. Learn lazy loading and the anchor reload issue.

Learn to implement a router component in SolidJS to navigate between login and register without page reloads, using the capital A element from solid-js/router to lazy-load route code.

Demonstrate conditional content display in Solid JS by toggling a popup menu with a Show component, signals, and click handlers to show or hide items like logout.

Learn to implement lifecycle functions by mounting and cleaning up components, create and import a hello world component, and use a show component with a fallback to render content conditionally.

Create a simple popup component in Solid JS, display content conditionally with an is open signal and a trigger button, and integrate it into the sidebar.

Learn to pass an opener component to a popup in solid js, control open state from outside, and type the opener prop with typescript for flexible, external triggers.

Improve the popup's appearance by updating the component with new structure and logout text, and apply flex grow changes, copy the updated component from GitHub repository and refresh to preview.

Introduces create effect, a lifecycle function that runs on mount and reacts to reactive value changes to display or hide the pop up.

Adjust a popup in a Solid JS app using create effect to react when it opens, then obtain element references to position it above the menu.

Adjust the popup position by calculating the menu height with client height and setting the popup bottom offset to align it above the menu, while accounting for margins.

Open and close the popup in Solid JS by adding a click listener to close on outside clicks, with mount and cleanup, a closePopup function, and stopImmediatePropagation to ignore clicks.

Explore using portals in Solid.js to render a logout popup outside the normal DOM, mounting it on a dedicated div and positioning with bounding client rect.

Learn to make a popup follow the window as you resize by using a resize event, updating the popup's left and bottom positions, and cleaning up the event listener.

Learn to prevent closing the popup on inside clicks by detecting clicks with a reference and event target, closing only when outside or on the bottom menu.

Display icons instead of glided text on small screens, monitor screen size with a persistent page size function, and compare standard versus createRoot lifycles in Solid JS.

Track page size in Solid JS using a reactive signal, compute width and height with a get client size helper, and expose getter functions for cross-component updates.

Create page size getters to detect extra large and large screens using 1280px thresholds, and conditionally display a glide icon on extra large screens or a quill pen icon otherwise.

Track page size changes with a create effect, import the reactive page size, and resize the popup accordingly. Pave the way for authentication.

Explore building an authentication infrastructure with a provider and context in Solid JS, wrapping the app to share authentication state across all components using a context to access that state.

Set up a provider in Solid JS to share auth context values across the app, using signals for isAuthenticated and loading tied to Firebase authentication state on app mount.

Learn to replace signals with a centralized store in SolidJS to manage authentication and loading state, using a reactive store with initial state and setter functions to update multiple values.

Simulate a login flow with an async authenticate user function using a timeout and promise to toggle is authenticated and loading on mount, including try-catch-finally error handling.

Explore implementing a loading state during user authentication in a Solid JS and Firebase app, displaying a loader while simulating authentication and wrapping the app with an auth provider.

Display a loader component only while the authentication state loads, then render the app via props.children once loading completes. Update routing to use /out/login and /out/register for login and register.

Route layouts in Solid JS with a main and out layout and outlet to render home, login, and register screens. Redirect users to login and show home when logged in.

Navigate between main and out layouts by checking authentication state, redirecting unauthenticated users to login and authenticated users to home, using solid router navigate with replace option.

Set value in the form explains initializing a registration form with full name, nickname, email, avatar, and password. Update fields using on input and currentTarget.value, and explore square bracket keys.

Learn a signal-backed form object, update keys like full name and nickname from input events, and build a reusable handle input to drive all fields and submit the form.

Switch from input handler to create store for a register form in Solid JS, and type it to restrict keys to full name, nickname, email, avatar, password, and password confirmation.

Refactor the register screen by extracting form logic into a reusable useForm hook, encapsulating form data, input handling, and lifecycle effects for mounting and cleanup.

Move all form functionality into a reusable useForm hook, pass initial form data, expose handle input and submit, and validate imports to streamline the register form and future forms.

Learn to wire a submit callback into the form submission flow with a form hook, capture form data on submit, and pass it to the register screen for server submission.

Define generic TypeScript forms with a base string key-value type and extend it for login and registration, enabling type-safe data in useForm submissions.

Implement custom form validations in Solid JS by building directives, creating validators for input length, email validation, and password confirmation, using the use directive to access DOM elements and values.

Extend the custom validate directive to two inputs, enabling real-time validation with on input and on blur listeners for the full name and nickname values.

Move the validate logic out by refactoring to use form, exposing the validate function, and wiring it to on blur for input fields.

Implement a simple blur-based validation by wiring a reusable validator to each input, track per-field errors in an errors object, and display hard-coded error messages for demonstration.

Extend the max length validator to verify input length, using element.value and seven-character limit, making full name and nickname inputs valid when under seven characters or empty, and invalid otherwise.

Extend the validator to return an error message when input exceeds the max length, with a default seven and an empty string signaling no error.

Explore reusable validators for forms, turning a max length validator into a message-based function and passing validator arrays from outside for flexible, input-specific validation.

Create reusable validators and apply them via an array, looping through each to check input validity. Wire the max link validator and the directive into the check validity function.

Learn to build a first letter uppercase validator and integrate it with existing validators, and see how an array of error messages prevents overwriting feedback.