) : (
);
}
```
### Organisation des vues
Le template utilise une organisation claire des vues dans le dossier `src/views/` :
```tsx
// src/views/Home/Home.tsx - Page d'accueil avec documentation
export default function Home() {
return (
{/* Documentation intégrée du template */}
🚀 Template React + TypeScript + Vite
{/* Explications et exemples d'usage */}
);
}
// Créez vos nouvelles vues de la même manière :
// src/views/Dashboard/Dashboard.tsx
// src/views/Profile/Profile.tsx
// etc.
```
> 💡 **Conseil** : La page `Home` actuelle contient toute la documentation du template. Remplacez-la par votre vraie page d'accueil une fois familiarisé avec le template.
### Requêtes API
```tsx
import { getFetch, postFetch, withAuth } from "./core/api/fetch";
import { useAuth } from "./core/auth/AuthContext";
function UserProfile() {
const { token } = useAuth();
const [user, setUser] = useState(null);
// GET avec authentification
const fetchProfile = async () => {
const response = await getFetch("/profile", withAuth(token));
if (response.success) {
setUser(response.data);
} else {
console.error(response.error);
}
};
// POST avec données
const updateProfile = async (data) => {
const response = await postFetch("/profile", data, withAuth(token));
if (response.success) {
setUser(response.data);
}
};
// Upload de fichier
const uploadAvatar = async (file) => {
const formData = new FormData();
formData.append("avatar", file);
const response = await postFetch(
"/profile/avatar",
formData,
withAuth(token)
);
// La détection FormData est automatique
};
}
```
### Routes protégées
```tsx
import { Routes, Route } from "react-router-dom";
import ProtectedRoute from "./core/config/protectedRoute";
import Home from "./views/Home/Home";
function App() {
return (
{/* Routes publiques */}
} />
} />
} />
{/* Routes protégées */}
}>
} />
} />
} />
);
}
```
> 💡 **Structure recommandée** : Placez vos nouvelles pages dans `src/views/` et vos composants réutilisables dans `src/components/`
## 📚 API Reference
### Fonctions Fetch
#### `getFetch(route, headers?)`
```tsx
const response = await getFetch("/users");
// response: ApiResponse
```
#### `postFetch(route, data, headers?)`
```tsx
const response = await postFetch("/users", { name: "John" });
// Support automatique FormData et JSON
```
#### `putFetch(route, data, headers?)`
```tsx
const response = await putFetch("/users/123", updateData);
```
#### `deleteFetch(route, headers?)`
```tsx
const response = await deleteFetch("/users/123");
```
#### `withAuth(token, headers?)`
```tsx
const headers = withAuth(userToken, { "Custom-Header": "value" });
// Retourne: { Authorization: 'Bearer token', 'Custom-Header': 'value' }
```
### Hook useAuth
```tsx
const {
isAuthenticated, // boolean - État d'authentification
token, // string | null - Token d'accès
refreshToken, // string | null - Token de refresh
user, // User | null - Données utilisateur
login, // (token, refreshToken?, user?) => void
logout, // () => void
verifyToken, // (token?) => Promise
refreshAccessToken, // () => Promise
updateUser, // (user) => void
loading, // boolean - État de chargement
config, // AuthConfig - Configuration actuelle
} = useAuth();
```
### Types principaux
```tsx
interface ApiResponse {
status: number;
data: T | null;
error?: string;
success: boolean;
}
interface User {
id: string;
email: string;
name?: string;
[key: string]: any;
}
interface AuthConfig {
endpoints: {
verify: string;
refresh?: string;
};
storage: {
tokenKey: string;
refreshTokenKey?: string;
userKey?: string;
};
autoVerify: boolean;
}
```
## 💡 Exemples pratiques
### Gestion d'erreurs robuste
```tsx
const handleApiCall = async () => {
const response = await getFetch("/data");
if (response.success) {
// Succès - response.data est typé
setData(response.data);
} else {
// Erreur - afficher le message
setError(response.error);
// Gestion spécifique par code de statut
switch (response.status) {
case 401:
// Token expiré - redirection login
logout();
break;
case 403:
// Pas d'autorisation
setError("Accès refusé");
break;
default:
setError("Erreur serveur");
}
}
};
```
### Refresh automatique des tokens
```tsx
// Le refresh est automatique, mais peut être manuel
const { refreshAccessToken } = useAuth();
const handleExpiredToken = async () => {
const success = await refreshAccessToken();
if (success) {
// Token renouvelé, refaire la requête
await retryApiCall();
} else {
// Échec du refresh, déconnexion
logout();
}
};
```
### Configuration pour différents backends
```tsx
// Pour une API REST classique
// Pour Firebase ou services tiers
// Pour des clés de stockage personnalisées
```
## 🛠️ Scripts & Build
| Script | Description | Usage |
| ------------------ | ---------------------- | ------------------- |
| `npm run dev` | 🚀 Dev server avec HMR | Développement local |
| `npm run build` | 📦 Build optimisé | Production build |
| `npm run preview` | 👀 Preview du build | Test avant deploy |
| `npm run lint` | 🔍 ESLint check | Code quality |
| `npm run lint:fix` | 🔧 Fix ESLint auto | Correction auto |
📦 Guide de déploiement
### Netlify
```bash
npm run build
# Drag & drop du dossier `dist/` sur Netlify
```
### Vercel
```bash
npm i -g vercel
vercel --prod
```
### GitHub Pages
```bash
npm run build
# Configurer GitHub Actions avec le workflow .github/workflows/deploy.yml
```
### Docker
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY dist/ ./dist/
EXPOSE 3000
CMD ["npx", "serve", "-s", "dist", "-l", "3000"]
```
## 🤝 Contribution
Les contributions sont les bienvenues ! 🎉
🛠️ Comment contribuer
1. **Fork** le projet
2. Créer une branche feature
```bash
git checkout -b feature/amazing-feature
```
3. **Développer** et tester
```bash
npm run dev # Test local
npm run build # Vérifier le build
npm run lint # Code quality
```
4. **Commit** avec un message descriptif
```bash
git commit -m "✨ Add amazing feature"
```
5. **Push** et créer une **Pull Request**
```bash
git push origin feature/amazing-feature
```
### 🐛 Signaler un problème
- **Bug** : [Créer une issue](../../issues/new?template=bug_report.md)
- **Feature Request** : [Proposer une amélioration](../../issues/new?template=feature_request.md)
- **Question** : [Démarrer une discussion](../../discussions)
## 📝 Changelog
### v1.0.0 (Latest)
- ✨ Initial release
- 🔐 JWT Authentication system
- 🌐 Complete API client with TypeScript
- 🛡️ Protected routes HOC
- 📖 Comprehensive documentation
- 🎨 Bootstrap 5 integration
## 📄 Licence
MIT License - voir le fichier [LICENSE](LICENSE) pour plus de détails.
---
## 🌟 Star ce projet si il vous aide !
**✨ Template créé avec ❤️ pour accélérer le développement React/TypeScript**
[](../../stargazers)
[](../../forks)
[📖 Documentation](https://github.com/username/vite-react-core-template/wiki) • [💬 Discord Community](#) • [🐦 Twitter Updates](#)
_Built with Vite ⚡ • Powered by React ⚛️ • Made with TypeScript 💙_