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ᴘᴇᴄᴛ

⭓ 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

DEVELOPMENT BRANCH :
Active codebase for ongoing development efforts (New features, bug fixes, and improvements..)
➲ development

➲ 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
   Initial setup of the React Native project.

2. Project Setup : stage-02-project-setup
   Configuring essential libraries and dependencies.

3. Asset Allocation : 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
   Setting up data models, theme configuration, and basic project structure.

5. Custom Icon Setup : stage-05-custom-icon-setup
   Implementing custom app icons.

6. Screens, Stack, and Tab Navigators : stage-06-screens-stack-and-tab-navigators
   Setting up screens with stack and tab navigators.

7. Building Zustand Store : stage-07-building-zustand-store
   Implementing the Zustand store for state management.

8. Implement Home Screen : stage-08-impl-home-screen
   Developing the home screen with dynamic content.

9. Implement UseStore Hook : stage-09-impl-usestore-hook
   Creating and implementing the useStore hook for state management.

10. Implement Detail Screen : stage-10-Impl-detail-screen
    Building the product detail screen.

11. Implement Cart Screen : stage-11-impl-cart-screen
    Developing the cart screen functionality.

12. Implement Favorite Screen : stage-12-impl-favorite-screen
    Implementing the favorite items screen.

13. Implement Payment Screen : stage-13-impl-payment-screen
    Setting up the payment screen with checkout options.

14. Implement Order History Screen : stage-14-impl-order-history-screen
    Creating the order history screen for users.

15. Implement Splash Screen : stage-15-impl-splash-screen
    Developing the splash screen on app startup.

Others

• Integrate Nativewind : branch :: integrate-nativewind

• MVVM Migration : branch :: 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

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

⭓ App Dependencies/Libraries Overview

• @react-native-async-storage/async-storage: Async storage for storing data locally in a React Native app.
• @react-native-community/blur: Adds support for creating blur effects on React Native views.
• @react-navigation/bottom-tabs: A library for creating bottom tab navigators in React Navigation.
• @react-navigation/native: Core library for React Navigation, providing navigation functionality.
• @react-navigation/native-stack: A native stack navigator for React Navigation, offering high-performance navigation.
• immer: A package to work with immutable state in a more convenient way by applying patches.
• lottie-react-native: Library for rendering Lottie animations in React Native.
• react: A JavaScript library for building user interfaces, core for React Native.
• react-native: Framework for building native apps using React.
• react-native-linear-gradient: A React Native component for creating linear gradient backgrounds.
• react-native-safe-area-context: Provides safe area boundaries for React Native apps.
• react-native-screens: Optimizes navigation and transitions in React Native using native screens.
• react-native-splash-screen: A splash screen library for React Native apps.
• react-native-vector-icons: A library for using vector icons in React Native apps.
• zustand: A small, fast state-management library for React.

Dev Dependencies

• @babel/core: Babel core package for transforming JavaScript code.
• @babel/preset-env: Babel preset for compiling modern JavaScript.
• @babel/runtime: Babel runtime for handling helper functions.
• @react-native/babel-preset: Babel preset tailored for React Native development.
• @react-native/eslint-config: ESLint configuration for React Native projects.
• @react-native/metro-config: Metro bundler configuration for React Native.
• @react-native/typescript-config: TypeScript configuration for React Native projects.
• @types/react: TypeScript type definitions for React.
• @types/react-native-vector-icons: TypeScript type definitions for react-native-vector-icons.
• @types/react-test-renderer: TypeScript type definitions for react-test-renderer.
• babel-jest: Jest transformer for Babel.
• eslint: Linter tool for ensuring code quality and consistency.
• jest: Testing framework for JavaScript.
• prettier: Code formatter for maintaining consistent code style.
• react-test-renderer: React testing utilities for rendering components in a test environment.
• typescript: A strongly typed programming language that builds on JavaScript.

ᴠɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ

⭓ 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 instructions up to the "Creating a new application" step, before proceeding.

2. Cloning the Repository

• Clone the repository:

  git clone https://github.com/NovaLogics/coffee-lab-reactnative-app.git

• Navigate to the project directory:

  cd coffee-lab-reactnative-app

3. Installation

Install the project dependencies:

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):

   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:

   npm run android

   OR to start on iOS:

   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 page for guidance.

---

Release Build Installation

Main command for Release build install:

./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:

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:

cd android
./gradlew clean
cd ..
npx react-native run-android

---

  ⮝   BACK TO TOP    

---

—–— ◇ —–—