Address Validator UI using DI Adresshelper API

🚀 Overview

This is a React + TypeScript frontend application that allows users to validate one or more addresses using the DI Adresshelper API. Users can type in addresses to receive validation feedback, suggestions, and coordinates.

🧰 Features

• Validate one or multiple addresses
• Show suggestions and metadata for each result
• Autocomplete/typeahead for improved UX
• Optionally show addresses on a map (if time permits)
• Responsive and accessible UI

🎓 Technologies Used

• React
• TypeScript
• Vite (for bundling and local dev)
• Tailwind CSS
• React Query (for API state management)
• React Hook Form

🔧 Getting Started

Prerequisites

• Node.js >= 20.x

Install dependencies

npm install

Run the development server

npm run dev

Environment Setup

Add a .env file:

VITE_API_KEY=YOUR_API_KEY
VITE_API_BASE=YOUR_API_URL

🔢 API Example

curl 'https://staging-ws.di.no/ws/json/addressHelper/v-2/NO/streetSearch/akersgata?apiKey=YOUR_API_KEY'   -H 'referer: http://localhost:3000'

🧰 Project Structure

src/
├── components/         // Reusable UI components
├── pages/              // Page components
├── hooks/              // Custom React hooks
├── services/           // API logic
├── types/              // TypeScript types
├── utils/              // Helper functions

📊 Testing

• Unit testing: Jest + React Testing Library
• E2E (optional): Cypress or Playwright

To run tests:

npm run test

✨ Improvements (given more time)

• CI/CD with GitHub Actions
• More advanced validation feedback (official/unofficial flag)
• CSV import for bulk validation
• Localization support
• Integration with a map (e.g. Leaflet)
• Address validation as a drop-in component

✉️ Questions You Might Be Asked

• Why did you choose X library?
• How would you add internationalization?
• How would you design this for production?
• How do you handle rate limiting or throttling?

🙌 License

This project is for demonstration purposes only.