
[This repo](https://github.com/robbycp/design-system-template) utility helps developer to inititate dashboard apps and public client website with clean project structure, easy, and fast. It aims to reduce time to research what tech stack to use when starting new frontend service. Some features in this repository

- [x] Generate dashboard or public client website using monorepo tools nx or create-next-app or create-react-app easily
- [x] Predefined features for dashboard like component table
- [x] Predefined features for client website like SEO, internationalization, firebase remote config
- [x] Create repo to manage design token and design system, including custom icons, connected with figma and direct service
- [x] Utilities for api fetch, authentication, and confirmation.


Design System Template

Projects i have involved while working in this company
- Quick Commerce / TaniInstan, flash sale, referral, social auth login using google, popup banner implementation in apps
- Voucher features in mobile apps, website, and internal dashboard
- Implement analytics and tracker for web and apps
- Implement deep link and universal link in apps
- Typescript migration
- Upgrade react native version

Tanihub Client Apps

Personal blog contains my works, blogs which mainly technical about react native. I use nextjs [example starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript), modify the colour theme and some section.

Personal Blog

I create this open source project with all essential packages or elements, from themes style, folder arrangement, development process with automated flow using github actions, until uploading to play store / app store. Also it’s already packed with tools for analytics, debugging, crash report, firebase services, api fetch for better structure, tracking transparency for ios.
You could found [here](https://github.com/robbycp/react-native-boilerplate)



React Native Boilerplate


This app has two modes. First is offline mode where you can choose a story point and show it later when in time you have to reveal. To make it more interesting, you could change the card colour or background image of the card. Second mode is online where users can make an online room, share room id, and have a session of story points for a set list of stories. I use firebase to make an online room so user can interact with other users.
It’s not published in play store, but you could download the android apk [here](https://install.appcenter.ms/users/robbycp/apps/fun-scrum/distribution_groups/public) with figma design [here](https://www.figma.com/file/Uw5BVFsXZGvcH73I0ZsMQn/Fun-Scrum?node-id=2%3A1524)
Here are the screenshot of the apps.

## Home

![home-1](/assets/portfolio/fun-scrum/home-1.png)

## Offline Card

![offline-card-1](/assets/portfolio/fun-scrum/offline-card-1.png)
![offline-card-2](/assets/portfolio/fun-scrum/offline-card-2.png)
![offline-card-3](/assets/portfolio/fun-scrum/offline-card-3.png)

## Room List

![room-list-1](/assets/portfolio/fun-scrum/room-list-1.png)

## Room Detail

### Result tab

In this tab user can give point, manage the process of giving story point, manage cards, and basic information of the sprint and participant
![room-detail-result-1](/assets/portfolio/fun-scrum/room-detail-result-1.png)
![room-detail-result-2](/assets/portfolio/fun-scrum/room-detail-result-2.png)
![room-detail-result-3](/assets/portfolio/fun-scrum/room-detail-result-3.png)

### Story tab

In this tab user can manage the story they want to point
![room-detail-story-1](/assets/portfolio/fun-scrum/room-detail-story-1.png)


Fun Scrum


I made this website with 3 of my friends (1 product manager, 1 designer, and 1 engineer) hoping it would have a huge database with specifications, then compare products so users could buy objectively and suit their needs. I build website clients with nextjs SEO optimised. Then i build admin website to manage product catalogue and content with vuejs. I also build a graphql nodejs server. Later, I tried to build a scraping server with scrapy python.
Here are some screenshot of the websites.

## Home

![home-1](/assets/portfolio/sibudi/home-1.png)
![home-2](/assets/portfolio/sibudi/home-2.png)
![home-3](/assets/portfolio/sibudi/home-3.png)

## Product List

![product-list-1](/assets/portfolio/sibudi/product-list-1.png)

## Product Details

![product-detail-1](/assets/portfolio/sibudi/product-detail-1.png)
![product-detail-2](/assets/portfolio/sibudi/product-detail-2.png)
![product-detail-3](/assets/portfolio/sibudi/product-detail-3.png)
![product-detail-4](/assets/portfolio/sibudi/product-detail-4.png)

## Product Compare

![product-compare-1](/assets/portfolio/sibudi/product-compare-1.png)
![product-compare-2](/assets/portfolio/sibudi/product-compare-2.png)
![product-compare-3](/assets/portfolio/sibudi/product-compare-3.png)
![product-compare-4](/assets/portfolio/sibudi/product-compare-4.png)


Design System Template

Tanihub Client Apps

Personal Blog

React Native Boilerplate

Fun Scrum

siBudi