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.

Preview of the app

Prerequisites:

• React Native
• React Native State
• React Native Props

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