Voclex

Table of Contents

About The Project
- Current State Of The Application
- Technical Details
  - List Of The Technologies Used
Getting Started
- Quickstart With Docker
- Debugging With Visual Studio
Contributing
License
Contact

About The Project

(Combined from the first syllables of Vocabulary and Lexicon.)

Voclex is a tool for learning vocabulary with spaced-based repetition flashcards.

Main goal: a tool to maximize efficiency of the process of learning new words by automating time-consuming routines such as searching in dictionaries, looking for pictures and pasting them in your app of choice (or even writing down by hand on a piece of paper), etc. The focus of an application should also be not only automating all of the possible routines, but using the most efficient techniques for learning and memorizing new words, such as spaced repetition flashcards with:

• audio pronunciation of the word (or a phrase)

• word spelling in the targeted language and in IPA

• picture or a gif that can be described by the term

• usage examples

• definition in the targeted language

• translation to the native language.

(back to top)

Current State Of The Application

The project is still in active development and currently is just a simplest possible form of a flashcard application. Features intended to achieve the aforementioned goal will be added soon, as well as many others (authentication, authorization, different storage options to mention a few).

Also, the look of the application is very basic as I'm not a designer and my CSS and Bootstrap skills are very limited, but this will be improved in the future as well. :)

(back to top)

Technical Details

The main programming language used in the application is C#, but there are also some JavaScript libraries.

The project consists of 4 major parts:

• A Web API backend server written in ASP.NET Core. It stores information in an SQL database with the help of Entity Framework Core ORM.

• A Razor Class Library with pages written in Blazor, using HTML, CSS, Bootstrap for markup. It retrieves the necessary data from the Web API server.

• A Blazor WebAssembly project that uses the Razor Class Library to create a WebAssembly frontend application that a user can access with a browser.

• A .Net MAUI project that uses the Razor Class Library to create a Mobile (both iOS and Android) and a Desktop standalone application, that a user can install on their device.

With this architecture we are able to create a cross-platform application that shares most of its codebase across all platforms, thus greatly reducing our efforts to create and maintain it.

_{This is not a comprehensive list of the actual .csproj projects, it's just those logical parts that I wanted to be highlighted here.}

List Of The Technologies Used

C#, ASP.NET Core, SQL, Entity Framework Core, Blazor, .NET MAUI, HTML, CSS

(back to top)

Getting Started

All of the instructions below assume that you have cloned this repository onto your machine. Additionally, for all of the instructions except for Debug With Multiple Startup Projects, you will need to have a Docker Desktop instance installed and running.

Quickstart With Docker

Navigate to Voclex folder inside the root of the repository.
Execute docker-compose up inside this folder.

This will run the Web API on http://localhost:61072/ and the Blazor WebAssembly Client on http://localhost:5181/.

Type http://localhost:5181/ in your browser to access the application UI.

(back to top)

Debugging With Visual Studio

To debug the application with Visual Studio you have 3 options.

Debug With Multiple Startup Projects

Open Voclex.sln in Visual Studio.
Select both the BlazorWebAssembly and the WebApi projects as a startup projects using the multiple startup projects feature.
Press Start Debugging (F5 on Windows by default).

Debug The Client Application

Navigate to Voclex folder inside the root of the repository.
Run docker build -t voclexwebapi -f ".\WebApi\Dockerfile" ..
Run docker run -p "61072:80" -e ASPNETCORE_ENVIRONMENT=Development voclexwebapi. This will run the Web API on http://localhost:61072/.
Open Voclex.sln in Visual Studio.
Select the BlazorWebAssemblyClient project as a startup project.
Press Start Debugging.
Go to http://localhost:61072/

Debug The Web API

Open Voclex.sln in Visual Studio.
Select the WebApi project as a startup project.
Press Start Debugging (F5 on Windows by default).
Go to http://localhost:61072/swagger.

Alternatively, you can do some requests from the client application and debug their effects on the Web API.

Run docker build -t voclexblazorclient -f ".\BlazorWebAssemblyClient\Dockerfile" .
Run docker run -p "5181:80" voclexblazorclient.
Go to http://localhost:5181/.

(back to top)

Contributing

For now I'm the only author, but contributors are always welcomed and appretiated!

If you have a suggestion that would make this better, please fork the repo and create a pull request. You might want to discuss what you want to do with me before writing any code (see the contacts below). You can also simply open an issue with the tag "enhancement".

(back to top)