Something went wrong
Please try refreshing the page or contact support if the problem persists.
);
}
return this.props.children;
}
}
```
## Best Practices
### Security Considerations
1. **Token Storage**
- Use `httpOnly` cookies for production when possible
- Avoid storing tokens in localStorage for sensitive applications
- Implement token refresh mechanisms
2. **HTTPS Only**
- Always use HTTPS in production
- Configure secure cookie flags
3. **Input Validation**
- Validate all user inputs on the frontend
- Sanitize data before sending to API
4. **CORS Configuration**
- Configure CORS properly in Django settings
- Restrict allowed origins in production
### Performance Optimization
1. **Request Caching**
```javascript
// Simple cache implementation
class ApiCache {
constructor(ttl = 300000) { // 5 minutes default
this.cache = new Map();
this.ttl = ttl;
}
get(key) {
const item = this.cache.get(key);
if (!item) return null;
if (Date.now() > item.expiry) {
this.cache.delete(key);
return null;
}
return item.data;
}
set(key, data) {
this.cache.set(key, {
data,
expiry: Date.now() + this.ttl
});
}
clear() {
this.cache.clear();
}
}
const apiCache = new ApiCache();
// Usage in API calls
async function getCachedParks() {
const cacheKey = 'parks_list';
let parks = apiCache.get(cacheKey);
if (!parks) {
const response = await api.get('/parks/');
parks = response.data;
apiCache.set(cacheKey, parks);
}
return parks;
}
```
2. **Request Debouncing**
```javascript
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Usage for search
const debouncedSearch = debounce(async (query) => {
if (query.length > 2) {
const results = await api.get('/parks/search/', { params: { q: query } });
setSearchResults(results.data);
}
}, 300);
```
3. **Pagination Handling**
```javascript
class PaginatedAPI {
constructor(baseURL) {
this.baseURL = baseURL;
}
async getAllPages(endpoint, params = {}) {
let allResults = [];
let nextUrl = `${this.baseURL}${endpoint}`;
while (nextUrl) {
const response = await fetch(nextUrl, {
headers: this.getHeaders(),
...params
});
const data = await response.json();
allResults = allResults.concat(data.results || []);
nextUrl = data.next;
}
return allResults;
}
async getPage(endpoint, page = 1, pageSize = 20) {
const response = await fetch(`${this.baseURL}${endpoint}?page=${page}&page_size=${pageSize}`, {
headers: this.getHeaders()
});
return response.json();
}
}
```
### Code Organization
1. **Service Layer Pattern**
```javascript
// services/api.js
export class APIService {
constructor(baseURL, authService) {
this.baseURL = baseURL;
this.authService = authService;
}
async request(endpoint, options = {}) {
// Common request logic
}
}
// services/parksService.js
export class ParksService extends APIService {
async getParks(filters = {}) {
return this.request('/parks/', { params: filters });
}
async getPark(id) {
return this.request(`/parks/${id}/`);
}
}
// services/index.js
export { APIService } from './api';
export { ParksService } from './parksService';
export { RidesService } from './ridesService';
export { AuthService } from './authService';
```
2. **Environment Configuration**
```javascript
// config/api.js
const config = {
development: {
API_BASE_URL: 'http://localhost:8000/api/v1',
ENABLE_LOGGING: true,
CACHE_TTL: 60000 // 1 minute
},
production: {
API_BASE_URL: 'https://api.thrillwiki.com/api/v1',
ENABLE_LOGGING: false,
CACHE_TTL: 300000 // 5 minutes
}
};
export default config[process.env.NODE_ENV || 'development'];
```
## Troubleshooting
### Common Issues
#### 1. CORS Errors
**Problem:** Browser blocks requests due to CORS policy
**Solution:**
- Ensure Django CORS settings are configured:
```python
# settings.py
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1:3000",
"http://localhost:5173", # Vite default
]
CORS_ALLOW_CREDENTIALS = True
```
#### 2. Authentication Token Issues
**Problem:** 401 Unauthorized errors
**Solutions:**
- Check token format: `Authorization: Token abc123def456`
- Verify token is not expired
- Ensure token is included in requests:
```javascript
// Check if token exists
const token = localStorage.getItem('thrillwiki_token');
if (!token) {
// Redirect to login
window.location.href = '/login';
return;
}
```
#### 3. Network Connectivity
**Problem:** Network errors or timeouts
**Solutions:**
- Implement retry logic:
```javascript
async function retryRequest(fn, retries = 3, delay = 1000) {
try {
return await fn();
} catch (error) {
if (retries > 0 && error.code === 'NETWORK_ERROR') {
await new Promise(resolve => setTimeout(resolve, delay));
return retryRequest(fn, retries - 1, delay * 2);
}
throw error;
}
}
```
#### 4. Data Serialization Issues
**Problem:** Unexpected data formats or missing fields
**Solutions:**
- Always validate API responses:
```javascript
function validateParkData(park) {
const required = ['id', 'name', 'location'];
const missing = required.filter(field => !park[field]);
if (missing.length > 0) {
throw new Error(`Missing required fields: ${missing.join(', ')}`);
}
return park;
}
```
#### 5. Proxy Configuration Issues (Vite/Webpack)
**Problem:** API calls fail in development due to proxy misconfiguration
**Vite Solution:**
```javascript
// vite.config.js
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
secure: false,
}
}
}
});
```
**Webpack Solution:**
```javascript
// webpack.config.js or next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'http://localhost:8000/api/:path*',
},
];
},
};
```
### Debugging Tools
#### 1. API Request Logging
```javascript
class APILogger {
static log(method, url, data, response) {
if (process.env.NODE_ENV === 'development') {
console.group(`🌐 API ${method.toUpperCase()} ${url}`);
if (data) console.log('📤 Request:', data);
console.log('📥 Response:', response);
console.groupEnd();
}
}
static error(method, url, error) {
console.group(`❌ API ${method.toUpperCase()} ${url} FAILED`);
console.error('Error:', error);
console.groupEnd();
}
}
// Usage in API service
async request(endpoint, options = {}) {
try {
const response = await fetch(url, options);
const data = await response.json();
APILogger.log(options.method || 'GET', endpoint, options.body, data);
return data;
} catch (error) {
APILogger.error(options.method || 'GET', endpoint, error);
throw error;
}
}
```
#### 2. Network Monitoring
```javascript
// Monitor network status
class NetworkMonitor {
constructor() {
this.isOnline = navigator.onLine;
this.listeners = [];
window.addEventListener('online', () => this.setOnline(true));
window.addEventListener('offline', () => this.setOnline(false));
}
setOnline(status) {
this.isOnline = status;
this.listeners.forEach(listener => listener(status));
}
onStatusChange(callback) {
this.listeners.push(callback);
}
}
const networkMonitor = new NetworkMonitor();
networkMonitor.onStatusChange((isOnline) => {
if (isOnline) {
console.log('🟢 Back online - retrying failed requests');
// Retry failed requests
} else {
console.log('🔴 Gone offline - queuing requests');
// Queue requests for later
}
});
```
### Testing API Integration
#### Unit Testing Example (Jest)
```javascript
// __tests__/api.test.js
import { APIService } from '../services/api';
// Mock fetch
global.fetch = jest.fn();
describe('APIService', () => {
let apiService;
beforeEach(() => {
apiService = new APIService('http://localhost:8000/api/v1');
fetch.mockClear();
});
test('should fetch parks successfully', async () => {
const mockParks = [
{ id: 1, name: 'Test Park', location: 'Test Location' }
];
fetch.mockResolvedValueOnce({
ok: true,
json: async () => ({ results: mockParks })
});
const parks = await apiService.getParks();
expect(fetch).toHaveBeenCalledWith(
'http://localhost:8000/api/v1/parks/',
expect.objectContaining({
headers: expect.objectContaining({
'Content-Type': 'application/json'
})
})
);
expect(parks.results).toEqual(mockParks);
});
test('should handle authentication errors', async () => {
fetch.mockResolvedValueOnce({
ok: false,
status: 401,
json: async () => ({ error: 'Unauthorized' })
});
await expect(apiService.getParks()).rejects.toThrow('Unauthorized');
});
});
```
### Performance Monitoring
```javascript
// Performance monitoring utility
class PerformanceMonitor {
static startTimer(label) {
performance.mark(`${label}-start`);
}
static endTimer(label) {
performance.mark(`${label}-end`);
performance.measure(label, `${label}-start`, `${label}-end`);
const measure = performance.getEntriesByName(label)[0];
console.log(`⏱️ ${label}: ${measure.duration.toFixed(2)}ms`);
// Clean up
performance.clearMarks(`${label}-start`);
performance.clearMarks(`${label}-end`);
performance.clearMeasures(label);
}
}
// Usage
PerformanceMonitor.startTimer('api-parks-fetch');
const parks = await api.getParks();
PerformanceMonitor.endTimer('api-parks-fetch');
```
## Additional Resources
### API Documentation
- **Swagger/OpenAPI Docs**: `http://localhost:8000/api/docs/`
- **ReDoc Documentation**: `http://localhost:8000/api/redoc/`
- **API Schema**: `http://localhost:8000/api/schema/`
### Development Tools
- **Django Admin**: `http://localhost:8000/admin/`
- **Health Check**: `http://localhost:8000/api/v1/health/`
- **Environment Settings**: `http://localhost:8000/env-settings/`
### Example Projects
Check the `frontend/` directory for a complete Vue.js implementation example that demonstrates all the patterns described in this guide.
### Community Resources
- **Django REST Framework Documentation**: https://www.django-rest-framework.org/
- **Vue.js Documentation**: https://vuejs.org/
- **React Documentation**: https://react.dev/
- **Angular Documentation**: https://angular.io/
---
This guide provides a comprehensive foundation for connecting any frontend framework to the ThrillWiki Django backend. For specific implementation questions or issues not covered here, please refer to the project's issue tracker or documentation.