For the coding challenge, I developed a Vehicle Charging Point Manager app with the following main features:
- Users have full control over charging points, including the ability to add, update, and delete them.
- Each charging point is represented by a set of details such as name, address, type (fast, standard, slow), and status (available, occupied, offline).
- Node.js (version 18.x or later)
- [React Native CLI] (version 0.74.2)
- Android Studio (for Android) or Xcode (for iOS)
- Set up react native https://facebook.github.io/react-native/docs/getting-started
- Go to the root folder of the project
- Install dependencies
npm install- Install iOS dependencies
npx pod-install- Run the app on simulators
iOS:
npx react-native run-ios
android:
npx react-native run-androidnpm run test- This screen enables users to create or modify charging points.
- Includes fields for station name, location (with autocomplete search), charging type selection, and status update.
- The location field is mandatory, and an error is shown if submitted without a location.
- The form allows for updating status after creation and displays a delete button in edit mode.
- Users can view all existing charging points in a list format.
- Each point is displayed with its name, address, type label, and an icon indicating its status.
- Icons are color-coded: green for available, grey for offline, and a blinking yellow for occupied.
- Tapping on a point redirects the user to the edit/delete form for further actions.
- While not part of the code challenge requirements, I included this screen to visualize charging point locations and statuses on a map.
- This provides users with a spatial understanding of the distribution of charging points.
- The codebase is meticulously structured, categorizing files into separate folders with meaningful names.
- Logic, views, and styles are separated, all residing in the
srcmain folder. - This separation of concerns enhances readability, maintainability, and scalability.
- Extensive unit tests were written for most components to ensure robustness and reliability.
- There's still room for adding more tests to increase confidence in the code.
react-navigationwas employed for seamless navigation between different screens within the app.
- Context API was chosen for state management due to its simplicity and the absence of the need for additional packages.
- Given the relatively straightforward data flow and manageable component hierarchy, it proved to be an effective choice.
- For local database needs, Realm was utilized.
- Its developer-friendly API and performance capabilities made it an ideal choice for handling data storage requirements efficiently.
- The decision to use
react-native-paperfor UI components was motivated by its extensive collection of pre-built components, theme support, and strong community backing.
- Smaller, modular components were used for better reusability and maintainability, reducing complexity and enhancing code readability.
React.memo,useCallback, anduseMemohooks were employed to prevent unnecessary re-renders and computations, optimizing performance by memoizing components and values.
- Well-optimized
FlatListswere used to ensure smooth scrolling and efficient memory usage, especially with large datasets.
- Native animations were preferred over third-party libraries to leverage platform-native performance and avoid overhead associated with JavaScript-based animations.
- Profiling tools were used to identify and address potential performance bottlenecks iteratively, ensuring performance remained a priority throughout development.