Solid JS & Firebase - The Complete Guide (Twitter Clone App)

Focused View

Eincode by Filip Jerga,Filip Jerga

23:59:20

135 View

1. Introduction

1. Introduction.mp4

02:19

2. How to resolve issues.mp4

05:51

3. Few words before start.mp4

04:37

2. Init Project

1.1 Code.html

1.2 Complete Course.html

1. Init Project.mp4

08:24

2.1 Code.html

2. Open Coding Editors.mp4

09:52

3.1 Code.html

3. Create entry files.mp4

07:01

4.1 Code.html

4. Tailwind css.mp4

06:40

5. Quiz.html

6.1 Code.html

6. Layout.mp4

06:03

7.1 Code.html

7. Init Icons + Popup menu.mp4

05:18

8.1 Code.html

8. Base Layout Done.mp4

06:04

9. Quiz.html

3. Components & Modularity

1.1 Code.html

1. Sidebar Components.mp4

06:55

2. Quiz.html

3.1 Code.html

3. Trends Data.mp4

05:06

4.1 Code.html

4. For Loop.mp4

07:48

5.1 Code.html

5. Layouts.mp4

11:24

6.1 Code.html

6. Main Layout.mp4

08:00

7. Quiz.html

4. Reactivity

1.1 Code.html

1. Create signal.mp4

10:24

2.1 Code.html

2. Create glide function.mp4

08:07

3.1 Code.html

3. Add more content to the glide.mp4

06:15

4. Quiz.html

5.1 Code.html

5. Glide Post Component.mp4

08:16

6.1 Code.html

6. Pass props to glide post.mp4

05:12

7.1 Code.html

7. Glide Type.mp4

07:25

8.1 Code.html

8. Simplify Getters.mp4

03:14

9. Quiz.html

5. Routing

1.1 Code.html

1. Screens.mp4

07:25

2.1 Code.html

2. Login and Register layout.mp4

02:18

3.1 Code.html

3. Router.mp4

06:05

4.1 Code.html

4. Lazy loading.mp4

03:51

5.1 Code.html

5. Main navigation Links.mp4

08:21

6.1 Code.html

6. A Router Component.mp4

05:15

7. Quiz.html

6. Popup

1.1 Code.html

1. Show content conditionaly.mp4

06:25

2.1 Code.html

2. Fallback and lifecycle functions.mp4

06:37

3.1 Code.html

3. Simple Popup.mp4

07:05

4.1 Code.html

4. Pass component to Popup.mp4

09:08

5.1 Code.html

5. Improve look of popup.mp4

02:56

6.1 Code.html

6. Create effect.mp4

06:17

7.1 Code.html

7. Adjust popup.mp4

07:52

8.1 Code.html

8. Set popup position.mp4

06:36

9.1 Code.html

9. Close popup on outside click.mp4

05:43

10.1 Code.html

10. Portal.mp4

08:08

11.1 Code.html

11. Resize Event.mp4

01:46

12.1 Code.html

12. Dont close on popup click.mp4

10:50

13. Quiz.html

7. Create Root

1.1 Code.html

1. Pagesize createroot.mp4

09:42

2.1 Code.html

2. Track resize.mp4

09:44

3.1 Code.html

3. Display icon conditionaly.mp4

05:40

4.1 Code.html

4. Pagesize tracking.mp4

02:07

5. Quiz.html

8. Context and Provider

1.1 Code.html

1. Auth Provider.mp4

12:27

2.1 Code.html

2. Auth context values.mp4

08:37

3.1 Code.html

3. Stores.mp4

06:47

4.1 Code.html

4. Set Auth State.mp4

11:00

5. Quiz.html

6.1 Code.html

6. Loader.mp4

06:15

7.1 Code.html

7. Display loader conditionally.mp4

05:04

8.1 Code.html

8. Routing Layouts.mp4

16:39

9.1 Code.html

9. Redirects.mp4

11:02

10. Quiz.html

9. Register Form

1.1 Code.html

1. Set value in the form.mp4

06:10

2.1 Code.html

2. Function to handle input changes.mp4

06:51

3. Quiz.html

4.1 Code.html

4. Register form type.mp4

05:50

5.1 Code.html

5. useForm hook.mp4

09:55

6.1 Code.html

6. Move functionality to useForm.mp4

04:20

7.1 Code.html

7. SubmitCallback.mp4

05:16

8.1 Code.html

8. Generic types.mp4

08:20

9. Quiz.html

10. Validation

1.1 Code.html

1. Custom directive.mp4

09:25

2.1 Code.html

2. On Blur, On Input.mp4

02:59

3.1 Code.html

3. Move Validate Out.mp4

01:13

4.1 Code.html

4. Simple validation.mp4

07:28

5.1 Code.html

5. Simple Max length validator.mp4

04:05

6.1 Code.html

6. Max length validator.mp4

05:48

7.1 Code.html

7. Reusable validators.mp4

08:46

8.1 Code.html

8. Run all validators.mp4

04:39

9.1 Code.html

9. First letter uppercase validator.mp4

10:45

10. Quiz.html

11. Validation - part 2

1.1 Code.html

1. Produce Function.mp4

10:16

2.1 Code.html

2. Errors Array.mp4

07:47

3.1 Code.html

3. Form error component.mp4

03:19

4.1 Code.html

4. Display error messages.mp4

05:46

5.1 Code.html

5. Simpler form errors.mp4

06:14

6. Quiz.html

7.1 Code.html

7. More validators.mp4

07:33

8.1 Code.html

8. Nice names.mp4

09:13

9.1 Code.html

9. Validator Config.mp4

09:45

10.1 Code.html

10. Validate on Submit.mp4

03:57

11.1 Code.html

11. Is Form Valid.mp4

08:47

12. Quiz.html

13.1 Code.html

13. On input validation.mp4

03:00

14.1 Code.html

14. Pass form into validator.mp4

05:19

15.1 Code.html

15. Compare with.mp4

07:09

12. Firebase

1.1 Code.html

1. useRegister.mp4

04:26

2.1 Code.html

2. Init Firebase.mp4

10:04

3.1 Code.html

3. Get Collection from Firebase.mp4

10:55

13. RegisterLogin & Logout

1.1 Code.html

1. Register User.mp4

07:39

2.1 Code.html

2. Extend User Type.mp4

03:31

3.1 Code.html

3. Create user in Firestore.mp4

10:40

4.1 Code.html

4. Authenticate user.mp4

09:57

5.1 Code.html

5. Logout User.mp4

08:06

6.1 Code.html

6. Login Form.mp4

06:43

7.1 Code.html

7. Login user.mp4

03:59

8.1 Code.html

8. Rename Register.mp4

02:46

9. Quiz.html

14. Authenticate

1.1 Code.html

1. Use Auth.mp4

07:13

2.1 Code.html

2. Replace login and register.mp4

04:10

3.1 Code.html

3. Redirect user.mp4

05:40

4.1 Code.html

4. Get User.mp4

06:55

5.1 Code.html

5. Auth Loading.mp4

09:32

6. Quiz.html

15. Snackbars

1.1 Code.html

1. Display User Info.mp4

03:59

2.1 Code.html

2. Snackbar start.mp4

06:42

3.1 Code.html

3. UI Context.mp4

09:17

4.1 Code.html

4. More Complex Snackbars.mp4

05:29

5.1 Code.html

5. UI Dispatch.mp4

07:02

6.1 Code.html

6. Push new glide to store.mp4

03:42

7.1 Code.html

7. Remove snackbar function.mp4

06:51

8.1 Code.html

8. Remove snackbar.mp4

03:14

9. Quiz.html

10.1 Code.html

10. Auto Hide Snackbar.mp4

09:36

11.1 Code.html

11. Snackbar progress.mp4

04:11

12.1 Code.html

12. Display snack on authentication.mp4

03:04

16. Messenger

1.1 Code.html

1. Use Messenger.mp4

07:45

2.1 Code.html

2. Messenger Component.mp4

04:19

3.1 Code.html

3. Cleanup message.mp4

02:18

4.1 Code.html

4. Auto size textarea.mp4

04:28

5.1 Code.html

5. Check auth state.mp4

06:55

6.1 Code.html

6. Create glide api.mp4

07:49

7.1 Code.html

7. Create glide try catch.mp4

02:29

8.1 Code.html

8. Save glide to FS.mp4

07:56

9. Quiz.html

17. Use Glides Hook

1.1 Code.html

1. Use Glides Hook.mp4

05:30

2.1 Code.html

2. Fetch Glides.mp4

09:34

3.1 Code.html

3. Get Glides with users.mp4

05:31

4.1 Code.html

4. Constraints.mp4

05:46

5.1 Code.html

5. Change Glides Format in Store.mp4

13:05

6.1 Code.html

6. Add Glide to State.mp4

09:10

7.1 Code.html

7. Add user to created glide.mp4

04:32

8.1 Code.html

8. Check for undefined glide.mp4

02:30

9. Quiz.html

18. Pagination Start

1.1 Code.html

1. Paginated Glides Component.mp4

04:02

2.1 Code.html

2. Glide Loading.mp4

02:49

3.1 Code.html

3. Data Loader.mp4

02:07

4.1 Code.html

4. Check when to load new items.mp4

09:02

5.1 Code.html

5. Keep Last Glide.mp4

07:41

6.1 Code.html

6. Load More Data.mp4

09:04

7.1 Code.html

7. Stop Loading Condition.mp4

04:18

8. Quiz.html

19. Profile Screen

1.1 Code.html

1. Profile Screen.mp4

06:33

2.1 Code.html

2. Page Title.mp4

03:18

3.1 Code.html

3. Use users hook.mp4

08:02

4.1 Code.html

4. Get users.mp4

03:08

5.1 Code.html

5. Fetch all but logged in user.mp4

05:33

6.1 Code.html

6. Loader while loading users.mp4

02:23

20. Follow User

1.1 Code.html

1. Follow user feature.mp4

19:32

2.1 Code.html

2. Hide followed users.mp4

09:19

3.1 Code.html

3. UX Improvement in Follow.mp4

06:13

4.1 Code.html

4. Auth Dispatch.mp4

07:56

5.1 Code.html

5. Update user.mp4

11:14

6.1 Code.html

6. Check if user is not null.mp4

04:59

7.1 Code.html

7. Check if already follow user.mp4

03:38

8.1 Code.html

8. Remove user from users.mp4

07:29

9.1 Code.html

9. Display message when following all users.mp4

04:35

10.1 Code.html

10. Disable send button.mp4

02:47

21. Subscribe to Glides

1.1 Code.html

1. Fetch glides of followed users.mp4

11:59

2.1 Code.html

2. Subscribe to new glides.mp4

16:43

3.1 Code.html

3. Unsubscribe from glides.mp4

04:34

4.1 Code.html

4. Get data from sub.mp4

06:51

5.1 Code.html

5. Store fresh glides to store.mp4

04:41

6.1 Code.html

6. Show more glides button.mp4

05:09

7.1 Code.html

7. Wrapper button.mp4

13:21

8.1 Code.html

8. Display fresh glides.mp4

09:34

22. Glide Detail

1. How to store glides.mp4

15:13

2.1 Code.html

2. Store glide lookup.mp4

11:10

3.1 Code.html

3. Glide Detail Page.mp4

11:00

4.1 Code.html

4. Get routing params.mp4

03:15

5.1 Code.html

5. Get lookup.mp4

08:07

6.1 Code.html

6. Get Glide By Id.mp4

08:09

7.1 Code.html

7. Display Glide with Create Resource.mp4

07:40

8.1 Code.html

8. Back button.mp4

03:46

9.1 Code.html

9. Add messenger to detail.mp4

09:10

23. Get Subglides

1.1 Code.html

1. Use Subglides.mp4

05:00

2.1 Code.html

2. Load Subglides.mp4

04:13

3.1 Code.html

3. Pass lookup to fetch glides.mp4

06:00

4.1 Code.html

4. Fetch subglides.mp4

08:27

5.1 Code.html

5. Answer To.mp4

06:26

6.1 Code.html

6. Get collection to add glide to.mp4

09:43

7.1 Code.html

7. Paginated Glide on Detail.mp4

04:26

8.1 Code.html

8. Update subglide count.mp4

02:57

9.1 Code.html

9. Update subglide count in real time.mp4

05:33

10.1 Code.html

10. Add glide in real time.mp4

02:12

24. Subglide Pagination

1.1 Code.html

1. Refactor where to load subglides.mp4

07:03

2.1 Code.html

2. Refetch Data.mp4

08:55

3.1 Code.html

3. Reset Pagination.mp4

06:07

4.1 Code.html

4. Pagination subglides.mp4

06:58

5.1 Code.html

5. Display message when no glides.mp4

05:47

6.1 Code.html

6. Handle Times.mp4

05:16

25. Modal with Messenger

1.1 Code.html

1. Modal Component.mp4

04:30

2.1 Code.html

2. Open Modal.mp4

01:30

3.1 Code.html

3. Open component in Modal.mp4

05:15

4.1 Code.html

4. Pass props back to props.mp4

04:02

5.1 Code.html

5. Close Modal on outside click.mp4

04:58

6.1 Code.html

6. Provide messenger to modal.mp4

06:32

7.1 Code.html

7. Pass glide to messenger.mp4

03:56

8.1 Code.html

8. Pass children as a component.mp4

09:42

9.1 Code.html

9. Disable scrolling.mp4

04:00

26. Image Upload

1.1 Code.html

1. Handle Image Selection.mp4

05:14

2.1 Code.html

2. Array buffer.mp4

08:43

3.1 Code.html

3. Image url.mp4

03:29

4.1 Code.html

4. Set Image to Signal.mp4

07:02

5.1 Code.html

5. Upload Image Function.mp4

06:06

6.1 Code.html

6. Upload Image Success.mp4

07:59

7.1 Code.html

7. Create glide with image.mp4

04:05

8.1 Code.html

8. Clean Image and Display It.mp4

04:52

27. Deployment

1. Github repo.mp4

08:47

2. Deployment to Vercel.mp4

09:35

3. Application Testing.mp4

10:08

28. Persistence

1.1 Code.html

1. Persistence Provider.mp4

07:27

2.1 Code.html

2. Set and Get Value.mp4

08:37

3.1 Code.html

3. Get value type.mp4

02:06

4.1 Code.html

4. Store Selected Glide.mp4

04:14

5.1 Code.html

5. use revalidate.mp4

08:27

6.1 Code.html

6. Revalidate getter function.mp4

03:23

7.1 Code.html

7. Get value from persistence.mp4

05:39

29. Revalidate

1.1 Code.html

1. Revalidate.mp4

04:53

2.1 Code.html

2. Compare persisted and fetched data.mp4

16:22

3.1 Code.html

3. Set latest data in store.mp4

03:49

4.1 Code.html

4. Add callback to revalidate.mp4

06:07

5.1 Code.html

5. On Glide added update store.mp4

04:46

6.1 Code.html

6. Clear persistence.mp4

09:38

7.1 Code.html

7. Final Lecture.mp4

09:28

Description

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

What You'll Learn?

Learn to program with Solid JS and create amazing Web Apps
Get an understanding of how to create a Twitter clone app explained practically
Write type-safe code with Typescript
Use Firebase services - Firestore storage, Authentication
Establish yourself in the field of the Web Development

Who is this for?

Anybody interested in how to create Web Apps with modern JS libraries/frameworks

People looking for a practical web development guide

This course is for everyone eager to understand how to build an app from scratch

More details

Description
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.
Who this course is for:
Anybody interested in how to create Web Apps with modern JS libraries/frameworks
People looking for a practical web development guide
This course is for everyone eager to understand how to build an app from scratch

User Reviews

Rating

average 0

Total votes0

Focused display

Eincode mission is to provide the best online learning experience for its audience.High-quality content and programming concepts explained in real-life projects are fields where Eincode shines!Eincode covers mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides, then Eincode is the right choice.Instructor Filip Jerga also publishes courses.Cheers & Keep Coding!

Filip Jerga

Instructor's Courses

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 various 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 into explaining web and software engineering concepts straightforwardly, hands-on, and understandable.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.