Memoriza - Projetos Freelancer

Visão Geral

O Memoriza é uma aplicação fullstack voltada para a venda de artigos de papelaria personalizáveis. O projeto foi desenvolvido pensando em uso real, com foco em segurança, organização do código e experiência do usuário, contando com interface responsiva adaptada para diferentes tamanhos de tela.

PROBLEMA

Pequenos empreendedores e comerciantes precisam de uma plataforma que seja simples, segura e que permita a gestão de seus negócios de forma eficiente.

OBJETIVOS

Expor sua galeria de produtos, facilitando a compra de seus clientes
Oferecer personalização de produtos para atender às necessidades específicas de cada cliente
Sistema completo de frete e pagamentos

PÚBLICO-ALVO

Clientes, buscando comprar artigos de papelaria personalizáveis.

FUNCIONALIDADES PRINCIPAIS

Autenticação via JWT e Cookies HttpOnly
Autenticação via Google OAuth
Gerenciamento de produtos, pedidos, cores, tamanhos, categorias
Dashboard dinâmico atualizado em tempo real
Postagem dos pedidos em transporte
Sistema de permissões por cargo, controle de funcionários e logs
Gerenciamento de frete e seus valores por CEP
Gerenciamento de reembolso por aprovação
Integração com Mercado Pago para pagamentos via Pix e Cartão de Crédito
Interface responsiva adaptada para diferentes tamanhos de tela

FRONTEND

Next.jsReactTypeScriptTailwind

BACKEND

C#ASP.NET Core 8Fluent Validation

DATABASE

PostgreSQL (Supabase)

INFRA

AWS EC2GitHub Actions

Galeria

Arquitetura

Arquitetura baseada em Clean Architecture MVC, priorizando microsserviços e organização. O front-end TypeScript com React/Next.js se comunica com a API ASP.NET via REST. O backend segue o padrão com C# e ASP.NET Core, priorizando rotas separadas por permissões. Hospedagem AWS EC2 e banco de dados Supabase como principal, incluindo configuração RLS (Row-Level Security), MongoDB para logs.

ESTRUTURA DE PASTAS

src/
├── memoriza-frontend/
│   ├── app/
│   │   ├── account/
│   │   ├── admin/
│   │   ├── auth/
│   │   ├── cart/
│   │   ├── checkout/
│   │   ├── minha-conta/
│   │   ├── payment/
│   │   ├── products/
│   │   └── globals.css
│   │   └── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/
│   │   ├── all-components.tsx
│   ├── lib/
│   │   ├── auth-context.tsx
│   │   └── cart-context.tsx
│   │   └── currency-utils.ts
│   │   └── employee-types.ts
│   │   └── installment-calculator.ts
│   │   └── use-permissions.ts
│   │   └── cart-context.ts
│   └── hooks/
│       ├── use-mobile.ts
│       └── use-toast.ts
├── memoriza-backend/
│   ├── Controller/
│   │   ├── Admin/
│   │   └── Auth/
│   │   └── Payment/
│   │   └── User/
│   ├── Filters/
│   ├── Helpers/
│   ├── Models/
│   │   ├── Admin/
│   │   └── Auth/
│   │   └── DTO/
│   │   └── Entities/
│   │   └── Mercado Pago/
│   ├── Repositories/
│   │   ├── Admin/
│   │   └── Auth/
│   │   └── Profile/
│   ├── Services/
│   │   ├── Admin/
│   │   └── Auth/
│   │   └── BackgroundsJobs/
│   │   └── Payments/
│   │   └── Profile/
│   ├── Settings/
│   ├── Validations/
│   │   ├── Admin/
│   │   ├── Auth/
│   │   ├── User/
│   └── Program.cs
└── appsettings.json

DECISÕES TÉCNICAS

Next.js/React.js com Tailwind e TypeScript para o front-end

SSR para SEO, App Router para layouts complexos, e excelente DX com TypeScript.

C# com ASP.NET Core utilizando Dapper para acesso a dados

Alta performance com queries SQL otimizadas, baixo overhead comparado a ORMs completos e maior controle sobre o acesso ao banco.

AWS EC2 hospedagem do backend com PostgreSQL (Supabase) como banco principal, utilizando MongoDB para logs

PostgreSQL para dados relacionais e transacionais com acesso eficiente via Dapper, e MongoDB para armazenamento de logs e dados não estruturados.

Banco de Dados

Tipo:Supabase

Tabela de endereços dos usuários.

addresses Entitycsharp

public class Address {
    public Guid Id { get; set; }
    public string UserId { get; set; } = string.Empty;
    public string Label { get; set; } = string.Empty;
    public string Street { get; set; } = string.Empty;
    public string Number { get; set; } = string.Empty;
    public string? Complement { get; set; }
    public string Neighborhood { get; set; } = string.Empty;
    public string City { get; set; } = string.Empty;
    public string State { get; set; } = string.Empty;
    public string ZipCode { get; set; } = string.Empty;
    public string Country { get; set; } = "Brasil";
    public bool IsDefault { get; set; }
    public DateTime CreatedAt { get; set; }
}

addresses SQL Schemasql

CREATE TABLE addresses (
    id UUID PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    label VARCHAR(100) NOT NULL,
    street VARCHAR(255) NOT NULL,
    number VARCHAR(50) NOT NULL,
    complement VARCHAR(255),
    neighborhood VARCHAR(150) NOT NULL,
    city VARCHAR(150) NOT NULL,
    state VARCHAR(2) NOT NULL,
    zip_code VARCHAR(10) NOT NULL,
    country VARCHAR(100) NOT NULL DEFAULT 'Brasil',
    is_default BOOLEAN NOT NULL,
    created_at TIMESTAMP NOT NULL
);

API / Endpoints

PÁGINA 0 DE 0

Segurança

ESTRATÉGIA DE AUTENTICAÇÃO

JWT com refresh token em HttpOnly cookie. Access token com expiração de 480 minutos (8 horas). OAuth2 opcional com Google para login social.

ROLES / RBAC

AdministradorFuncionáriosClientes

VULNERABILIDADES EVITADAS

XSS: sanitização de inputs com Fluent Validation
RLS: Row Level Security adicionado em todas as tabelas
Todas as rotas protegidas por autenticação

ARMAZENAMENTO

Refresh token em HttpOnly secure cookie, tokens expirados em 480 minutos (8 horas). Nenhum dado sensivel em localStorage.

VALIDAÇÃO DE INPUT

Validação no back-end com Fluent Validation.

Configuração e Ambiente

Variaveis de Ambiente (exemplo)env

# Front-end (.env.local)
# GOOGLE OAUTH CLIENT
NEXT_PUBLIC_GOOGLE_CLIENT_ID=
NEXT_PUBLIC_FRONTEND_URL=

# MERCADOPAGO ENVIRONMENT
# Valores possíveis: "test" ou "production"
NEXT_PUBLIC_MERCADOPAGO_ENV=

# MERCADOPAGO PUBLIC KEY (de produção)
NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=

=========================================================

# Back-end (appsettings.json)
{
  "Jwt": {
  "SecretKey": "",
  "Issuer": "memoriza-backend",
  "Audience": "memoriza-frontend",
  "ExpiresInMinutes": "480"
},
"ConnectionStrings": {
  "DefaultConnection": ""
},
"Google": {
  "ClientId": "",
  "ClientSecret": "",
  "FrontendBaseUrl": ""
},
"MongoSettings": {
  "ConnectionString": "",
  "Database": "memoriza_logs"
},
"MercadoPago": {
  "AccessToken": "",
  "PublicKey": "",
  "WebhookSecret": "",
  "NotificationUrl": "",
  "SuccessUrl": "",
  "FailureUrl": "",
  "PendingUrl": "",
  "Environment": "" // test or production
},
"OrderCancellation": {
  "ExpirationHours": 6,
  "CheckIntervalMinutes": 60
}

Variáveis de ambiente separadas entre front-end e back-end. As keys foram configuradas diretamente na AWS EC2 e Vercel.

Deploy

ESTRATÉGIA

Front-end deployado no Vercel com automatic previews por PR. Back-end rodando na AWS EC2. Postgres (Supabase) para banco de dados e MongoDB Atlas para banco de logs.

CI/CD PIPELINE

1. Push para branch main ou execução manual
2. GitHub Actions é acionado automaticamente
3. Restore e build da aplicação com .NET 8
4. Publicação dos artefatos (publish)
5. Transferência dos arquivos para EC2 via SSH (rsync)
6. Restart do serviço backend via systemctl

Lições Aprendidas

O QUE DEU CERTO

Estrutura MVC facilitou adicionar novos módulos sem afetar existentes
O uso do Fluent Validation me ajudou na qualidade e manutenibilidade do código
MongoDB flexibilizou a leitura de logs e melhorar a correção de erros
Utilizar rotas autorizadas nos controllers melhorou a segurança do código

O QUE MELHORAR

Rate limiting em endpoints de login (5 tentativas/min)
Implementar testes unitários e garantir a qualidade do sistema
Implementar testes de integração para garantir a qualidade do sistema
Implementar notificação de código de rastreio via e-mail

Contato

Quer um projeto parecido?

Entre em contato para discutir seu projeto. Posso te ajudar!

Mande um e-mail Outras formas