The unofficial mobile companion for Saco Cheio TV's podcast platform, built with React Native and Expo.

This is an unofficial mobile app for the Saco Cheio TV podcast platform.

Since the platform doesn't provide an official mobile application and only distributes episodes through RSS feeds, I decided to build a dedicated mobile app that allows fans to listen to the podcast while keeping the visual identity of the platform.

The entire UI of this application was designed by me using Figma, which was quite a challenge since I'm not a designer.

You can see the original UI design here:
https://www.figma.com/file/7LuyM5VZsCj6kYRgQiNyaD/sacocheio-tv-app

This project was mainly created as an excuse to learn new technologies and step out of my comfort zone.

This repository hosts the source code for an unofficial mobile application designed to provide a seamless listening experience for the Saco Cheio TV podcast platform. Developed with React Native and Expo, the app offers a native-like interface for browsing, playing, and managing podcast episodes, allowing fans to enjoy their favorite content on the go.

• 🎧 Podcast Playback: Listen to episodes with a dedicated audio player, complete with controls for play/pause, seek, and track progression.
• 📚 Episode Browsing: Navigate through a comprehensive list of Saco Cheio TV podcast episodes.
• 📱 Intuitive Navigation: Smooth user experience powered by React Navigation.
• 🎨 Custom Theming: Supports different visual themes for personalized aesthetics (e.g., dark/light mode).
• 📡 API Integration: Fetches podcast data from the Saco Cheio TV platform's API.
• 🔄 Background Audio: Potentially supports background audio playback for uninterrupted listening.
• 🛡️ Type-Safe Development: Built with TypeScript for enhanced code quality and maintainability.

Mobile Frontend:

DevOps & Tools:

Follow these steps to get the development environment set up and run the app locally.

• Node.js: LTS Version (e.g., 18.x or 20.x)
• Yarn: Package manager
• Expo CLI: Install globally (npm install -g expo-cli or yarn global add expo-cli)
• A mobile device or emulator/simulator: To run the app.

1. Clone the repository

   git clone https://github.com/Vitor-Carmo/app-sacocheio-tv.git
   cd app-sacocheio-tv

2. Install dependencies

   yarn install

This project primarily uses app.json for configuration and doesn't explicitly rely on .env files for basic setup. Ensure app.json contains appropriate settings for your development environment if you intend to customize app metadata.

1. Start the Expo development server

   yarn start

2. Open your app
   • On a physical device: Scan the QR code displayed in your terminal or browser with the Expo Go app.
   • On iOS Simulator: Press i in the terminal.
   • On Android Emulator: Press a in the terminal.
   • In Web Browser: Press w in the terminal (for web preview, though primarily a mobile app).

app-sacocheio-tv/
├── assets/             # Static assets (images, fonts, app icon, splash screen)
├── src/                # Main application source code
│   ├── components/     # Reusable UI components
│   ├── context/        # React Context providers (e.g., AudioPlayerContext)
│   ├── hooks/          # Custom React hooks
│   ├── routes/         # React Navigation setup and navigators
│   ├── screens/        # Application screens/pages (e.g., Home, Player, Episodes)
│   ├── services/       # API integration and data fetching logic (e.g., api.ts)
│   ├── themes/         # Theming configuration and styles
│   ├── types/          # TypeScript type definitions
│   └── utils/          # Utility functions and helpers
├── App.tsx             # Main application entry point
├── app.json            # Expo application configuration
├── babel.config.js     # Babel configuration for JavaScript/TypeScript transpilation
├── eas.json            # Expo Application Services (EAS) configuration for builds
├── metro.config.js     # Metro Bundler configuration for React Native
├── package.json        # Project metadata and dependencies
├── tsconfig.json       # TypeScript configuration
└── yarn.lock           # Yarn dependency lock file

The app.json file contains crucial configuration for your Expo project, including:

• name: Display name of the app.
• slug: Unique identifier for the app in Expo.
• version: Current version of the app.
• orientation: Screen orientation (e.g., portrait).
• icon: Path to the app icon.
• splash: Configuration for the app's splash screen.
• ios, android: Platform-specific configurations.

The eas.json file configures builds and submissions using Expo Application Services (EAS). It defines different build profiles (e.g., development, preview, production) and their respective settings for:

• Platform (iOS, Android).
• Build type (development, production).
• Environment variables.
• Credentials.

The package.json defines several convenient scripts for development:

1. Ensure prerequisites are installed.
2. Start the development server using yarn start.
3. Develop components and screens within the src/ directory.
4. Utilize Expo Go on your mobile device or an emulator/simulator for real-time preview and debugging.

The project is configured for unit and component testing using Jest and react-test-renderer.

# Run all tests
yarn test

# Run tests in watch mode
yarn test --watch

# Run a specific test file
yarn test -- YourFileName.test.tsx

This project uses Expo Application Services (EAS) for building and deploying mobile applications to app stores.

To create a production build for iOS or Android, you would typically use the eas build command, configured via eas.json.

# Install EAS CLI globally if not already installed
npm install -g eas-cli

# Login to your Expo account
eas login

# Build for Android
eas build --platform android --profile production

# Build for iOS
eas build --platform ios --profile production

Refer to the EAS documentation for detailed setup and deployment guides.

This project is currently archived and contributions are not actively being accepted. However, you are welcome to fork the repository, experiment with the code, and use it as a reference for your own projects.

Should the project become active again, a CONTRIBUTING.md file will be added with specific guidelines.

This project is currently UNLICENSED. For details, please refer to the license field in the package.json file.

• React Native & Expo: For providing a powerful framework and platform for mobile development.
• Saco Cheio TV: For their podcast content that inspired this application.
• All dependencies listed in package.json that make this project possible.

• 🐛 Issues: Report bugs or suggest features via GitHub Issues.
• 👤 Author: Vitor Carmo