✦ VidBox App ✦
♨ [ ʀᴇᴀᴄᴛ ɴᴀᴛɪᴠᴇ ᴇxᴘᴏ ᴘʀᴏᴊᴇᴄᴛ ] ♨

Note

This project is still in its early development stage.

ɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɪɴꜰᴏ

VidBox is built with React Native and styled with NativeWind. It offers smooth user experiences and features that let users easily share AI videos within the community. The app focuses on great design and functionality.

⁃ ᴄᴏɴᴛᴇɴᴛꜱ ⁃
ᴜꜱᴇʀ ꜰᴇᴀᴛᴜʀᴇꜱ | ᴀᴘᴘ ꜱᴄʀᴇᴇɴꜱ | ᴘʀᴏᴊᴇᴄᴛ ʙʀᴀɴᴄʜᴇꜱ | ᴅᴇᴠ ꜰᴇᴀᴛᴜʀᴇꜱ | ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ

ɪɪ ⁃ ᴡʜᴀᴛ ᴜꜱᴇʀꜱ ᴄᴀɴ ᴇxᴘᴇᴄᴛ

⭓ Features

• Onboarding Screen: Clear instructions and fun graphics to welcome users to the app.
• Authentication System: Secure login with email to protect user accounts.
• Home Screen with Animated Flat List: Browse the latest videos smoothly with animated lists.
• Pull-to-Refresh: Refresh content easily by pulling down the screen to get the latest updates.
• Full-Text Search: Search through videos with real-time suggestions and quick results.
• Tab Navigation: Easily switch between sections like Home, Search, and Profile.
• Post Creation: Upload videos and images directly from the app with a simple media picker.
• Profile Screen: View account details, activity, uploaded videos, and follower count.
• Responsiveness: Smooth performance across different devices and screen sizes.
• Animations: Engaging animations to improve user interaction and experience.
• Reusable Code Architecture: Structured code for easy updates and maintenance.

⭓ Requirements

System Requirements

Android

• Android 7.0 (Nougat) and Above
• Minimum SDK Version: 24

iOS

• iOS 11.0 and Above

---

ɪɪɪ ⁃ ᴠɪꜱᴜᴀʟ ᴛᴏᴜʀ ᴏꜰ ᴛʜᴇ ᴀᴘᴘ: ꜱᴄʀᴇᴇɴꜱ

  ⮝   BACK TO TOP    

ɪᴠ ⁃ ᴘʀᴏᴊᴇᴄᴛ ʙʀᴀɴᴄʜᴇꜱ

PRODUCTION BRANCH :
Stable code for deployment
➲ main

DEVELOPMENT BRANCH :
Active codebase for ongoing development efforts (New features, bug fixes, and improvements..)
➲ development-next

➲ Code from the scratch ♨

Explore the branches: Stage 1–13

♨ VidBox React Native Expo App : Branches ♨

Branches

1. Init Expo Project : stage-01-init_expo_project
   Initial setup of the Expo project.

2. Project Setup : stage-02-project_setup
   Completed basic project setup with dependencies.

3. Project Structure : stage-03-project_structure
   Organized folder structure for better maintainability.

4. Tabs UI : stage-04-feature_tabs_ui
   Implemented UI for tabs navigation.

5. Intro UI : stage-05-feature_intro_ui
   Added intro UI screens to welcome the users.

6. Auth Screens UI : stage-06-feature_auth_screens_ui
   Designed UI for authentication screens (sign-in, sign-up).

7. Backend and Login Integration : stage-07-connect_backend_and_login
   Integrated backend services for login functionality.

8. Global State Management : stage-08-feature_global_state
   Set up global state management for the app.

9. Home Screen UI : stage-09-feature_home_screen
   Designed the main home screen of the app.

10. Search Screen UI : stage-10-feature-search-screen
    Implemented UI for the search screen.

11. Profile Screen UI : stage-11-feature-profile-screen
    Designed the profile screen for the user.

12. Add Videos Feature : stage-12-feature-add-videos
    Implemented the feature to allow users to add videos.

13. Loading View : stage-13-feature-loading-view
    Added a loading view while data is being fetched.

ᴠ ⁃ ʙᴇʜɪɴᴅ ᴛʜᴇ ᴄᴏᴅᴇ: ᴅᴇᴠ ꜰᴇᴀᴛᴜʀᴇꜱ

⭓ Project Architecture

Feature-Based Modular Architecture

Feature-Based Modular Architecture organizes an app into independent modules based on features, each containing its own screens and logic. Shared resources like components, API configurations, and constants are placed in dedicated folders. This structure promotes maintainability, scalability, and code reusability.

📂 app/
├── 📂 auth/
│   ├── 📝 _layout.jsx
│   └── 📝 Other screens (e.g., sign-in, sign-up)
├── 📂 tabs/
│   ├── 📝 _layout.jsx
│   └── 📝 Other screens (e.g., home, profile, create)
├── 📂 search/
│   └── 📝 [query].jsx
├── 📝 _layout.jsx
└── 📝 index.jsx

📂 assets/
├── 📂 fonts/
├── 📂 icons/
└── 📂 images/

📂 shared/
├── 📂 api/
│   ├── 📝 config.js
│   └── 📝 other API-related files
├── 📂 components/
│   ├── 📝 Custom components...
│   └── 📝 index.js
├── 📂 constants/
│   ├── 📝 colors.js
│   ├── 📝 strings.js
│   ├── 📝 images.js
│   ├── 📝 icons.js
│   └── 📝 index.js
└── 📂 context/
    └── 📝 GlobalProvider.js

⭓ App Dependencies/Libraries Overview

• expo: Core Expo SDK for building cross-platform apps.
• expo-constants: Provides system information and constants, like app version and device information.
• expo-font: Allows the use of custom fonts in your Expo app.
• expo-linking: Simplifies deep linking and URL routing in your app.
• expo-router: Simplifies file-based routing for Expo apps.
• expo-status-bar: Customizes the status bar appearance in your app.
• nativewind: Utility-first CSS for React Native apps with Tailwind-style classes.
• postcss: Tool for transforming CSS with JavaScript plugins (used by NativeWind).
• react: JavaScript library for building user interfaces.
• react-native: Core framework for building native mobile apps with React.
• react-native-animatable: Easy-to-use library for animations in React Native.
• react-native-appwrite: SDK for integrating Appwrite with React Native apps.
• react-native-gesture-handler: Gesture handling library for React Native, improving touch interactions.
• react-native-reanimated: Advanced animation library for React Native.
• react-native-safe-area-context: Provides safe area insets for handling notches and other UI components.
• react-native-screens: Optimizes navigation in React Native by managing screen lifecycles.
• react-native-url-polyfill: Polyfills URL API in React Native for compatibility with web features.
• expo-av: Provides audio and video playback features in your Expo app.
• expo-video: Simplifies video playback with Expo, built on top of expo-av.
• expo-document-picker: Allows users to pick documents from their device.
• expo-image-picker: Lets users pick images and videos from their device.

⭓ Dev Dependencies Overview

• @babel/core: Core Babel compiler for JavaScript transformations.
• tailwindcss: Utility-first CSS framework, used with NativeWind for styling in React Native.

ᴠɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ

⭓ Quick Start

Follow these steps to set up the project on your local machine.

1. Prerequisites

Ensure you have the following installed:

• Git: Version control system.
• Node.js: JavaScript runtime.
• npm: Node Package Manager (comes with Node.js).

2. Cloning the Repository

• Clone the repository:

  git clone https://github.com/NovaLogics/vidbox-reactnative-expo-app.git

• Navigate to the project directory:

  cd vidbox-reactnative-expo-app

3. Installation

Install the project dependencies:

npm install

4. Appwrite Setup ⭓

• Sign up for https://appwrite.io/

• Create a new project in Appwrite.

• Set up the following:

  • Database: Create two collections:
    • users
    • videos
  • Storage Bucket: Create a storage bucket.
  • Add your platform data to the project.

• Refer to the Appwrite Setup Guide (with screenshots) for detailed steps.

• After setting up everything, copy the generated IDs and paste them into the configuration file:

  • Open this file: /shared/api/add-your-appwrite-config-file
  • Add the IDs to the appropriate fields.

• Rename the file to appwrite-config.js:

5. Run the Project

Start the project locally:

npx expo start -c

6. Running on Expo Go

• Download the Expo Go app on your mobile device.
• Use Expo Go to scan the QR code displayed in the Terminal.
• The app will run on your device.

---

  ⮝   BACK TO TOP    

---