isaquem18/allintrapp

Tablet Design Proposal

Considering the way a tablet is held due to its size, a side menu is usually more comfortable to navigate between pages, given its proximity to the thumb.

Comparison with TradingView Realtime Data

Overview

This project is a demonstration of a React Native application developed using Expo. The app includes several features and animations, meeting the requirements specified for the programming test.

Features

• **Tab Navigation with Animations: Smooth and visually appealing transitions between different tabs.
• **Splash Screen with Animations: Engaging splash screen with animations to enhance user experience.
• **Real-Time Chart with WebSocket: Live updates in a chart using WebSocket for real-time data communication.
• **Loading Skeletons: Visual feedback for loading states using skeleton loaders.
• **State Management: Efficient state management to ensure optimal performance and maintainability.
• **Responsive Design: Ensures responsiveness on different screen sizes and orientations.
• **User Interface: Visually appealing and user-friendly design.
• **Creativity and Appearance: Emphasis on creativity and aesthetics throughout the app.
• **Testing: Complete setup of unit, integration, and end-to-end (E2E) testing.

Running E2E Test Example

Requirements

Node.js (version >= 12) Expo CLI (npm install -g expo-cli) Yarn or npm (package managers)

Installation

1. Clone the repository:

   gh repo clone isaquem18/allintrapp
   cd allintrapp

2. Install dependencies:

   yarn 

3. Update pods:

   npx pod-install ios

4. Start the development server:

   npx expo run:ios

Project Structure

State Management

The project uses a combination of React Context and React Query for state management, ensuring efficiency and scalability. This allows less time-sensitive data to be cached on devices while the rest stays constantly updated.

Key Implementations

1. Tab Navigation with Animations

Implemented using react-navigation and custom animations to enhance the user experience.

2. Splash Screen with Animations

Used Lottie videos that converted video generated in Adobe After Effects to JSON and custom animations to create an engaging entry point for the app.

3. Real-Time Chart with WebSocket

Integrated a live updating chart using WebSocket for real-time data communication.

4. Loading Skeletons

Used react-content-loader to display skeleton screens while data is loading, improving perceived performance.

Testing

Unit, integration, and end-to-end tests were set up using Jest, React Testing Library, and detox-JS to ensure correctness of components and logic.

Running Tests

To run the tests, use the following command:

    // para rodar os testes unitários
    yarn test:unit
    // para rodar os testes de integração
    yarn test:int
    // para rodar os testes e2e
    yarn test:e2e

Final Notes

• The appearance and adherence to the style guide according to images were prioritized throughout the development process.
• The app was designed to be responsive and provide a seamless experience across different devices and orientations.
• Animations and transitions were incorporated to enhance the overall user experience.
• All necessary configuration for unit, integration, and end-to-end testing has been done.

For any questions or additional clarification, please feel free to contact me.