Job-Tabs-App 📄

A React practice project featuring dynamic job information displayed through interactive tabs. Built to practice API data fetching, state management, and component composition in React.

📸 Project Preview

💻 Desktop Experience

Full-width layout with side tabs and detailed job description

📱 Mobile Experience

Stacked layout with horizontal tab navigation

✨ Features

• Tab Navigation - Interactive tabs for switching between different job positions
• API Data Fetching - Dynamic data retrieval from external API
• Responsive Design - Adapts to different screen sizes
• Loading States - Elegant loading spinner during data fetch
• Component Architecture - Well-structured component hierarchy

💡 Key Learnings / Implemented Concepts

This project was created to practice essential React concepts:

• API Integration - Using fetch API with useEffect for data retrieval
• State Management - Implementing useState for jobs data and current item tracking
• Component Communication - Passing data and functions between components via props
• Dynamic Rendering - Displaying content based on current tab selection
• List Rendering - Using map() with unique keys for duties and buttons
• Conditional Styling - Active state styling for selected tabs
• Error Handling - Try-catch blocks for API error management
• UUID Implementation - Generating unique keys for dynamic content

🧰 Built With

• Vite + React
• JavaScript (ES6+)
• React Icons
• UUID Library
• HTML5 & CSS3

▶️ Live Demo

View Live on Netlify: Click here

🎨 Design

Figma design provided by the course instructor: Preview here

📦 Getting Started

Prerequisites

• Node.js ≥ 18
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/pro804/Job-Tabs-App.git

2. Navigate to the project directory

cd Job-Tabs-App

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open http://localhost:5173 to view it in the browser.

🔧 Scripts

• npm run dev — Runs the development server (Vite)
• npm run build — Builds the app for production
• npm run preview — Previews the production build locally

📄 License

This project is created for educational purposes as part of a React learning journey.