https://github.com/hari31416/connections_frontend
A comprehensive full-stack MERN application for efficiently managing and tracking your professional and personal connections, companies, and employment positions.
https://github.com/hari31416/connections_frontend
career crm mern-stack networking
Last synced: 2 months ago
JSON representation
A comprehensive full-stack MERN application for efficiently managing and tracking your professional and personal connections, companies, and employment positions.
- Host: GitHub
- URL: https://github.com/hari31416/connections_frontend
- Owner: Hari31416
- License: mit
- Created: 2025-05-25T03:17:29.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-01T11:23:36.000Z (4 months ago)
- Last Synced: 2025-06-01T20:15:51.012Z (4 months ago)
- Topics: career, crm, mern-stack, networking
- Language: JavaScript
- Homepage: http://connections.hari31416.in/
- Size: 708 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Connections Tracker - Frontend
A modern React application for managing professional and personal connections, companies, and employment positions. Features a responsive design, dark/light mode toggle, and intuitive user interface built with Bootstrap.
## ⚠️ Experimental Project Disclaimer
**This is an experimental project** - the result of an experiment to understand whether "vibe coding" can be used to generate end-to-end web applications.
**Important Notes:**
- The bulk of this code is AI-generated
- This code is **NOT optimized for production use**
- This project serves as a proof-of-concept and learning exercise
- Use at your own risk and review thoroughly before any production deployment## 🚀 Technology Stack
- **Framework**: React (v19.1.0)
- **Styling**: Bootstrap CSS with custom themes
- **State Management**: React Context API
- **HTTP Client**: Fetch API with custom service layer
- **Icons**: Bootstrap Icons
- **Testing**: Jest, React Testing Library
- **Build Tool**: Create React App (CRA)
- **Environment**: dotenv for configuration## 📋 Prerequisites
- Node.js (v16 or higher)
- npm or yarn package manager
- Backend API server running (see [Backend README](https://github.com/Hari31416/connections_backend/blob/main/README.md))## 🛠️ Installation & Setup
1. **Clone and navigate to frontend directory**:
```bash
cd frontend
```2. **Install dependencies**:
```bash
npm install
```3. **Environment Configuration**:
Create a `.env` file in the frontend root:```env
# Backend API Configuration
REACT_APP_API_BASE=http://localhost:4000/api# Optional: For production deployment
REACT_APP_API_BASE=https://your-backend-domain.com/api
```4. **Start the development server**:
```bash
npm start
```The application will open at `http://localhost:3000`
## 🎨 Key Features
### 🔐 Authentication System
- **First User Setup**: Automatic admin account creation for new installations
- **Secure Login**: JWT-based authentication with persistent sessions
- **User Management**: Admin-only user registration and management
- **Auto-logout**: Automatic session handling and cleanup### 👥 Connection Management
- **CRUD Operations**: Create, read, update, and delete personal connections
- **Rich Profiles**: Store names, emails, phone numbers, LinkedIn/GitHub usernames
- **Notes System**: Add personal notes and context for each connection
- **Career History**: View employment history across companies
- **Social Integration**: Direct links to LinkedIn and GitHub profiles### 🏢 Company Management
- **Company Profiles**: Manage company information and industry categorization
- **Website Integration**: Direct links to company websites
- **Employee Tracking**: View all connections associated with each company
- **Industry Classification**: Organize companies by industry sectors### 💼 Position Tracking
- **Employment History**: Link connections to companies with specific roles
- **Date Tracking**: Start dates, end dates, and current position indicators
- **Job Details**: Position titles, employment periods, and role-specific notes
- **Career Timeline**: Visualize professional relationships over time### 🔍 Search & Discovery
- **Real-time Search**: Instant search across connections and companies with debounced input
- **Multi-field Search**: Search connections by name, email, phone, LinkedIn/GitHub usernames, and notes
- **Company Search**: Find companies by name, industry, and website
- **Search Filtering**: Filter results by type (All, Connections Only, Companies Only)
- **Interactive Results**: Click search results to navigate directly to detailed views
- **Smart Matching**: Case-insensitive partial matching for flexible search queries### 🎨 User Interface
- **Responsive Design**: Optimized for desktop, tablet, and mobile devices
- **Dark/Light Mode**: Toggle between themes with persistent preference
- **Modern Components**: Clean, intuitive interface with Bootstrap styling
- **Interactive Cards**: Hover effects and smooth transitions
- **Modal Forms**: Streamlined data entry and editing experience## 🏗️ Application Architecture
### Component Structure
```
src/
├── components/
│ ├── auth/ # Authentication components
│ │ ├── Auth.js # Login form
│ │ └── FirstUserSetup.js # Initial admin setup
│ ├── layout/ # Layout components
│ │ ├── Header.js # Navigation header
│ │ ├── Footer.js # Application footer
│ │ └── ServerLoading.js # Backend connectivity status
│ ├── lists/ # Data listing components
│ │ ├── ConnectionList.js # Connections overview
│ │ ├── CompanyList.js # Companies overview
│ │ └── PositionList.js # Positions overview
│ ├── modals/ # Modal dialog components
│ │ ├── ConnectionModal.js # Connection form
│ │ ├── CompanyModal.js # Company form
│ │ ├── PositionModal.js # Position form
│ │ ├── UserManagementModal.js # User administration
│ │ └── ModalBackdrop.js # Modal overlay
│ └── pages/ # Detail view components
│ ├── ConnectionDetails.js # Connection profile page
│ └── CompanyDetails.js # Company profile page
├── context/ # State management
│ ├── AppContext.js # Main application context
│ ├── authService.js # Authentication API calls
│ ├── connectionService.js # Connection API calls
│ ├── companyService.js # Company API calls
│ ├── positionService.js # Position API calls
│ └── apiUtils.js # HTTP utilities and health checks
├── App.js # Main application component
├── App.css # Global styles and themes
└── index.js # Application entry point
```### State Management
The application uses React Context API for centralized state management:
- **AppContext**: Main application state including authentication, data, and UI preferences
- **Service Layer**: Abstracted API calls with error handling and token management
- **Local Storage**: Persistent JWT token storage and dark mode preference### Data Flow
1. **Authentication**: JWT tokens stored in localStorage and included in API requests
2. **API Services**: Dedicated service files for each entity type (connections, companies, positions)
3. **State Updates**: Context providers update state based on API responses
4. **Component Updates**: Components re-render automatically when context state changes## 📱 User Interface Components
### Navigation & Layout
- **Header**: Application title, user info, dark mode toggle, logout button
- **Footer**: Copyright and additional links
- **Responsive Grid**: Bootstrap-based responsive layout system### Data Entry Forms
- **Modal Forms**: Overlay forms for creating and editing entities
- **Form Validation**: Client-side validation with error messaging
- **Cancel/Save Actions**: Clear user control over data modifications### Data Display
- **Card Layouts**: Clean, organized display of entity information
- **Tables**: Sortable, responsive tables for list views
- **Detail Pages**: Comprehensive single-entity views with related data
- **Loading States**: Smooth loading indicators during API operations### Interactive Elements
- **Buttons**: Consistent styling with hover effects and disabled states
- **Links**: Contextual navigation between related entities
- **Icons**: Bootstrap Icons for intuitive visual cues
- **Badges**: Status indicators and category labels## 🔧 Configuration
### Environment Variables
```env
# Required: Backend API endpoint
REACT_APP_API_BASE=http://localhost:4000/api
```### API Integration
The frontend communicates with the backend through a service layer that handles:
- **Authentication**: Automatic token inclusion in requests
- **Error Handling**: Consistent error processing and user feedback
- **Health Checks**: Backend connectivity monitoring
- **Request Logging**: Development-time request/response logging## 📝 Scripts
```json
{
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
```### Development Commands
- `npm start`: Start development server (http://localhost:3000)
- `npm run build`: Create production build
- `npm test`: Run test suite
- `npm run eject`: Eject from Create React App (irreversible)## 🚀 Deployment
### Vercel Deployment (Recommended)
1. **Install Vercel CLI**:
```bash
npm install -g vercel
```2. **Build and Deploy**:
```bash
npm run build
vercel --prod
```3. **Environment Variables in Vercel**:
- Set `REACT_APP_API_BASE` to your production backend URL
- Configure through Vercel dashboard or CLI### Netlify Deployment
1. **Build the application**:
```bash
npm run build
```2. **Deploy build folder**:
- Drag and drop `build/` folder to Netlify
- Or connect GitHub repository for automatic deploys3. **Environment Variables**:
- Configure `REACT_APP_API_BASE` in Netlify dashboard
- Add build command: `npm run build`
- Set publish directory: `build`### Alternative Deployment Options
- **GitHub Pages**: Static hosting for React apps
- **Firebase Hosting**: Google's hosting platform
- **AWS S3 + CloudFront**: Scalable static hosting
- **Surge.sh**: Simple command-line deployment## 🎨 Theming & Customization
### Dark/Light Mode
The application includes a built-in theme system:
- **Toggle Button**: Header-mounted theme switcher
- **Persistent Preference**: Theme choice saved to localStorage
- **CSS Variables**: Consistent color scheme across components
- **Bootstrap Integration**: Theme-aware Bootstrap classes### Custom Styling
- **App.css**: Global styles and CSS custom properties
- **Bootstrap Classes**: Utility-first styling approach
- **Component Styles**: Scoped styles within components
- **Responsive Design**: Mobile-first responsive breakpoints### Customization Options
```css
/* Custom CSS variables in App.css */
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--danger-color: #dc3545;
}.dark-mode {
--bg-primary: #1a1a1a;
--text-primary: #ffffff;
--card-bg: #2d2d2d;
}
```## 🐛 Troubleshooting
### Common Issues
1. **Backend Connection Failed**:
- Verify `REACT_APP_API_BASE` in `.env`
- Ensure backend server is running
- Check browser console for CORS errors2. **Authentication Issues**:
- Clear localStorage: `localStorage.clear()`
- Verify JWT token format in backend logs
- Check token expiration3. **Build Errors**:
- Clear node_modules: `rm -rf node_modules && npm install`
- Check for missing environment variables
- Verify all imports are correct4. **Responsive Layout Issues**:
- Test with browser dev tools
- Verify Bootstrap CSS is loading
- Check for conflicting custom styles## 📄 License
MIT License - see LICENSE file for details
## 👨💻 Author
**Harikesh Kushwaha**
---
For backend API documentation, see [Backend README](https://github.com/Hari31416/connections_backend/blob/main/README.md).