Solid JS & Firebase - O Guia Completo (Aplicativo de Mídia Social)

Construa um aplicativo de mídia social semelhante ao Twitter usando Solid JS e Typescript. Experimente o poder da reatividade do Solid JS e utilize o Firebase como o armazenamento de dados.

Visão Geral do Curso

Este curso é adequado para você? Este curso é projetado para pessoas que desejam criar um aplicativo semelhante ao Twitter usando Solid JS e poucas dependências de terceiros. Você aprenderá como construir várias funcionalidades do zero, incluindo validação de formulários, paginação, modais, pop-ups e notificações de snackbar. Ao trabalhar em um projeto real, você obterá uma compreensão profunda da API da biblioteca Solid JS e desenvolverá a confiança e as habilidades necessárias para iniciar seus próprios projetos. É necessário ter conhecimento básico de JavaScript para começar.

Sobre o Solid JS

Solid JS é uma biblioteca reativa de interface do usuário inspirada no React JS. Ele segue uma arquitetura semelhante a componentes, vinculação de dados reativa e JSX. Os componentes são executados apenas uma vez, enquanto os hooks e as vinculações são executados várias vezes à medida que suas dependências são atualizadas. O Solid JS compartilha a mesma filosofia do React, incluindo fluxo de dados unidirecional, segregação de leitura/escrita e interfaces imutáveis. No entanto, ele implementa esses conceitos de maneira diferente, omitindo o uso de um Virtual DOM.

Sobre o Typescript

Typescript é uma linguagem de código aberto que aprimora o JavaScript adicionando definições de tipo estático. Ele é construído em cima do JavaScript, uma das linguagens de programação mais amplamente utilizadas no mundo.

Conteúdo do Curso

Neste curso, você construirá um aplicativo semelhante ao Twitter do zero. O layout HTML é fornecido para economizar tempo e permitir que você se concentre exclusivamente na codificação do Solid JS. Você também aprenderá a usar o Typescript, um superset do JavaScript que fornece recursos adicionais e um verificador de tipo estático. O curso aborda os seguintes tópicos:

Preparação do Layout

Prepare o layout HTML para o seu aplicativo, separando-o em componentes Solid JS.

Router do Solid JS

Crie um aplicativo multi-página com diferentes estratégias de roteamento e navegação para várias rotas. Inclui a criação de páginas de perfil, login e registro.

Signals & Reactividade

Aprenda a criar e gerenciar dados reativos usando createSignal e stores.

Funções do Ciclo de Vida

Utilize as funções onMount e onCleanup para controlar o ciclo de vida de seus componentes.

Formulários de Autenticação

Crie formulários reativos e vincule dados aos campos do formulário.

Validação de Formulários Personalizada

Implemente validação de entrada/formulário personalizada e tratamento de erros do zero.

Firebase/Firestore

Inicialize o Firebase para armazenamento de dados.

Funções de Hook

Separe o código relacionado a recursos em seu próprio contexto usando funções de hook.

Autenticação

Implemente funcionalidades de login, registro e logout para autenticação de usuários.

Provedor e Contexto

Crie um componente provedor para armazenar dados no nível raiz e fornecê-los aos componentes subjacentes.

Snackbars

Use o provedor para exibir pop-ups de toast para funcionalidades em todo o aplicativo.

Criação de Glides

Aprenda a criar e exibir glides (mensagens) na página principal usando Firebase/Firestore.

Funcionalidade de Seguir

Permita que os usuários se inscrevam em outros usuários e recebam seus glides.

Exibição de Glides dos Seguidos

Permita que os usuários vejam os glides postados pelos usuários que eles seguem.

Paginação de Glides

Implemente paginação carregada sob demanda para buscar e exibir glides de forma eficiente conforme os usuários navegam no aplicativo.

Criação de Sub-Glides

Permita que os usuários respondam aos glides criando sub-glides.

Mensageiro Modal

Crie um componente modal do zero para exibir um componente de mensageiro em qualquer página.

Implantação no Vercel

Hospede seu aplicativo ao vivo no Vercel, tornando-o acessível a qualquer pessoa na internet.

Persistência

Aprenda a armazenar e persistir dados no nível do aplicativo para uso futuro. Ao longo do curso, você não apenas construirá um aplicativo semelhante ao Twitter, mas também obterá uma compreensão abrangente dos recursos do Solid JS e da arquitetura de aplicativos. No final, você estará equipado com as habilidades para criar suas próprias aplicações web usando o Solid JS.

O que Você Aprenderá

Ao se inscrever neste curso, você irá: - Ganhar proficiência em programação com Solid JS e criar aplicativos web impressionantes. - Compreender a implementação prática da criação de um aplicativo clone do Twitter. - Escrever código seguro usando Typescript. - Utilizar os serviços do Firebase, incluindo armazenamento Firestore e autenticação. - Estabelecer-se no campo do desenvolvimento web.