Car Catalog Mobile App

A mobile application built with React Native and Expo that allows users to browse car brands and models using the FIPE API (Brazilian Vehicle Price Index).

Features

• User authentication (login/logout)
• Browse car brands with search functionality
• View car models for each brand
• Responsive and user-friendly interface
• Efficient search with debounce implementation

Screenshots

Project Structure

src/
├── components/        # UI components organized by atomic design
│   ├── atoms/         # Basic UI elements (buttons, inputs, text)
│   ├── molecules/     # Combinations of atoms (headers, search bars)
│   └── organisms/     # Complex UI components (forms, lists)
├── contexts/          # React Context providers
├── screens/           # App screens/pages
├── services/          # API service integration
└── utils/             # Utility functions and helpers

Tech Stack

• React Native: Framework for building native apps
• Expo: Development platform for React Native
• TypeScript: For type safety and better developer experience
• React Navigation: Navigation and routing
• Axios: HTTP client for API requests
• React Hook Form: Form handling
• Styled Components: Component styling
• Expo Vector Icons: Icon library

Getting Started

Prerequisites

• Node.js (v16 or newer)
• npm or yarn
• Expo CLI
• Android Studio or Xcode (for running on emulators)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd mobileapp

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm start
   # or
   yarn start

4. Run on a device or emulator:

   • Press a for Android
   • Press i for iOS
   • Scan the QR code with the Expo Go app on your phone

API Integration

The app uses two APIs:

1. Authentication API: Custom auth service for user login
2. FIPE API: Public API for car brands and models data in Brazil

Development Notes

Code Organization

• Atomic Design: Components are organized following the atomic design methodology
• TypeScript: Strong typing is used throughout the project
• Context API: Used for state management (authentication)

Performance Optimizations

• Debounce: Implemented on search inputs to prevent excessive API calls
• Virtualized Lists: Used for efficient rendering of long lists
• Memoization: Used to prevent unnecessary re-renders

Testing

# Run TypeScript type checking
npx tsc --noEmit

# Run tests (to be implemented)
# npm test

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• FIPE API for car data
• Expo for the development tools
• React Native community