VOCAB

VOCAB is a full-stack language learning application that enables users to look up and record new words 43% faster, making the learning process 1.77 times quicker. It offers multiple dashboards for organizing words related to specific topics and interactive features for practice and memorization.

Features

• Create account
• Log in,Log out
• Create dashboards and select language of dashboard
• Edit dashboard title and language
• Delete dashboard
• Add word to selected dashboard
• Delete word from dashboard
• Daily reminder to practice vocabulary on the email
• Practice words with flashcards from the selected dashboard
• Game “Guess the word” to practice words from certain dashboard and to guess random word by provided definition

Tech Stack

• Python
• Flask
• HTML
• CSS
• Jinja
• Javascript
• ReactJS
• PostgreSQL
• SQLAlchemy

API:

• https://dictionaryapi.dev/
• https://dictionaryapi.com/products/api-spanish-dictionary

How to use the app:

1. Create account or log in
2. Create dashboard
3. Navigate to selected dashboard
4. Add words to dashboard
5. Practice words with flashcards
6. Practice words with game “Guess the word”
7. Set up daily reminder to your email to practise vocabulary

Application Demonstration:

This section provides a visual walkthrough of the application's core features and functionalities. Here's what you can expect once you start using the app:

When a user visits the website, they can create an account, log in, and start creating their own dashboards.

After they have access to all the dashboards associated with their account and can edit dashboard details, such as the name and language.

Furthermore, users can navigate to a specific dashboard and begin adding words to it. To assist in this process, there is a special "generate functionality" that provides word definitions and audio pronunciations. "generate functionality" supports two languages right now: English and Spanish.

In addition, the app offers a "flashcard functionality" that allows users to keep learning words in an interactive manner. They can also enjoy a "Guess the word" game, which challenges them to identify random words from the selected dashboard. Both of these features are rendered using React, enhancing the user experience.

Users can navigate to the "Profile" page, where they have the option to set up a daily reminder to practice.

If they choose this option, an automated email will be sent to them every day, reminding them to log in to "Vocab" and practice.

How to Set Up and Run the Project

1. Start by cloning the repository to your local machine:

   git clone https://github.com/trushmi/vocab.git
   cd your-project-directory-name
   

2. Setup the virtual environment:

   Create a virtual environment to manage your project's dependencies separately:

   virtualenv env
   

3. Activate virtual environment

   source env/bin/activate
   

4. Install all requirements

   Install the project requirements:

   pip3 install -r requirements.txt
   

5. Configure Environment Variables

   Create a secrets.sh file in your project directory to store sensitive information

6. Edit secrets.sh to include the following environment variables:

   export PASSWORD="your_password_to_gmail_here"
   export EMAIL=”your_email_to_send_reminders_to_user_here”
   export SPANISHAPIKEY=”your_API_KEY_to_generate_meaning_in_spanish_here”
   

7. Load the environment variables:

   source secrets.sh
   

8. Set up the database:

createdb "name_of_database"

If the database is created successfully, you should see the following message in your terminal: "You are connected to the database.

9. Set up the database tables:

python3 model.py

10. Run the Application

    Now, start the server:

    python3 server.py
    

11. Access the App

    Open your web browser and navigate to the following address to access the app:

    http://localhost:5000/
    

You should now see the application running. If you encounter any issues, please check that all previous steps have been followed correctly.

Demo

Click here to view the demo video

Author

Iryna Trush, Software engineer with a strong background in communications. Gained a solid foundation in full-stack web development, data structures, and algorithms during studies at Hackbright Academy. Leverages a unique background in communications to create user-centric digital solutions. Passionate about blending technical knowledge with storytelling to drive engagement and user experience

LinkedIn, email;