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

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

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

More Projects
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

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

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

More Projects
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

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

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






