React Native Project - UI Focused App

Project Overview

This project is a React Native app where the main focus was on building the user interface (UI), specifically designing custom screens that resemble popular apps like Google Lens and the Google Home screen. While I initially intended to integrate APIs for functionality, I was unable to find a relevant API that served the purpose of the app. Therefore, this project mainly showcases UI design with screens that mimic well-known app interfaces.

Features

• Google Lens-like Screen: Created a custom screen inspired by the Google Lens UI, with a focus on visually appealing design and a clean layout.
• Google Home Screen: Designed a search screen similar to Google's home screen, featuring a search bar and minimalistic design.
• Custom UI Elements: Emphasis on creating custom components for smoother user interactions.

UI Focus

While APIs for specific functionalities (such as image recognition in Google Lens) were intended to be integrated, there were challenges in finding the right services that fit the project's purpose. Thus, the majority of the work revolves around building polished, user-friendly screens using React Native components and styles.

Screens Implemented

1. Google Lens-inspired Screen:

   • Designed a screen with custom UI components that are similar to the Google Lens interface.
   • The focus was on creating a visually engaging layout with smooth animations and transitions.

2. Search Screen:

   • Created a search screen with a custom search bar and layout resembling Google's search functionality.
   • Included features like suggestions and smooth transitions.

3. Google Home Screen:

   • Emulated the Google Home screen UI, featuring a prominent search bar and minimalistic design.
   • Focused on responsiveness, simple navigation, and clean, modern UI elements.

Project Setup

Prerequisites

• Node.js (version 12 or higher)
• React Native CLI or Expo CLI (depending on the approach)
• Android Studio / Xcode (for building the app)

Installation

1. Clone the repository:

   git clone <your-repo-url>
   

2. Install the Dependencies

   npm install
   

3. For IOS

   npx pod-install
   

4. Running the App

   //for android
   npm run android
   //for ios
   npm run ios
   
   

Key Points:

1. Focus on UI: The README explains that the focus of the project was on UI, with the creation of screens resembling Google Lens and the Google Home screen.
2. API Limitations: It mentions that although there was an intention to integrate APIs, the project was unable to find a relevant one, so the work is focused on custom UI.
3. Screens Implemented: Specific screens are outlined, describing their design inspirations and features.
4. Setup and Future Enhancements: It includes instructions for setting up the project, as well as future goals (API integration and adding more screens).

This will give anyone reading the README a clear understanding of the project's scope and what was accomplished.

Future Enhancements

• API Integration: If a suitable API is found, I plan to integrate functionality like image recognition or real-time search results (similar to Google Lens).

• More Screens: Additional screens with enhanced functionality could be added in future updates.