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

Build a Twitter-like app with Solid JS and Typescript. Unleash Solid JS reactivity. Use Firebase as the data store.

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.

• Persistence - This section explains how to store data on the application level and persist them for later use.

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.