A modern React application that displays office locations on an interactive map using Leaflet and integrates with NocoDB for data management.
- 🗺️ Interactive Map: Built with React Leaflet for smooth map interactions
- 🏢 Office Management: Display and manage office locations
- 🔗 NocoDB Integration: Connect to NocoDB database for data storage
- 📱 Responsive Design: Works on desktop, tablet, and mobile devices
- ⚡ Fast Development: Built with Vite for lightning-fast development
- React 18 - Modern React with hooks
- Vite - Fast build tool and development server
- Leaflet - Open-source interactive maps
- React Leaflet - React components for Leaflet
- NocoDB SDK - Database connectivity
- CSS3 - Modern responsive styling
- Node.js (v16 or higher)
- npm or yarn
- NocoDB instance (optional - uses mock data if not configured)
- Clone the repository:
git clone <your-repo-url>
cd offices- Install dependencies:
npm install- Configure environment variables (optional):
cp .env.example .env
# Edit .env with your NocoDB configuration- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
To connect to your NocoDB database, update the .env file:
VITE_NOCODB_API_URL=http://localhost:8080
VITE_NOCODB_API_TOKEN=your-api-token-here
VITE_NOCODB_BASE_ID=your-base-id-here
VITE_NOCODB_TABLE_ID=your-table-id-hereYour NocoDB table should have the following columns:
| Column Name | Type | Required | Description |
|---|---|---|---|
| Id | Number | Yes | Primary key |
| Part | Text | No | Office part/region |
| Province | Text | No | Province name |
| MP Select | Text | No | MP party affiliation |
| MP | Text | No | Member of Parliament name |
| PcoName | Text | Yes | Office/PCO name |
| Address | Text | No | Office address |
| Latlon | Text | Yes | Latitude,Longitude coordinates (comma or space separated) |
| AdministratorDetails | Text | No | Administrator details |
| AdminPerson | Text | No | Administrator contact person |
| AdminPhone | Text | No | Administrator phone number |
| AdminEmail | Text | No | Administrator email address |
src/
├── components/
│ ├── OfficeMap.jsx # Interactive map component
│ ├── OfficeList.jsx # Office list sidebar
│ └── ConfigHelper.jsx # Configuration helper
├── services/
│ └── nocodbService.js # NocoDB API service
├── App.jsx # Main application component
├── App.css # Application styles
└── main.jsx # Application entry point
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Displays office locations with custom markers
- Different marker colors for different office types
- Click markers to view office details
- Responsive map that adjusts to screen size
- List view of all offices
- Click to select and focus on specific offices
- Real-time data loading from NocoDB
- Fallback to mock data when database is unavailable
- Full CRUD operations support
- Automatic fallback to mock data
- Error handling and user feedback
- Environment-based configuration
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes and commit:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions, please open an issue in the repository or contact the development team.+ 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
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.