Aggregator of Aluracord projects realized during the last edition of Alura's React Immersion

Overview

📱 Servidores da Discórdia

📟 Aluracord - Imersão React

Agregador de projetos Aluracord realizados durante a última edição da Imersão React da Alura.

A principal funcionalidade é a possibilidade de enviar mensagem para servidores de outros participantes da Imersão direto nessa página.

✔️ Funcionalidades

Telas

  • Login com usuário do GitHub (sem autenticação)
  • Servidor de mensagens (chat estilo Discord)
  • Servidores de mensagens de outros participantes da imersão
  • Cadastro de novos servidores de mensagens

Mensagens

  • Envio com enter
  • Envio com Botão
  • Exclusão (apenas autor)
  • Stickers
  • Texto sanitizado
  • Markdown
  • Links destacados
  • Links abrem em nova aba do navegador

Computação sem servidor

  • Hospedagem com ISR - Regeneração Estática Incremental (Next.js/Vercel)
  • Mensagens e lista de servidores (PostgreSQL/Supabase)

👁️‍🗨️ Visite aqui

discordia-gamma.vercel.app

🤖 Adicionando o seu servidor ao projeto

Clique no botão dentro do sistema.
Então informe o Nome, o endereço do seu servidor, uma imagem (gif fica mais legal) e marque a opção sobre identificação do usuário via useRouter.query.

⌨️ Implemente o seu próprio agregador de servidores

  • Clone esse repositório.
  • Crie seu projeto no Supabase.
  • Preencha seu arquivo .env na raiz do projeto com os dados do projeto no Supabase.
NEXT_PUBLIC_APP_NAME = App_Name
NEXT_PUBLIC_SUPABASE_URL = https://example.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = exemple-Y3MiwiZXhwIjoxOTU4OTgwNjc
  • Crie duas tabelas no banco de dados do Supabase com os seguintes campos:
Nome da tabela 1: messages
Campos - Tipos:
id - int8
created_at - timestamptz
de - text
texto - text
Nome da tabela 2: servers
Campos - Tipos -
id - int8
created_at - timestamptz
name - text
url - text
imgSrc - text
autoUser - bool
sequence - int2
  • Crie seu projeto na Vercel vinculando com seu repositório no GitHub.
  • Adicione as variáveis de ambiente dentro do seu projeto na Vercel.
  • Faça deploy do seu projeto na Vercel.
  • Por fim, se quiser, ajude a melhorar esse projeto.
You might also like...
30 Days of  React challenge is a step by step guide to learn React in 30 days
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

React Clone - How React Works: An In-Depth Guide
React Clone - How React Works: An In-Depth Guide

Как работает React: подробное руководство Привет, друзья! В этой статье я покажу вам, с чего начинается React. Что это означает? Это означает, что мы

A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

React-Login-app - Create a Login and Registration Page with React Router
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Insomnia-react-app - A react app that will help you relax and sleep better
Insomnia-react-app - A react app that will help you relax and sleep better

insomnia - a sleep inducer app An app that will help you relax and sleep better.

Owner
Felipe
Física, eletrônica e software para ciência.
Felipe
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. ⚛️

Alexis Guzman 27 Apr 12, 2022
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Lukas Möller 3 Feb 5, 2022
This is my Portfolio built with React. The app shows information about me, my projects, resume.

Elyor Doniyorov Built With React.js Live demo Netlify Live link Getting Started To get a local copy run the following steps: Copy this link https://gi

ELYOR 2 Jan 21, 2022
✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should m

Mat Sz 233 Nov 30, 2022
This repository contains different React components, hooks, apps and libraries that are used in different projects here at NaN Labs.

This repository contains different React components, hooks, apps and libraries that are used in different projects here at NaN Labs.

NaN Labs 9 Nov 18, 2022
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

null 1.1k Jan 5, 2023
Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

Automatically find jQuery methods from existing projects and generate vanilla js alternatives.

Sachin Neravath 1.1k Dec 28, 2022
ReactJs Advanced Projects

ReactJs-Advanced-Projects Tech We Used ReactJs Firebase Hosting Firebase Auth Firebase Storage React-Dom React Redux Steps to run in your machine Run

Alan Binu 22 Dec 27, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Salvatore Ravidà 177 Oct 10, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 632 Dec 29, 2022