Is this course right for you?

This course covers creating a Twitter-like application with Solid JS and minimal 3rd party dependencies. Almost every feature is made from scratch without any dependency package. This covers - Form Validation, Pagination, Modal, Popups,  Snackbar, and more.

The course covers the explanation of Solid JS library API by working on an actual project. This course will give you the confidence and skills required to start any project.

Students should have basic javascript knowledge to start working on this course.

What is Solid JS?

Solid JS is a reactive UI library inspired by React JS. It utilizes Component-like architecture, reactive data binding, and JSX. 

Every Component executes once, and the Hooks and bindings execute many times as their dependencies update.

Solid follows the same philosophy as React with unidirectional data flow, read/write segregation, and immutable interfaces. It, however, has an entirely different implementation that forgoes using a Virtual DOM.

What is Typescript?

TypeScript is an open-source language that builds on JavaScript, one of the world's most used tools, by adding static type definitions.

What are you going to work on?

Students will build a Twitter-like app from scratch - the HTML layout part is not part of the course (This will be provided in the course materials to save time and focus purely on Solid JS). The focus of this course is coding and not writing HTML content. 

You will learn how to use Typescript language - a superset of Javascript providing additional features and a static type checker.

The course starts with the preparation of the base layout of the application. All designs - images, and content are provided by the instructor.

Content can be briefly summarized in these points:

  • Layout preparation - A few lectures to prepare the HTML for your application. Separation of layout into the Solid JS components. 

  • Solid JS Router - This part explains how to create a "multi-page" application. Students will learn how to create a routing with different routing strategies and navigation to the routes. Covers the creation of Profile, Login, and Register pages.

  • Signals & Reactivity - Explains how to create and manage reactive data with createSignal and stores.

  • Lifecycle function - How to use onMount and onCleanup

  • Auth Forms - Students will learn how to create a reactive form and bind the data to form inputs.

  • Custom Form Validation - Covers creating a custom input/form validation and error handling from scratch.

  • Firebase/Firestore - Initialization of Firebase application (data storage)

  • Hook Functions - Important part of the projects. Allows the feature-related code to be separated into its context. 

  • Authentication - This part covers creating a login, register, and logout functionality. Students will learn how to authenticate a user upon the application visit.

  • Provider and Context - This creates a provider component, which can hold the data on the root level and provide them to underlying components. 

  • Snackbars - App-wise functionality created with Provider to display any message as a toast popup.

  • Glide Creation - Covers how to create a new glide and display it on the main page. From this point on, students will often work with Firebase/Firestore.

  • Follow Functionality - Follow functionality allows users to subscribe to other users. 

  • Display Glides from Following - Subscription (Following) to other users will allow seeing the Glides (messages) they post.

  • Paginate Glides - It would be inefficient to fetch/display all of the glides on the initial load. Students will learn how to implement their lazy loaded pagination when data are loaded as the users browse the application.

  • Create Sub-Glides - It's essential to have a way to respond to glides. This feature enables a user to create subglides, which is an answer to the glide.

  • Modal Messenger - Students will learn how to create a modal component from scratch. This will be used to display a messenger component on any page.

  • Deployment to Vercel - Finally, the application will be live hosted on Vercel. Anybody on the internet will be able to visit your application.

While working on the features above, the students will learn and understand Solid JS features. They will know how to architecture applications and will be able to create their applications with Solid JS.


  • Base Javascript & Typescript knowledge

Course curriculum

  • 1


  • 2

    Init Project

    • Init Project

    • Open Coding Editors

    • Create entry files

    • Tailwind css

    • Quiz

    • Layout

    • Init Icons + Popup menu

    • Base Layout Done

    • Quiz

  • 3

    Components & Modularity

    • Sidebar Components

    • Quiz

    • Trends Data

    • For Loop

    • Layouts

    • Main Layout

    • Quiz

  • 4


    • Create signal

    • Create glide function

    • Add more content to the glide

    • Quiz

    • Glide Post Component

    • Pass props to glide post

    • Glide Type

    • Simplify Getters

    • Quiz

  • 5


    • Screens

    • Login and Register layout

    • Router

    • Lazy loading

    • Main navigation Links

    • A Router Component

    • Quiz

  • 6


    • Show content conditionaly

    • Fallback and lifecycle functions

    • Simple Popup

    • Pass component to Popup

    • Improve look of popup

    • Create effect

    • Adjust popup

    • Set popup position

    • Close popup on outside click

    • Portal

    • Resize Event

    • Dont close on popup click

    • Quiz

  • 7

    Create Root

    • Pagesize createroot

    • Track resize

    • Display icon conditionaly

    • Pagesize tracking

    • Quiz

  • 8

    Context and Provider

    • Auth Provider

    • Auth context values

    • Stores

    • Set Auth State

    • Quiz

    • Loader

    • Display loader conditionaly

    • Routing Layouts

    • Redirects

    • Quiz

  • 9

    Register Form

    • Set value in the form

    • Function to handle input changes

    • Quiz

    • Register form type

    • useForm hook

    • Move functionality to useForm

    • SubmitCallback

    • Generic types

    • Quiz

  • 10


    • Custom directive

    • On Blur, On Input

    • Move Validate Out

    • Simple validation

    • Simple Max length validator

    • Max length validator

    • Reusable validators

    • Run all validators

    • First letter uppercase validator

    • Quiz

  • 11

    Validation - part 2

    • Produce Function

    • Errors Array

    • Form error component

    • Display error messages

    • Simpler form errors

    • Quiz

    • More validators

    • Nice names

    • Validator Config

    • Validate on Submit

    • Is Form Valid

    • Quiz

    • On input validation

    • Pass form into validator

    • Compare with

  • 12


    • useRegister

    • Init Firebase

    • Get Collection from Firebase

  • 13

    Register/Login & Logout

    • Register User

    • Extend User Type

    • Create user in Firestore

    • Authenticate user

    • Logout User

    • Login Form

    • Login user

    • Rename Register

    • Quiz

  • 14


    • Use Auth

    • Replace login and register

    • Redirect user

    • Get User

    • Auth Loading

    • Quiz

  • 15


    • Display User Info

    • Snackbar start

    • UI Context

    • More Complex Snackbars

    • UI Dispatch

    • Push new glide to store

    • Remove snackbar function

    • Remove snackbar

    • Quiz

    • Auto Hide Snackbar

    • Snackbar progress

    • Display snack on authentication

  • 16


    • Use Messenger

    • Messenger Component

    • Cleanup Message

    • Auto size textarea

    • Check auth state

    • Create glide api

    • Create glide try catch

    • Save glide to FS

    • Quiz

  • 17

    Use Glides Hook

    • Use Glides Hook

    • Fetch Glides

    • Get Glides with users

    • Constraints

    • Change Glides Format in Store

    • Add Glide to State

    • Add user to created glide

    • Check for undefined glide

    • Quiz

  • 18

    Pagination Start

    • Paginated Glides Component

    • Glide Loading

    • Data Loader

    • Check when to load new items

    • Keep Last Glide

    • Load More Data

    • Stop Loading Condition

    • Quiz

  • 19

    Profile Screen

    • Profile Screen

    • Page Title

    • Use users hook

    • Get users

    • Fech all but logged in user

    • Loader while loading users

    • Quiz

  • 20

    Follow user

    • Follow user feature

    • Hide followed users

    • UX Improvement in Follow

    • Auth Dispatch

    • Update user

    • Check if user is not null

    • Check if already follow user

    • Remove user from users

    • Display message when following all users

    • Disable send button

    • Quiz

  • 21

    Subscribe to Glides

    • Fetch glides of followed users

    • Subscribe to new glides

    • Unsubscribe from glides

    • Get data from sub

    • Store fresh glides to store

    • Show more glides button

    • Wrapper button

    • Display fresh glides

    • Quiz

  • 22

    Glide Detail

    • How to store glides

    • Store glide lookup

    • Glide Detail Page

    • Get routing params

    • Get lookup

    • Get Glide By Id

    • Display Glide with Create Resource

    • Back Button

    • Add messenger to detail

    • Quiz

  • 23

    Get Subglides

    • Use Subglides

    • Load Subglides

    • Pass lookup to fetch glides

    • Fetch subglides

    • Answer To

    • Get collection to add glide to

    • Paginated Glide on Detail

    • Update subglide count

    • Update subglide count in real time

    • Add glide in real time

    • Quiz

  • 24

    Subglide Pagination

    • Refactor where to load subglides

    • Refetch Data

    • Reset Pagination

    • Pagination subglides

    • Display message when no glides

    • Handle Times

    • Quiz

  • 25

    Modal with Messenger

    • Modal Component

    • Open Modal

    • Open component in Modal

    • Pass props back to props

    • Close Modal on outside click

    • Provide messenger to modal

    • Pass glide to messenger

    • Pass children as a component

    • Disable scrolling

    • Quiz

  • 26

    Image Upload

    • Handle Image Selection

    • Array buffer

    • Image url

    • Set Image to Signal

    • Upload Image Function

    • Upload Image Success

    • Create glide with image

    • Clean Image and Display It

    • Quiz

  • 27


    • Github repo

    • Application Testing

    • Deployment to Vercel

  • 28


    • Persistence Provider

    • Set and Get Value

    • Get value type

    • Store Selected Glide

    • use revalidate

    • Revalidate getter function

    • Get value from persistence

    • Quiz

  • 29


    • Revalidate

    • Compare persisted and fetched data

    • Set latest data in store

    • Add callback to revalidate

    • On Glide added update store

    • Clear persistence

    • Final Lecture

    • Quiz


Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.


  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching any lecture. Just download the correct project version attached to the lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Solid JS & Firebase - The Complete Guide (Twitter Clone App)"


    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now