Overview
This project was a personal challenge to implement a Plant Shop App(opens in a new tab) mobile design by Rakib Kowshar(opens in a new tab) on Dribbble using React Native Expo(opens in a new tab).
This project is a mobile application that allows users to browse and purchase plants. However, it is not a fully functional application and does not include any backend or database integration. The app is currently a static application that displays a list of plants and their details.
I learned a lot from this project, especially in terms of mobile development and design implementation. It was a great opportunity to practice my skills in React Native Expo and also use redux for state management.
The features of the app include:
- A welcome screen with a button to start browsing plants.
- A home screen that displays a list of plants with images.
- A details screen that shows more information about a selected plant.
- A search bar to filter plants by name.
- A category filter to view plants by type (e.g., indoor, outdoor).
- A feature to mark and view favorite plants (stored only in client-side state).
Demo vs Mockup
App Demo GIF
Role
My role in this project was as a React Native Developer, focusing on implementing UI components, navigation, and state management.
Core Stack
Let's take a look at the core stack used in this project:
The programming language of the web.
The core stack used in this project includes:
- JavaScript - A programming language that conforms to the ECMAScript specification.
- React Native - A framework for building native apps using React.
- Redux - A predictable state container for JavaScript apps.
- Expo - A framework and platform for universal React applications.
Development Period
Development started on August 6, 2022, as recorded in the first Git commit.
Key Learnings
This project helped me deepen my understanding of:
- Mobile UI composition and layouting in React Native.
- State management patterns using Redux.
- Integration of design-to-code practices with Expo tooling.
