Profile Management

Overview

This is a profile management application built with React.js, leveraging OpenStreetMap (OSM) and Overpass API for free, open-source mapping and geocoding. It fulfills the requirements of the "Frontend Case Study 2025," providing an intuitive interface to view and manage user profiles with interactive location mapping.

Deployed Link

Profile Management

Features

Core Features

• Profile Display: View profiles with name, photo, and description.
• Map Integration: Interactive OSM maps triggered by a "Summary" button, showing profile locations.
• Admin Panel: Add, edit, and delete profiles via a dedicated interface.
• Search & Filter: Filter profiles by name, address, or attributes.
• Detailed Profile View: Access comprehensive profile details (e.g., contact, interests) on a separate page.

User Experience

• Tooltips: Added for clarity (e.g., on "Summary" button) using react-tooltip.
• Responsive Design: Adapts to mobile, tablet, and desktop with CSS media queries.
• Loading States: Visual feedback during map loading and data fetching.
• Error Handling: Graceful handling of geocoding or API errors (e.g., "Address not found").

Technical Features

• React.js: Built with functional components and hooks (useState, useContext, useEffect).
• OpenStreetMap: Map rendering with react-leaflet and OSM tiles (https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png).
• Overpass API: Free geocoding of addresses to coordinates (https://overpass-api.de/api/interpreter).
• Local Storage: Persistent profile data storage.
• Routing: Navigation with react-router-dom for profile list, details, and admin panel.

Remaining Tasks

• Enhance geocoding accuracy for global addresses with refined Overpass API queries.
• Add theme switching (light/dark mode) with react-switch or CSS variables.
• Implement full authentication for admin panel (e.g., Firebase).
• Add unit tests with react-testing-library and integration tests with Cypress.
• Optimize map loading performance with tile caching or pre-fetching.

Installation

1. Clone the repository:

   git clone https://github.com/CoderShubhamMate/Profile-Management.git

2. Navigate to the project directory:

   cd Profile-Management

3. Install dependencies:

   npm install

4. Run the development server:

   npm start

Dependencies

• react, react-dom: Core React libraries.
• react-router-dom: Routing for navigation.
• react-leaflet, leaflet: OSM map integration.
• react-tooltip: Tooltips for UX.

Deployment

Deployed on Vercel. To redeploy:

1. Build the app:

   npm run build

2. Deploy with Vercel CLI:

   vercel --prod

   Ensure no environment variables are needed, as OSM and Overpass API are key-free.

Usage

1. View Profiles:
   • Browse profiles on the homepage (/), click "Summary" for maps.
2. Search Profiles:
   • Use the search bar to filter by name or address.
3. View Details:
   • Navigate to /profile/[id] for detailed info.
4. Manage Profiles:
   • Access /admin to add, edit, or delete profiles.

Accessibility

• ARIA labels: Added on buttons and inputs (e.g., <button aria-label="View map summary">).
• Keyboard navigation: Support with tabIndex.
• Color contrast: Basic adjustments in CSS.

Technical Implementation

• Framework: React.js with functional components.
• Styling: Vanilla CSS with media queries.
• Map: OSM via react-leaflet, geocoding with Overpass API.
• State: Managed with React Context and local storage.
• Routing: react-router-dom for page navigation.

License

This project is open-source and available under the MIT License.