The Language Hub

Table of Contents

• Introduction
• Activities
  • Designing the application
  • Prototyping
  • Deciding on tech stack
• Challenges & Solutions
  • Challenges
  • Proposed Solutions
• Lessons Learnt
• Conclusion

Introduction

The Language Hub is an online language reference book built to simplify the language learning process by having all the important information in one place.

• Went Live: February 23 2022
• Problem statement: Going through multiple books(textbooks and notebooks) whilst trying to find a specific piece of information relating to a language gets tedious. Moreso when the number of languages one learns grows.
• Goal: Have a central place where the important language information is kept and can be accessed easily and quickly.

Activities

• Designing the application
• Prototyping the interface
• Deciding on tech stack

Designing the application

Initial stages were spent in figma figuring out what would be the approach for the project.
In the end two main views were decided on:

• Home layout
• i=Individual language layout

Prototyping

This involved trying out different layout types in figma to get to ones that made sense for the task at hand

Deciding on tech stack

With the overall decisions out of the way, the next decision was the particular tech stack. I landed on:

• Next.js
• TailwindCss
• Markdown

Challenges & Solutions

With the planning done, next steps were not building it

Challenges

• How to render the sidebar on the individual language page
• How to render the dropdown on the navigation bar

Proposed Solutions

• use a ChakraUI component for the navigation dropdown.

Lessons Learnt

• markdown is hassle to work with in Nextjs
• with correct planning, a project goes much smoother
• my research and testing skills

---

Conclusion

The Language Hub has been instrumental and beneficial to my language learning and practice as I reenforce lessons whenever I update language data.