A multilingual Angular + Ruby on Rails app development project for SLPP. The front end website of the app is quite simple where users can sign up, log in and submit their ideas. The admin dashboard however is where the bulk of the dev work was dedicated to, as it had to support multiple user types and data entry for 80+ models.
The Angular front end was built using Angular Material, primarily to speed up dev time, but also because it looks good, especially when using a lot of web forms. Making the app multilingual was more challenging as data needed to be entered in Sinhala, English and Tamil. The solution to this was a custom material input using Google’s transliteration service which detected the app’s current locale and allows users to enter English characters that will be transliterated to the selected language.
For this Angular app development project, the back end API was built using Ruby on Rails which I’ve used in a few other projects (thanks Ruby syntactic sugar!). Using token based authentication gave better performance to ensure minimum lag on the frontend user interface.
The app is hosted on a simple AWS setup, with separate instances for frontend (Apache) and API (Nginx) servers.
Technologies
Angular 8, Angular Material, TypeScript, Ruby on Rails, MongoDB, AWS
Live site
Screenshots
Home page – English
![A Dialogue with the Village angular development project - English home page](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Home-Page-English-1024x569.png?_t=1569211176)
Home page – Sinhalese
![Sinhalese home page](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Home-Page-Sinhala-1024x569.png?_t=1569211197)
Home page – Tamil
![A Dialogue with the Village angular development project - Tamil home page](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Home-Page-Tamil-1024x569.png?_t=1569211206)
Material transliteration input with custom transliteration service
![Material transliteration input with custom transliteration service](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Idea-entry-with-transliteration-1024x605.png?_t=1569211258)
User profile
![A Dialogue with the Village angular development project - User profile](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Your-Profile-1024x704.png?_t=1569211373)
Welcome email
![Welcome email](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Welcome-Email.png)
Login page
![A Dialogue with the Village angular development project - Login page](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Login-Page-1024x640.png?_t=1571230357)
Register page
![Register page](https://www.jeromez.com/wp-content/uploads/Gama-Samaga-Register-Page-1024x640.png?_t=1569211436)
Leave a Reply