MyDailyTasks

MyDailyTasks is a React Native Expo application designed to help users manage their daily tasks with a clean, mobile-first interface. The app supports authentication, task creation, status tracking, and profile management.

Key Features

• User Authentication: Sign in and sign up screens with form validation and remote API integration.
• Task Management: Create, edit, and delete daily tasks locally using AsyncStorage.
• Task Status: Track tasks with status categories: Pending, In Progress, and Completed.
• Profile Management: View and update profile information, including profile photo and city selection.
• Local Data Persistence: Tasks and user profile are stored locally for persistent app usage.
• Responsive UI: Clean layout using React Native components, modal dialogs, and dropdowns.

Screens

• Splash - Initial loading screen.
• SignIn - Login screen with email, password, and remember me toggle.
• SignUp - Registration screen with profile image upload and city selection.
• Home - Task dashboard, task list, and add/edit modal.
• Profile - User profile details, edit profile, and logout.

Technologies

• Expo
• React Native
• TypeScript
• React Navigation
• AsyncStorage
• Expo Image Picker
• React Native Modal
• React Native Dropdown Picker
• React Native Alert Notification

Installation

1. Clone the repository:

git clone <repo-url>
cd "MyDailyTasks"

2. Install dependencies:

npm install

3. Start the Expo development server:

npm start

ngrok Setup (Optional)

If you need to expose the Expo development server over the public internet, you can use ngrok to create a secure tunnel.

1. Install ngrok from https://ngrok.com and add it to your system PATH.
2. Run the Expo server:

npm start

3. Open a new terminal and start ngrok on the Expo port (usually 19000):

ngrok http 19000

4. Copy the generated https://...ngrok-free.app URL from the ngrok output.
5. Update the PUBLIC_URL constant in the app screens that use remote API endpoints:

• src/screens/Home.tsx
• src/screens/Profile.tsx
• src/screens/SignIn.tsx
• src/screens/SignUp.tsx

Change the PUBLIC_URL value to the ngrok URL, for example:

const PUBLIC_URL = "https://xxxxxx.ngrok-free.app";

6. Restart the app and verify the API requests use the new ngrok URL.

Note: ngrok URLs typically change each time you restart the tunnel, so update PUBLIC_URL whenever you restart ngrok.

Available Scripts

• npm start - Start Expo in development mode.
• npm run android - Launch the app on an Android device or emulator.
• npm run ios - Launch the app on an iOS device or simulator.
• npm run web - Run the app in a web browser.

Project Structure

• App.tsx - Main app navigator and screen registration.
• app.json - Expo configuration.
• src/Splash.tsx - Splash screen implementation.
• src/screens/Home.tsx - Main task management screen with AsyncStorage.
• src/screens/Profile.tsx - Profile editing and remote data integration.
• src/screens/SignIn.tsx - Sign in screen and authentication flow.
• src/screens/SignUp.tsx - Sign up screen and account creation.

Notes

• Profile and city data loading relies on a remote API endpoint configured in the app as PUBLIC_URL.
• Task data is stored locally per user and filtered by user email.
• The app currently uses local storage for tasks and remote endpoints for authentication and profile updates.

Contributing

Feel free to submit issues or pull requests to improve task management, authentication flow, or user experience.

License

This project is private and intended for personal use.