Construindo uma plataforma full stack com React, Node.js e MySQL
Como um projeto interdisciplinar na faculdade me ensinou mais sobre desenvolvimento web (e sobre usar IA com critério) do que muitos tutoriais.
Algumas semanas antes de começar o projeto, eu nunca tinha escrito uma linha de React. Hoje sou um dos responsáveis pelo frontend de uma plataforma web real, com rotas, componentes reutilizáveis, validação de formulários e uma API conectada a um banco de dados.
Sou estudante do primeiro ano de Ciência da Computação na FECAP, em São Paulo. Neste artigo conto como tem sido essa experiência: o que construímos, onde travei e como a IA virou uma parceira de estudo, não um atalho.
O desafio: a TrocaTicket
O projeto interdisciplinar do 2º semestre é desenvolver, do zero, uma plataforma para a TrocaTicket, uma startup incubada pela própria FECAP.
O problema que ela resolve é concreto. Quem organiza um evento precisa levantar custos (iluminação, segurança, alimentação, estrutura), cotar fornecedores e só então descobrir quanto cobrar pelo ingresso.
A TrocaTicket centraliza esse fluxo em um único produto com três perfis:
- Organizador: cria o evento, define público e custos, recebe propostas e estima o valor do ingresso.
- Fornecedor: mantém seu perfil, encontra oportunidades e envia propostas.
- Administrador: aprova cadastros e acompanha a plataforma.
O fluxo central é: cadastro → aprovação → evento → custos → proposta → seleção → precificação.
Cada perfil resolve um problema diferente dentro do mesmo ecossistema.
A stack
- Frontend: React, JavaScript e Tailwind CSS, com React Router para a navegação.
- Backend: Node.js e Express.
- Banco de dados: MySQL, modelado com chaves primárias e estrangeiras, e perfis de usuário em tabelas especializadas (organizador, fornecedor, administrador).
- Integração: API REST trocando JSON.
- Prototipação: Figma, antes de escrever as telas.
- Versionamento: Git e GitHub.
O backend é responsável pelas regras de negócio e pela segurança. As senhas são guardadas com hash usando
bcrypt, e as credenciais de banco e e-mail ficam em variáveis de ambiente, fora do repositório. O frontend cuida da experiência e da validação complementar.O que construímos até aqui
Cadastro em etapas. O fluxo muda conforme o tipo de conta: usuário comum tem 2 etapas, organizador 3 e fornecedor 4, incluindo a seleção de serviços oferecidos. Organizadores e fornecedores passam por aprovação antes de operar, e a tela final mostra uma linha do tempo do status da solicitação.
Painel administrativo. O administrador tem um dashboard com indicadores (total, pendentes, aprovados e rejeitados) e uma tela de aprovação com filtros, busca e ações de aprovar ou rejeitar.
Criação de evento em 4 etapas. Um wizard guia o organizador por informações básicas, público e lotes, custos independentes e itens de custo por categoria, com total estimado calculado em tempo real. Os dados ficam no componente pai para não se perderem ao trocar de etapa.
Painel de eventos. Lista com busca e filtros por status, tela de detalhes e edição.
Banco e API. Modelamos o banco em MySQL com as relações entre usuários, eventos, custos e propostas, e já temos a conexão real e as primeiras rotas, como o cadastro com senha criptografada.
Como uso a IA para aprender
A IA entrou no meu processo desde o B3 Tracker, meu primeiro projeto de portfólio, um dashboard de ações da bolsa brasileira. Foi lá que aprendi a usá-la de um jeito que continua valendo na TrocaTicket:
- Peço o porquê, não só a resposta. Quando algo quebra, quero entender a causa do erro, não apenas receber o código corrigido.
- Comparo abordagens. Peço alternativas e as vantagens e desvantagens de cada uma antes de decidir.
- Passo contexto. Quanto mais a IA conhece a arquitetura, o stack e as regras do projeto, mais úteis e coerentes são as respostas.
- Reviso tudo. O código gerado precisa ser lido, entendido e adaptado. Se eu não consigo explicá-lo, ele não entra no projeto.
- Uso como parceira de estudo. Peço comentários explicando cada trecho, o que me ajuda a reler o código meses depois.
A IA acelerou meu aprendizado, mas não pulou etapas. O entendimento continua sendo trabalho meu.
O que vem pela frente
O projeto está de pé e andando, mas ainda há bastante a fazer:
- integrar de ponta a ponta o frontend com a API (hoje várias telas usam dados de exemplo);
- implementar autenticação e autorização por perfil;
- construir o fluxo de oportunidades e propostas dos fornecedores;
- consolidar custos e calcular a estimativa de ingresso;
- testar e refinar a experiência.
Dicas para quem está começando
- Escolha um projeto que resolva um problema real. A motivação sustenta você nos dias em que nada funciona.
- Prototipe antes de codar. O Figma economizou retrabalho.
- Pense na arquitetura cedo. Separar frontend, API e banco desde o início facilita crescer depois.
- Erre cedo e entenda por quê. É assim que o conhecimento fica.
- Use IA como mentora, não como atalho.
Três meses atrás, React, APIs e bancos de dados eram teoria para mim. Hoje são ferramentas que uso para construir algo que pode ajudar organizadores e fornecedores de verdade. Ainda estou aprendendo, e é justamente isso que torna o processo tão bom.
Se você também está construindo seus primeiros projetos full stack, adoraria trocar experiências nos comentários.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article