SEA Landing Page

A simple newsletter landing page with underwater theme featuring a Ruby backend and React frontend.

Uma landing page simples de newsletter com tema subaquático, desenvolvida com backend em Ruby e frontend em React.

---

Table of Contents | Índice

• Overview | Visão Geral
• Features | Funcionalidades
• Tech Stack | Tecnologias
• Getting Started | Começando
  • Prerequisites | Pré-requisitos
  • Installation | Instalação
  • Running with Docker | Executando com Docker
• Backend Commands | Comandos do Backend
• Project Structure | Estrutura do Projeto

---

Overview | Visão Geral

English: This project is a landing page with newsletter subscription functionality. User data is stored in a JSON file on the backend. When users successfully subscribe, they are greeted with an animated underwater-themed modal.

Português: Este projeto é uma landing page com funcionalidade de inscrição em newsletter. Os dados dos usuários são armazenados em um arquivo JSON no backend. Quando os usuários se inscrevem com sucesso, são recebidos com um modal animado com tema subaquático.

---

Features | Funcionalidades

English:

• Newsletter subscription form
• Underwater themed success modal with animations
• Subscriber list display
• JSON-based data persistence
• Docker support for easy deployment
• Utility scripts for data management

Português:

• Formulário de inscrição em newsletter
• Modal de sucesso com tema subaquático e animações
• Exibição da lista de inscritos
• Persistência de dados baseada em JSON
• Suporte Docker para fácil implantação
• Scripts utilitários para gerenciamento de dados

---

Tech Stack | Tecnologias

Frontend:

• React
• Tailwind CSS
• Custom CSS animations | Animações CSS customizadas

Backend:

• Ruby
• Sinatra framework
• JSON file storage | Armazenamento em arquivo JSON

DevOps:

• Docker
• Docker Compose

---

Getting Started | Começando

Prerequisites | Pré-requisitos

English: Ensure you have the following installed on your system:

Português: Certifique-se de ter o seguinte instalado no seu sistema:

• Ruby (version 2.5 or higher | versão 2.5 ou superior)
• Node.js and npm | Node.js e npm
• Docker and Docker Compose (optional, for containerized deployment | opcional, para implantação containerizada)

Installation | Instalação

Backend Setup | Configuração do Backend

English:

1. Navigate to the backend directory:

   cd email-pickup

2. Install Ruby dependencies:

   bundle install

3. Start the backend server:

   ruby app.rb

The backend will run on http://localhost:3001

Português:

1. Navegue até o diretório do backend:

   cd email-pickup

2. Instale as dependências Ruby:

   bundle install

3. Inicie o servidor backend:

   ruby app.rb

O backend será executado em http://localhost:3001

Frontend Setup | Configuração do Frontend

English:

1. Navigate to the frontend directory:

   cd front

2. Install npm dependencies:

   npm install

3. Start the development server:

   npm start

The application will open in your browser at http://localhost:3000

Português:

1. Navegue até o diretório do frontend:

   cd front

2. Instale as dependências npm:

   npm install

3. Inicie o servidor de desenvolvimento:

   npm start

A aplicação será aberta no navegador em http://localhost:3000

Running with Docker | Executando com Docker

English: For a containerized deployment, run the following command from the project root:

Português: Para uma implantação containerizada, execute o seguinte comando na raiz do projeto:

docker-compose up

English: Access the application at http://localhost:3000

Português: Acesse a aplicação em http://localhost:3000

---

Backend Commands | Comandos do Backend

English: The following utility scripts are available in the email-pickup directory:

Português: Os seguintes scripts utilitários estão disponíveis no diretório email-pickup:

Command	Comando	Description	Descrição
ruby populate_users_file.rb	ruby populate_users_file.rb	Generate 100 sample users	Gerar 100 usuários de exemplo
ruby remove_all_contacts.rb	ruby remove_all_contacts.rb	Delete all contacts	Deletar todos os contatos
ruby remove_duplicates.rb	ruby remove_duplicates.rb	Remove duplicate contacts	Remover contatos duplicados

---

Project Structure | Estrutura do Projeto

sea-landing-page-react-ruby/
├── email-pickup/           # Backend application | Aplicação backend
│   ├── app.rb             # Main server file | Arquivo principal do servidor
│   ├── Gemfile            # Ruby dependencies | Dependências Ruby
│   └── *.rb               # Utility scripts | Scripts utilitários
├── front/                 # Frontend application | Aplicação frontend
│   ├── src/               # React source files | Arquivos fonte React
│   ├── public/            # Static assets | Arquivos estáticos
│   └── package.json       # npm dependencies | Dependências npm
└── docker-compose.yml     # Docker configuration | Configuração Docker

---

License | Licença

English: This project is available for educational and personal use.

Português: Este projeto está disponível para uso educacional e pessoal.