Skip to content
Parrot- A full-stack web application built in 4 weeks at Hackbright Academy.
HTML Python JavaScript CSS
Branch: master
Clone or download
Latest commit 3255957 Mar 17, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
seed_data
static
templates
.gitignore
README.md
model.py Edits to h homepage Sep 19, 2016
requirements.txt
seed.py
send_sms.py
server.py Edits to h homepage Sep 19, 2016

README.md

Parrot

A full-stack web application built in 4 weeks as Hackbright Fellowship final project.

Parrot Mainpage Screenshot

Description

Parrot is an interactive learning tool that makes learning Spanish as a second language easy, fun and social.

Intended for users who have achieved minimum professional language proficiency, Parrot allows users to translate phrases in an article when they get stuck. Users can register, save article preferences and select articles to read. Phrases can be selected and Parrot will show a translation right above the selection! It is user-friendly and intuitive. Users can make comments and respond to comments from other users. The 'Parrot feature' allows the user to send a phrase and its translation to their mobile device for on the go review. Translated phrases are also added to a Vocabulary List that are accessible within the app.

Table of Contents

Technologies Used

APIs used

  • Google Translate API
  • Twilio API

Features

Users can create an account and log into their account. Parrot Login page Screenshot

Once logged in, users are presented with three articles from each of their category preferences. Parrot Profile page Screenshot

When the user clicks "Parrot," they are directed to a page displaying the article. As the user is reading, if they get stuck, they can highlight a phrase and a popover will display containing three buttons:

Translation Button Screenshot

Translate

If the user clicks the "Translate" Button, a call is made to Google Translate API and the translation is displayed in the popover. The phrase and translation are also stored in the database. Translation Popover Screenshot

Comment

If the user finds a phrase that might be an idiom or perhaps a phrase that might require additional context, they could chose to click the "Comment" Button. Comment Button Screenshot

A comment window will display in-line with the selection. Comment Window Screenshot

When the user makes a comment, a grey rectangle will appear over the phrase that has an attached comment. The user can click the words inside of the grey rectangle to view the comments which are viewable to other users who read the same article. Grey Rectangle Screenshot Comment Link Screenshot

The user can even see older comments made by other users and comment back to them. Article Comments Screenshot

Send SMS Message

If the user is reading and wants to remember the new phrase they have learned and study on-the-go, they can send a text message to their mobile device containing the origin phrase and its translation. Twilio Button Screenshot Twilio Message Screenshot

Design

  • Design elements implemented using Bootstrap, HTML5 and CSS3.
  • All logo design done by the author using Adobe Illustrator.
  • Photograph taken by author.
  • Bold typeface chosen for article titles to draw attention to strong headlines.
  • Serif typeface for article body chosen to mimic the look of a physical newspaper.
  • Use of various shades of white to create a clean and crisp look and maintain focus on learning while reading.

Project Next Steps

  • Offer Parrot in other languages.
  • Allow the user to chose their news source.
  • Allow for live rss feed.
  • Schedule SMS messenger to send quiz questions to check if the user remembers meaning of words they have looked up.
  • Recommend articles to the user.
  • Recommend commonly translated words for the user to read over before reading the article.

Installation Instructions

Parrot has not yet been deployed, to run the app locally on your machine follow these instructions:

  • You must have the following programs already installed on your machine:

  • Create and activate a virtual environment inside your project directory:

$ virtualenv env
$ source env/bin/activate
  • Clone the directory and install all dependencies:
(env)$ git clone https://github.com/khardsonhurley/Hackbright-Project.git
  • Install the requirements:
(env)$ pip install -r requirements.txt
  • Create a new postgreSQL database:
(env)$ createdb parrot
  • Exit the PostgreSQL server (ctrl+d), open the model.py in interactive mode, and create the tables in your database:
(env)$ python -i model.py
>>> db.create_all()
  • Exit interactive mode (ctrl+d). Seed the database with article and dummy user data. This will take some time.
(env)$ python seed.py
  • Create a secrets.sh file.
(env)$ touch secrets.sh YOUR_DIRECTORY_NAME_HERE
export GOOGLE_TRANSLATE_KEY="REPLACE_WITH_YOUR_KEY"  
export TWILIO_SECRET_KEY="REPLACE_WITH_YOUR_KEY"  
  • Source the variables to your virtual environment.
(env)$ source secrets.sh
  • Start up the flask server.
(env)$ python server.py

About the Author

Krishelle graduated Summa Cum Laude from the University of San Diego with a dual major in Mathematics and Spanish and a Teaching Credential. Prior to Hackbright, she taught High School Math and Spanish, while she pursued a Masters Degree focused on Math and Technology Education. After teaching for six years, Krishelle discovered her passion for designing tools that make processes more efficient. She realized that software engineering would be the perfect opportunity to combine this passion with her love for problem solving. Krishelle's love for learning and making an impact run strong, and she is excited to contribute her creativity to a full-stack software development role. Learn more about Krishelle here.

You can’t perform that action at this time.