Skip to content

Latest commit

 

History

History
150 lines (120 loc) · 5.84 KB

README.md

File metadata and controls

150 lines (120 loc) · 5.84 KB
Raw

In this ReadMe:

About this project

VOCAB is a language learning application that enables users to look up and record new words, making the learning process 1.77 times quicker. It supports two languages and offers multiple dashboards for organizing words related to specific topics.

App includes interactive features to help users practice and memorize new vocabulary. It also allows users to set up daily email reminders to practice. Screenshot of two pages of the app: sign in and dashboards page displayed on one slide

Tech Stack

Frontend:

  • HTML
  • CSS
  • JavaScript
  • ReactJS

Backend:

  • Python
  • Flask
  • Jinja
  • SQLAlchemy

Database:

  • PostgreSQL

API:

Features

  • User authentication
  • Daily reminders to practice
  • Flashcards
  • Support 2 languages: English and Spanish
  • Interactive game “Guess the word” by definition
  • Multiple dashboards to keep words organized
  • Generated definition and audio pronunciations for words

Code samples

See the following code samples from this project:

How to use the app:

1. Create an account or log in

  • On the sign-in page, enter your credentials to access the app.
The sign-in page where users enter their credentials to access the app.

2. Navigate to the dashboards page

  • Once logged in, go to the dashboards page.
  • Click on the option to create a new dashboard, specifying the title and language for your dashboard.
  • See your current list of dashboards.
The dashboards page displaying various categories of words organized by topic.

3. Navigate to the selected dashboard

  • Add words to your dashboard by typing the word in the corresponding field and pressing the "Generate Meaning" button to get the description and audio pronunciation of the word. Then, press the "Add" button to include it in your dashboard.
A selected dashboard with fields to search for a word, its meaning, and a button to add the word. Below, a list of saved words is displayed with audio playback functionality.

4. Practice words with flashcards

  • Use the flashcards feature to reinforce your vocabulary.
Flashcards page.

5. Play the “Guess the Word” game

  • Test your knowledge with the "Guess the word" game.
Guess the word page.

6. Set up daily email reminders to practice

  • Navigate to your profile page to configure daily email reminders for practicing vocabulary.
Profile page where the user can toggle the button to set up or cancel a daily reminder to practice vocabulary. Screenshot of a Gmail inbox where messages to practice vocabulary are displayed

How to run the app:

Follow the next 12 steps to set up and run the app on your local machine:

Note

To use the Spanish language in this app, navigate to the Merriam-Webster Spanish Dictionary API and generate your API key.

  1. Clone the repository to your local machine:

    git clone https://github.com/trushmi/vocab.git

  2. Navigate to your project directory:

    cd your-project-directory-name

  3. Setup the virtual environment to manage your project's dependencies separately:

    virtualenv env

  4. Activate virtual environment:

    source env/bin/activate

  5. Install the project requirements:

    pip3 install -r requirements.txt

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

    touch secrets.sh

  7. Include the following environment variables into secrets.sh file:

    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”

  8. Load the environment variables:

    source secrets.sh

  9. Set up the database:

    createdb "name_of_database"

  10. Set up the database tables:

    python3 model.py

  11. Run the Application

    python3 server.py

  12. Open your web browser and navigate to the following address:

    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.