https://github.com/zyferlink/coffee-lab-reactnative-app
CoffeeLab: Coffee Shop App. A React Native app powered by Zustand for managing coffee orders. Browse coffees and beans, view details, search, favorite items, and place orders easily.
https://github.com/zyferlink/coffee-lab-reactnative-app
nativewind react-native typescript
Last synced: 6 months ago
JSON representation
CoffeeLab: Coffee Shop App. A React Native app powered by Zustand for managing coffee orders. Browse coffees and beans, view details, search, favorite items, and place orders easily.
- Host: GitHub
- URL: https://github.com/zyferlink/coffee-lab-reactnative-app
- Owner: zyferlink
- Created: 2025-01-07T11:37:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-19T20:37:12.000Z (8 months ago)
- Last Synced: 2025-07-22T04:10:47.025Z (7 months ago)
- Topics: nativewind, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 21 MB
- Stars: 30
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CoffeeLab by Nova
♨ [ ʀᴇᴀᴄᴛ ɴᴀᴛɪᴠᴇ ᴘʀᴏᴊᴇᴄᴛ ] ♨
> [!Note]
> **This project is still in its early development stage.**
#
## ɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɪɴꜰᴏ
CoffeeLab: Coffee Shop App. A React Native app powered by Zustand for managing coffee orders. Browse coffees and beans, view details, search, favorite items, and place orders easily.
**Updated on** January 30, 2025
⁃ ᴄᴏɴᴛᴇɴᴛꜱ ⁃
[ᴜꜱᴇʀ ꜰᴇᴀᴛᴜʀᴇꜱ](#ɪɪ--ᴡʜᴀᴛ-ᴜꜱᴇʀꜱ-ᴄᴀɴ-ᴇxᴘᴇᴄᴛ)
| [ᴀᴘᴘ ꜱᴄʀᴇᴇɴꜱ](#ɪɪɪ--ᴠɪꜱᴜᴀʟ-ᴛᴏᴜʀ-ᴏꜰ-ᴛʜᴇ-ᴀᴘᴘ-ꜱᴄʀᴇᴇɴꜱ)
| [ᴘʀᴏᴊᴇᴄᴛ ʙʀᴀɴᴄʜᴇꜱ](#ɪᴠ--ᴘʀᴏᴊᴇᴄᴛ-ʙʀᴀɴᴄʜᴇꜱ)
| [ᴅᴇᴠ ꜰᴇᴀᴛᴜʀᴇꜱ](#ᴠ--ʙᴇʜɪɴᴅ-ᴛʜᴇ-ᴄᴏᴅᴇ-ᴅᴇᴠ-ꜰᴇᴀᴛᴜʀᴇꜱ)
| [ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ](#ᴠɪ--ᴘʀᴏᴊᴇᴄᴛ-ɴᴏᴛᴇꜱ)
[](#)
[](#)
[](#)
[](#)
[](#)
[](./LICENSE)
## ɪɪ ⁃ ᴡʜᴀᴛ ᴜꜱᴇʀꜱ ᴄᴀɴ ᴇxᴘᴇᴄᴛ
### ⭓ Features
- **Stunning UI & Animations**: Enjoy a visually appealing and smooth user interface with animations that enhance the experience.
- **Coffee & Beans List**: Browse a wide variety of local coffee and beans, with data currently stored locally and plans for future online connectivity.
- **Search Coffee & Beans**: Find your favorite coffee or beans quickly using the real-time search feature.
- **Favourite List**: Easily save your favorite coffee and beans to view later with a simple toggle.
- **Order History**: View all previous orders in a dedicated history screen, making it easy to reorder your favorite drinks and beans.
- **Add to Cart & Cart Screen**: Add items to your cart and review them before checkout, all with a clean and intuitive interface.
- **Different Coffee & Bean Sizes**: Choose from various sizes for both coffee and beans to fit your preferences.
- **Smooth Performance**: Optimized for fluid and responsive interactions, ensuring seamless experience across devices.
- **Reusable Code Architecture**: Clean, maintainable code to support future app enhancements.
##
### ⭓ Requirements
### **System Requirements**
### Android
- **Android 7.0 (Nougat)** and Above
- **Minimum SDK Version**: 24
### iOS
- **iOS 11.0** and Above
## ɪɪɪ ⁃ ᴠɪꜱᴜᴀʟ ᴛᴏᴜʀ ᴏꜰ ᴛʜᴇ ᴀᴘᴘ: ꜱᴄʀᴇᴇɴꜱ
—–— ◇ —–—
#
[ ⮝ BACK TO TOP ](#ɪ----ᴘʀᴏᴊᴇᴄᴛ-ɪɴꜰᴏ)
#
## ɪᴠ ⁃ ᴘʀᴏᴊᴇᴄᴛ ʙʀᴀɴᴄʜᴇꜱ
> **PRODUCTION BRANCH :**
> Stable code for deployment
> ➲ [main][branch-main]
> **DEVELOPMENT BRANCH :**
> Active codebase for ongoing development efforts (New features, bug fixes, and improvements..)
> ➲ [development][branch-development]
[branch-main]: https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/main
[branch-development]: https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/development-next
#
### ➲ Code from the scratch ♨
Explore the branches: Stage 1–15
♨ CoffeeLab React Native App : Branches ♨
#### Branches
1. **Init React Native Project** : [**stage-01-init-react-native-project**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-01-init-react-native-project)
Initial setup of the React Native project.
2. **Project Setup** : [**stage-02-project-setup**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-02-project-setup)
Configuring essential libraries and dependencies.
3. **Asset Allocation** : [**stage-03-asset-allocation**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-03-asset-allocation)
Allocation of images and fonts to the project.
4. **Data, Theme, and Structural Setup** : [**stage-04-data-theme-and-structural-setup**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-04-data-theme-and-structural-setup)
Setting up data models, theme configuration, and basic project structure.
5. **Custom Icon Setup** : [**stage-05-custom-icon-setup**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-05-custom-icon-setup)
Implementing custom app icons.
6. **Screens, Stack, and Tab Navigators** : [**stage-06-screens-stack-and-tab-navigators**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-06-screens-stack-and-tab-navigators)
Setting up screens with stack and tab navigators.
7. **Building Zustand Store** : [**stage-07-building-zustand-store**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-07-building-zustand-store)
Implementing the Zustand store for state management.
8. **Implement Home Screen** : [**stage-08-impl-home-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-08-impl-home-screen)
Developing the home screen with dynamic content.
9. **Implement UseStore Hook** : [**stage-09-impl-usestore-hook**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-09-impl-usestore-hook)
Creating and implementing the useStore hook for state management.
10. **Implement Detail Screen** : [**stage-10-Impl-detail-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-10-Impl-detail-screen)
Building the product detail screen.
11. **Implement Cart Screen** : [**stage-11-impl-cart-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-11-impl-cart-screen)
Developing the cart screen functionality.
12. **Implement Favorite Screen** : [**stage-12-impl-favorite-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-12-impl-favorite-screen)
Implementing the favorite items screen.
13. **Implement Payment Screen** : [**stage-13-impl-payment-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-13-impl-payment-screen)
Setting up the payment screen with checkout options.
14. **Implement Order History Screen** : [**stage-14-impl-order-history-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-14-impl-order-history-screen)
Creating the order history screen for users.
15. **Implement Splash Screen** : [**stage-15-impl-splash-screen**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/stage-15-impl-splash-screen)
Developing the splash screen on app startup.
#### Others
- **Integrate Nativewind** : [**branch :: integrate-nativewind**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/feature/integrate-nativewind)
- **MVVM Migration** : [**branch :: mvvm-architecture**](https://github.com/ZyferLink/coffee-lab-reactnative-app/tree/feature/mvvm-architecture)
#
## ᴠ ⁃ ʙᴇʜɪɴᴅ ᴛʜᴇ ᴄᴏᴅᴇ: ᴅᴇᴠ ꜰᴇᴀᴛᴜʀᴇꜱ
### ⭓ Project Architecture
### Modular Domain Architecture
This document outlines a scalable and maintainable folder structure for React Native apps using TypeScript. It covers the benefits of this architecture, offers guidelines for efficient app development, and compares it with alternative solutions to enhance scalability and performance.
### High-level directory structure overview
```plaintext
root
├── 📂 src // Application source code
│ ├── 📂 api // Network-related code (API calls, clients)
│ ├── 🗂️ assets // Static assets (images, fonts, etc.)
│ ├── 📂 components // Reusable UI components
│ ├── 📂 config // App configuration (themes, constants)
│ ├── 📂 hooks // Custom React hooks
│ ├── 📂 navigation // Navigation setup
│ ├── 📂 screens // Screen-specific logic and views
│ ├── 📂 state // App state management
│ ├── 📂 styles // Global styling or shared styles
│ ├── 📂 types // Shared types and interfaces
│ ├── 📂 utils // Utility functions or helpers
│ └── 📄 index.tsx // Entry point for the app
│
├── 📄 .env // Environment variables
├── 📄 App.tsx // Main App component
├── 📄 tsconfig.json // TypeScript configuration
├── 📄 package.json
├── 📄 babel.config.js
└── 📄 README.md
```
*CHECK OUT MORE* :-> [ **Project Architecture Blueprint** ](./_archive/docs/modular-domain-architecture.md)
#
### ⭓ App Dependencies/Libraries Overview
* [@react-native-async-storage/async-storage][0]: Async storage for storing data locally in a React Native app.
* [@react-native-community/blur][1]: Adds support for creating blur effects on React Native views.
* [@react-navigation/bottom-tabs][2]: A library for creating bottom tab navigators in React Navigation.
* [@react-navigation/native][3]: Core library for React Navigation, providing navigation functionality.
* [@react-navigation/native-stack][4]: A native stack navigator for React Navigation, offering high-performance navigation.
* [immer][5]: A package to work with immutable state in a more convenient way by applying patches.
* [lottie-react-native][6]: Library for rendering Lottie animations in React Native.
* [react][7]: A JavaScript library for building user interfaces, core for React Native.
* [react-native][8]: Framework for building native apps using React.
* [react-native-linear-gradient][9]: A React Native component for creating linear gradient backgrounds.
* [react-native-safe-area-context][10]: Provides safe area boundaries for React Native apps.
* [react-native-screens][11]: Optimizes navigation and transitions in React Native using native screens.
* [react-native-splash-screen][12]: A splash screen library for React Native apps.
* [react-native-vector-icons][13]: A library for using vector icons in React Native apps.
* [zustand][14]: A small, fast state-management library for React.
#### Dev Dependencies
* [@babel/core][15]: Babel core package for transforming JavaScript code.
* [@babel/preset-env][16]: Babel preset for compiling modern JavaScript.
* [@babel/runtime][17]: Babel runtime for handling helper functions.
* [@react-native/babel-preset][18]: Babel preset tailored for React Native development.
* [@react-native/eslint-config][19]: ESLint configuration for React Native projects.
* [@react-native/metro-config][20]: Metro bundler configuration for React Native.
* [@react-native/typescript-config][21]: TypeScript configuration for React Native projects.
* [@types/react][22]: TypeScript type definitions for React.
* [@types/react-native-vector-icons][23]: TypeScript type definitions for react-native-vector-icons.
* [@types/react-test-renderer][24]: TypeScript type definitions for react-test-renderer.
* [babel-jest][25]: Jest transformer for Babel.
* [eslint][26]: Linter tool for ensuring code quality and consistency.
* [jest][27]: Testing framework for JavaScript.
* [prettier][28]: Code formatter for maintaining consistent code style.
* [react-test-renderer][29]: React testing utilities for rendering components in a test environment.
* [typescript][30]: A strongly typed programming language that builds on JavaScript.
[0]: https://github.com/react-native-async-storage/async-storage
[1]: https://github.com/react-native-community/blur
[2]: https://reactnavigation.org/docs/bottom-tab-navigator
[3]: https://reactnavigation.org/docs/getting-started
[4]: https://reactnavigation.org/docs/native-stack-navigator
[5]: https://immerjs.github.io/immer/
[6]: https://github.com/lottie-react-native/lottie-react-native
[7]: https://reactjs.org/
[8]: https://reactnative.dev/
[9]: https://github.com/react-native-linear-gradient/react-native-linear-gradient
[10]: https://github.com/th3rdwave/react-native-safe-area-context
[11]: https://github.com/software-mansion/react-native-screens
[12]: https://github.com/crazycodeboy/react-native-splash-screen
[13]: https://github.com/oblador/react-native-vector-icons
[14]: https://github.com/pmndrs/zustand
[15]: https://babeljs.io/docs/en/babel-core
[16]: https://babeljs.io/docs/en/babel-preset-env
[17]: https://babeljs.io/docs/en/babel-runtime
[18]: https://github.com/facebook/react-native/tree/main/packages/babel-preset-react-native
[19]: https://github.com/react-native-community/eslint-config
[20]: https://github.com/facebook/metro
[21]: https://github.com/react-native-community/typescript-config
[22]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
[23]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native-vector-icons
[24]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-test-renderer
[25]: https://github.com/babel/babel-jest
[26]: https://eslint.org/
[27]: https://jestjs.io/
[28]: https://prettier.io/
[29]: https://github.com/facebook/react/tree/main/packages/react-test-renderer
[30]: https://www.typescriptlang.org/
#
# ᴠɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ
### ⭓ Quick Start
Follow these steps to set up the project on your local machine.
#### 1. Prerequisites
Ensure you have the following installed:
- **Git**: Version control system.
- **Node.js**: JavaScript runtime.
- **npm**: Node Package Manager (comes with Node.js).
>**Note**: And make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions up to the "Creating a new application" step, before proceeding.
#
#### 2. Cloning the Repository
- Clone the repository:
```bash
git clone https://github.com/ZyferLink/coffee-lab-reactnative-app.git
```
- Navigate to the project directory:
```bash
cd coffee-lab-reactnative-app
```
#
#### 3. Installation
Install the project dependencies:
```bash
npm install
```
### ⭓ Getting Started
#### Step 1: Start the Metro Server
1. Open the terminal at the root of your React Native project.
2. Run the following command to start **Metro** (the JavaScript bundler):
```bash
npm start
```
#
#### Step 2: Start Your Application
1. Let Metro Bundler continue running in its own terminal.
2. Open a new terminal and run the following command to start your app on Android:
```bash
npm run android
```
OR to start on iOS:
```bash
npm run ios
```
#
#### Step 3: Modifying Your App
1. Open `App.tsx` in your preferred text editor and make changes.
2. For **Android**: Press the R key twice or select **"Reload"** from the Developer Menu (Ctrl + M on Windows/Linux or Cmd ⌘ + M on macOS) to see your changes.
For **iOS**: Press Cmd ⌘ + R in the iOS Simulator to reload the app and view your changes.
---
#### Troubleshooting
- If you encounter issues, visit the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page for guidance.
---
#### Release Build Installation
Main command for `Release build install`:
```bash
./gradlew installRelease
```
Full command:
1. Navigate to the **android** directory:`cd android`
2. Clean the build: `./gradlew clean`
3. Install the release build: `./gradlew installRelease`
4. Return to the root directory: `cd ..`
Full Command:
```bash
cd android
./gradlew clean
./gradlew installRelease
cd ..
```
#
#### Run with Metro
1. Navigate to the **android** directory: `cd android`
2. Clean the build: `./gradlew clean`
3. Return to the root directory: `cd ..`
4. Run the app on Android: `npx react-native run-android`
Full Command:
```bash
cd android
./gradlew clean
cd ..
npx react-native run-android
```
---
[ ⮝ BACK TO TOP ](#ɪ----ᴘʀᴏᴊᴇᴄᴛ-ɪɴꜰᴏ)
---
—–— ◇ —–—