# Frontend Integration Wappi pairs with [wappi-fe](https://www.npmjs.com/package/wappi-fe) to provide seamless integration between your backend API and frontend applications. ## Installation ```bash npm install wappi-fe ``` ## Basic Setup ### React Integration ```typescript import { WappiClient } from 'wappi-fe' const client = new WappiClient({ baseURL: 'http://localhost:3000', timeout: 5000 }) // In your React component function UsersList() { const [users, setUsers] = useState([]) useEffect(() => { client.get('/users') .then(response => setUsers(response.data.users)) .catch(error => console.error(error)) }, []) return (
{users.map(user => (
{user.name}
))}
) } ``` ### Vue.js Integration ```typescript import { WappiClient } from 'wappi-fe' const client = new WappiClient({ baseURL: process.env.VUE_APP_API_URL }) export default { data() { return { users: [] } }, async mounted() { try { const response = await client.get('/users') this.users = response.data.users } catch (error) { console.error(error) } } } ``` ## Advanced Features ### Type Safety ```typescript interface User { id: string name: string email: string } interface ApiResponse { data: T message: string } const response = await client.get>('/users') // response.data is fully typed ``` ### Request Interceptors ```typescript client.interceptors.request.use((config) => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) ``` ### Response Interceptors ```typescript client.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { // Handle unauthorized access window.location.href = '/login' } return Promise.reject(error) } ) ``` ## Real-time Features ### WebSocket Integration ```typescript import { WappiSocket } from 'wappi-fe' const socket = new WappiSocket('ws://localhost:3000') socket.on('user:created', (user) => { console.log('New user created:', user) }) socket.emit('join:room', { roomId: 'users' }) ``` URL: https://www.wappi.dev/frontend-integration