https://github.com/trushmi/vocab
đź“š Full-stack dictionary web-app with auto word lookup, interactive learning games, and email notifications
https://github.com/trushmi/vocab
api flask javascript postgresql python react sqlalchemy
Last synced: 5 months ago
JSON representation
đź“š Full-stack dictionary web-app with auto word lookup, interactive learning games, and email notifications
- Host: GitHub
- URL: https://github.com/trushmi/vocab
- Owner: trushmi
- Created: 2023-06-14T01:25:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-05T00:52:37.000Z (over 1 year ago)
- Last Synced: 2024-12-05T01:31:21.536Z (over 1 year ago)
- Topics: api, flask, javascript, postgresql, python, react, sqlalchemy
- Language: Python
- Homepage:
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# In this ReadMe:
- [About this project](#about-this-project)
- [Tech stack](#tech-stack)
- [Features](#features)
- [Code samples](#code-samples)
- [How to use the app](#how-to-use-the-app)
- [How to run the app](#how-to-run-the-app)
# 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.
# Tech Stack
### Frontend:
- HTML
- CSS
- JavaScript
- ReactJS
### Backend:
- Python
- Flask
- Jinja
- SQLAlchemy
### Database:
- PostgreSQL
### API:
- [Free Dictionary API](https://dictionaryapi.dev/)
- [Merriam-Webster Spanish Dictionary API](https://dictionaryapi.com/products/api-spanish-dictionary)
# 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:
- [Database model](https://github.com/trushmi/vocab/blob/main/model.py)
- [Python code](https://github.com/trushmi/vocab/blob/main/server.py)
- [JavaScript code](https://github.com/trushmi/vocab/blob/main/static/js/dashboard.js)
- [CSS file](https://github.com/trushmi/vocab/blob/main/static/css/flashcards.css)
- [Tests](https://github.com/trushmi/vocab/blob/main/test_server.py)
# How to use the app
### 1. Create an account or log in
- On the sign-in page, enter your 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.
### 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.
### 4. Practice words with flashcards
- Use the flashcards feature to reinforce your vocabulary.
### 5. Play the “Guess the Word” game
- Test your knowledge with the "Guess the word" game.
### 6. Set up daily email reminders to practice
- Navigate to your profile page to configure daily email reminders for practicing vocabulary.
# 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](https://dictionaryapi.com/products/api-spanish-dictionary) 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.
_________________
See my another [project](https://github.com/trushmi/tv-shows-time) to check how much time you have spent watching TV shows.