This React-based web application helps you navigate your professional landscape by keeping a clear overview of potential clients and upcoming projects, all running securely on your local machine.
- Centralized Client Database: Effortlessly add, update, and manage details for all your prospective clients
- Dynamic Project Tracking: Monitor the progress and key information of your projects from inception to completion
- Privacy-First Data Storage: All your valuable data resides locally on your computer, ensuring complete control and privacy
- Intuitive User Interface: A clean and straightforward design makes managing your professional pipeline a breeze
- Node.js (version 14 or higher)
- npm or yarn package manager
- Clone the repository
- Install dependencies:
npm install
- Configure Firebase (see Firebase Configuration section below)
- Start the development server:
npm start
The app will open at http://localhost:3000
- Go to the Firebase Console
- Select your project (or create a new one)
- Navigate to Settings → Project settings
- Scroll down to "Your apps" section
- Click the web app icon (
</>) or select your existing web app - Copy the configuration object
Replace the empty strings in your firebase.js file with your actual Firebase configuration values:
const firebaseConfig = {
apiKey: "your-api-key-here",
authDomain: "your-project-id.firebaseapp.com",
projectId: "your-project-id",
storageBucket: "your-project-id.appspot.com",
messagingSenderId: "your-sender-id",
appId: "your-app-id",
measurementId: "your-measurement-id"
};| Field | Description |
|---|---|
apiKey |
Your web API key for Firebase |
authDomain |
The domain used for Firebase Authentication |
projectId |
Your Firebase project ID |
storageBucket |
The default Cloud Storage bucket |
messagingSenderId |
The sender ID for Firebase Cloud Messaging |
appId |
Your Firebase app ID |
measurementId |
Google Analytics measurement ID (optional) |
Create a .env file in your project root:
REACT_APP_FIREBASE_API_KEY=your-api-key-here
REACT_APP_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
REACT_APP_FIREBASE_APP_ID=your-app-id
REACT_APP_FIREBASE_MEASUREMENT_ID=your-measurement-idThen update your firebase.js:
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};Add these files to your .gitignore:
# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# Firebase config (if storing keys directly)
src/firebase.js
⚠️ Important: Never commit API keys or sensitive configuration to version control!
npm startRuns the app in development mode with hot reloading at http://localhost:3000
npm testLaunches the test runner in interactive watch mode
npm run buildCreates an optimized production build in the build folder
npm run ejectBuild fails to minify: See the troubleshooting guide
Firebase connection issues: Verify your configuration values and ensure your Firebase project has the correct services enabled
Environment variables not loading: Make sure your .env file is in the project root and variable names start with REACT_APP_
This project is for personal and professional use. Please ensure compliance with Firebase's terms of service.