Retour aux projets
En cours
Extreme Alarm App
Une application mobile innovante qui vous oblige a resoudre des defis mathematiques pour eteindre votre alarme. Concue en React Native avec Expo, elle combine un design premium avec une experience utilisateur pensee pour vraiment vous reveiller. Backend Supabase pour la synchronisation des donnees.
Stack technique
Technologies utilisees
React Native
Framework mobile
Expo
Toolchain mobile
TypeScript
Type safety
Supabase
Backend as a Service
Expo Notifications
Alarmes push
React Navigation
Navigation mobile
Fonctionnalites
Points cles
Defis mathematiques
Exercices adaptatifs pour se reveiller
Sons personnalises
Bibliotheque de sons d'alarme
Statistiques de sommeil
Suivi des patterns de reveil
Mode progressif
Difficulte croissante
Design premium
Animations fluides et mode sombre
Synchronisation cloud
Backup des parametres
Approche
Processus de developpement
01
UX Research
Etude des habitudes de reveil, design des defis
02
Mobile Architecture
Setup React Native/Expo, navigation, state management
03
Notification System
Integration Expo Notifications, alarmes locales
04
Backend Integration
Supabase auth, stockage des preferences
Code
Apercu technique
1import React, { useState, useMemo } from 'react';
2import { View, Text, TextInput, StyleSheet } from 'react-native';
3
4interface MathChallengeProps {
5 difficulty: 'easy' | 'medium' | 'hard';
6 onSolved: () => void;
7}
8
9const generateChallenge = (difficulty: string) => {
10 const ranges = {
11 easy: { max: 20, ops: ['+', '-'] },
12 medium: { max: 50, ops: ['+', '-', '*'] },
13 hard: { max: 100, ops: ['+', '-', '*', '/'] },
14 };
15
16 const { max, ops } = ranges[difficulty];
17 const a = Math.floor(Math.random() * max) + 1;
18 const b = Math.floor(Math.random() * max) + 1;
19 const op = ops[Math.floor(Math.random() * ops.length)];
20
21 const answer = eval(`${a} ${op} ${b}`);
22 return { question: `${a} ${op} ${b} = ?`, answer };
23};
24
25export const MathChallenge: React.FC<MathChallengeProps> = ({
26 difficulty, onSolved
27}) => {
28 const challenge = useMemo(
29 () => generateChallenge(difficulty), [difficulty]
30 );
31 const [input, setInput] = useState('');
32
33 const handleSubmit = () => {
34 if (parseFloat(input) === challenge.answer) {
35 onSolved();
36 }
37 };
38
39 return (
40 <View style={styles.container}>
41 <Text style={styles.question}>
42 {challenge.question}
43 </Text>
44 <TextInput
45 style={styles.input}
46 keyboardType="numeric"
47 value={input}
48 onChangeText={setInput}
49 onSubmitEditing={handleSubmit}
50 />
51 </View>
52 );
53};