Jobby App

A modern job search application built with React that helps users find jobs that fit their skills and career goals.

🚀 Live Demo

Check out the live demo: Jobby App

✨ Features

• User Authentication: Secure login system with protected routes
• Job Search: Browse and search through available job listings
• Job Filtering: Filter jobs by various criteria (employment type, salary range, etc.)
• Job Details: View detailed information about specific job positions
• Responsive Design: Optimized for both desktop and mobile devices
• User Profile: View and manage user profile information

🛠️ Tech Stack

• Frontend: React 18.2.0
• Routing: React Router DOM 6.20.0
• Icons: React Icons 4.12.0
• Styling: CSS3
• State Management: React Hooks
• Authentication: Cookie-based authentication with js-cookie
• Testing: React Testing Library & Jest

📋 Prerequisites

Before running this application, make sure you have:

• Node.js (>= 20.0.0)
• npm (>= 8.0.0)

🔧 Installation

1. Clone the repository:

git clone <repository-url>
cd "Jobby App/client"

2. Install dependencies:

npm install

🚀 Available Scripts

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run deploy

Deploys the application to GitHub Pages after building it.

📁 Project Structure

client/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── components/
│   │   ├── FiltersGroup/
│   │   ├── Header/
│   │   ├── Home/
│   │   ├── JobCard/
│   │   ├── JobItemDetails/
│   │   ├── Jobs/
│   │   ├── Login/
│   │   ├── NotFound/
│   │   ├── ProfileDetails/
│   │   ├── ProtectedRoute/
│   │   ├── SimilarJobCard/
│   │   └── SkillsCard/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

🔐 Authentication

The application uses a protected route system where:

• Users must log in to access job listings and details
• Authentication state is managed using cookies
• Unauthenticated users are redirected to the login page

🎯 Usage

1. Login: Start by logging into the application
2. Home Page: View the welcome page with a call-to-action to find jobs
3. Jobs Page: Browse through available job listings with filtering options
4. Job Details: Click on any job to view detailed information
5. Profile: Access your profile information through the header

🌐 Deployment

The application is configured for deployment on GitHub Pages. Use the following command to deploy:

npm run deploy

🧪 Testing

Run the test suite with:

npm test

The project includes comprehensive testing with React Testing Library and Jest.

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🧑‍💻 Author

• Kundena Akhil - Portfolio - GitHub - LinkedIn

📄 License

This project is licensed under the MIT License.

🔗 Learn More

• Create React App documentation
• React documentation
• React Router documentation