Shiori

Shiori is a modern, feature-rich mobile wallpaper application built with React Native, designed for users seeking an extensive collection of stunning wallpapers. Utilizing the Wallhaven API, Shiori offers seamless browsing and customization options while ensuring an intuitive user experience heavily inspired by Material Design principles.

Overview

Shiori enables users to discover, search, and apply beautiful wallpapers directly to their devices, complemented by a clean user interface and Google Pixel-like icons.

Key Features

• Curated Collection: Access thousands of exceptional wallpapers from the Wallhaven database.
• Material Design UI: Enjoy a visually appealing interface with smooth animations and user-friendly navigation.
• Advanced Filtering: Effortlessly filter wallpapers by categories, resolutions, colors, and more for tailored browsing.
• Search Functionality: Quickly find specific wallpapers using relevant keywords.
• Favorites: Save preferred wallpapers for easy access.
• Direct Apply: Set wallpapers directly from the application without hassle.
• Download Manager: Download wallpapers to devices for offline use.
• Dark Mode Support: Experience both light and dark themes, enhancing usability in different lighting conditions.
• Customizable Settings: Personalize various aspects of the app to suit individual needs.
• Elegant Icons and UI: Experience simplicity and style in one cohesive package.

App Structure

The application is organized into a well-thought-out structure optimizing the development workflow, including folders for components, services, hooks, and navigation, ensuring maintainability and scalability:

src/
├── assets/                 # Static assets like icons and fonts
├── components/             # Reusable UI components
├── hooks/                  # Custom React hooks
├── navigation/             # Navigation configuration
├── screens/                # Different app screens
├── services/               # API and service-related functionality
├── store/                  # State management
├── theme/                  # Theming configurations
├── utils/                  # Utility functions
└── App.js                  # Root component

Screens

Home Tab

• Featured wallpapers, latest uploads, and popular selections
• Categories showcase

Search Tab

• Search bar with suggestions and recent searches
• Infinite scroll on search results

Filters Tab

• Category selection and color picking
• Resolution and aspect ratio options
• Advanced filters for tailored results

Favorites Tab

• Organized view of saved wallpapers with download status tracking

Settings Tab

• Theme selection, download preferences, and cache management
• User settings for a personalized experience

Technical Stack

Shiori is powered by a robust array of technologies including:

• React Native for cross-platform development
• React Navigation for smooth in-app navigation
• Redux Toolkit for state management
• Axios for API integrations
• React Native Paper for Material Design components
• React Native Vector Icons for an extensive icon library
• Async Storage for local storage functionalities.

API Integration

The application effectively integrates with the Wallhaven API to offer features such as searching, filtering, and accessing collections of wallpapers, ensuring a dynamic and rich user experience.

Shiori stands as a perfect solution for those looking to enhance their devices with beautiful wallpaper options while enjoying a modern and visually cohesive app experience.