A feature-rich reminder and todo application built with React Native, Expo Router, and TypeScript. Manage your tasks, deadlines, and stay organized with a beautiful, intuitive interface.
- Custom-built calendar component with month/year navigation
- Today's date highlighted in blue
- Dates with deadlines marked with red indicators
- Click to select any date and view associated todos
- Click deadline dates to see full details in a modal popup
- Add/edit/delete todos for any date
- Mark todos as complete with visual feedback (strikethrough)
- Organize todos by date
- Quick add from calendar view
- Persistent storage across sessions
- Create deadlines with title, description, and date
- View all deadlines grouped by date
- Calendar automatically highlights deadline dates
- Beautiful popup modal showing full deadline details
- Easy deletion of completed deadlines
- Home: Calendar view with instant deadline preview
- Todo: Dedicated todo list with date picker
- Deadline: Complete deadline management interface
- Node.js (v14 or higher)
- npm or yarn
- Expo CLI (optional, but recommended)
# Navigate to project directory
cd remainder-app
# Install dependencies
npm install# Start the development server
npm startChoose how to run:
- Press 'w' → Open in web browser
- Press 'a' → Open in Android emulator
- Press 'i' → Open in iOS simulator
- Scan QR code → Use Expo Go app on your phone
remainder-app/
├── app/ # Expo Router navigation
│ ├── _layout.tsx # Root layout with tab navigation
│ ├── home/index.tsx # Home tab
│ ├── todo/index.tsx # Todo tab
│ └── deadline/index.tsx # Deadline tab
│
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Calendar.tsx # Custom calendar grid
│ │ ├── TodoList.tsx # Todo list display
│ │ ├── DeadlinePreview.tsx # Deadline details card
│ │ └── DeadlineList.tsx # Deadline list display
│ │
│ ├── context/ # Global state management
│ │ └── AppContext.tsx # App state provider
│ │
│ ├── screens/ # Screen components
│ │ ├── HomeScreen.tsx # Calendar + Todos
│ │ ├── TodoScreen.tsx # Todo management
│ │ └── DeadlineScreen.tsx # Deadline management
│ │
│ └── utils/ # Utility functions
│ └── storage.ts # AsyncStorage operations
│
├── assets/ # App assets
├── package.json # Dependencies
└── tsconfig.json # TypeScript config
- From Home Tab: Tap the "+" button next to "Todos"
- From Todo Tab: Tap "Add Todo" button, select date, enter title
- Enter your todo text and save
- Todo automatically persists to device storage
- Go to Deadline Tab
- Tap "Add Deadline" button
- Fill in:
- Title (required) - Deadline name
- Description (optional) - More details
- Date (YYYY-MM-DD format)
- Tap "Add" to save
- Calendar will automatically highlight this date
- Go to Home Tab
- Click on a date with red dot (deadline indicator)
- Beautiful modal popup appears showing:
- Deadline title with alert icon
- Full description
- Deadline date
- Click X button (top-right) to close and return to calendar
- Home Tab: Click any date on the calendar
- Todo Tab: Use arrow buttons or tap date field to change
{
id: string; // Unique identifier
title: string; // Todo text
date: string; // YYYY-MM-DD format
completed: boolean; // Completion status
}{
id: string; // Unique identifier
title: string; // Deadline title
description: string; // Detailed description
date: string; // YYYY-MM-DD format
}Context API (AppContext.tsx):
- Global state for selected date
- All todos and deadlines
- Automatic data refresh
- Clean API for all screens
AsyncStorage:
@reminder_app/todos- Persisted todos@reminder_app/deadlines- Persisted deadlines- Automatic loading on app startup
- Primary Blue: #2196F3 (Today, interactive elements)
- Danger Red: #F44336 (Deadlines, alerts)
- Background: #F5F5F5 (App background)
- Surface: #fff (Cards, modals)
- SafeAreaView for screen boundaries
- ScrollView for scrollable content
- FlatList for efficient list rendering
- Modal for deadline popups
- TouchableOpacity for interactions
- Ionicons for intuitive icons
- expo: ^54.0.33 - Framework
- expo-router: ~6.0.23 - File-based routing
- react: 19.1.0
- react-native: 0.81.5
- @react-navigation/bottom-tabs: ^7.4.0 - Tab navigation
- @react-navigation/native: ^7.1.8
- @react-native-async-storage/async-storage - Local data persistence
- @expo/vector-icons - Icon library
- TypeScript: ~5.9.2 - Type safety
- ESLint: ^9.25.0 - Code quality
# Start development server
npm start
# Run tests
npm run lint
# Build for production
npm run build
# Reset to default project
npm run reset-project- ✅ Dynamic month/year display
- ✅ 7-column grid layout with Flexbox
- ✅ Today indicator (blue highlight)
- ✅ Deadline indicator (red dot)
- ✅ Touch feedback on dates
- ✅ Automatic date navigation
- ✅ Add todos per date
- ✅ Delete todos
- ✅ Mark complete/incomplete
- ✅ Visual feedback for completed items
- ✅ Empty state messaging
- ✅ Date-based organization
- ✅ Create deadlines with details
- ✅ Modal popup display
- ✅ Calendar integration
- ✅ Delete deadlines
- ✅ Date grouping and sorting
- ✅ Beautiful UI/UX
- ✅ AsyncStorage integration
- ✅ Automatic save on changes
- ✅ Automatic load on startup
- ✅ No internet required
- ✅ Complete CRUD operations
# Clear Metro cache and rebuild
npm start -- --reset-cache# Verify installation
npm list @react-native-async-storage/async-storage# Check for compilation errors
npx tsc --noEmit# Run linter
npm run lint- All data is stored locally on the device
- No data is sent to any server
- No internet connection required
- Complete user control over data
Potential features for future versions:
- Recurring reminders
- Push notifications
- Cloud sync
- Categories/tags
- Search functionality
- Dark mode
- Backup/restore
- Multi-device sync
This project is open for enhancements. Feel free to:
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
MIT License - feel free to use this project for personal or commercial purposes.
Additional documentation available:
- PROJECT_STRUCTURE.md - Detailed architecture
- QUICK_START.md - Quick start guide
- IMPLEMENTATION_SUMMARY.md - Implementation details
For issues or questions:
- Check the QUICK_START.md guide
- Review PROJECT_STRUCTURE.md for architecture details
- Check Expo documentation
- Review React Native docs
cd remainder-app
npm install
npm startPress 'w' for web, 'a' for Android, 'i' for iOS, or scan QR code with Expo Go!
Built with ❤️ using React Native, Expo, TypeScript, and Context API