Phrasebook is a WIP Web Application that can assist users in learning a language. I created this when I started learning French, in order to have a neat, centralised place which I could store my vocabulary. It also allowed me to learn new approaches for implementing the backend of the system, instead of the typical PHP based applications I had learnt previously on my own and within university modules. There were no specific target users, but it can be used by anyone that wants to store vocabulary they learn during any kind of language study.
Written in JavaScript utilising NodeJS, this project draws upon many different technologies, from MongoDB as a backend store for the data (Users, Words, Categories and Languages) to Pug, a templating engine used in order to render the pages with filled in data from the database. This is rendered on the backend, and then the generated HTML is then sent as a response to the end user. The web server is built using Express v4, and structured using the MVC (Model-View-Controller) design pattern.
The main dashboard. Upon logging into the site, the users land here, and this displays their recently added words alongside their translations. The sidebar then gives access to the other parts of the site.
The categories list. In order for users to sort their phrases, they can create categories, to make the browsing and access of their phrases quicker. As shown below, a good use of categories is when languages, such as French, have different kinds of verbs (shown below as ER, RE and IR verbs).
List of words in a category. The user is able to view all words that they have assigned to this category, with the ability to add more through the button at the top, alongside pinning the category, to allow for quick access on the sidebar. The user can also search through their words, in order to quickly find the word they are looking for.
Support for multiple languages. Since not everyone just learns French, currently there is support for German, Spanish, Italian and Irish, with the ability for more to be added easily at a later date. Languages are kept separate from each other, so words and categories in separate languages cannot conflict with one another.
The login page. This is a basic page where the user can login to the system, or using the button in the top right, create an account in order to use Phrasebook.
- Add test functionality
- Allow for editing words
- Allow for editing user details
- ...
- Add email functionality
- Reimplement the sidebar design to look like this:
- Clone the repository
- Run
npm install- This will download all of the required dependencies - Run the application with
npm start