In this article, we are going to Create a Job Board App using React Native. The Job Board App is a simple application that is a collection of job openings in any field. It helps the students and the people who are searching for jobs in the market. It helps to find jobs and provides in-depth information related to applying procedures etc.
Preview of final output: Let us have a look at how the final output will look like.
Preview of the app
Prerequisites:
Approach to create Job Board App:
- Job Board App is a simple application that is a collection of job openings in any field.
- We created a job filter option in the app by which Users can filter job listings by title, company, and location using the provided input fields. and Clicking on the “Apply Filters” button filters the job list based on the entered criteria.
- Users can view detailed information about a job by clicking on the respective job listing. A modal pops up displaying the job title, company, location, description, and application method.
- Users can find application methods in the job details modal.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in the command prompt
React-native init JobBoardApp
Step 2: We will use some Icons in our app so, we will install dependency for icon
npm i react-native-vector-icons
Project Structure:
Structure of project
The updated dependencies in package.json file will look like:
"dependencies": {
"mobx": "4.1.0",
"axios": "*",
"mobx-react": "5.0.0",
"@expo/vector-icons": "^13.0.0",
"react-native-elements": "0.18.5"
}
Example: Write the below source code into the App.js file.
Javascript
// App.jsimport React, { useState } from 'react';
import {View,Text,FlatList,TextInput,Button, ScrollView,Modal,StyleSheet,TouchableOpacity,
} from 'react-native';
import initialJobData from './initialJobData';
const JobBoard = () => { const [jobData, setJobData] = useState(initialJobData);
const [showFilters, setShowFilters] = useState(true);
const [titleFilter, setTitleFilter] = useState('');
const [companyFilter, setCompanyFilter] = useState('');
const [locationFilter, setLocationFilter] = useState('');
const [selectedJob, setSelectedJob] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const applyFilters = () => {
const filteredJobs = initialJobData.filter(
(job) =>
job.title.toLowerCase()
.includes(titleFilter.toLowerCase()) &&
job.company.toLowerCase()
.includes(companyFilter.toLowerCase()) &&
job.location.toLowerCase()
.includes(locationFilter.toLowerCase())
);
setJobData(filteredJobs);
setShowFilters(false);
};
const toggleFilters = () => {
setShowFilters(!showFilters);
};
const renderJobItem = ({ item }) => (
<TouchableOpacity
onPress={
() => handleViewDetails(item)
}>
<View style={styles.jobItem}>
<Text style={styles.jobTitle}>
{item.title}
</Text>
<Text style={styles.jobCompany}>
{item.company}
</Text>
<Text style={styles.jobLocation}>
{item.location}
</Text>
<Text style={styles.jobDescription}>
{item.description}
</Text>
</View>
</TouchableOpacity>
);
const handleViewDetails = (job) => {
setSelectedJob(job);
setIsModalVisible(true);
};
const renderJobDetailsModal = () => {
if (!selectedJob) {
return null;
}
return (
<Modal
animationType="slide"
transparent={true}
visible={isModalVisible}
onRequestClose={() => {
setIsModalVisible(false);
}}
>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.modalTitle}>
{selectedJob.title}
</Text>
<Text style={styles.modalCompany}>
{selectedJob.company}
</Text>
<Text style={styles.modalLocation}>
{selectedJob.location}
</Text>
<Text style={styles.modalDescription}>
{selectedJob.description}
</Text>
<Text style={styles.modalApplyMethod}>
{selectedJob.applyMethod}
</Text>
<Button title="Close"
onPress={
() => setIsModalVisible(false)
} />
</View>
</View>
</Modal>
);
};
return (
<View style={styles.container}>
<Text style={styles.header}>
Job Board App
</Text>
<Text style={styles.subHeading}>
By GeekforGeeks
</Text>
<View style={styles.filterContainer}>
{showFilters ? (
<>
<View style={styles.row}>
<View style={styles.filterColumn}>
<Text style={styles.filterLabel}>
Title
</Text>
<TextInput
style={styles.filterInput}
value={titleFilter}
onChangeText={
(text) =>
setTitleFilter(text)
}
/>
</View>
<View style={styles.filterColumn}>
<Text
style={styles.filterLabel}>
Company
</Text>
<TextInput
style={styles.filterInput}
value={companyFilter}
onChangeText={
(text) =>
setCompanyFilter(text)
}
/>
</View>
<View style={styles.filterColumn}>
<Text style={styles.filterLabel}>
Location
</Text>
<TextInput
style={styles.filterInput}
value={locationFilter}
onChangeText={
(text) =>
setLocationFilter(text)
}
/>
</View>
</View>
<Button title="Apply Filters"
onPress={applyFilters} />
</>
) : (
<Button title="Show Filters"
onPress={toggleFilters} />
)}
</View>
<ScrollView>
<FlatList data={jobData}
keyExtractor={
(item) =>
item.id} renderItem={renderJobItem} />
</ScrollView>
{renderJobDetailsModal()}
</View>
);
};const styles = StyleSheet.create({ container: {
padding: 16,
backgroundColor: '#fff',
},
header: {
fontSize: 34,
fontWeight: 'bold',
marginBottom: 16,
},
subHeading: {
color: 'green',
fontSize: 20,
fontWeight: 'bold',
marginLeft: 90,
marginTop: -20,
},
filterContainer: {
marginBottom: 16,
marginTop: 20,
},
row: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
filterColumn: {
flex: 1,
marginRight: 8,
marginBottom: 16,
},
filterLabel: {
fontSize: 16,
marginBottom: 4,
},
filterInput: {
padding: 8,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4,
},
jobItem: {
marginBottom: 20,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
jobTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 4,
},
jobCompany: {
fontSize: 16,
color: '#555',
marginBottom: 4,
},
jobLocation: {
fontSize: 16,
color: '#555',
marginBottom: 4,
},
jobDescription: {
fontSize: 14,
color: '#777',
},
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalContent: {
backgroundColor: '#fff',
padding: 16,
borderRadius: 8,
width: '80%',
},
modalTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 8,
},
modalCompany: {
fontSize: 18,
color: '#555',
marginBottom: 8,
},
modalLocation: {
fontSize: 16,
color: '#555',
marginBottom: 8,
},
modalDescription: {
fontSize: 14,
color: '#777',
marginBottom: 8,
},
modalApplyMethod: {
fontSize: 14,
color: 'blue',
marginBottom: 8,
},
});export default JobBoard;
|
Javascript
//initialJobData.jsconst initialJobData = [ {
id: '1',
title: 'Software Engineer',
company: 'Tech Co.',
location: 'San Francisco, CA',
description:
'Seeking a skilled software engineer with experience in React Native.',
applyMethod: 'Send your resume to careers@techco.com',
},
{
id: '2',
title: 'UX Designer',
company: 'Design Studio',
location: 'New York, NY',
description: `Looking for a creative UX designer to join our team
and create amazing user experiences.`,
applyMethod: 'Apply online at www.designstudio.com/careers',
},
{
id: '3',
title: 'Data Analyst',
company: 'Data Corp.',
location: 'Seattle, WA',
description: `Data analyst position available for candidates with
strong analytical skills.`,
applyMethod: 'Submit your application on our website.',
},
{
id: '4',
title: 'Mobile App Developer',
company: 'Innovate Tech Solutions',
location: 'Bangalore, India',
description: `We are looking for a mobile app developer with
expertise in both iOS and Android platforms.`,
applyMethod:
'Apply by sending your portfolio to careers@innovatetech.com',
},
{
id: '5',
title: 'Graphic Designer',
company: 'Creative Minds Agency',
location: 'Mumbai, India',
description: `Join our creative team as a graphic designer and
bring innovative designs to life.`,
applyMethod: 'Submit your resume and portfolio to hr@creativeminds.in',
},
{
id: '6',
title: 'Backend Developer',
company: 'CodeCrafters Ltd.',
location: 'Hyderabad, India',
description: `Experienced backend developer needed to work on
scalable and efficient server-side applications.`,
applyMethod: 'Send your CV to careers@codecrafters.com',
},
{
id: '7',
title: 'Business Analyst',
company: 'Global Solutions Inc.',
location: 'Delhi, India',
description: `Analytical minds wanted! Join our team as a business
analyst and contribute to strategic decision-making.`,
applyMethod: 'Apply through our website: www.globalsolutions.in/careers',
},
{
id: '8',
title: 'Frontend Developer',
company: 'WebWizards Tech',
location: 'Chennai, India',
description: `Passionate frontend developer needed to create responsive
and user-friendly web interfaces.`,
applyMethod: 'Submit your application at www.webwizards.tech/careers',
},
{
id: '9',
title: 'AI Research Scientist',
company: 'FutureTech Innovations',
location: 'Pune, India',
description: `Join our AI research team to work on cutting-edge
technologies and innovative solutions.`,
applyMethod:
'Send your research portfolio to hr@futuretechinnovations.com',
},
{
id: '10',
title: 'Marketing Specialist',
company: 'MarketMasters Agency',
location: 'Kolkata, India',
description: `Experienced marketing specialist wanted to develop
and implement strategic marketing campaigns.`,
applyMethod: 'Apply by sending your resume to careers@marketmasters.in',
},
];export default initialJobData;
|
Step to Run the Project:
Step 1: Depending on your operating system, type the following command
- For android:
React-native run-android
- For IOS:
React-native run-ios
Output:
Output of the app