├── src
    ├── index.css
    ├── assets
    │   └── images
    │   │   └── logo.png
    ├── components
    │   ├── Card.jsx
    │   ├── Spinner.jsx
    │   ├── ViewAllJobs.jsx
    │   ├── Hero.jsx
    │   ├── JobListings.jsx
    │   ├── HomeCards.jsx
    │   ├── Navbar.jsx
    │   └── JobListing.jsx
    ├── pages
    │   ├── JobsPage.jsx
    │   ├── HomePage.jsx
    │   ├── NotFoundPage.jsx
    │   └── AddJobPage.jsx
    ├── layouts
    │   └── MainLayout.jsx
    ├── main.jsx
    ├── store
    │   └── job-slice.js
    ├── App.jsx
    └── jobs.json
├── postcss.config.js
├── .gitignore
├── tailwind.config.js
├── index.html
├── README.md
├── vite.config.js
├── package.json
├── eslint.config.js
└── public
    └── vite.svg


/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-majid-ashrafi/React-Boilerplate-2024/main/src/assets/images/logo.png


--------------------------------------------------------------------------------
/src/components/Card.jsx:
--------------------------------------------------------------------------------
1 | const Card = ({ children, bg = 'bg-gray-100' }) => {
2 |   return <div className={`${bg} p-6 rounded-lg shadow-md`}>{children}</div>;
3 | };
4 | export default Card;
5 | 


--------------------------------------------------------------------------------
/src/pages/JobsPage.jsx:
--------------------------------------------------------------------------------
 1 | import JobListings from '../components/JobListings';
 2 | 
 3 | const JobsPage = () => {
 4 |   return (
 5 |     <section className='bg-blue-50 px-4 py-6'>
 6 |       <JobListings />
 7 |     </section>
 8 |   );
 9 | };
10 | export default JobsPage;
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ['Roboto', 'sans-serif'],
 8 |       },
 9 |       gridTemplateColumns: {
10 |         '70/30': '70% 28%',
11 |       },
12 |     },
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/src/components/Spinner.jsx:
--------------------------------------------------------------------------------
 1 | import ClipLoader from 'react-spinners/ClipLoader';
 2 | 
 3 | const override = {
 4 |   display: 'block',
 5 |   margin: '100px auto',
 6 | };
 7 | 
 8 | const Spinner = ({ loading }) => {
 9 |   return (
10 |     <ClipLoader
11 |       color='#4338ca'
12 |       loading={loading}
13 |       cssOverride={override}
14 |       size={150}
15 |     />
16 |   );
17 | };
18 | export default Spinner;
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/layouts/MainLayout.jsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from 'react-router-dom';
 2 | import { ToastContainer } from 'react-toastify';
 3 | import 'react-toastify/dist/ReactToastify.css';
 4 | import Navbar from '../components/Navbar';
 5 | 
 6 | const MainLayout = () => {
 7 |   return (
 8 |     <>
 9 |       <Navbar />
10 |       <Outlet />
11 |       {/* <ToastContainer /> */}
12 |     </>
13 |   );
14 | };
15 | export default MainLayout;
16 | 


--------------------------------------------------------------------------------
/src/components/ViewAllJobs.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | 
 3 | const ViewAllJobs = () => {
 4 |   return (
 5 |     <section className='m-auto max-w-lg my-10 px-6'>
 6 |       <Link
 7 |         to='/jobs'
 8 |         className='block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700'
 9 |       >
10 |         View All Jobs
11 |       </Link>
12 |     </section>
13 |   );
14 | };
15 | export default ViewAllJobs;
16 | 


--------------------------------------------------------------------------------
/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
 1 | import Hero from '../components/Hero';
 2 | import HomeCards from '../components/HomeCards';
 3 | import JobListings from '../components/JobListings';
 4 | import ViewAllJobs from '../components/ViewAllJobs';
 5 | 
 6 | const HomePage = () => {
 7 |   return (
 8 |     <>
 9 |       <Hero />
10 |       <HomeCards />
11 |       <JobListings isHome={true} />
12 |       <ViewAllJobs />
13 |     </>
14 |   );
15 | };
16 | export default HomePage;
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   server: {
 8 |     port: 3000,
 9 |     // proxy: {
10 |     //   '/api': {
11 |     //     target: 'http://localhost:8000',
12 |     //     changeOrigin: true,
13 |     //     rewrite: (path) => path.replace(/^\/api/, ''),
14 |     //   },
15 |     // },
16 |   },
17 | });
18 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import { configureStore } from '@reduxjs/toolkit';
 4 | import { Provider } from "react-redux";
 5 | import './index.css'
 6 | import App from './App.jsx'
 7 | import jobReducer from './store/job-slice.js'
 8 | 
 9 | const store = configureStore({
10 |   reducer: { jobs: jobReducer }
11 | })
12 | 
13 | createRoot(document.getElementById('root')).render(
14 |   <StrictMode>
15 |     <Provider store={store}>
16 |       <App />
17 |     </Provider>
18 |   </StrictMode>,
19 | )
20 | 


--------------------------------------------------------------------------------
/src/components/Hero.jsx:
--------------------------------------------------------------------------------
 1 | const Hero = ({
 2 |   title = 'Become a React Dev',
 3 |   subtitle = 'Find the React job that fits your skill set',
 4 | }) => {
 5 |   return (
 6 |     <section className='bg-indigo-700 py-20 mb-4'>
 7 |       <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center'>
 8 |         <div className='text-center'>
 9 |           <h1 className='text-4xl font-extrabold text-white sm:text-5xl md:text-6xl'>
10 |             {title}
11 |           </h1>
12 |           <p className='my-4 text-xl text-white'>{subtitle}</p>
13 |         </div>
14 |       </div>
15 |     </section>
16 |   );
17 | };
18 | export default Hero;
19 | 


--------------------------------------------------------------------------------
/src/pages/NotFoundPage.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | import { FaExclamationTriangle } from 'react-icons/fa';
 3 | 
 4 | const NotFoundPage = () => {
 5 |   return (
 6 |     <section className='text-center flex flex-col justify-center items-center h-96'>
 7 |       <FaExclamationTriangle className='text-yellow-400 text-6xl mb-4' />
 8 |       <h1 className='text-6xl font-bold mb-4'>404 Not Found</h1>
 9 |       <p className='text-xl mb-5'>This page does not exist</p>
10 |       <Link
11 |         to='/'
12 |         className='text-white bg-indigo-700 hover:bg-indigo-900 rounded-md px-3 py-2 mt-4'
13 |       >
14 |         Go Back
15 |       </Link>
16 |     </section>
17 |   );
18 | };
19 | export default NotFoundPage;
20 | 


--------------------------------------------------------------------------------
/src/store/job-slice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit';
 2 | import localJobs from '../jobs.json';
 3 | 
 4 | const initialState = {
 5 |     list: localJobs?.jobs || []
 6 | };
 7 | 
 8 | const jobSlice = createSlice({
 9 |     name: "job",
10 |     initialState,
11 |     reducers: {
12 | 
13 |         setJobs: (state, action) => {
14 |             // Check if action.payload is an array before using the spread operator
15 |             if (Array.isArray(action.payload)) {
16 |                 state.list = [...state.list, ...action.payload];
17 |             } else {
18 |                 console.error('Expected payload to be an array:', action.payload);
19 |             }
20 |         },
21 |     }
22 | });
23 | 
24 | export const { setJobs } = jobSlice.actions;
25 | export default jobSlice.reducer;
26 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Route,
 3 |   createBrowserRouter,
 4 |   createRoutesFromElements,
 5 |   RouterProvider,
 6 | } from 'react-router-dom';
 7 | import MainLayout from './layouts/MainLayout';
 8 | import HomePage from './pages/HomePage';
 9 | import JobsPage from './pages/JobsPage';
10 | import NotFoundPage from './pages/NotFoundPage';
11 | import AddJobPage from './pages/AddJobPage';
12 | 
13 | const App = () => {
14 | 
15 |   const router = createBrowserRouter(
16 |     createRoutesFromElements(
17 |       <Route path='/' element={<MainLayout />}>
18 |         <Route index element={<HomePage />} />
19 |         <Route path='/jobs' element={<JobsPage />} />
20 |         <Route path='/add-job' element={<AddJobPage />} />
21 |         <Route path='*' element={<NotFoundPage />} />
22 |       </Route>
23 |     )
24 |   );
25 | 
26 |   return <RouterProvider router={router} />;
27 | };
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-biolerplate",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^2.0.0-rc.3",
14 |     "react": "^18.3.1",
15 |     "react-dom": "^18.3.1",
16 |     "react-icons": "^5.4.0",
17 |     "react-redux": "^9.2.0",
18 |     "react-router-dom": "^7.1.1",
19 |     "react-spinners": "^0.15.0",
20 |     "react-toastify": "^11.0.2"
21 |   },
22 |   "devDependencies": {
23 |     "@eslint/js": "^9.17.0",
24 |     "@types/react": "^18.3.18",
25 |     "@types/react-dom": "^18.3.5",
26 |     "@vitejs/plugin-react": "^4.3.4",
27 |     "autoprefixer": "^10.4.20",
28 |     "eslint": "^9.17.0",
29 |     "eslint-plugin-react": "^7.37.2",
30 |     "eslint-plugin-react-hooks": "^5.0.0",
31 |     "eslint-plugin-react-refresh": "^0.4.16",
32 |     "globals": "^15.14.0",
33 |     "postcss": "^8.4.49",
34 |     "tailwindcss": "^3.4.17",
35 |     "vite": "^6.0.6"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import react from 'eslint-plugin-react'
 4 | import reactHooks from 'eslint-plugin-react-hooks'
 5 | import reactRefresh from 'eslint-plugin-react-refresh'
 6 | 
 7 | export default [
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     files: ['**/*.{js,jsx}'],
11 |     languageOptions: {
12 |       ecmaVersion: 2020,
13 |       globals: globals.browser,
14 |       parserOptions: {
15 |         ecmaVersion: 'latest',
16 |         ecmaFeatures: { jsx: true },
17 |         sourceType: 'module',
18 |       },
19 |     },
20 |     settings: { react: { version: '18.3' } },
21 |     plugins: {
22 |       react,
23 |       'react-hooks': reactHooks,
24 |       'react-refresh': reactRefresh,
25 |     },
26 |     rules: {
27 |       ...js.configs.recommended.rules,
28 |       ...react.configs.recommended.rules,
29 |       ...react.configs['jsx-runtime'].rules,
30 |       ...reactHooks.configs.recommended.rules,
31 |       'react/jsx-no-target-blank': 'off',
32 |       'react-refresh/only-export-components': [
33 |         'warn',
34 |         { allowConstantExport: true },
35 |       ],
36 |     },
37 |   },
38 | ]
39 | 


--------------------------------------------------------------------------------
/src/components/JobListings.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import JobListing from './JobListing';
 3 | import Spinner from './Spinner';
 4 | import { useSelector } from 'react-redux';
 5 | 
 6 | const JobListings = ({ isHome = false }) => {
 7 |   const [loading, setLoading] = useState(true);
 8 |   
 9 |   const jobs = useSelector((state) => state.jobs.list);
10 | 
11 |   useEffect(() => {
12 |     if (jobs.length) {
13 |       setLoading(false);
14 |     }
15 |   }, [jobs]);
16 | 
17 |   return (
18 |     <section className='bg-blue-50 px-4 py-10'>
19 |       <div className='container-xl lg:container m-auto'>
20 |         <h2 className='text-3xl font-bold text-indigo-500 mb-6 text-center'>
21 |           {isHome ? 'Recent Jobs' : 'Browse Jobs'}
22 |         </h2>
23 | 
24 |         {loading ? (
25 |           <Spinner loading={loading} />
26 |         ) : (
27 |           <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
28 |             {jobs.map((job, idx) => (
29 |               <JobListing key={idx} job={job} />
30 |             ))}
31 |           </div>
32 |         )}
33 |       </div>
34 |     </section>
35 |   );
36 | };
37 | export default JobListings;
38 | 


--------------------------------------------------------------------------------
/src/components/HomeCards.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | import Card from './Card';
 3 | 
 4 | const HomeCards = () => {
 5 |   return (
 6 |     <section className='py-4'>
 7 |       <div className='container-xl lg:container m-auto'>
 8 |         <div className='grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg'>
 9 |           <Card>
10 |             <h2 className='text-2xl font-bold'>For Developers</h2>
11 |             <p className='mt-2 mb-4'>
12 |               Browse our React jobs and start your career today
13 |             </p>
14 |             <Link
15 |               to='/jobs'
16 |               className='inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700'
17 |             >
18 |               Browse Jobs
19 |             </Link>
20 |           </Card>
21 |           <Card bg='bg-indigo-100'>
22 |             <h2 className='text-2xl font-bold'>For Employers</h2>
23 |             <p className='mt-2 mb-4'>
24 |               List your job to find the perfect developer for the role
25 |             </p>
26 |             <Link
27 |               to='/add-job'
28 |               className='inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600'
29 |             >
30 |               Add Job
31 |             </Link>
32 |           </Card>
33 |         </div>
34 |       </div>
35 |     </section>
36 |   );
37 | };
38 | export default HomeCards;
39 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { NavLink } from 'react-router-dom';
 2 | import logo from '../assets/images/logo.png';
 3 | 
 4 | const Navbar = () => {
 5 |   const linkClass = ({ isActive }) =>
 6 |     isActive
 7 |       ? 'bg-black text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
 8 |       : 'text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2';
 9 | 
10 |   return (
11 |     <nav className='bg-indigo-700 border-b border-indigo-500'>
12 |       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
13 |         <div className='flex h-20 items-center justify-between'>
14 |           <div className='flex flex-1 items-center justify-center md:items-stretch md:justify-start'>
15 |             <NavLink className='flex flex-shrink-0 items-center mr-4' to='/'>
16 |               <img className='h-10 w-auto' src={logo} alt='React Jobs' />
17 |               <span className='hidden md:block text-white text-2xl font-bold ml-2'>
18 |                 React Jobs
19 |               </span>
20 |             </NavLink>
21 |             <div className='md:ml-auto'>
22 |               <div className='flex space-x-2'>
23 |                 <NavLink to='/' className={linkClass}>
24 |                   Home
25 |                 </NavLink>
26 |                 <NavLink to='/jobs' className={linkClass}>
27 |                   Jobs
28 |                 </NavLink>
29 |                 <NavLink to='/add-job' className={linkClass}>
30 |                   Add Job
31 |                 </NavLink>
32 |               </div>
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </div>
37 |     </nav>
38 |   );
39 | };
40 | export default Navbar;
41 | 


--------------------------------------------------------------------------------
/src/components/JobListing.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { FaMapMarker } from 'react-icons/fa';
 3 | import { Link } from 'react-router-dom';
 4 | 
 5 | const JobListing = ({ job }) => {
 6 |   const [showFullDescription, setShowFullDescription] = useState(false);
 7 | 
 8 |   let description = job.description;
 9 | 
10 |   if (!showFullDescription) {
11 |     description = description.substring(0, 90) + '...';
12 |   }
13 | 
14 |   return (
15 |     <div className='bg-white rounded-xl shadow-md relative'>
16 |       <div className='p-4'>
17 |         <div className='mb-6'>
18 |           <div className='text-gray-600 my-2'>{job.type}</div>
19 |           <h3 className='text-xl font-bold'>{job.title}</h3>
20 |         </div>
21 | 
22 |         <div className='mb-5'>{description}</div>
23 | 
24 |         <button
25 |           onClick={() => setShowFullDescription((prevState) => !prevState)}
26 |           className='text-indigo-500 mb-5 hover:text-indigo-600'
27 |         >
28 |           {showFullDescription ? 'Less' : 'More'}
29 |         </button>
30 | 
31 |         <h3 className='text-indigo-500 mb-2'>{job.salary} / Year</h3>
32 | 
33 |         <div className='border border-gray-100 mb-5'></div>
34 | 
35 |         <div className='flex flex-col lg:flex-row justify-between mb-4'>
36 |           <div className='text-orange-700 mb-3'>
37 |             <FaMapMarker className='inline text-lg mb-1 mr-1' />
38 |             {job.location}
39 |           </div>
40 |           <Link
41 |             to={`/jobs/${job.id}`}
42 |             className='h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm'
43 |           >
44 |             Read More
45 |           </Link>
46 |         </div>
47 |       </div>
48 |     </div>
49 |   );
50 | };
51 | export default JobListing;
52 | 


--------------------------------------------------------------------------------
/src/jobs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "jobs": [
 3 |     {
 4 |       "id": "1",
 5 |       "title": "Senior React Developer",
 6 |       "type": "Full-Time",
 7 |       "description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
 8 |       "location": "Boston, MA",
 9 |       "salary": "$70K - $80K",
10 |       "company": {
11 |         "name": "NewTek Solutions",
12 |         "description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
13 |         "contactEmail": "contact@teksolutions.com",
14 |         "contactPhone": "555-555-5555"
15 |       }
16 |     },
17 |     {
18 |       "id": "2",
19 |       "title": "Front-End Engineer (React & Redux)",
20 |       "type": "Full-Time",
21 |       "location": "Miami, FL",
22 |       "description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
23 |       "salary": "$70K - $80K",
24 |       "company": {
25 |         "name": "Veneer Solutions",
26 |         "description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
27 |         "contactEmail": "contact@loremipsum.com",
28 |         "contactPhone": "555-555-5555"
29 |       }
30 |     },
31 |     {
32 |       "id": "3",
33 |       "title": "React.js Dev",
34 |       "type": "Full-Time",
35 |       "location": "Brooklyn, NY",
36 |       "description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
37 |       "salary": "$70K - $80K",
38 |       "company": {
39 |         "name": "Dolor Cloud",
40 |         "description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
41 |         "contactEmail": "contact@dolorsitamet.com",
42 |         "contactPhone": "555-555-5555"
43 |       }
44 |     },
45 |     {
46 |       "id": "4",
47 |       "title": "React Front-End Developer",
48 |       "type": "Part-Time",
49 |       "description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
50 |       "location": "Pheonix, AZ",
51 |       "salary": "$60K - $70K",
52 |       "company": {
53 |         "name": "Alpha Elite",
54 |         "description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
55 |         "contactEmail": "contact@adipisicingelit.com",
56 |         "contactPhone": "555-555-5555"
57 |       }
58 |     },
59 |     {
60 |       "id": "5",
61 |       "title": "Full Stack React Developer",
62 |       "type": "Full-Time",
63 |       "description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
64 |       "location": "Atlanta, GA",
65 |       "salary": "$90K - $100K",
66 |       "company": {
67 |         "name": "Browning Technologies",
68 |         "description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
69 |         "contactEmail": "contact@consecteturadipisicing.com",
70 |         "contactPhone": "555-555-5555"
71 |       }
72 |     },
73 |     {
74 |       "id": "6",
75 |       "title": "React Native Developer",
76 |       "type": "Full-Time",
77 |       "description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
78 |       "location": "Portland, OR",
79 |       "salary": "$100K - $110K",
80 |       "company": {
81 |         "name": "Port Solutions INC",
82 |         "description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
83 |         "contactEmail": "contact@ipsumlorem.com",
84 |         "contactPhone": "555-555-5555"
85 |       }
86 |     }
87 |   ]
88 | }


--------------------------------------------------------------------------------
/src/pages/AddJobPage.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import { useNavigate } from 'react-router-dom';
  3 | import { toast } from 'react-toastify';
  4 | import { useDispatch } from 'react-redux';
  5 | import { setJobs } from "../store/job-slice";
  6 | 
  7 | 
  8 | const AddJobPage = () => {
  9 |   const [title, setTitle] = useState('');
 10 |   const [type, setType] = useState('Full-Time');
 11 |   const [location, setLocation] = useState('');
 12 |   const [description, setDescription] = useState('');
 13 |   const [salary, setSalary] = useState('Under $50K');
 14 |   const [companyName, setCompanyName] = useState('');
 15 |   const [companyDescription, setCompanyDescription] = useState('');
 16 |   const [contactEmail, setContactEmail] = useState('');
 17 |   const [contactPhone, setContactPhone] = useState('');
 18 | 
 19 |   const navigate = useNavigate();
 20 |   const dispatch = useDispatch();
 21 | 
 22 |   const submitForm = (e) => {
 23 |     e.preventDefault();
 24 | 
 25 |     const newJob = {
 26 |       title,
 27 |       type,
 28 |       location,
 29 |       description,
 30 |       salary,
 31 |       company: {
 32 |         name: companyName,
 33 |         description: companyDescription,
 34 |         contactEmail,
 35 |         contactPhone,
 36 |       },
 37 |     };
 38 | 
 39 |     dispatch(setJobs([newJob]));
 40 | 
 41 |     toast.success('Job Added Successfully');
 42 | 
 43 |     return navigate('/jobs');
 44 |   };
 45 | 
 46 |   return (
 47 |     <section className='bg-indigo-50'>
 48 |       <div className='container m-auto max-w-2xl py-24'>
 49 |         <div className='bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0'>
 50 |           <form onSubmit={submitForm}>
 51 |             <h2 className='text-3xl text-center font-semibold mb-6'>Add Job</h2>
 52 | 
 53 |             <div className='mb-4'>
 54 |               <label
 55 |                 htmlFor='type'
 56 |                 className='block text-gray-700 font-bold mb-2'
 57 |               >
 58 |                 Job Type
 59 |               </label>
 60 |               <select
 61 |                 id='type'
 62 |                 name='type'
 63 |                 className='border rounded w-full py-2 px-3'
 64 |                 required
 65 |                 value={type}
 66 |                 onChange={(e) => setType(e.target.value)}
 67 |               >
 68 |                 <option value='Full-Time'>Full-Time</option>
 69 |                 <option value='Part-Time'>Part-Time</option>
 70 |                 <option value='Remote'>Remote</option>
 71 |                 <option value='Internship'>Internship</option>
 72 |               </select>
 73 |             </div>
 74 | 
 75 |             <div className='mb-4'>
 76 |               <label className='block text-gray-700 font-bold mb-2'>
 77 |                 Job Listing Name
 78 |               </label>
 79 |               <input
 80 |                 type='text'
 81 |                 id='title'
 82 |                 name='title'
 83 |                 className='border rounded w-full py-2 px-3 mb-2'
 84 |                 placeholder='eg. Beautiful Apartment In Miami'
 85 |                 required
 86 |                 value={title}
 87 |                 onChange={(e) => setTitle(e.target.value)}
 88 |               />
 89 |             </div>
 90 |             <div className='mb-4'>
 91 |               <label
 92 |                 htmlFor='description'
 93 |                 className='block text-gray-700 font-bold mb-2'
 94 |               >
 95 |                 Description
 96 |               </label>
 97 |               <textarea
 98 |                 id='description'
 99 |                 name='description'
100 |                 className='border rounded w-full py-2 px-3'
101 |                 rows='4'
102 |                 placeholder='Add any job duties, expectations, requirements, etc'
103 |                 value={description}
104 |                 onChange={(e) => setDescription(e.target.value)}
105 |               ></textarea>
106 |             </div>
107 | 
108 |             <div className='mb-4'>
109 |               <label
110 |                 htmlFor='type'
111 |                 className='block text-gray-700 font-bold mb-2'
112 |               >
113 |                 Salary
114 |               </label>
115 |               <select
116 |                 id='salary'
117 |                 name='salary'
118 |                 className='border rounded w-full py-2 px-3'
119 |                 required
120 |                 value={salary}
121 |                 onChange={(e) => setSalary(e.target.value)}
122 |               >
123 |                 <option value='Under $50K'>Under $50K</option>
124 |                 <option value='$50K - 60K'>$50K - $60K</option>
125 |                 <option value='$60K - 70K'>$60K - $70K</option>
126 |                 <option value='$70K - 80K'>$70K - $80K</option>
127 |                 <option value='$80K - 90K'>$80K - $90K</option>
128 |                 <option value='$90K - 100K'>$90K - $100K</option>
129 |                 <option value='$100K - 125K'>$100K - $125K</option>
130 |                 <option value='$125K - 150K'>$125K - $150K</option>
131 |                 <option value='$150K - 175K'>$150K - $175K</option>
132 |                 <option value='$175K - 200K'>$175K - $200K</option>
133 |                 <option value='Over $200K'>Over $200K</option>
134 |               </select>
135 |             </div>
136 | 
137 |             <div className='mb-4'>
138 |               <label className='block text-gray-700 font-bold mb-2'>
139 |                 Location
140 |               </label>
141 |               <input
142 |                 type='text'
143 |                 id='location'
144 |                 name='location'
145 |                 className='border rounded w-full py-2 px-3 mb-2'
146 |                 placeholder='Company Location'
147 |                 required
148 |                 value={location}
149 |                 onChange={(e) => setLocation(e.target.value)}
150 |               />
151 |             </div>
152 | 
153 |             <h3 className='text-2xl mb-5'>Company Info</h3>
154 | 
155 |             <div className='mb-4'>
156 |               <label
157 |                 htmlFor='company'
158 |                 className='block text-gray-700 font-bold mb-2'
159 |               >
160 |                 Company Name
161 |               </label>
162 |               <input
163 |                 type='text'
164 |                 id='company'
165 |                 name='company'
166 |                 className='border rounded w-full py-2 px-3'
167 |                 placeholder='Company Name'
168 |                 value={companyName}
169 |                 onChange={(e) => setCompanyName(e.target.value)}
170 |               />
171 |             </div>
172 | 
173 |             <div className='mb-4'>
174 |               <label
175 |                 htmlFor='company_description'
176 |                 className='block text-gray-700 font-bold mb-2'
177 |               >
178 |                 Company Description
179 |               </label>
180 |               <textarea
181 |                 id='company_description'
182 |                 name='company_description'
183 |                 className='border rounded w-full py-2 px-3'
184 |                 rows='4'
185 |                 placeholder='What does your company do?'
186 |                 value={companyDescription}
187 |                 onChange={(e) => setCompanyDescription(e.target.value)}
188 |               ></textarea>
189 |             </div>
190 | 
191 |             <div className='mb-4'>
192 |               <label
193 |                 htmlFor='contact_email'
194 |                 className='block text-gray-700 font-bold mb-2'
195 |               >
196 |                 Contact Email
197 |               </label>
198 |               <input
199 |                 type='email'
200 |                 id='contact_email'
201 |                 name='contact_email'
202 |                 className='border rounded w-full py-2 px-3'
203 |                 placeholder='Email address for applicants'
204 |                 required
205 |                 value={contactEmail}
206 |                 onChange={(e) => setContactEmail(e.target.value)}
207 |               />
208 |             </div>
209 |             <div className='mb-4'>
210 |               <label
211 |                 htmlFor='contact_phone'
212 |                 className='block text-gray-700 font-bold mb-2'
213 |               >
214 |                 Contact Phone
215 |               </label>
216 |               <input
217 |                 type='tel'
218 |                 id='contact_phone'
219 |                 name='contact_phone'
220 |                 className='border rounded w-full py-2 px-3'
221 |                 placeholder='Optional phone for applicants'
222 |                 value={contactPhone}
223 |                 onChange={(e) => setContactPhone(e.target.value)}
224 |               />
225 |             </div>
226 | 
227 |             <div>
228 |               <button
229 |                 className='bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline'
230 |                 type='submit'
231 |               >
232 |                 Add Job
233 |               </button>
234 |             </div>
235 |           </form>
236 |         </div>
237 |       </div>
238 |     </section>
239 |   );
240 | };
241 | export default AddJobPage;
242 | 


--------------------------------------------------------------------------------