A React Native smart mirror application built with Expo and TypeScript. The app is designed to run on tablets/devices in landscape mode and display information like time, weather, calendar events, and news in a mirror-like interface.
- ⏰ Real-time Clock Display - Shows current time and date
- 🌤️ Weather Information - Real-time weather data from OpenWeatherMap API
- 📅 Calendar & Todo Management - Personal todo list with date selection
- 📰 News Feed - Latest news from Malaysia (NewsAPI)
- 👋 Personalized Greeting - Time-based greetings with motivational quotes
- 🎨 Dark Theme UI - Beautiful glassmorphism design optimized for mirrors
- 📱 Landscape Orientation - Optimized for tablet/mirror display
- React Native - Mobile app framework
- Expo SDK 53 - Development platform
- TypeScript - Type safety
- React Hooks - State management
- React Native Vector Icons - Icon library
- Expo Linear Gradient - Gradient backgrounds
- Expo Calendar: Calendar integration
- Node.js (v16 or later)
- npm or yarn
- Expo CLI
- Expo Go app on your mobile device
-
Install Prerequisites:
- Node.js (download from https://nodejs.org/)
- Expo CLI:
npm install -g @expo/cli
-
Install Project Dependencies:
cd d:\Dev\SmartMirror npm install
-
Install Additional Dependencies:
npm install expo-linear-gradient expo-location expo-calendar expo-font @expo/vector-icons react-native-svg
-
Start the development server:
npm start
-
Run on device: Scan the QR code with Expo Go app on your device
For detailed setup instructions, see SETUP.md
- Start Development Server:
npm start - Run on Android:
npm run android - Run on iOS:
npm run ios - Run on Web:
npm run web
src/
├── components/
│ ├── TimeDisplay.tsx # Clock and date display
│ ├── WeatherWidget.tsx # Weather information
│ ├── CalendarWidget.tsx # Calendar events
│ ├── NewsWidget.tsx # News headlines
│ └── GreetingWidget.tsx # Greetings and quotes
├── App.tsx # Main application component
├── app.json # Expo configuration
├── package.json # Dependencies and scripts
└── tsconfig.json # TypeScript configuration
The app currently uses mock data. To integrate real APIs:
- Weather API: Replace mock data in
WeatherWidget.tsxwith calls to OpenWeatherMap or similar - News API: Update
NewsWidget.tsxto fetch from NewsAPI or similar service - Calendar: Use Expo Calendar API to access device calendar events
The app uses a dark theme with glassmorphism effects. Key styling conventions:
- Dark backgrounds:
#000000,#1a1a1a - Glassmorphism:
rgba(255, 255, 255, 0.1)backgrounds - Text shadows for readability
- Consistent border radius: 15-20px
- Orientation: Locked to landscape mode
- Theme: Dark mode optimized
- Plugins: Location and Calendar permissions
Strict TypeScript configuration for better code quality and IDE support.
- Create a new component in
src/components/ - Import and add to the main
App.tsx - Follow the existing styling patterns
- Ensure proper TypeScript typing
- Test on actual devices using Expo Go
- Verify landscape orientation works correctly
- Test with different screen sizes
- Configure app signing in
app.json - Build using Expo Application Services (EAS):
eas build --platform android eas build --platform ios
For actual smart mirror deployment:
- Use a tablet or Raspberry Pi with display
- Mount behind a two-way mirror
- Ensure landscape orientation is locked
- Consider always-on display settings
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Expo team for the excellent development platform
- React Native community for the framework
- All contributors and maintainers