FrenchVocabLearner-WebApp-Svelte:

Learn French vocabulary with this application! (NOTE: I have nowhere to securely deploy this app to, so the development build must be used at this time.)

1. App Features

This web app currently includes the following features to help you learn French vocabulary:

1. Account based authentication to save your progress
2. A database of over 118,000 words with definitions and parts of speech
3. A dictionary where you can query the database to see the above features for any word, and save it to your account
4. A learning mode where the application provides 10 random words from the database with definitions and parts of speech
5. Personalized quizzes based on words you've already encountered to enforce your knowledge
6. A progress page where you can see each word you've learned along with a rating to enforce how well you know each word

2. Technologies Used

1. Backend: Node.js (Express) + Typescript

I chose to use Typescript for this project since I've not used it before and wanted to see why it is so highly rated. From this point, Node.js and express seemed like a logical choice for the backend server.



2. Database: MySQL (MariaDB) + Sequelize Client

I considered using MongoDB for this project, but ultimately chose MariaDB due to my familiarity with table based schemas. Sequelize provided a great way to connect to my database and perform queries using Typescript, so it made sense to use as well. A copy of my database can be found at the root level of this repository in VocabLearnerFR.mysql, and the testing database is in Test_VocabLearnerFR.mysql at the same level.



3. Frontend: Svelte + Typescript

Svelte is a lightweight frontend framework that was brought to my attention at the start of July 2022, so I decided to try it out. I likely didn't use SvelteKit (the more "frameworky" set of tools offered) to the fullest extent, but Svelte was a pleasure to use and would strongly consider using it for future projects.



4. Sessions: Cookies + Redis

There are many ways to implement sessions, and I ultimately chose to use cookies since this project was initially intended to be hosted. I needed some way to save session data, and chose to use Redis since it was the most downloaded store option available and was highly rated.



5. Testing: Jest

To test the API, I use a test database and covered each function across the set of test suites provided. The alternative option would have been to mock the database and test it using these mock functions, but this process seems pointless to me and actually verifying the data is registered seemed like a better option.

3. Instructions

If you want to use the application, you're going to need:

1. Access to a MariaDB server
2. A Redis server to store session data
3. A way to run a node.js server
4. A way to run a vite server for Svelte

There is a lot of setup required, so I've added a short demonstration of the app's features at the end of this Readme if you want to see the features before using it.

1. Installations

Go to both /Server and /frontend and enter npm install (or yarn equivalent) in the terminal in each of those directories to install all of the required packages

2. Database

1. Create a MariaDB database using the mysqldump file /VocabLearnerFR.mysql on your MariaDB server
2. To connect a MariaDB database to the application, simply fill in the details in /server/.env for DB_USERNAME, DB_PASSWORD, and DB_NAME.
3. Do the same as step 1 with Test_VocabLearnerFR.mysql and step 2 with each of the TEST_DB fields in /server/.env using the details for the test database. Make sure this is separate from your usage database or the app will not work.

3. Redis

Make sure that a Redis server is running locally at port 6379 on your machine and it should be set up after performing all of the installations. If this doesn't seem to work, feel free to contact me and I can help troubleshoot the problem.

4. Node.js Server

Go to /Server and enter npm run start after installing dependencies.

5. Svelte Vite Server

Go to /frontend and enter npm run dev after installing dependencies. Follow the instructions prompted by the terminal to access the web interface.

6. Test Suite

Go to /Server and type in npm run test to execute the backend testing suite. Currently, all backend functionality is tested except the HTTP endpoints and adjacent content, like some middleware.

4. Coming Soon

There are some features I've worked toward visible in the source code, but are not available yet. They are:

1. Learning from curated lists of the top 200 most common French nouns, verbs, etc.
2. Taking quizzes on the content from bullet point 1.
3. Guarateeing that you are learning from a set of words you've not encountered before. This is currently very unlikely, but will be necessary for the content from bullet point 1.

5. Feature Demonstration Video

See a demonstration of all the features this app has to offer here.