CareerPathway

CareerPathway is a career counseling platform designed to provide users with personalized career advice, guidance, and resources to help them make informed decisions about their professional futures.

Features

• Career counseling services with multiple categories
• User authentication using Firebase
• Dynamic routing with React Router
• Responsive design with Tailwind CSS and DaisyUI
• Protected routes for user-specific content

Tech Stack

• Frontend: React, React Router
• Styling: Tailwind CSS, DaisyUI
• Backend: Firebase (for authentication and database)
• Build Tool: Vite

Live Demo

Check out the live version of CareerPathway here:
CareerPathway Live Demo

Getting Started

1. Clone the repository:

   git clone <repository_url>
   

2. Navigate to the project directory:

   cd CareerPathway
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   
   

Environment Variables

To run this project, you will need to set up the following environment variables in a .env.local file.

Use the .env.example file provided as a template:

cp .env.example .env.local

# Firebase Configuration
VITE_API_KEY=<your_firebase_api_key>
VITE_AUTH_DOMAIN=<your_firebase_auth_domain>
VITE_PROJECT_ID=<your_firebase_project_id>
VITE_STORAGE_BUCKET=<your_firebase_storage_bucket>
VITE_MESSAGING_SENDER_ID=<your_firebase_messaging_sender_id>
VITE_APP_ID=<your_firebase_app_id>

## Project Structure

The project is organized as follows:

```plaintext
CareerPathway/
├── public/                     # Static files, such as favicons, images, etc.
│   ├── favicon.svg             # Website favicon
│   └── index.html              # Main HTML file for Vite
├── src/                        # Source code of the project
│   ├── assets/                 # Static assets (e.g., images, icons, fonts)
│   │   ├── images/             # All image files
│   │   ├── icons/              # SVG or icon files
│   │   └── styles/             # Global styles (e.g., Tailwind base configs)
│   │       └── tailwind.css    # Tailwind custom CSS
│   ├── components/             # Reusable React components
│   │   ├── common/             # Shared components (e.g., buttons, loaders)
│   │   ├── layout/             # Layout components (e.g., Navbar, Footer)
│   │   └── sliders/            # Custom slider components
│   ├── context/                # React Context API (e.g., AuthContext)
│   │   └── AuthContext.jsx     # Handles user authentication state
│   ├── data/                   # JSON or mock data for services
│   │   └── services.json       # Service data used in cards
│   ├── hooks/                  # Custom hooks
│   │   └── useAuth.jsx         # Custom hook for authentication
│   ├── pages/                  # Pages for routing
│   │   ├── Home.jsx            # Home page
│   │   ├── Login.jsx           # Login page
│   │   ├── Register.jsx        # Registration page
│   │   ├── Profile.jsx         # My Profile (protected route)
│   │   ├── ServiceDetails.jsx  # Service details (protected route)
│   │   └── NotFound.jsx        # 404 page
│   ├── routes/                 # Routing logic
│   │   ├── AppRouter.jsx       # Main router file
│   │   └── PrivateRoute.jsx    # Higher-order component for protected routes
│   ├── services/               # API calls or Firebase-related logic
│   │   └── firebase.js         # Firebase configuration and initialization
│   ├── App.jsx                 # Main App component
│   ├── main.jsx                # Entry point for React (Vite-specific)
│   └── index.css               # Global CSS entry file for Tailwind
├── .env                        # Environment variables (Firebase config)
├── .gitignore                  # Files and directories to ignore in Git
├── README.md                   # Documentation for the project
├── package.json                # Project metadata and dependencies
├── postcss.config.js           # PostCSS configuration for Tailwind
├── tailwind.config.js          # Tailwind configuration
└── vite.config.js              # Vite configuration