CI Status: [![Codemagic build status](https://api.codemagic.io/apps/6793c8a43e403087c73183b0/default-workflow/status_badge.svg)](https://codemagic.io/app/6793c8a43e403087c73183b0/default-workflow/latest_build)

> If the GitHub repository is private, Please contact via email or through the contact section page.

Ditonton is an entertainment application that allows users to explore their favorite either movies or TV series. Explore and favorite it!  

> **Project Type**: Course Assignment (Personal Project)  
>  
> **Development Date**: January 2025  
>  
> **Role**: Mobile Developer (Multi Platform)  

## Technologies Used   

This application was developed using Git, GitHub, Android Studio, Firebase, and Flutter as the primary framework.  

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact  

The development of this application faced several challenges, including continuing code that previously only had a movies feature, implementing modularization, transforming state management from Provider to BLoC, performing unit and widget tests, understanding user behavior demographics, detecting crashes in the application, and implementing Continuous Integration.  

### Challenges  

- Interacting with APIs and displaying data from APIs.  
- Developing existing code.  
- Separating into multiple modules/packages.  
- Transforming state management to be more reactive.  
- Building scalable and maintainable code for future development.  
- Understanding user behavior demographics.  
- Detecting crashes when the application is publicly used.  
- Implementing CI for automation.  

### Solutions  

- Using the `http` dependency to interact with APIs.  
- Implementing clean architecture with dependency injection using `get_it`.  
- Applying existing patterns to maintain code consistency.  
- Implementing unit, page, and widget tests to ensure code functions correctly.  
- Implementing Firebase Analytics for real-time demographic reports.  
- Implementing Firebase Crashlytics for crash reports when users experience issues.  
- Using Codemagic for Continuous Integration.  

### Impact  

- The application requires an internet connection since data is not stored in a database.  
- The application presents movie and TV series information effectively.  
- The application is scalable and can be further developed.  
- User demographics and crash history can be monitored through the Firebase console.  
- Automated testing is triggered upon repository push.  

## Lesson Learned  

From this project, I learned about using Flutter as an application framework. This application taught me how to interact with APIs, build applications using clean architecture, implement Firebase, conduct unit, page, and widget tests, and apply Continuous Integration.  

- Improved my understanding of Flutter.  
- Helped me understand API interactions.  
- Helped me understand state management with BLoC and dependency injection using `get_it`.  
- Helped me understand Firebase Analytics and Crashlytics.  
- Helped me understand CI with Codemagic in Flutter.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Ditonton, follow these steps:  

1.  **Clone the repository**:  
    ```sh  
    git clone https://github.com/faradaii/ditonton.git  
    ```  
2.  **Navigate to the project directory**:  
    ```sh  
    cd ditonton  
    ```  
3.  **Install dependencies**:  
    -   If using Android Studio or VS Code:  
        Open **Terminal** and **Run** this command.  
        ```sh  
        flutter pub get  
        ```  
    -   For other environments, please refer to the specific setup instructions.  

4. **Get a new API key**:  
    - Obtain a new API key from [TMDB](https://www.themoviedb.org/) and replace the API key in the package `core > lib > common > constants.dart` if necessary.  

5. **Run the application**:  
    - In Android Studio or VS Code:  
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
    - For other environments, follow the appropriate instructions.  

## Usage  

This application is easy to use. Users are directly taken to the movies' home page. They can navigate through different sections using the drawer.  

```mermaid  
graph  
    A[Home - Movies]  
    A --> B  
    B{ } --> C[Now Playing Movies] --> H  
    B{ } --> D[Popular Movies] --> H  
    B{ } --> E[Top Rated Movies] --> H  
    B{ } --> F[Search Movies] --> H  
    B{ } --> H[Detail Movies]  

    A-->Z{ }  
    Z--> L[Home TV]  
    Z--> J[Watchlist Movies] --> H  
    Z--> I[Watchlist TV] --> Q  
    Z--> K[About]  

    L --> M[Now Playing TV] --> Q  
    L --> N[Popular TV] --> Q  
    L --> O[Top Rated TV] --> Q   
    L --> P[Search TV] --> Q  
    L --> Q[Detail TV]  
```  
> If the graph is not visible, please refer to the GitHub repository for more information.


----------  

Ditonton is an entertainment application that allows users to explore their favorite either movies or TV series. Explore and favorite it! 

Ditonton

> If the GitHub repository is private, Please contact via email or through the contact section page.

Snappy is an entertainment application that allows users to create stories, explore, and share their stories effortlessly. Share stories through photos and locations and tell them to everyone!

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: January 2025  
> 
> **Role**: Mobile Developer (Multi Platform)

## Technologies Used

This application was developed using Git, GitHub, Android Studio, and Flutter as the primary framework.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this application faced several challenges, including managing state on each page, interacting with APIs, implementing clean architecture, integrating API data with Google Maps, implementing build variants, and localization.

### Challenges

- Interacting with APIs and displaying data from them.
- Uploading photos from the camera and gallery and performing image cropping.
- Creating build variants to introduce premium features.
- Integrating Google Maps into the application.
- Building scalable and maintainable code for future development.
- Implementing localization to support multiple languages.

### Solutions

- Using the `http` dependency for API interactions.
- Using the `bloc` dependency for state management to keep the UI consistent.
- Using the `intl` and `flutter_localizations` dependencies to support localization.
- Implementing build flavors to divide the app into two versions (free and premium).
- Using the `image_picker`, `hl_image_picker`, and `image` dependencies to support image capturing and cropping.
- Using the `go_router` dependency for routing and implementing dependency injection with `get_it`.
- Using the `google_maps_flutter` and `geocoding` dependencies to manipulate maps in the app.

### Impact

- The application requires an internet connection as data is not stored in a local database.
- The application presents stories effectively, and some stories can display their locations.
- Users can upload stories with location data if they are using the premium version.
- The application allows users to crop images before uploading them.
- The application's language can be changed, supporting four languages (Bahasa Indonesia, English, Korean, Chinese).

## Lesson Learned

From this project, I learned how to use Flutter as an application framework. This application taught me how to interact with APIs, use state management, implement routing and dependency injection, and create build variants.

- Improved my understanding of Flutter.
- Helped me understand API interactions.
- Helped me understand state management using `bloc`, routing with `go_router`, and dependency injection with `get_it`.
- Helped me understand build flavors and build variants in app development.
- Helped me understand multi-language localization.
- Helped me understand how to use Google Maps in Flutter.

# **Installation & Usage Guide**

Installing and using this application is simple and quick. Users can follow the steps below to get started.

## Installation

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.

To get started with Snappy, follow these steps:

1.  **Clone the repository**:
    
    ```sh
    git clone https://github.com/faradaii/snappy.git  
    ```
    
2.  **Navigate to the project directory**:
    
    ```sh
    cd snappy
    ```
    
3.  **Install dependencies**:  
    -   If using Android Studio or VS Code:
        Open **Terminal** and **Run** this command.
		  ```sh
		  flutter pub get
		  ```
        
    -   For other environments, please refer to the specific setup instructions.
        
4. **Add API key**:
    - Please follow this [official documentation](https://developers.google.com/maps/flutter-package/config) to setup Google Maps API.

5. **Run the application**:
    
    -   In Android Studio or VS Code:
        
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).
        
    -   For other environments, follow the appropriate instructions.
        

## Usage

This application is easy to use. Users will be directed to the login screen if there is no active session on the device. The language can be changed by selecting the flag icon. Additionally, the "include location" feature is only available in the premium version.

```mermaid
graph
    A[Welcome] --> B{Logged}
    B-- No -->C{First Time}
    C-- Yes --> D[Onboarding]-->E
    C-- No --> E[Login]-->F
    E-->K[Register]-->E
    B-- Yes -->F[Home]
    F--> G[Detail]
    F--> J[Add]
    F--> H[Logout]
```

> If the graph is not visible, please refer to the GitHub repository for more information.

----------

Snappy is an entertainment application that allows users to create stories, explore, and share their stories effortlessly. Share stories through photos and locations and tell them to everyone!

Snappy

> If the GitHub repository is private, Please contact via email or through the contact section page.

Nalssi is a simple weather list application that displays the weather in the capital city of each province in Indonesia. This application also provides detailed weather information!  

> **Project Type**: Course Assignment (Personal Project)  
>  
> **Development Date**: January 2025  
>  
> **Role**: Mobile Developer (Android)  

## Technologies Used  


This application was developed using Git, GitHub, Android Studio, and Kotlin Jetpack Compose as the primary framework.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges since this was my first Jetpack Compose application and involved implementing offline and online accessibility.  

### Challenges  

- Displaying the latest data from the API and rendering it.  
- Providing a favorite city feature and storing it in a database.  
- Structuring the code for future development.  

### Solutions  

- Used the Retrofit dependency to interact with the API.  
- Implemented swipe refresh to fetch the latest data.  
- Used Koin dependency injection to build the architecture.  
- Implemented Room Database to store favorite cities.
-  Attempted to implement NBR to fetch and synchronize data with local storage.  
  
  > For some reason, NBR is not working properly.

### Impact  

- The application can be accessed both offline and online, but an internet connection is required the first time to fetch new data.  
- The application can successfully store favorite cities.  

## Lessons Learned  

From this project, I learned how to use Kotlin Jetpack Compose as a framework. This application taught me how to write more declarative code and use Koin dependency injection.  

- Improved my understanding of Kotlin and Jetpack Compose.  
- Helped me explore NBR (Network Bound Resource).  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves a few basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Nalssi, follow these steps:  

1.  **Clone the repository**:  

    ```sh
    git clone https://github.com/faradaii/nalssi.git  
    ```  

2.  **Navigate to the project directory**:  

    ```sh
    cd nalssi
    ```  

3.  **Sync the project with Gradle and install dependencies**:  
    Ensure you have the correct SDK version installed (match it with `compileSdkVersion` in `build.gradle`).  

    - If using Android Studio:  

        - Open **File** > **Sync Project with Gradle Files** (or click the **Sync Now** button if available).  

    - For other environments, please refer to the specific setup instructions.  

4.  **Run the application**:  

    - In Android Studio:  

        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  

    - For other environments, follow the appropriate instructions.  

## Usage  

This application is very simple; users can browse the weather list to get weather details.  

```mermaid  
graph  
B[Home]  
B -->|Choose weather| C[Detail Weather]      
B -->|Actions menu button| D[Favorite]  
B -->|Actions menu button| E[Profile]  
```  

> If the graph is not visible, please refer to the GitHub repository for more information.  

----------

Nalssi is a simple weather list application that displays the weather in the capital city of each province in Indonesia. This application also provides detailed weather information!  

Nalssi

> If the GitHub repository is private, Please contact via email or through the contact section page.

Fable is an entertainment application that allows users to create stories, explore, and share their stories effortlessly. Share stories through photos and locations and tell them to everyone!

>**Project Type** : Course Assignment (Personal Project)
>
>**Development Date** : November 2024
>
>**Role** : Mobile Developer (Android)

## Technologies Used

This application was built using Git, GitHub, Android Studio, and Kotlin XML as the main framework for development. Additionally, several dependencies were used, including Room Database, Paging 3, Retrofit, Google Maps, Espresso, and more.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development process of this application faced various challenges, particularly in integrating Google Maps and implementing infinite scrolling to optimize resources.

### Challenges
-    Displaying an unlimited list of stories from the API.
-   Capturing images from the gallery and camera with a cropping feature.
-   Ensuring data consistency in the UI.
-   Displaying stories on a map when coordinates are available.
-   Conducting testing to ensure the code is bug-free.

### Solutions
-   Used Room Database for local storage and Paging 3 to synchronize API data to avoid duplication and ensure unlimited scrolling.
-   Implemented a swipe refresh dependency to allow users to easily fetch the latest stories.
-   Used an image cropper dependency to enable photo cropping.
-   Applied the MVVM architecture and ViewModel to optimize UI performance.
-   Integrated Google Maps to display stories with location data.
-   Conducted testing on the Home ViewModel and Login Activity.

### Impact
-    Provided a smooth experience for users when fetching the latest stories.
-   Enabled location-based storytelling through map integration.
-   Offered a photo cropping feature to let users adjust uploaded images as desired.

## Lesson Learned

Through this project, I learned how to use dependencies to support infinite scrolling and display maps using Google Maps services. Additionally, I gained experience in performing testing, even if only on one ViewModel and one Activity.
-   Improved understanding of Kotlin and various dependencies.
-   Learned how to implement MVVM architecture for a more structured application.

# **Installation & Usage Guide**
The installation and usage of this application are simple and quick. Users only need to follow the steps below to get started.

## Installation

The installation process involves a few basic steps to ensure the application runs smoothly on the user’s device.

To get started with Fable, follow these steps:

1. **Clone the repository**:
   ```sh
   git clone https://github.com/faradaii/fable.git
   ```

2. **Navigate to the project directory**:
   ```sh
   cd fable
   ```

3. **Sync the project with gradle and Install dependencies**:
	Make sure you have the correct SDK Version installed (match it with `compileSdkVersion` in `build.gradle`).
	- If you're using android studio:
	
		Open **File** > **Sync Project** with Gradle Files (or the **Sync Now** button if appears)
	
   - For other environments, please refer to the specific setup instructions.

4. **Run the application**:
	- For Android Studio:
	
		Select an emulator or physical device > click the **Run** button (or press Shift + F10).
	
   - For other environments, follow the appropriate instructions.


## Usage

This application allows users to create, explore, and share stories effortlessly. Users can also crop their story photos as desired and include their location in the story.

```mermaid
graph
A[Welcome Screen] -->|Check Login Status| B{Is User Logged In?} 
B -->|Yes| C[Home] 
B -->|No| D[Login] 
D -->|No Account?| E[Register] 
D -->|Login Success| C 
C -->|Explore Story| F[Explore Story] 
C -->|Add New Story| G[Add Story] 
C -->|Profile| H[Profile] 
C -->|Go to Maps Story| I[Maps Story] 
C -->|Logout| J[Logout] 
H -->|Logout| J
```
> If the graph is not visible, please refer to the GitHub repository for more information.
---

Fable is an entertainment application that allows users to create stories, explore, and share their stories effortlessly. Share stories through photos and locations and tell them to everyone!

Fable

> If the GitHub repository is private, Please contact via email or through the contact section page.

Dicoding Event is a social application that helps users easily access the latest event information from Dicoding. Stay updated with the newest Dicoding events!

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: October 2024  
> 
> **Role**: Mobile Developer (Android)

## Technologies Used

This application was developed using Git, GitHub, Android Studio, and Kotlin XML as the primary framework. Additionally, several dependencies were utilized, including Room Database, Retrofit, and Work Alarm Manager.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this application faced several challenges, particularly in implementing a daily reminder with push notifications.

### Challenges

-   Displaying a list of upcoming and finished events from API data.
-   Saving favorite events liked by users.
-   Reminding users daily at a specific time if the reminder option is enabled.
-   Providing dark mode accessibility for certain users.
-   Ensuring the displayed data remains consistent in the UI.
-   Designing the application for future scalability.

### Solutions

-   Used Room Database dependency for local storage of favorite events.
-   Created a reusable adapter to display list items.
-   Implemented ViewModel to optimize UI performance.
-   Used Work Alarm Manager to schedule reminders.
-   Used local preferences to store theme settings for accessibility.
-   Implemented manual dependency injection.

### Impact

-   Centralized Dicoding event information in one application.
-   Provided settings for dark mode and daily reminders at a specific time.
-   Enabled users to save their favorite events.

## Lesson Learned

From this project, I learned how to use dependencies to set up reminders with Work Manager, even when the application is closed. I also explored Room Database for local data storage and learned how to use local preferences for application settings.

-   Improved my understanding of Kotlin and various dependencies.
-   Enhanced my knowledge of local preferences and Android permissions.
-   Learned how to implement manual dependency injection in an application.

# **Installation & Usage Guide**

Installing and using this application is simple and quick. Users can follow the steps below to get started.

## Installation

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.

To get started with Dicoding Events, follow these steps:

1.  **Clone the repository**:
    
    ```sh
    git clone https://github.com/faradaii/dicodingevents.git  
    ```
    
2.  **Navigate to the project directory**:
    
    ```sh
    cd dicodingevents  
    ```
    
3.  **Sync the project with Gradle and install dependencies**:  
    Ensure you have the correct SDK version installed (match it with `compileSdkVersion` in `build.gradle`).
    
    -   If using Android Studio:
        
        Open **File** > **Sync Project** with Gradle Files (or click the **Sync Now** button if available).
        
    -   For other environments, please refer to the specific setup instructions.
        
4.  **Run the application**:
    
    -   In Android Studio:
        
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).
        
    -   For other environments, follow the appropriate instructions.
        

## Usage

This application allows users to explore upcoming and past Dicoding events. Users can also set daily reminders or alarms, enable dark mode, and save their favorite events.

```mermaid
graph  
A[Welcome Screen] --> B[Home]  
B -->|Search| C[Search Events]   
B -->|Upcoming| D[Upcoming Events]   
B -->|Finished| E[Finished Events]   
B -->|Profile| F[Profile]  

```

> If the graph is not visible, please refer to the GitHub repository for more information.

----------


Dicoding Event is a social application that helps users easily access the latest event information from Dicoding. Stay updated with the newest Dicoding events!

Dicoding Events

> If the GitHub repository is private, Please contact via email or through the contact section page.

Zenst is an entertainment application that provides inspirational videos for workspace setup enthusiasts. This app also helps users by offering support and suggestions from an AI bot!  

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: May 2024  
>  
> **Role**: Mobile Developer (Multi-Platform)  

## Technologies Used  

This application was developed using Git, GitHub, Visual Studio Code, Figma, and Flutter as the primary framework.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges, including managing state for each page and retrieving data from an API.  

### Challenges  

- Displaying the latest data from the API and presenting it.  
- Controlling video playback and ensuring the screen does not turn off while playing videos.  
- Providing a favorite video feature and saving it to a database.  

### Solutions  

- Used the `http` dependency to interact with the API.  
- Used the `video_player` and `wakelock` dependencies to ensure videos play smoothly and the screen remains on.  
- Used the `typewritertext` dependency to display data from Gemini AI.  
- Used the `sqflite` dependency to store favorite videos.  
	> For some reason, the state controller is not working properly, and videos keep playing when switching from the Discover page.

	> Some pages aren't responsive due to rushing to meet the deadline. 

### Impact  

- The application requires an internet connection to function and only handles authentication locally.  
- The app provides video recommendations about workspace setups.  
- Users can save their favorite videos.  
- The app interacts with Gemini AI, which provides suggestions to users.  

## Lesson Learned  

From this project, I learned about using Flutter as an application framework. It also taught me how to use `sqflite` and interact with APIs.  

- Improved my understanding of Flutter.  
- Helped me grasp local databases, API interactions, and media playback.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Zenst, follow these steps:  

1.  **Clone the repository**:  
    
    ```sh
    git clone https://github.com/faradaii/zenst.git  
    ```  
    
2.  **Navigate to the project directory**:  
    
    ```sh
    cd zenst
    ```  
    
3.  **Install dependencies**:  
    - If using Android Studio or VS Code:  
        Open **Terminal** and **Run** this command.  
		
        ```sh
        flutter pub get
        ```  
        
    - For other environments, please refer to the specific setup instructions.  
        
4.  **Replace API Key**:  
	- Visit [RapidAPI](https://rapidapi.com/search?term=tiktok%20video%20feature%20summary&sortBy=ByRelevance) -> search `tiktok video feature summary`, subscribe, and get an API key -> paste it into `x-rapidapi-key` (`api_service.dart`).  
	
	- Visit [Gemini AI](https://ai.google.dev/gemini-api/docs/api-key) -> paste it into `key` in the variable `apiUrlGemini` (`api_service.dart`).  

5. **Run the application**:  
    
    - In Android Studio or VS Code:  
        
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
        
    - For other environments, follow the appropriate instructions.  
        

## Usage  

This application is easy to use. Users are directly taken to the **Discover** menu to enjoy video content, and they can navigate through different menus using the bottom navigation bar.  

```mermaid
graph
    A[Get Started] --> B
    B{ }--> C[Login]
    B{ }--> D[Register]
    D --> C
    C --> E{ }
    
    E--> F[Discover]
    E--> G[Picks]
    E--> H[Assist]
    E--> I[Notification]
    E--> J[Profile]

    J--> K[Item Saved]
    J--> L[Edit Profile]
```

> If the graph is not visible, please refer to the GitHub repository for more information.  

---


Zenst is an entertainment application that provides inspirational videos for workspace setup enthusiasts. This app also helps users by offering support and suggestions from an AI bot!

Zenst

> If the GitHub repository is private, Please contact via email or through the contact section page.

Savor is an information application that provides recommendations for interesting restaurants. This application can also give you daily recommendations at specific times!

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: August 2024  
> 
> **Role**: Mobile Developer (Multi Platform)

## Technologies Used

This application was developed using Git, GitHub, Visual Studio Code, and Flutter as the primary framework.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this application faced several challenges, including managing state for each page, interacting with APIs, implementing a scheduler, and integrating a local database.

### Challenges

- Displaying data from the API and rendering it properly.  
- Providing a favorite restaurant feature and storing data in a database.  
- Implementing daily reminders with notifications containing specific restaurant recommendations.  
- Ensuring data consistency.  
- Performing code testing.  

### Solutions

- Used the `http` dependency to interact with APIs.  
- Used `flutter_local_notification` and `android_alarm_manager_plus` dependencies to enable scheduled notifications.  
- Used the `bloc` dependency for state management to keep the UI consistent.  
- Used the `sqflite` dependency to store favorite restaurants.  
- Created tests for the API and settings page.  

### Impact

- The application requires an internet connection to function since data is not stored in a local database.  
- The application provides recommended restaurants from the API, and users can write reviews for those restaurants.  
- The application can send daily restaurant recommendations if the user enables this feature in the settings.  

## Lesson Learned

From this project, I learned how to use Flutter as an application framework. This application helped me understand API interactions, scheduler implementation, state management for handling each page’s state, testing, and UI layout to prevent overflow issues.

- Improved my understanding of Flutter.  
- Helped me understand local databases and API interactions.  
- Helped me grasp `bloc` state management.  
- Helped me learn how to test APIs and state management.  
- Helped me understand scheduler implementation for scheduled notifications.  

# **Installation & Usage Guide**

Installing and using this application is simple and quick. Users can follow the steps below to get started.

## Installation

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.

To get started with Savor, follow these steps:

1. **Clone the repository**:
    
    ```sh
    git clone https://github.com/faradaii/savor.git  
    ```
    
2. **Navigate to the project directory**:
    
    ```sh
    cd savor
    ```
    
3. **Install dependencies**:  
    - If using Android Studio or VS Code:  
      Open **Terminal** and **Run** this command.  
      ```sh
      flutter pub get
      ```
        
    - For other environments, please refer to the specific setup instructions.  

4. **Run the application**:
    
    - In Android Studio or VS Code:  
      Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
    - For other environments, follow the appropriate instructions.  

## Usage

This application is easy to use. Users will be directed to the home screen to explore recommended restaurants. They can view restaurant details, give ratings, and configure the app to receive daily restaurant recommendations.

```mermaid
graph
    A[Welcome] --> B{First Time}
    B-- Yes -->C[Onboarding]-->F
    B-- No -->F[Home]
    F--> G[Detail]
    F--> E[Search]
    F--> H[Bookmarked]
    F--> I[Settings]
```

> If the graph is not visible, please refer to the GitHub repository for more information.  

----------

Savor is an information application that provides recommendations for interesting restaurants. This application can also give you daily recommendations at specific times!

Savor

> If the GitHub repository is private, Please contact via email or through the contact section page.

KWave is a simple entertainment application that allows users to explore their favorite K-dramas.  

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: December 2024  
> 
> **Role**: Mobile Developer (Multi-Platform)  

## Technologies Used  



This application was developed using Git, GitHub, Android Studio, and Flutter as the primary framework.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges, including making the app responsive and displaying static data.  

### Challenges  

- Developing an application that is responsive across various devices.  
- Displaying static data for presentation.  

### Solutions  

- Used relative sizing based on the device, such as MediaQuery.  
- Displayed data using mapping and reusable widgets.  

### Impact  

- The application has no overflow issues and is responsive.  
- The application presents data accurately.  

## Lesson Learned  

From this project, I learned about using Flutter as an application framework. This application taught me how to create a responsive app and display static data.  

- Improved my understanding of Flutter.  
- Helped me understand MediaQuery for responsiveness.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with KWave, follow these steps:  

1.  **Clone the repository**:  

    ```sh
    git clone https://github.com/faradaii/kwave.git  
    ```  

2.  **Navigate to the project directory**:  

    ```sh
    cd kwave
    ```  

3.  **Install dependencies**:  
    -   If using Android Studio or VS Code:  
        Open **Terminal** and **Run** this command.  
        ```sh
        flutter pub get
        ```  
        
    -   For other environments, please refer to the specific setup instructions.  
        
4. **Run the application**:  

    -   In Android Studio or VS Code:  
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
        
    -   For other environments, follow the appropriate instructions.  

## Usage  

This application is easy to use. Users will be directed to the K-drama home screen immediately.  

```mermaid
graph
    A[Welcome]--> B
    B[Onboarding] --> C
    C[Home] --> D[K-drama Detail]
```

> If the graph is not visible, please refer to the GitHub repository for more information.  

---


KWave is a simple entertainment application that allows users to explore their favorite K-dramas.  


KWave

> If the GitHub repository is private, Please contact via email or through the contact section page.

Tiscrux Forum is a sophisticated web application designed to complete the expert class in the IDCamp React Developer path program. This project utilizes Next.js and Tailwind CSS to provide a responsive and visually appealing user interface, enabling dynamic discussions and community engagement.

> **Project Type**: Course Assignment (Personal Project)
> 
> **Development Date**: February 2024
> 
> **Role**: Web Developer 

## Technologies Used


This application was developed using Git, GitHub, VS Code, Next.js, Tailwind CSS, Redux, Jest, Cypress, and Storybook. The deployment is managed through Vercel with CI/CD pipelines.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this application faced several challenges, particularly in managing dynamic content, ensuring reliable state management, and implementing robust testing strategies.

### Challenges

-   Implementing REST APIs to dynamically manage and fetch forum content.
-   Ensuring efficient and predictable state management across various interactions using Redux.
-   Incorporating comprehensive unit and end-to-end testing for functionality and security.
-   Establishing a reliable CI/CD pipeline for seamless deployment and automated testing.

### Solutions

-   Used Dicoding’s API to ensure up-to-date and relevant discussions.
-    Implemented Redux to maintain a seamless user experience.
-   Testing
    -   Jest for unit testing actions and reducers.
    -   Cypress for end-to-end testing on authentication pages (login and register).
-    Used GitHub Actions for automated testing and deployment.
-  Built with Next.js and styled with Tailwind CSS for fast, visually appealing, and adaptive design.

### Impact

-    The platform successfully delivers a smooth, engaging experience.
-    Comprehensive testing ensures stable and bug-free functionality.
-    CI/CD pipelines enable seamless and automated deployment, improving maintainability.

## Lesson Learned

From this project, I gained hands-on experience in developing a scalable and dynamic web application using Next.js. It also strengthened my understanding of state management, testing methodologies, and continuous deployment strategies.

-   Enhanced my expertise in Next.js and Redux.
-   Improved my skills in writing unit and end-to-end tests.
-   Deepened my understanding of CI/CD workflows.

# **Installation & Usage Guide**

Installing and using this application is simple and quick. Users can follow the steps below to get started.

## Installation

To get started with Tiscrux Forum, follow these steps:

1.  **Clone the repository**:
    
    ```sh
    git clone https://github.com/Faradaii/Tiscrux-Forum-App.git  
    
    ```
    
2.  **Navigate to the project directory**:
    
    ```sh
    cd tiscrux-forum-app
    
    ```
    
3.  **Install dependencies**:
    
    ```sh
    npm install
    
    ```
    
4.  **Run the application**:
    
    ```sh
    npm run dev
    
    ```
    

## Usage

This application is easy to use, and users will be directed to the home page for browsing discussions.

```mermaid
graph
    A[Home] --> B[Discussion List] --> C[Discussion Details]
    A --> D[Login/Register]
    A --> E[Leaderboard]

```

> If the graph is not visible, please refer to the GitHub repository for more information.

----------

Tiscrux Forum is a sophisticated web application designed to complete the expert class in the IDCamp React Developer path program. This project utilizes Next.js and Tailwind CSS to provide a responsive and visually appealing user interface, enabling dynamic discussions and community engagement.


Tiscrux Forum App


> If the GitHub repository is private, Please contact via email or through the contact section page.

Asclepius is a healthcare application designed to help users detect skin cancer using images. Detect skin cancer with just an image!  

> **Project Type**: Course Assignment (Personal Project)  
>  
> **Development Date**: October 2024  
>  
> **Role**: Mobile Developer (Android)  

## Technologies Used  

This application was developed using Git, GitHub, Android Studio, and Kotlin XML as the primary framework, along with TensorFlow Lite for model implementation. Additionally, some dependencies were utilized, including Room Database, Retrofit, and Image Cropper.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges, particularly in implementing a daily reminder with push notifications.  

### Challenges  

-   Using a machine learning model to detect cancer and educate users.  
-   Capturing images from the gallery with an image cropping feature.  
-   Storing detection history information.  

### Solutions  

-   Implementing TensorFlow Lite to integrate Android with the existing TensorFlow model.  
-   Providing relevant information about cancer.  
-   Using the Image Cropper dependency for image cropping.  
-   Utilizing Room Database to store cancer detection history.  

### Impact  

-   A simple application that can detect skin cancer through images from the gallery.  
-   Providing an image cropping option to ensure users get the best results.  
-   Storing cancer detection history along with its probability results.  
-   Offering several relevant articles about cancer.  

## Lesson Learned  

From this project, I learned about using TensorFlow on Android, enabling the machine learning model to function offline. I also learned about Room Database for storing detection history and making API requests to fetch cancer-related articles.  

-   Improved my understanding of Kotlin and various dependencies.  
-   Enhanced my knowledge of TensorFlow Lite and machine learning on Android.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Asclepius, follow these steps:  

1.  **Clone the repository**:  
    ```sh  
    git clone https://github.com/faradaii/asclepius.git  
    ```  

2.  **Navigate to the project directory**:  
    ```sh  
    cd asclepius  
    ```  

3.  **Sync the project with Gradle and install dependencies**:  
    Ensure you have the correct SDK version installed (match it with `compileSdkVersion` in `build.gradle`).  

    -   If using Android Studio:  
        - Open **File** > **Sync Project** with Gradle Files (or click the **Sync Now** button if available).  
        - Provide an API Key from `https://newsapi.org/v2/` and replace `apiKey` in `HealthNewsFragment.kt`.  

    -   For other environments, please refer to the specific setup instructions.  

4.  **Run the application**:  
    -   In Android Studio:  
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  

    -   For other environments, follow the appropriate instructions.  

## Usage  

This application is very simple. Users only need to upload an image from the gallery to perform cancer detection. Users can also easily view their detection history results.  

```mermaid  
graph  
B[Home]  
B -->|Pick image via gallery| C[Gallery]   
C --> B -->|Detection History| D[History]   
B -->|Analyze image| E[Analyze]   
E --> F[Try another image] --> B  
E --> G[Relevant News]  
```  

> If the graph is not visible, please refer to the GitHub repository for more information.  

---


Asclepius is a healthcare application designed to help users detect skin cancer using images. Detect skin cancer with just an image! 

Asclepius

> If the GitHub repository is private, Please contact via email or through the contact section page.

Scher is a simple scholarship application that allows users to explore available scholarships. This is my first Flutter application.  

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: April 2024  
> 
> **Role**: Mobile Developer (Multi-Platform)  

## Technologies Used  

This application was developed using Git, GitHub, VS Code, and Flutter as the primary framework.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges. Since this was my first application, I struggled with overflowing content.  

### Challenges  

- Developing fundamental Flutter widgets.  

### Solutions  

- Used widgets according to their function and best practices.  

> Overflow issues still occurred on some devices due to limited knowledge and tight deadlines.  

### Impact  

- The application successfully provided static scholarship information.  

## Lesson Learned  

From this project, I learned how to use Flutter as an application framework. This application taught me the fundamentals of Flutter and how to display static data.  

- Improved my understanding of Flutter.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Scher, follow these steps:  

1.  **Clone the repository**:  

    ```sh
    git clone https://github.com/faradaii/scher.git  
    ```  

2.  **Navigate to the project directory**:  

    ```sh
    cd scher
    ```  

3.  **Install dependencies**:  
    -   If using Android Studio or VS Code:  
        Open **Terminal** and **Run** this command.  
        ```sh
        flutter pub get
        ```  
        
    -   For other environments, please refer to the specific setup instructions.  
        
4. **Run the application**:  

    -   In Android Studio or VS Code:  
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
        
    -   For other environments, follow the appropriate instructions.  

## Usage  

This application is easy to use. Users will be directed to the home screen immediately.  

```mermaid
  graph
      A[Home]--> B[Detail]
```

> If the graph is not visible, please refer to the GitHub repository for more information.  

---

Scher is a simple scholarship application that allows users to explore available scholarships. This is my first Flutter application. 

Scher


> If the GitHub repository is private, Please contact via email or through the contact section page.

Groffy is a very simple fruit store listing application that also displays the nutritional content and benefits of each fruit!  

> **Project Type**: Course Assignment (Personal Project)  
>
> **Development Date**: October 2024  
> 
> **Role**: Mobile Developer (Android)  

## Technologies Used  


This application was developed using Git, GitHub, Android Studio, and Kotlin XML as the primary framework.  

> Please refer to the GitHub repository for more information.  

## Challenges - Solutions - Impact  

The development of this application faced several challenges since this was my first Kotlin application.  

### Challenges  

- Using static data from JSON to display information and implementing a reusable adapter.  
- Navigation between pages in the application.  

### Solutions  

- Implemented an adapter for the list.  
- Read data and converted it into a data class.  
- Used intent to navigate between activities.  

### Impact  

- A simple static application that educates users about the benefits of fruits, with potential to be expanded into something more engaging.  

## Lesson Learned  

From this project, I learned about using Kotlin as a framework. This application taught me about activities, data classes, and intents.  

- Improved my basic understanding of Kotlin.  

# **Installation & Usage Guide**  

Installing and using this application is simple and quick. Users can follow the steps below to get started.  

## Installation  

The installation process involves several basic steps to ensure the application runs smoothly on the user’s device.  

To get started with Groffy, follow these steps:  

1.  **Clone the repository**:  
    
    ```sh
    git clone https://github.com/faradaii/groffy.git  
    ```  
    
2.  **Navigate to the project directory**:  
    
    ```sh
    cd groffy
    ```  
    
3.  **Sync the project with Gradle and install dependencies**:  
    Ensure you have the correct SDK version installed (match it with `compileSdkVersion` in `build.gradle`).  
    
    -   If using Android Studio:  
        
        - Open **File** > **Sync Project** with Gradle Files (or click the **Sync Now** button if available).  
        
    -   For other environments, please refer to the specific setup instructions.  
        
4.  **Run the application**:  
    
    -   In Android Studio:  
        
        Select an emulator or physical device > click the **Run** button (or press Shift + F10).  
        
    -   For other environments, follow the appropriate instructions.  
        

## Usage  

This application is very simple, users can browse through the fruit list to get information about various fruits.  

```mermaid
graph  
B[Home]  
B -->|Choose fruit| C[Detail]   
B -->|About App Action| D[About]  
```  

> If the graph is not visible, please refer to the GitHub repository for more information.  

---

Groffy is a very simple fruit store listing application that also displays the nutritional content and benefits of each fruit!  

Groffy

> If the GitHub repository is private, Please contact via email or through the contact section page.

Notes Note App is a seamless and intuitive note-taking application designed to provide a responsive and user-friendly experience. Built using React and Tailwind CSS, this app integrates advanced web technologies to ensure efficient content management, smooth navigation, and customizable themes.

> **Project Type**: Personal Project
> 
> **Development Date**: December 2023
> 
> **Role**: Web Developer

## Technologies Used

This project leverages React for dynamic UI updates, React Context for state and theme management, React Router for navigation, and Tailwind CSS for styling.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this app focused on optimizing dynamic content management, routing, and state handling for a smooth user experience.

### Challenges

-    Implementing REST APIs to manage and fetch notes dynamically.
-    Ensuring efficient navigation using React Router.
-    Handling themes and languages using React Context.
-   Managing component lifecycles with React Hooks.

### Solutions

-   Implemented Dicoding's API to enable dynamic and real-time content updates.
-    Ensured smooth transitions between pages for an enhanced user experience.
-    Used for theme and language management, allowing users to personalize their experience.
-    Leveraged hooks like `useEffect` and `useState` to efficiently manage lifecycles and performance.

### Impact

-    Optimized API calls and component rendering for a faster app experience.
-  Enabled customizable themes and multilingual support.
-   Simplified state and lifecycle management using React best practices.

## Lesson Learned

Developing this app helped reinforce my skills in state management, API integration, and UI optimization. Key takeaways include:

-   Strengthened expertise in React Context and Hooks.
-   Improved handling of dynamic routing and component lifecycle management.
-   Gained experience in designing responsive and accessible UIs using Tailwind CSS.

# **Installation & Usage Guide**

To run this project locally, follow these steps:

## Installation

1.  **Clone the repository**:
    
    ```sh
    git clone https://github.com/Faradaii/NotesApp.git
    
    ```
    
2.  **Navigate to the project directory**:
    
    ```sh
    cd NotesApp
    
    ```
    
3.  **Install dependencies**:
    
    ```sh
    npm install
    
    ```
    
4.  **Run the application**:
    
    ```sh
    npm run dev
    
    ```
    

## Usage

This application allows users to create, manage, and store notes effortlessly.

```mermaid
graph
    A[Active Note] --> B[View & Edit Notes] --> C[Delete Notes]
    A --> D[Archive Note] --> E[View & Edit Notes] --> F[Delete Notes]

```

> If the graph is not visible, please refer to the GitHub repository for more information.

----------

Notes Note App is a seamless and intuitive note-taking application designed to provide a responsive and user-friendly experience. Built using React and Tailwind CSS, this app integrates advanced web technologies to ensure efficient content management, smooth navigation, and customizable themes.

Notes App


> If the GitHub repository is private, Please contact via email or through the contact section page.

Re-quizy is an interactive quiz application designed to enhance users' knowledge in science and technology. Built using React, ShadCN UI, and Zustand, the application provides a smooth and engaging quiz experience with features like user authentication, quiz pausing, and result tracking.

> **Project Type**: Personal Project
> 
> **Development Date**: August 2024
> 
> **Role**: Web Developer

## Technologies Used

This application was developed using React for building dynamic user interfaces, Zustand for lightweight state management, and ShadCN UI for styling.

> Please refer to the GitHub repository for more information.

## Challenges - Solutions - Impact

The development of this application required implementing an efficient state management system while ensuring an engaging user experience.

### Challenges

-    Managing user and quiz states efficiently as the application scaled.

### Solutions

-    Implemented Zustand to handle state management, ensuring a lightweight yet powerful approach to managing complex data structures.

### Impact

-    Smooth performance and efficient state handling.
-    Ensured the application remains responsive as more users and features are added.

## Lesson Learned

Through this project, I enhanced my understanding of state management in React applications and gained experience in optimizing performance for interactive UI elements.

-   Improved my ability to implement Zustand for managing global states.
-   Strengthened my skills in designing intuitive and dynamic user interfaces.

# **Installation & Usage Guide**

Installing and using this application is simple and quick. Users can follow the steps below to get started.

## Installation

To get started with Re-quizy, follow these steps:

1.  **Clone the repository**:
    
    ```sh
    git clone https://github.com/Faradaii/React-Quiz.git
    
    ```
    
2.  **Navigate to the project directory**:
    
    ```sh
    cd React-Quiz
    
    ```
    
3.  **Install dependencies**:
    
    ```sh
    npm install
    
    ```
    
4.  **Run the application**:
    
    ```sh
    npm run dev
    
    ```
    

## Usage

This application is designed for a seamless quiz experience, allowing users to log in, take quizzes, and track their results.

```mermaid
graph
    A[Login] --> B[Quiz Session] --> C[Results]
    B --> D[Pause/Resume Quiz]

```

> If the graph is not visible, please refer to the GitHub repository for more information.

----------


Re-quizy is an interactive quiz application designed to enhance users' knowledge in science and technology. Built using React, ShadCN UI, and Zustand, the application provides a smooth and engaging quiz experience with features like user authentication, quiz pausing, and result tracking.

Projects

Loading...