Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hafizn07/react-native-jobs
Seamless job searching with my React Native Expo app. Boasting a visually captivating UI/UX, third-party API integration, and dynamic features, this repository showcases expertise in React Native development, offering users an optimized and intuitive platform to explore, apply, and excel in the job market.
https://github.com/hafizn07/react-native-jobs
expo expo-cli job-finder-app rapid-api react-native ui-ux
Last synced: about 9 hours ago
JSON representation
Seamless job searching with my React Native Expo app. Boasting a visually captivating UI/UX, third-party API integration, and dynamic features, this repository showcases expertise in React Native development, offering users an optimized and intuitive platform to explore, apply, and excel in the job market.
- Host: GitHub
- URL: https://github.com/hafizn07/react-native-jobs
- Owner: hafizn07
- Created: 2023-05-05T15:50:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-16T07:48:41.000Z (10 months ago)
- Last Synced: 2024-01-16T13:51:38.015Z (10 months ago)
- Topics: expo, expo-cli, job-finder-app, rapid-api, react-native, ui-ux
- Language: JavaScript
- Homepage:
- Size: 968 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Native Job Finder App
A React Native-powered job finder app, meticulously crafted with Expo. Seamlessly search, explore, and apply for jobs with an aesthetically pleasing UI/UX design. Harnessing the power of third-party APIs, the app delivers dynamic job insights, all optimized for a responsive experience on various devices. Simplifying job hunting with elegance and efficiency.
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets](#snippets)
Discover the power of React Native and Expo with my job-search application. Crafted for a seamless user experience, the app boasts visually appealing UI/UX, third-party API integration, and dynamic features like search, pagination, and custom hooks. From a responsive design to detailed job insights, this project epitomizes React Native development, showcasing advanced skills in Node.js, Axios, and stylesheet management. Dive into a world of code architecture and reusability, offering a comprehensive hands-on experience in building a feature-rich app for job exploration and application.
- Node.js
- React Native
- Axios
- Expo
- Stylesheet
## 🔋 Features
👉 **Visually Appealing UI/UX Design**: Develop an aesthetically pleasing user interface using React Native components.
👉 **Third Party API Integration**: Fetch data from an external API and seamlessly integrate it into the app.
👉 **Search & Pagination Functionality**: Implement search functionality and pagination for efficient data navigation.
👉 **Custom API Data Fetching Hooks**:Create custom hooks for streamlined and reusable API data fetching.
👉 **Dynamic Home Page**: Explore diverse jobs from popular and nearby locations across different categories.
👉 **Browse with Ease on Explore Page**: Page: Navigate through various jobs spanning different categories and types.
👉 **Detailed Job Insights**: View comprehensive job details, including application links, salary info, responsibilities, and qualifications.
👉 **Tailored Job Exploration**: Find jobs specific to a particular title
👉 **Robust Loading and Error Management**: Ensure effective handling of loading processes and error scenarios.
👉 **Optimized for All Devices**: A responsive design for a seamless user experience across various devices.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/adrianhajdin/project_react_native_jobs.git
cd project_react_native_jobs
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
X-RapidAPI-Key=
```
Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the [RapidAPI website](https://rapidapi.com/letscrape-6bRBa3QguO5/api/jsearch).
**Running the Project**
```bash
npm start
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🕸️ Snippets
Search.js
```javascript
import React, { useEffect, useState } from 'react'
import { ActivityIndicator, FlatList, Image, TouchableOpacity, View } from 'react-native'
import { Stack, useRouter, useSearchParams } from 'expo-router'
import { Text, SafeAreaView } from 'react-native'
import axios from 'axios'
import { ScreenHeaderBtn, NearbyJobCard } from '../../components'
import { COLORS, icons, SIZES } from '../../constants'
import styles from '../../styles/search'
const JobSearch = () => {
const params = useSearchParams();
const router = useRouter()
const [searchResult, setSearchResult] = useState([]);
const [searchLoader, setSearchLoader] = useState(false);
const [searchError, setSearchError] = useState(null);
const [page, setPage] = useState(1);
const handleSearch = async () => {
setSearchLoader(true);
setSearchResult([])
try {
const options = {
method: "GET",
url: `https://jsearch.p.rapidapi.com/search`,
headers: {
"X-RapidAPI-Key": '',
"X-RapidAPI-Host": "jsearch.p.rapidapi.com",
},
params: {
query: params.id,
page: page.toString(),
},
};
const response = await axios.request(options);
setSearchResult(response.data.data);
} catch (error) {
setSearchError(error);
console.log(error);
} finally {
setSearchLoader(false);
}
};
const handlePagination = (direction) => {
if (direction === 'left' && page > 1) {
setPage(page - 1)
handleSearch()
} else if (direction === 'right') {
setPage(page + 1)
handleSearch()
}
}
useEffect(() => {
handleSearch()
}, [])
return (
(
router.back()}
/>
),
headerTitle: "",
}}
/>
(
router.push(`/job-details/${item.job_id}`)}
/>
)}
keyExtractor={(item) => item.job_id}
contentContainerStyle={{ padding: SIZES.medium, rowGap: SIZES.medium }}
ListHeaderComponent={() => (
<>
{params.id}
Job Opportunities
{searchLoader ? (
) : searchError && (
Oops something went wrong
)}
>
)}
ListFooterComponent={() => (
handlePagination('left')}
>
{page}
handlePagination('right')}
>
)}
/>
)
}
export default JobSearch
```
#