The Coffee App is a simple coffee listing application created using the concepts of Clean Code, SOLID Principles, Factory Design Pattern, and Triple A (Arrange, Act, Assert) for the implementation of unit and integration tests.
The application should fetch coffee data from an API and display a skeleton while the data is loading. On success, it should show a screen with the list of coffees. In case of an error, it should display an error screen. Additionally, the application should allow real-time filtering of the coffees based on the user's search input and include a button to refetch the data, allowing the user to fetch the coffee data again if desired.
- Changed the color and redesigned the components to provide an attractive and intuitive design;
- Maintained the standards of 16px padding on the page and the refresh button uses 32px horizontal padding;
The application is developed using SOLID principles, where components are separated to have single responsibilities (Single Responsibility Principle), which is represented in all components. Additionally, large components are divided into smaller, more specific ones, as can be clearly seen in the component HomeContent.tsx (following the Interface Segregation Principle). I also separated some rules into helpers and hooks to keep the code clean and independent (Dependency Inversion Principle). Furthermore, I did not force components to depend on interfaces they do not use, following the Interface Segregation Principle.
For the API structure, I separated the code into services to facilitate maintenance and ensure single responsibilities. I also divided the code into "scopes" and used the Factory Design Pattern to ease changes in case the consumed API is modified. For security and ease of change, I also added the BASE_URL in the .env file.
I chose to use the Axios library for easy API connection and the React Query library (now called Tanstack) for easy API consumption and cache control, one of the most interesting features of this tool. In the useListCoffees hook, I added a select parameter, which keeps the cached data on the app screen when a refetch is performed and only updates it if there are changes after making the GET request. This way, the user experiences a smooth application flow and avoids unnecessary loading.
As requested in the challenge, I added the NativeBase library. Since its implementation with Expo SDK 51 is deprecated, it was a bit difficult due to incompatibilities, but after some research, it was simple to implement. I used the components as per the documentation and added a custom theme with the colors I decided to use.
For organization, it's important to note that I separated the Providers into a single component, as I used two libraries that require providers, keeping the configuration in one place.
For all components and helpers, I applied unit tests, and for the screen, I created an integration test. For organization, I separated all of them into the "tests" folder and used the Jest.js library to develop them, following the Triple A pattern (Arrange, Act, Assert).
The test coverage for components, screens, and helpers is 100%, maintaining the quality of the tests.
components
helpers
screens
For the development of this website, I used the following technologies:
- Visual Studio Code;
- JavaScript
- Typescript
- Native Base
- React-Query
- Jest.js
- Expo
- Axios
# Clone repository
git clone https://github.com/JoyceQuerubino/coffee-app
# Install the dependencies
npm install
# Run the script
npx expo start
# The project will start through Expo in a new tab, and a QR Code will be available.
------------------------------------------------------------------
download aplication
- Donwload app 'Expo Go' in your phone
- click 'Scan QR Code' To scan the code below
- Or copy and paste the link below:: https://expo.dev/preview/update?message=public%20app&updateRuntimeVersion=1.0.0&createdAt=2024-07-28T01%3A22%3A54.739Z&slug=exp&projectId=259e0e52-63f9-4f27-a018-e865e5786d3f&group=13a83314-5364-4e49-afbe-ecb48f3c2c82
Developed by Joyce Querubino ----- add me on Linkedin