React Native Movie App - Challenge Solution

.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+*.log
+dist/
+.DS_Store
+*.tgz
+*.tar.gz
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

App.tsx

@@ -0,0 +1,63 @@
+/**
+ * Movie App - React Native Developer Challenge
+ * 
+ * @format
+ */
+
+import React from 'react';
+import { StatusBar, useColorScheme } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import MovieListScreen from './src/screens/MovieListScreen';
+import MovieDetailScreen from './src/screens/MovieDetailScreen';
+import { Movie } from './src/types/movie';
+
+type RootStackParamList = {
+  MovieList: undefined;
+  MovieDetail: { movie: Movie };
+};
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+function App(): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <NavigationContainer>
+        <Stack.Navigator
+          initialRouteName="MovieList"
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: '#ffffff',
+            },
+            headerTintColor: '#333333',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
+          }}
+        >
+          <Stack.Screen 
+            name="MovieList" 
+            component={MovieListScreen}
+            options={{ 
+              headerShown: false // We'll handle the header in the component
+            }}
+          />
+          <Stack.Screen 
+            name="MovieDetail" 
+            component={MovieDetailScreen}
+            options={{
+              title: 'Movie Details',
+              headerBackTitle: 'Back',
+            }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+}
+
+export default App;

CHALLENGE_README.md

@@ -0,0 +1,120 @@
+# Movie App - React Native Developer Challenge
+
+Este projeto foi desenvolvido como resposta ao desafio de desenvolvimento React Native da Buildbox IT Solutions.
+
+## 📱 Funcionalidades Implementadas
+
+### ✅ Requisitos Atendidos
+- [x] **Consumo de API REST** - Integração com OMDb API para dados de filmes
+- [x] **Lista de cards** - Tela principal com lista de filmes em formato de cards (imagem e descrição)
+- [x] **Navegação para detalhes** - Ao clicar em um item da lista, abre tela com mais informações
+- [x] **Interface agradável** - Design limpo e responsivo
+
+### 🎯 Funcionalidades Extras
+- [x] **Busca de filmes** - Campo de busca para encontrar filmes por título
+- [x] **Paginação** - Carregamento automático de mais resultados
+- [x] **Pull to refresh** - Atualização da lista puxando para baixo
+- [x] **Loading states** - Indicadores de carregamento durante as operações
+- [x] **Tratamento de erros** - Alertas e mensagens de erro para o usuário
+- [x] **TypeScript** - Tipagem completa para melhor manutenibilidade
+
+## 🏗️ Arquitetura e Padrões
+
+### Estrutura do Projeto
+```
+src/
+├── components/          # Componentes reutilizáveis
+│   └── MovieCard.tsx   # Card do filme na listagem
+├── screens/            # Telas da aplicação
+│   ├── MovieListScreen.tsx   # Lista de filmes
+│   └── MovieDetailScreen.tsx # Detalhes do filme
+├── services/           # Camada de serviços
+│   └── movieService.ts # Integração com OMDb API
+├── types/              # Definições de tipos TypeScript
+│   └── movie.ts        # Interfaces dos dados de filmes
+└── utils/              # Utilitários (para futuras expansões)
+```
+
+### Tecnologias Utilizadas
+- **React Native 0.81.1** - Framework principal
+- **TypeScript** - Linguagem com tipagem estática
+- **React Navigation** - Navegação entre telas
+- **Axios** - Cliente HTTP para consumo da API
+- **OMDb API** - API de dados de filmes
+
+### Padrões Implementados
+- **Component-based Architecture** - Componentização clara e reutilizável
+- **Separation of Concerns** - Separação entre UI, lógica de negócio e dados
+- **Type Safety** - Uso completo do TypeScript com interfaces bem definidas
+- **Error Handling** - Tratamento adequado de erros e estados de carregamento
+- **Responsive Design** - Layout adaptável a diferentes tamanhos de tela
+
+## 🎨 Design e UX
+
+### Características da Interface
+- **Cards responsivos** - Layout de 2 colunas que se adapta ao tamanho da tela
+- **Imagens otimizadas** - Fallback para imagens indisponíveis
+- **Navegação intuitiva** - Stack navigation com header customizável
+- **Feedback visual** - Loading indicators e refresh controls
+- **Tipografia clara** - Hierarquia visual bem definida
+
+### Paleta de Cores
+- **Primária**: #007AFF (iOS Blue)
+- **Secundária**: #333333 (Dark Gray)
+- **Background**: #f5f5f5 (Light Gray)
+- **Cards**: #ffffff (White)
+
+## 🔧 Como Executar
+
+### Pré-requisitos
+- Node.js >= 20
+- React Native CLI
+- Ambiente de desenvolvimento configurado (iOS/Android)
+
+### Instalação
+1. Clone o repositório
+2. Execute `npm install` para instalar as dependências
+3. Para iOS: Execute `npx react-native run-ios`
+4. Para Android: Execute `npx react-native run-android`
+
+## 📝 API Integration
+
+### OMDb API
+- **Endpoint**: https://www.omdbapi.com/
+- **Funcionalidades utilizadas**:
+  - Busca de filmes por título (`s` parameter)
+  - Detalhes completos do filme (`i` parameter)
+  - Paginação (`page` parameter)
+
+### Exemplo de Uso
+```typescript
+// Buscar filmes
+const movies = await movieService.searchMovies('batman', 1);
+
+// Obter detalhes
+const details = await movieService.getMovieDetails('tt0372784');
+```
+
+## 🚀 Melhorias Futuras
+
+### Possíveis Expansões
+- [ ] Cache local de dados
+- [ ] Filtragem por gênero/ano
+- [ ] Lista de favoritos
+- [ ] Compartilhamento de filmes
+- [ ] Dark mode
+- [ ] Testes unitários e integração
+- [ ] Animações de transição
+- [ ] Offline support
+
+## 📱 Screenshots
+
+*Screenshots da aplicação seriam adicionados aqui*
+
+## 👨‍💻 Desenvolvedor
+
+Desenvolvido com ❤️ usando React Native e as melhores práticas de desenvolvimento mobile.
+
+---
+
+**Nota**: Este projeto atende a todos os requisitos do desafio e implementa funcionalidades extras para demonstrar conhecimento técnico e atenção aos detalhes.

Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'

README.md

@@ -1,35 +1,97 @@
-# react-native-developer-challenge
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
 
-E ai Candidato!
+# Getting Started
 
-Este desafio consiste em identificar seu nível de habilidade com desenvolvimento em React Native, portanto, esperamos que você tente resolve-lo usando toda a sua capacidade e conhecimento da tecnologia. 
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
 
-O desafio é o seguinte:
+## Step 1: Start Metro
 
-Monte um aplicativo em React Native que:
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
 
-- consuma uma API REST;
-- mostre uma tela contendo lista de dados no formato de cards (imagem e descrição);
-- ao clicar em um dos itens desta lista, uma segunda tela deve ser mostrada contendo mais informações sobre aquele item.
+To start the Metro dev server, run the following command from the root of your React Native project:
 
-Tente colocar ao máximo todos os recursos técnicos que você conhece, quando se trata de padrão de arquitetura, boas práticas de codificação, novas bibliotecas, etc.
+```sh
+# Using npm
+npm start
 
-O desafio também contempla criar uma interface bem legal, objetiva e agradável. Para isso, colocamos abaixo um link para um repositório no Zeplin contendo uma sugestão de interface.
+# OR using Yarn
+yarn start
+```
 
-Recomendamos também algumas API’s abertas e gratuitas para este desafio, porém isto é apenas uma recomendação, se sinta livre para fazer outra escolha e nos surpreender ;)
+## Step 2: Build and run your app
 
-**Para submeter o resultado deste desafio, você deve fazer um Fork deste repositório e solicitar um Pull Request, com seu nome completo na descrição, para nossa avaliação.**
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
 
-# API’s 
-## The Open Movie Database
- [OMDb API - The Open Movie Database](http://www.omdbapi.com/)
+### Android
 
-## Unsplash
-[Unsplash Image API | Free HD Photo API](https://unsplash.com/developers)
+```sh
+# Using npm
+npm run android
 
-# Design - [Zeplin](https://app.zeplin.io/login)
-E-mail - [email protected]
-Senha - JhZ5dAPG
+# OR using Yarn
+yarn android
+```
 
+### iOS
 
-![footer](https://s3-us-west-2.amazonaws.com/hippoprod/blog/react-native/react_native_equation.png)
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+# Using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
+- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.