Create Job Board App using React-Native

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 students and those searching for jobs in the market. It helps to find jobs and provides in-depth information related to applying procedures, etc.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

Note: This Section is to interact with the app which you are going to build.

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. 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.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Example: Write the below source code into the App.js file.

App.js

// 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;

initialJobData.js

//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 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;