https://github.com/bornmajor/pixstream

This app ensures that users can seamlessly continue their browsing experience after losing and regaining network connectivity, without unintentionally loading new content
https://github.com/bornmajor/pixstream

async-storage axios pexels-api react-native react-native-navigation react-native-paper reactjs

Last synced: 11 months ago
JSON representation

This app ensures that users can seamlessly continue their browsing experience after losing and regaining network connectivity, without unintentionally loading new content

Host: GitHub
URL: https://github.com/bornmajor/pixstream
Owner: Bornmajor
Created: 2024-11-19T15:17:33.000Z (about 1 year ago)
Default Branch: android-version-1
Last Pushed: 2024-11-25T12:05:31.000Z (about 1 year ago)
Last Synced: 2025-01-22T23:24:16.654Z (about 1 year ago)
Topics: async-storage, axios, pexels-api, react-native, react-native-navigation, react-native-paper, reactjs
Language: JavaScript
Homepage:
Size: 96.3 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# PixStream

PixStream is a React Native app designed to enhance content exploration while providing a seamless user experience, even in challenging network conditions. The app ensures users can resume their journey without losing progress or loading unintended new content when connectivity is disrupted.

## Problem solving
When users browse apps that depend on network resources (like photos and videos), a temporary loss of connection can cause incomplete loading or failures. In most apps, users instinctively refresh the page to try again. However, this often results in loading new content, which disrupts the user's experience and forces them to lose their place in the app.

## Solution
I developed an Android app that enhances the user experience by addressing this issue. The app ensures that users can seamlessly continue their browsing experience after losing and regaining network connectivity, without unintentionally loading new content. Here's how it works:

1. State Preservation : The app captures and saves the user's browsing state, including the specific content they were viewing.
When a network failure occurs, the app retains this state instead of attempting to load new data.
2. Connection Handling: The app monitors the network connection in real-time. When connectivity is restored, it resumes fetching the content exactly where the user left off, ensuring a smooth continuation.
3. Optimized Resource Management: The app ensures that partially loaded resources are handled intelligently. For example, a partially downloaded photo or video resumes downloading upon reconnection, avoiding data waste or redundant requests

# Features

1. Seamless state preservation: Users can continue browsing where they left off after losing and regaining network connection.
No need to refresh manually—content is intelligently resumed.
2. Content Exploration : Users select content types they are interested in during onboarding.The app fetches content dynamically using the Pexels API.
3. User Engagement : Like, share, and save content for later viewing.
4. Authentication : Secure user authentication for personalized experiences.
5. Onboarding Screens: Guides users through selecting their preferred content types during the first launch.
6. Offline Handling: Robust offline support ensures a smooth experience even when the network is temporarily unavailable.

## Technologies Used
* React Native: Framework for building cross-platform mobile applications.
* Expo: Toolset for rapid development and deployment of React Native apps.
* React Native Navigation: Manages navigation and routing in the app.
* Async Storage: Local storage for saving user preferences and app state.
* Axios: Handles API requests to the Pexels API.
* React Native Paper: Provides material design components for UI.
* NetInfo: Detects and manages network status changes.

## Get started

1. Install dependencies

```bash
npm install
```

2. Start the app

```bash
npx expo start
```

In the output, you'll find options to open the app in a

- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the **src** directory.

# Video

Short video illustrating how seamlessly user continue their browsing experience after losing and regaining network connectivity,

https://github.com/user-attachments/assets/ff998d9f-eac0-43b5-9064-7ce28afbf0f4

# Shots