Branding

Go-Bahasa

is an Indonesian language learning platform specifically designed for expatriates and foreign learners living in Indonesia

Year :

2025

Project Duration :

4 weeks

Featured Project Cover Image

Project Goals


- Provide a user-friendly Indonesian language learning platform for expatriates

- Teach practical phrases for everyday situations (greetings, food ordering, transportation, etc.)

- Provide Indonesian cultural insights through the Culture feature

- Test user comprehension through interactive Quizzes

- Build a learner community with Dashboard progress tracking

Project Content Image - 1

Tech Stack


| **Framework** | Next.js 16.1.6 |

| **React** | 19.2.3 |

| **Language** | TypeScript 5.x |

| **Styling** | Tailwind CSS 4, PostCSS |

| **UI Components** | Lucide React (Icons) |

| **Animation** | Framer Motion |

| **Utilities** | clsx, tailwind-merge |

| **Font** | Outfit (Google Fonts) |

Project Content Image - 2
Project Content Image - 3

Project Structure


GoBahasa/

├── public/                      # Static assets

├── src/

│   ├── app/                     # Next.js App Router

│   │   ├── layout.tsx           # Root layout with Navbar

│   │   ├── globals.css          # Global stylesheet

│   │   ├── page.tsx             # Landing page / Home

│   │   ├── culture/

│   │   │   └── page.tsx         # Culture page (Indonesian cultural info)

│   │   ├── dashboard/

│   │   │   └── page.tsx         # Dashboard (user progress tracking)

│   │   ├── lessons/

│   │   │   ├── page.tsx         # Lesson index (list all lessons)

│   │   │   └── [id]/

│   │   │       └── page.tsx     # Specific lesson detail page

│   │   ├── quiz/

│   │   │   └── page.tsx         # Quiz page

│   │   └── signin/

│   │       └── page.tsx         # Sign In page (authentication)

│   ├── components/

│   │   ├── layout/

│   │   │   ├── Navbar.tsx       # Navigation bar with mobile support

│   │   │   └── Hero.tsx         # Hero section on landing page

│   │   └── ui/                  # Reusable UI components (currently empty)

│   ├── hooks/                   # Custom React hooks (empty - for future development)

│   └── lib/

│       ├── lessons-data.ts      # Lessons database as object literal

│       └── utils.ts             # Utility functions

├── package.json                 # Project dependencies & scripts

├── next.config.ts              # Next.js configuration

├── tsconfig.json               # TypeScript configuration

├── tailwind.config.mjs          # Tailwind CSS configuration

├── postcss.config.mjs          # PostCSS configuration

├── eslint.config.mjs           # ESLint configuration

└── README.md                    # Original Next.js README

Design & Styling


 Using Tailwind CSS v4 for utility-first styling

- Custom CSS variables defined in `globals.css`

- Responsive design with breakpoints: sm, lg, xl


Future Development Ideas

### Short Term

- Implement database (Supabase/MongoDB) for persistent data

- Add user authentication (NextAuth.js/Auth0)

- Create interactive quiz engine

- Add audio pronunciation for lessons



### Medium Term

- User progress tracking & statistics

- Leaderboard system

- Social features (friend list, competition)

- Mobile app version



### Long Term

- AI-powered personalized learning paths

- Voice recognition for pronunciation practice

- Live instructor sessions

- Certification program

Project Content Image - 4

More Projects

Social :

© Copyright 2025. All Rights Reserved by oldshen

Branding

Go-Bahasa

is an Indonesian language learning platform specifically designed for expatriates and foreign learners living in Indonesia

Year :

2025

Project Duration :

4 weeks

Featured Project Cover Image

Project Goals


- Provide a user-friendly Indonesian language learning platform for expatriates

- Teach practical phrases for everyday situations (greetings, food ordering, transportation, etc.)

- Provide Indonesian cultural insights through the Culture feature

- Test user comprehension through interactive Quizzes

- Build a learner community with Dashboard progress tracking

Project Content Image - 1

Tech Stack


| **Framework** | Next.js 16.1.6 |

| **React** | 19.2.3 |

| **Language** | TypeScript 5.x |

| **Styling** | Tailwind CSS 4, PostCSS |

| **UI Components** | Lucide React (Icons) |

| **Animation** | Framer Motion |

| **Utilities** | clsx, tailwind-merge |

| **Font** | Outfit (Google Fonts) |

Project Content Image - 2
Project Content Image - 3

Project Structure


GoBahasa/

├── public/                      # Static assets

├── src/

│   ├── app/                     # Next.js App Router

│   │   ├── layout.tsx           # Root layout with Navbar

│   │   ├── globals.css          # Global stylesheet

│   │   ├── page.tsx             # Landing page / Home

│   │   ├── culture/

│   │   │   └── page.tsx         # Culture page (Indonesian cultural info)

│   │   ├── dashboard/

│   │   │   └── page.tsx         # Dashboard (user progress tracking)

│   │   ├── lessons/

│   │   │   ├── page.tsx         # Lesson index (list all lessons)

│   │   │   └── [id]/

│   │   │       └── page.tsx     # Specific lesson detail page

│   │   ├── quiz/

│   │   │   └── page.tsx         # Quiz page

│   │   └── signin/

│   │       └── page.tsx         # Sign In page (authentication)

│   ├── components/

│   │   ├── layout/

│   │   │   ├── Navbar.tsx       # Navigation bar with mobile support

│   │   │   └── Hero.tsx         # Hero section on landing page

│   │   └── ui/                  # Reusable UI components (currently empty)

│   ├── hooks/                   # Custom React hooks (empty - for future development)

│   └── lib/

│       ├── lessons-data.ts      # Lessons database as object literal

│       └── utils.ts             # Utility functions

├── package.json                 # Project dependencies & scripts

├── next.config.ts              # Next.js configuration

├── tsconfig.json               # TypeScript configuration

├── tailwind.config.mjs          # Tailwind CSS configuration

├── postcss.config.mjs          # PostCSS configuration

├── eslint.config.mjs           # ESLint configuration

└── README.md                    # Original Next.js README

Design & Styling


 Using Tailwind CSS v4 for utility-first styling

- Custom CSS variables defined in `globals.css`

- Responsive design with breakpoints: sm, lg, xl


Future Development Ideas

### Short Term

- Implement database (Supabase/MongoDB) for persistent data

- Add user authentication (NextAuth.js/Auth0)

- Create interactive quiz engine

- Add audio pronunciation for lessons



### Medium Term

- User progress tracking & statistics

- Leaderboard system

- Social features (friend list, competition)

- Mobile app version



### Long Term

- AI-powered personalized learning paths

- Voice recognition for pronunciation practice

- Live instructor sessions

- Certification program

Project Content Image - 4

More Projects

Social :

© Copyright 2025. All Rights Reserved by oldshen

Branding

Go-Bahasa

is an Indonesian language learning platform specifically designed for expatriates and foreign learners living in Indonesia

Year :

2025

Project Duration :

4 weeks

Featured Project Cover Image

Project Goals


- Provide a user-friendly Indonesian language learning platform for expatriates

- Teach practical phrases for everyday situations (greetings, food ordering, transportation, etc.)

- Provide Indonesian cultural insights through the Culture feature

- Test user comprehension through interactive Quizzes

- Build a learner community with Dashboard progress tracking

Project Content Image - 1

Tech Stack


| **Framework** | Next.js 16.1.6 |

| **React** | 19.2.3 |

| **Language** | TypeScript 5.x |

| **Styling** | Tailwind CSS 4, PostCSS |

| **UI Components** | Lucide React (Icons) |

| **Animation** | Framer Motion |

| **Utilities** | clsx, tailwind-merge |

| **Font** | Outfit (Google Fonts) |

Project Content Image - 2
Project Content Image - 3

Project Structure


GoBahasa/

├── public/                      # Static assets

├── src/

│   ├── app/                     # Next.js App Router

│   │   ├── layout.tsx           # Root layout with Navbar

│   │   ├── globals.css          # Global stylesheet

│   │   ├── page.tsx             # Landing page / Home

│   │   ├── culture/

│   │   │   └── page.tsx         # Culture page (Indonesian cultural info)

│   │   ├── dashboard/

│   │   │   └── page.tsx         # Dashboard (user progress tracking)

│   │   ├── lessons/

│   │   │   ├── page.tsx         # Lesson index (list all lessons)

│   │   │   └── [id]/

│   │   │       └── page.tsx     # Specific lesson detail page

│   │   ├── quiz/

│   │   │   └── page.tsx         # Quiz page

│   │   └── signin/

│   │       └── page.tsx         # Sign In page (authentication)

│   ├── components/

│   │   ├── layout/

│   │   │   ├── Navbar.tsx       # Navigation bar with mobile support

│   │   │   └── Hero.tsx         # Hero section on landing page

│   │   └── ui/                  # Reusable UI components (currently empty)

│   ├── hooks/                   # Custom React hooks (empty - for future development)

│   └── lib/

│       ├── lessons-data.ts      # Lessons database as object literal

│       └── utils.ts             # Utility functions

├── package.json                 # Project dependencies & scripts

├── next.config.ts              # Next.js configuration

├── tsconfig.json               # TypeScript configuration

├── tailwind.config.mjs          # Tailwind CSS configuration

├── postcss.config.mjs          # PostCSS configuration

├── eslint.config.mjs           # ESLint configuration

└── README.md                    # Original Next.js README

Design & Styling


 Using Tailwind CSS v4 for utility-first styling

- Custom CSS variables defined in `globals.css`

- Responsive design with breakpoints: sm, lg, xl


Future Development Ideas

### Short Term

- Implement database (Supabase/MongoDB) for persistent data

- Add user authentication (NextAuth.js/Auth0)

- Create interactive quiz engine

- Add audio pronunciation for lessons



### Medium Term

- User progress tracking & statistics

- Leaderboard system

- Social features (friend list, competition)

- Mobile app version



### Long Term

- AI-powered personalized learning paths

- Voice recognition for pronunciation practice

- Live instructor sessions

- Certification program

Project Content Image - 4

More Projects

Social :

© Copyright 2025. All Rights Reserved by oldshen

Create a free website with Framer, the website builder loved by startups, designers and agencies.