lehuygiang28 / vphim

Full-stack movie web/mobile app built with NestJS + Next.js + Expo
https://vephim.online
1 stars 0 forks source link

feat(mobile): ✨ create mobile app with expo #1

Closed lehuygiang28 closed 3 weeks ago

lehuygiang28 commented 3 weeks ago

Summary by Sourcery

Create a new mobile application using Expo, featuring movie browsing, filtering, and account management. Enhance the GraphQL data provider and image URL optimization for better flexibility. Update build and deployment configurations to support the new mobile app, and set up testing infrastructure with Jest.

New Features:

Enhancements:

Build:

Deployment:

Tests:

Summary by CodeRabbit

Release Notes

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
vphim-fe ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 25, 2024 10:55pm
vphim-mnt ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 25, 2024 10:55pm
sourcery-ai[bot] commented 3 weeks ago

Reviewer's Guide by Sourcery

This pull request introduces a new mobile app for the VePhim project using Expo. The changes include setting up the mobile app structure, implementing various screens (Home, Explore, Movie Details, Account), adding navigation, and integrating with the existing backend API. The mobile app uses React Native Paper for UI components and follows a similar structure to the existing web application.

Sequence Diagrams

Mobile App Authentication Flow

sequenceDiagram
    participant User
    participant MobileApp
    participant AuthAPI
    participant DataAPI
    User->>MobileApp: Open app
    MobileApp->>AuthAPI: Check session
    alt Session valid
        AuthAPI-->>MobileApp: Return user data
    else Session invalid or expired
        AuthAPI-->>MobileApp: Return error
        MobileApp->>AuthAPI: Refresh token
        AuthAPI-->>MobileApp: New access token
    end
    MobileApp->>DataAPI: Request data
    DataAPI-->>MobileApp: Return data
    MobileApp->>User: Display content

Movie Search and Filter Flow

sequenceDiagram
    participant User
    participant ExploreScreen
    participant FilterModal
    participant API
    User->>ExploreScreen: Enter search query
    ExploreScreen->>API: Send search request
    API-->>ExploreScreen: Return search results
    ExploreScreen->>User: Display results
    User->>ExploreScreen: Open filter modal
    ExploreScreen->>FilterModal: Show filter options
    User->>FilterModal: Apply filters
    FilterModal->>ExploreScreen: Return selected filters
    ExploreScreen->>API: Request filtered results
    API-->>ExploreScreen: Return filtered data
    ExploreScreen->>User: Display filtered results

File-Level Changes

Change Details Files
Set up the basic structure for the Expo mobile app
  • Add app.json for Expo configuration
  • Create metro.config.js for Metro bundler configuration
  • Add eas.json for EAS Build configuration
  • Set up tsconfig files for TypeScript configuration
  • Add .eslintrc.json for ESLint configuration
  • Create .babelrc.js for Babel configuration
apps/mobile/app.json
apps/mobile/metro.config.js
apps/mobile/eas.json
apps/mobile/tsconfig.json
apps/mobile/tsconfig.app.json
apps/mobile/tsconfig.spec.json
apps/mobile/.eslintrc.json
apps/mobile/.babelrc.js
babel.config.json
Implement main screens and navigation for the mobile app
  • Create HomeScreen component
  • Implement ExploreScreen with search and filtering functionality
  • Add MovieDetailsScreen for displaying movie information and episodes
  • Create AccountScreen for user authentication
  • Set up bottom tab navigation and stack navigation
apps/mobile/src/app/index.tsx
apps/mobile/src/app/home/index.tsx
apps/mobile/src/app/explore/index.tsx
apps/mobile/src/app/movie/index.tsx
apps/mobile/src/app/account/index.tsx
Implement reusable components and utilities
  • Create MovieCard component for displaying movie information
  • Implement FilterModal component for explore screen
  • Add custom hooks for authentication and API calls
  • Create theme configuration for consistent styling
apps/mobile/src/components/card/movie-card.tsx
apps/mobile/src/app/explore/filter-modal.tsx
apps/mobile/src/hooks/useAxiosAuth.ts
apps/mobile/src/hooks/useSession.ts
apps/mobile/src/hooks/useRefreshToken.ts
apps/mobile/src/hooks/useGraphQL.ts
apps/mobile/src/config/theme.ts
Integrate with existing backend API
  • Use graphqlDataProvider for API calls
  • Implement authentication flow with refresh tokens
  • Use existing GraphQL queries for fetching movie data
apps/fe/src/providers/data-provider/graphql.ts
apps/fe/src/libs/utils/movie.util.ts
apps/api/src/app/movies/movies.controller.ts
Update project configuration for mobile app integration
  • Add mobile app to nx.json configuration
  • Update tsconfig.base.json with mobile app paths
  • Add EAS Build scripts for pre-install and post-install steps
nx.json
tsconfig.base.json
tools/scripts/eas-build-pre-install.mjs
tools/scripts/eas-build-post-install.mjs

Tips and commands - Trigger a new Sourcery review by commenting `@sourcery-ai review` on the pull request. - Continue your discussion with Sourcery by replying directly to review comments. - You can change your review settings at any time by accessing your [dashboard](https://app.sourcery.ai): - Enable or disable the Sourcery-generated pull request summary or reviewer's guide; - Change the review language; - You can always [contact us](mailto:support@sourcery.ai) if you have any questions or feedback.
nx-cloud[bot] commented 3 weeks ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2425c13bdef30d9e7e8bedd3dbdd3fb4981e7ee5. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 2 targets - [`nx build mnt`](https://cloud.nx.app/runs/VJOeKop0ZN?utm_source=pull-request&utm_medium=comment) - [`nx build fe`](https://cloud.nx.app/runs/4ifWgkLIBy?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.

coderabbitai[bot] commented 3 weeks ago

Walkthrough

The changes introduce a comprehensive set of configurations, components, and utilities for a mobile application developed with Expo and React Native. Key updates include new configuration files for Babel, ESLint, and TypeScript, along with the introduction of various components for user authentication, movie exploration, and detail display. Enhancements to the Axios and GraphQL hooks support improved API interactions, while the addition of utility functions and theme configurations further enriches the application’s functionality and user experience.

Changes

File(s) Change Summary
.coderabbit.yaml New configuration file for code reviews and automated processes, including settings for pull requests.
.gitignore Updated to ignore additional Expo-related files and directories.
.vscode/settings.json Added new entries to "extensions" and "conventionalCommits.scopes" arrays.
apps/api/src/app/movies/movies.controller.ts Updated getMovies method to call getMoviesEs instead of getMovies.
apps/fe/src/libs/utils/movie.util.ts Modified getOptimizedImageUrl to accept a new optional baseUrl parameter.
apps/fe/src/providers/data-provider/graphql.ts Updated graphqlDataProvider to accept an optional publicApiUrl parameter.
apps/mobile/.babelrc.js New Babel configuration file for performance optimization in Expo applications.
apps/mobile/.eslintrc.json New ESLint configuration file extending rules and specifying ignored patterns.
apps/mobile/app.json New configuration file for the mobile application with various properties under the "expo" key.
apps/mobile/eas.json New configuration file for building and submitting the mobile application.
apps/mobile/index.js New entry point for the mobile application, registering the root component.
apps/mobile/jest.config.ts New Jest configuration file for testing the mobile application.
apps/mobile/metro.config.js New Metro configuration file for integrating Nx with Expo's Metro bundler.
apps/mobile/package.json New dependencies and scripts added for mobile development.
apps/mobile/project.json New project configuration file specifying the source root and project type.
apps/mobile/src/app/account/index.tsx New AccountScreen component for managing user authentication.
apps/mobile/src/app/explore/filter-modal.tsx New FilterModal and FilterSection components for filtering and sorting items.
apps/mobile/src/app/explore/index.tsx New ExploreScreen component for searching and exploring movies.
apps/mobile/src/app/home/index.tsx New HomeScreen, MovieSection, and MovieSwiper components for the home screen layout.
apps/mobile/src/app/index.tsx New main application structure with navigation and theming setup.
apps/mobile/src/app/movie/index.tsx New MovieDetailsScreen component for displaying movie details and playback.
apps/mobile/src/app/movie/movie-episode.tsx New MovieEpisode component for displaying movie episodes and server selection.
apps/mobile/src/components/card/movie-card.tsx New MovieCard component for displaying movie information in a card format.
apps/mobile/src/config/theme.ts New custom dark theme configuration using react-native-paper.
apps/mobile/src/hooks/useAxiosAuth.ts New useAxiosAuth hook for managing authenticated HTTP requests.
apps/mobile/src/hooks/useGraphQL.ts New useGraphQL hook for executing GraphQL queries and mutations.
apps/mobile/src/hooks/useRefreshToken.ts New useRefreshToken hook for managing token refresh logic.
apps/mobile/src/hooks/useSession.ts New useSession hook for managing user session data.
apps/mobile/src/test-setup.ts Extended Jest's expect functionality for testing React Native components.
apps/mobile/tsconfig.app.json New TypeScript configuration file for the mobile application.
apps/mobile/tsconfig.json New TypeScript configuration file extending base configuration.
apps/mobile/tsconfig.spec.json New TypeScript configuration file for testing purposes.
babel.config.json New Babel configuration file specifying babelrcRoots for flexible management.
nx.json Updated to include new plugin configuration for Expo framework.
package.json Updated with new scripts, dependencies, and devDependencies for mobile development.
tools/scripts/eas-build-post-install.mjs New script for patching @nx/expo package for EAS Build compatibility.
tools/scripts/eas-build-pre-install.mjs New script for copying dependencies from workspace to project directory for EAS Build compatibility.
tsconfig.base.json Updated path aliases for better module resolution.

Suggested labels

mobile


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

:heart: Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
:placard: Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.