JobTrack - Job Application Tracker

Project Overview

JobTrack is a modern web application designed to help job seekers organize and track their job applications. Built with React, Vite, and Firebase, it provides a seamless user experience for managing your job search process.

Live Demo (Add your live URL here when deployed)

Key Features

• User Authentication:

  • Email/password login and registration
  • Google authentication
  • Password reset functionality

• Application Management:

  • Add company details

• User Profile:

  • Update profile information
  • Upload profile picture
  • Manage account settings

Technologies Used

Frontend

• React 18
• Vite (Build tool)
• React Router (Routing)
• Framer Motion (Animations)
• React Icons (Icon library)
• Tailwind CSS (Styling)
• React Hot Toast (Notifications)

Backend

• Firebase Authentication
• Firebase Firestore (Database)
• Firebase Storage (File storage)

Installation

1. Clone the repository:

git clone https://github.com/programming-hero-web-course1/b11a9-react-authentication-TaFhiM12.git

2. Install dependencies:

cd jobtrack
npm install

3. Create a .env file in the root directory with your Firebase configuration:

VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id

4. Start the development server:

npm run dev

Available Scripts

• npm run dev: Starts the development server
• npm run build: Builds the app for production
• npm run lint: Runs ESLint
• npm run preview: Previews the production build

Project Structure

src/
├── assets/            # Static assets
├── components/        # Reusable components
├── contexts/          # React contexts          
├── pages/             # Application pages
├── routes/            # Route configuration
|── Root/              # Root component
|── firebase.init.js   # Firebase Authentication
├── App.jsx            # Main application component
└── main.jsx           # Application entry point

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.