NihonTango

• 

  NihonTango Logo

• 

  NihonTango Mobile

• 

  NihonTango Desktop

Inspiration

Learning Japanese can be a challenging yet rewarding journey, especially when it comes to mastering vocabulary and pronunciation. The inspiration for NihonTango stemmed from the desire to create an intuitive, effective, and enjoyable platform that addresses common hurdles faced by Japanese language learners. We aimed to build a tool that leverages modern web technologies to provide a seamless learning experience, focusing on active recall and accurate pronunciation to foster genuine fluency.

What it does

NihonTango is an interactive web application designed to help users master Japanese vocabulary through a dynamic flashcard system. It offers a comprehensive collection of words categorized by JLPT levels (N5 to N1) and practical situations (e.g., restaurant, travel, school, company). Key features include native audio pronunciation for every word, a swipe-based interface for engaging learning, and robust progress tracking that identifies words needing review. The platform provides a free tier for foundational vocabulary and a premium subscription to unlock all advanced content and features.

How I built it

The application was built using a modern web development stack to ensure a fast, responsive, and scalable experience. The frontend is powered by React, providing a component-based architecture for a modular and maintainable UI, with Vite for a rapid development environment. Tailwind CSS was utilized for efficient and highly customizable styling, enabling a clean and intuitive design. For icons, Lucide React was integrated. The backend infrastructure relies on Supabase, serving as a comprehensive backend-as-a-service solution for user authentication, database management (PostgreSQL), and serverless functions. Stripe was integrated for secure payment processing and subscription management, with its webhooks handled by Supabase Edge Functions to ensure real-time synchronization of subscription statuses.

Challenges I ran into

Developing NihonTango presented several interesting challenges. A significant one was implementing a robust and secure authentication flow with Supabase, particularly handling various OAuth providers like Google and ensuring smooth redirect experiences across different deployment environments. Integrating Stripe for subscriptions required careful attention to detail, from setting up checkout sessions to processing webhooks and maintaining data consistency between Stripe and the Supabase database. Additionally, optimizing the performance of the flashcard system, especially with real-time audio playback and smooth swipe animations, demanded careful state management and UI rendering considerations.

Accomplishments that I'm proud of

I am particularly proud of the seamless and intuitive user experience achieved in NihonTango, especially the engaging swipe-based flashcard interface with integrated native audio. The robust integration with Supabase for authentication and data management, coupled with a fully functional Stripe subscription system, demonstrates a production-ready application architecture. Successfully implementing comprehensive vocabulary categories, including all JLPT levels, and providing detailed progress tracking are also significant accomplishments that enhance the learning journey for users.

What I learned

Building NihonTango provided invaluable learning experiences across various domains. I gained a deeper understanding of advanced React concepts, including efficient state management and performance optimization techniques. The project offered hands-on experience with Supabase, from setting up database schemas and Row Level Security (RLS) to deploying and managing Edge Functions for backend logic. I also acquired practical knowledge in integrating third-party payment gateways like Stripe, including handling webhooks and managing customer subscriptions securely. Furthermore, the process reinforced best practices in responsive web design with Tailwind CSS and debugging complex full-stack applications.

What's next for NihonTango

The future of NihonTango holds exciting possibilities. The immediate next steps include implementing a more sophisticated spaced repetition algorithm (e.g., an SM-2 variant) to further optimize vocabulary retention. We plan to expand the content library with more specialized vocabulary sets and potentially introduce grammar lessons and Kanji practice. Enhancing user analytics and personalization features to provide more tailored learning paths is also a priority. Looking ahead, exploring gamification elements, developing native mobile applications, and fostering a community aspect for learners could significantly enrich the NihonTango experience.

Built With

• entri
• google-cloud
• netlify
• react
• stripe
• supabase
• tailwind-css
• typescript
• vite