Ploter App

A modern React Native mobile application built with Expo CLI, featuring TypeScript, Tailwind CSS (NativeWind), Redux Toolkit, React Navigation, and social authentication.

🚀 Features

• React Native with Expo CLI - Cross-platform mobile development
• TypeScript - Type safety and better developer experience
• Tailwind CSS (NativeWind) - Utility-first CSS framework for React Native
• Redux Toolkit - Modern Redux for state management
• RTK Query - Data fetching and caching
• React Navigation - Navigation library with tab and stack navigators
• Social Authentication - Clerk
• Modern UI - Beautiful, responsive design with Tailwind CSS

📱 Screenshots

The app includes:

• Login Screen - Social authentication with Google and Instagram
• Home Screen - Welcome dashboard with feature overview
• Profile Screen - User profile with account details and logout

🛠️ Installation

1. Clone the repository

   git clone <your-repo-url>
   cd ploter

2. Install dependencies

   npm install

3. Configure OAuth (Important!)

   Environment Configuration: Create a .env file in your project root with:

   EXPO_PUBLIC_API_BASE_URL=http://169.254.79.255:4001
   EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_instagram_client_id_here

   Alternatively, you can directly modify the defaultAuthConfig in src/services/authService.ts

4. Start the development server

   npm start

5. Run on device/simulator

   # iOS
   npm run ios
   
   # Android
   npm run android
   
   # Web
   npm run web

📁 Project Structure

src/
├── components/          # Reusable UI components
├── features/           # Redux slices and feature logic
│   └── auth/          # Authentication slice
├── navigation/         # React Navigation setup
├── screens/           # App screens
│   ├── LoginScreen.tsx
│   ├── HomeScreen.tsx
│   └── ProfileScreen.tsx
├── services/          # API services and utilities
│   ├── authApi.ts     # RTK Query API
│   └── authService.ts # Authentication service
├── store/             # Redux store configuration
│   ├── index.ts       # Store setup
│   └── hooks.ts       # Typed Redux hooks
└── types/             # TypeScript type definitions
    └── auth.ts        # Authentication types

🔧 Key Technologies

Frontend Stack

• React Native - Mobile app framework
• Expo CLI - Development platform
• TypeScript - Static type checking
• NativeWind - Tailwind CSS for React Native

State Management

• Redux Toolkit - State management
• RTK Query - Data fetching and caching
• React Redux - React bindings for Redux

Navigation

• React Navigation - Navigation library
• Stack Navigator - Screen navigation
• Tab Navigator - Bottom tab navigation

Authentication

• Expo Auth Session - OAuth authentication
• Expo Web Browser - In-app browser for auth
• Google OAuth - Google Sign-In
• Instagram OAuth - Instagram authentication
• Functional Auth Service - Clean, testable authentication functions

🔐 Authentication Flow

1. User opens the app and sees the login screen
2. User taps "Continue with Google" or "Continue with Instagram"
3. App calls the appropriate auth service function (loginWithGoogle or loginWithInstagram)
4. Auth service opens OAuth flow in browser using Expo WebBrowser
5. User authenticates with the provider
6. App receives authorization code
7. Code is exchanged for access token (backend - currently mocked)
8. User data is fetched and stored in Redux
9. User is navigated to the main app

Auth Service Architecture

The authentication is now handled by clean, functional services:

• loginWithGoogle(config?) - Handles Google OAuth flow
• loginWithInstagram(config?) - Handles Instagram OAuth flow
• extractAuthCode(url) - Utility to extract auth codes from callback URLs
• handleOAuthError(url) - Utility to handle OAuth errors
• defaultAuthConfig - Default configuration with environment variable support

🎨 Styling

The app uses NativeWind (Tailwind CSS for React Native) for styling. Key features:

• Utility Classes - Rapid UI development
• Responsive Design - Mobile-first approach
• Custom Colors - Brand-specific color palette
• Modern Components - Cards, buttons, and layouts

🔄 State Management

Redux Toolkit is used for state management with the following structure:

• Auth Slice - User authentication state
• RTK Query - API calls and caching
• Typed Hooks - TypeScript-safe Redux hooks

📋 Available Scripts

• npm start - Start Expo development server
• npm run android - Run on Android device/emulator
• npm run ios - Run on iOS device/simulator
• npm run web - Run in web browser
• npm run eject - Eject from Expo (not recommended)

🚨 Important Notes

1. OAuth Configuration - Replace placeholder client IDs with real ones
2. Backend Integration - The app currently uses mock data; integrate with your backend API
3. Environment Variables - Store sensitive data in environment variables
4. Production Build - Configure app signing and deployment settings

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues or have questions:

1. Check the Expo documentation
2. Review React Navigation docs
3. Check Redux Toolkit docs
4. Open an issue in this repository

---

Built with ❤️ using React Native, Expo, and modern web technologies.