Projeto desenvolvido com React.js React Native Node.js TypeScript

Overview

World Cup

Pré-Requisitos.

React.js, React Native, Node.js, JavaScript, TypeScript.

Node.js

React.js

Next.js

TypeScript

React Native

Ferramentas do programador.

Visual Studio Code

Expo

Expo Go

Android Studio

Postman

Insomnia

Hoppscotch

Figma

Criação do projeto

Setup do back-end

  • Fastify
  • Prisma
  • Banco de dados
  • Diagrama ERD
  • Contagem de balões

Setup do front-end

  • Fundamentos React
  • Next.js
  • Banco de dados
  • Buscando contagem de balões

Back-End

  • Instalando o Node e o NPM
  • Windows
  • Para conferir se a instalação foi um sucesso, basta abrir o seu terminal e digitar o comando:
node -v
  • Para conferir a versão do npm que foi instalada:
npm -v
  • Criar uma pasta server
  • Criar o arquivo packege.json
npm init
  • Instalar o TypeScript
npm i typescript -D
  • Setup Ts tsconfig.json
npx tsc --init
  • Alterar trecho de codigo no arquivo tsconfig.json
/* Language and Environment */
    "target": "es2020", 

Frame work

  • Instalar o frame work Fastify
npm i fastify
  • Converter o arquivo server.ts para server.js
npx tsc
  • Rodar o arquivo server.ts
node src/server.js
  • Auto-compila
npm i tsx -D
  • Apagar o arquivo server.js
  • Alterar trecho de codigo no arquivo package.json
  "scripts": {
    "dev": "tsx watch src/server.ts"

Roda o projeto

npm run dev

Prisma

  • Instalando o prisma
npm i prisma -D
  • Dependência de produção
npm i @prisma/client
  • Flag (Para o banco de dados SQLite)
npx prisma init --datasource-provider SQLite

Tabela no prisma (Model)

  • Editar o arquivo schema.prisma
// Tabela
model Pool {
  id String @id @default(cuid())
  title String
  code String @unique
  createAt DateTime @default(now())
}
  • Migrate
npx prisma migrate dev
  • Nome: > create table pools

Banco de Dados

  • Visualizar o banco de dados pelo navegador
npx prisma studio

Diagrama ERD

Mermaid-js

npm i prisma-erd-generator @mermaid-js/mermaid-cli -D
  • Cria o diagrama do banco de dados svg
npx prisma generate

Bibliotecas

  • Fastify, Cors
npm i @fastify/cors

Continuando o back-end

  • Estrutura do banco e relacionamentos
  • Criando seed do banco de dados
  • Criação de novo bolão
  • Contagem de usuários
  • Contagem de palpites

Aplicação web

  • Layout da aplicação
  • Conexão com API
  • Criação do bolão

Estrutura do banco e relacionamentos

  • Criar as tabelas no arquivo schema.prisma
  • Criar as migrate, tabelas no banco
npx prisma migrate dev
  • Nome: > create db structure

  • Rodar o projeto

npx prisma studio

ERD - Diagrama de relacionamento de entidades

  • Arquivo ERD.svg gerado
  • Visualizar arquivo ERD.svg no navegador
  • Diagrama

....

Criando seed do banco de dados

  • Criar arquivo ´seed.ts´ dentro da pasta prisma
  • Console do navegador
new Date().toISOString()
  • '2022-11-02T12:00:00.201Z'

  • Altera trecho de código no aqruivo package.json

"prisma": {
  "seed": "tsx prisma/seed.ts"
},
  • DB seed
npx prisma db seed
  • Rodar o projeto
npx prisma studio
  • Executa app backend
npm run dev

Testes de Requisições

Front-End

  • Criar o projeto React.js utilizando o Next.js

Next.js

npx [email protected] --use-npm
  • Nome do projeto web

Roda o projeto

npm run dev
  • Localhost: http://localhost:3000/

  • Clear, limpar o projeto

  • Alterar a extenção do arquivo _app.js para _app.tsx

  • Alterar a extenção do arquivo _index.js para _index.tsx

JSX - JavaScript + XML (HTML) TSX - TypeScript + JSX

Components

  • Exemplo de components React
/*Exemplo de Componente React*/
export function Tweet(){
    return (
        <>
            <h1>Tweet</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, esse.</p>
        </>
    );
}
  • Incluir a importação do component no aquivo index.tsx
/*importação no arquivo index.tsx*/
import { Tweet } from "../components/Tweet";

export default function Home() {
  return (
    <>
      <Tweet />
    </>    
  );
}

Propriedades (Props)

  • Exemplo de Pripriedades(Atributos) React
/*Exemplo de Componente React*/
export function Tweet(props){
    return (
        <>
            <h1>Tweet</h1>
            <p>{props.text}</p>
        </>
    );
}
  • Incluir a importação do component no aquivo index.tsx
/*importação no arquivo index.tsx*/
import { Tweet } from "../components/Tweet";

export default function Home() {
  return (
    <>
      {/*Exemplo de Props*/}
      <Tweet text="Meu Primeiro Tweet!"/>
    </>    
  );
}

Server Side Rendering

Settings.json

Configurações

  • Vscode Settings.json
{
  "emmet.syntaxProfiles" : {
    "javascript" : "jsx"
  },
  "workbench.startupEditor" : "newUntitledFile",
  "editor.fontSize" : 16,
  "javascript.suggest.autoImports" : true,
  "javascript.updateImportsOnFileMove.enabled" : "always",
  "editor.rulers" : [
    80,
    120
  ],
  "extensions.ignoreRecommendations" : true,
  "typescript.tsserver.log" : "off",
  "files.associations" : {
    ".sequelizerc" : "javascript",
    ".stylelintrc" : "json",
    "*.tsx" : "typescriptreact",
    ".env.*" : "dotenv",
    ".prettierrc" : "json"
  },
  "screencastMode.onlyKeyboardShortcuts" : true,
  "cSpell.userWords" : [
    "chakra",
    "IUGU",
    "middlewares",
    "mixpanel",
    "Onboarded",
    "prefetch",
    "rocketseat",
    "upsert"
  ],
  "editor.parameterHints.enabled" : false,
  "editor.renderLineHighlight" : "gutter",
  "cSpell.language" : "en,pt",
  "editor.lineHeight" : 26,
  "material-icon-theme.languages.associations" : {
    "dotenv" : "tune"
  },
  "typescript.updateImportsOnFileMove.enabled" : "never",
  "workbench.colorTheme" : "Omni",
  "material-icon-theme.files.associations" : {
    "tsconfig.json" : "tune",
    "*.webpack.js" : "webpack",
    "*.proto" : "3d",
    "ormconfig.json" : "database"
  },
  "material-icon-theme.activeIconPack" : "nest",
  "editor.suggestSelection" : "first",
  "explorer.confirmDelete" : false,
  "gitlens.codeLens.recentChange.enabled" : false,
  "terminal.integrated.showExitAlert" : false,
  
  "[prisma]" : {
    "editor.formatOnSave" : true
  },
    
  "typescript.suggest.autoImports" : true,
  "terminal.integrated.env.osx" : {
    "FIG_NEW_SESSION": "1"
  },
  "workbench.editor.labelFormat" : "short",
  "editor.fontLigatures" : true,
  "emmet.includeLanguages" : {
    "javascript" : "javascriptreact"
  },
  "liveshare.featureSet" : "insiders",
  "material-icon-theme.folders.associations" : {
    "adapters" : "contract",
    "grpc" : "pipe",
    "kube" : "kubernetes",
    "main" : "lib",
    "websockets" : "pipe",
    "implementations" : "core",
    "protos" : "pipe",
    "entities" : "class",
    "kafka" : "pipe",
    "use-cases" : "functions",
    "migrations" : "tools",
    "schemas" : "class",
    "useCases" : "functions",
    "eslint-config" : "tools",
    "typeorm" : "database",
    "_shared" : "shared",
    "mappers" : "meta",
    "fakes" : "mock",
    "modules" : "components",
    "subscribers" : "messages",
    "domain" : "class",
    "protocols" : "contract",
    "infra" : "app",
    "view-models" : "views",
    "presentation" : "template",
    "dtos" : "typescript",
    "http" : "container",
    "providers" : "include",
    "factories" : "class",
    "repositories" : "mappings"
  },
  "cSpell.enableFiletypes" : [
    "!asciidoc",
    "!c",
    "!cpp",
    "!csharp",
    "!go",
    "!handlebars",
    "!haskell",
    "!jade",
    "!java",
    "!latex",
    "!php",
    "!pug",
    "!python",
    "!restructuredtext",
    "!rust",
    "!scala",
    "!scss"
  ],
  "editor.acceptSuggestionOnCommitCharacter" : false,
  "explorer.compactFolders" : false,
  "git.enableSmartCommit" : true,
  "editor.accessibilitySupport" : "off",
  "explorer.confirmDragAndDrop" : false,
  "terminal.integrated.fontSize" : 14,
  "editor.codeActionsOnSave" : {
    "source.fixAll.eslint" : true,
    // "source.organizeImports": true
  },
  "editor.semanticHighlighting.enabled" : false,
  "breadcrumbs.enabled" : true,
  "workbench.productIconTheme" : "fluent-icons",
  "editor.fontFamily" : "JetBrains Mono",
  "gitlens.codeLens.authors.enabled" : false,
  "editor.tabSize" : 2,
  "security.workspace.trust.untrustedFiles" : "newWindow",
  "files.exclude" : {
    "**\/CVS" : true,
    "**\/.DS_Store" : true,
    "**\/.hg" : true,
    "**\/.svn" : true,
    "**\/.git" : true
  },
  "tabnine.experimentalAutoImports" : true,
  "gitlens.codeLens.enabled": false,
  "workbench.iconTheme": "material-icon-theme"
}

You might also like...
Node.js / GraphQL project template pre-configured with TypeScript, PostgreSQL, login flow, transactional emails, unit tests, CI/CD workflow.
Node.js / GraphQL project template pre-configured with TypeScript, PostgreSQL, login flow, transactional emails, unit tests, CI/CD workflow.

Node.js API Starter Kit Node.js API Starter Kit is a project template for building Node.js backend applications optimized for serverless infrastructur

StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.
StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.

StarHackIt StarHackIt is a fullstack starter kit composed of: React web frontend Node backend React native mobile app Infrastructure as code with GruC

Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Starter Antd 4.0 Admin App  Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Postgres, Express, React, Node - Stack Boilerplate
Postgres, Express, React, Node - Stack Boilerplate

PERN Boilerplate 🚧 WORK IN PROGRESS 🚧 upcoming features: Email confirmation Socials Login Features GraphQL Server JWT Authentication Auto refresh ac

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend.

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript. In addition, the web application can be built as Docker image using a multi stage built supported Dockerfile.

Starter template using React on a website's frontend - without Node
Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ 📦 Starter template using React on a website's frontend - without Node Preview Documentation License Released under MIT b

This is a fully functional google search engine book it was created with Restful API and i refactored it to the GraphQL built with Apollo server with the use of the MERN stack with react front end MongoDB database, Node.js, Express and API
Creador de tareas - MERN - MongoDB, Express, React y Node

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Owner
Daniel Oliveira
Front-End Web Development
Daniel Oliveira
DevBlogs - Blog designado e desenvolvido por mim, utilizando ReactJS!!

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

VITOR FELIX 0 Jan 25, 2022
Pomodoro desenvolvido em Electron para uso pessoal

Pomodoro Desenvolvi um Pomodoro para uso pessoal, ele funciona como na Técnica de Pomodoro onde termos sprints de 25 minutos (recomendado), e o Countd

Luiz Eduardo Prado Veltroni 3 Jul 15, 2022
React-typescript-mini-project - Node Module Search With Typescript Reactjs and Redux

Node Module Search Getting Started It is project for freshers who want to learn

Amitesh Mani Tiwari 1 Jan 22, 2022
Projeto React básico para servir como template.

Getting Started It was designed to facilitate a start up a react script. Here just installed and configured: Eslint based on airbnb rules. Localizatio

Gabriel Stein 1 Oct 29, 2021
GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

Karan Pratap Singh 1.1k Dec 1, 2022
A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

Elia Lazzari 3 Mar 16, 2022
Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Scott Jason 7 Sep 21, 2022
Starter Kit for Vite, React, TypeScript, Tailwind and Node.js ESM

Starter Kit for Vite, React, TypeScript, Tailwind and Node.js ESM Minimal, sensible defaults, fast. Read the blog post about this template. Technologi

Christoph Nakazawa 293 Dec 5, 2022
My project of personal blog using my knowledge in Node, Nest, React and Typescript

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Victor Antonino Costa 8 Nov 8, 2022