Open In App

Create Job Board App using React-Native

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

job
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
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.js
import 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.js
const 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 [email protected]',
	},
	{
		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 [email protected]',
	},
	{
		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 [email protected]',
	},
	{
		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 [email protected]',
	},
	{
		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 [email protected]',
	},
	{
		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 [email protected]',
	},
];

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:


Next Article

Similar Reads