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 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.
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:
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 GeekforBeginner </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 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: