https://github.com/nicopanozo/react-native-bootcamp
Showing my experience with a hands-on React Native bootcamp packed with practical projects and real-world skills, kickstart your mobile development journey learning with this repo! 🚀
https://github.com/nicopanozo/react-native-bootcamp
android expo ios mobile-development react-native typescript
Last synced: 2 months ago
JSON representation
Showing my experience with a hands-on React Native bootcamp packed with practical projects and real-world skills, kickstart your mobile development journey learning with this repo! 🚀
- Host: GitHub
- URL: https://github.com/nicopanozo/react-native-bootcamp
- Owner: nicopanozo
- License: mit
- Created: 2025-06-11T12:09:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-27T15:12:21.000Z (about 1 year ago)
- Last Synced: 2025-06-27T15:41:06.628Z (about 1 year ago)
- Topics: android, expo, ios, mobile-development, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 13.4 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Digital Academy Bootcamp: Mobile Development
## React Native Movies App (TypeScript)
This is a modern React Native Movies App built with [Expo](https://expo.dev/) and TypeScript, designed to showcase best practices in mobile development. Powered by the [TMDb API](https://developer.themoviedb.org/reference/intro/getting-started), the app delivers up-to-date movie content, including trending, top-rated, upcoming, and now playing films.
Explore movies by genre, discover Marvel and action hits, and enjoy detailed information such as ratings, descriptions, and categories—all presented in a beautifully crafted interface inspired by this [Figma design](https://www.figma.com/community/file/1126286295256197533/movies-mobile-app-home-light-dark).
This open source project focuses on learning and applying modern React Native concepts, including custom hooks, advanced navigation, theming, animations, and type safety with TypeScript.
Developed as part of the **Digital Academy Bootcamp** at **AssureSoft**.
- App Demo: https://youtu.be/WDIVq5kk2m4
- Team Demo: https://drive.google.com/drive/folders/1CkY9LMx8NFhrpb9PdMTpGuhXET3kKdLk?usp=sharing
- Download the APK file: https://drive.google.com/file/d/1XmqJYTn8Qks990F5covHSt2oy9T4WcTt/view?usp=sharing
- Download the AAB file: https://drive.google.com/file/d/11pD7sfmNg3x11n-E7WUlwa5T3GR2-a6P/view?usp=sharing
---
## 📑 Table of Contents
- [Key Concepts & Features](#-key-concepts--features)
- [Design](#-design)
- [Getting Started](#-getting-started)
- [Useful Expo Commands & Troubleshooting](#-useful-expo-commands--troubleshooting)
- [Screenshots](#-screenshots)
- [Credits & Acknowledgements](#-credits--acknowledgements)
- [License](#-license)
---
## 🏆 Key Concepts & Features
- **Custom Hooks** for reusable logic and cleaner components
- **API Consumption** using [The Movie Database (TMDb) API](https://developer.themoviedb.org/reference/intro/getting-started)
- **Navigation** with React Navigation (stack, bottom tabs)
- **Carousel & Animations** with react-native-reanimated and react-native-reanimated-carousel
- **Theming & UI** using react-native-paper and react-native-linear-gradient
- **Safe Area Handling** with react-native-safe-area-context
- **Custom Fonts** and splash screens
- **Vector Icons** with @react-native-vector-icons/fontawesome6
- **Environment Variables** with dotenv
- **Prettier** and **ESLint** for code formatting and linting
- **TypeScript** for type safety and better developer experience
- **Metro Config** customization for advanced bundling
---
## 🎨 Design
- Based on this [Figma community design](https://www.figma.com/community/file/1126286295256197533/movies-mobile-app-home-light-dark) for a modern movies mobile app (light & dark mode).
---
## 🚀 Getting Started
### 📱 Requirements
- Node.js (v18 or higher recommended)
- Expo CLI
- Android Studio (optional, for emulator)
### 1. Clone the repository
```bash
git clone https://github.com/nicopanozo/react-native-bootcamp.git
cd react-native-bootcamp
```
### 2. Install dependencies
```bash
npm install
npx expo install
```
> For additional packages, use:
>
> ```bash
> npx expo install
> npm install
> ```
### 3. Start the development server
```bash
npx expo start
```
Scan the QR code with the Expo Go app on your mobile device, or open it on an emulator.
### 4. Testing on Android Emulator
- Install Android Studio
- Create a virtual device (AVD)
- Run the emulator
- Start the app on the emulator:
```bash
npx expo start --android
```
---
## 🛠️ Useful Expo Commands & Troubleshooting
- **Clear Expo cache (recommended for fixing weird issues):**
```bash
npx expo start -c
```
- **Reset Metro bundler cache:**
```bash
npx react-native start --reset-cache
```
- **Clean node_modules and reinstall:**
```bash
rm -rf node_modules
npm install
```
- **Check for outdated dependencies:**
```bash
npx expo install --check
```
- **Upgrade Expo SDK:**
```bash
npx expo upgrade
```
- **Open project on web:**
```bash
npx expo start --web
```
- **Open project on iOS simulator (macOS only):**
```bash
npx expo start --ios
```
- **Show all available Expo commands:**
```bash
npx expo --help
```
---
## 📸 Screenshots
| Home Screen | Movie Details | Genres |
| :-----------------------------------------------------------: | :-------------------------------------------------------------: | :------------------------------------------------------: |
| 
| 
| 
|
---
## 📚 Credits & Acknowledgements
- Built with [React Native](https://reactnative.dev/) and [Expo](https://expo.dev/)
- Movie data powered by [The Movie Database (TMDb) API](https://developer.themoviedb.org/reference/intro/getting-started)
- UI inspired by [Figma Movies Mobile App Design](https://www.figma.com/community/file/1126286295256197533/movies-mobile-app-home-light-dark)
- Developed as part of the [Digital Academy](https://assuresoft.com/) Bootcamp at AssureSoft
---
## 📖 License
This project is open source and available under the [MIT License](LICENSE).