# Milestone 4: Hi-Fi Prototype


## Project Summary (maximum three sentences):

- the problem you're addressing,
- what your solution is,
- what unique approach you're taking in your solution (how it's different from other similar solutions). This summary will be used as a blurb on the project gallery.

* People struggle to memorise words for exams. Our solution is a website where users write a story with other people that incorporates the words they want to learn. Current memorisation websites like memrise/duolingo do not use storytelling or collaboration or collaborative storytelling.

## Instruction:
Give a quick tour of the interface, and also show off some of the highlights of the interface. Note that this should not cover all features you have; focus on the most exciting and important parts. Use screenshots and callouts.

1. Sign up for an account 
2. Log in 
3. Click on Browse. You'll see a list of word sets. 
4. Click on a wordset you want to memorise (for now, click TOEFL Set 1)
5. You'll see a list of stories for that wordset. (click on contribute to writer's mode for the story named Funny Story 1) 
6. Write a candidate sentence to continue the story 
7. Click browse. Click on the wordset again. Click on the same story. Click on contribute in reader's mode (vote for a candidate sentence)
8. After a minute, the candidate with the most votes will be added to the story.
9. Repeat steps 3-8 to write a sentence, then vote.
10. Click Browse. Select GRE Set 1. Click Read/Review for the story named Superstar Frog. Fill in the review 
* You can star a story or wordset to save it in starred
* You can click on a word in a wordset to get its definition
* My page lists the wordsets you made and the stories you contributed to
* For now, creating a story or marking one as finished can only be done from the admin page

## URL of your prototype: http://143.248.134.74:6123/
A live version of the prototype for evalation. Note: the URL must work at least until your assignment is graded. Course staff will run your prototype to do a heuristic evaluation for grading. If the link doesn't work, your team will be penalized. If there are specific requirements (e.g., browser or device settings), include them as well.

## URL of your Git repository: https://github.com/myaldiz/vocastory
Make sure to add a README file that briefly describes the code, e.g., main JavaScript file, or where main feature implementations are, etc. Several lines are enough.

## Libraries and frameworks:
- Bootstrap & JQuery
- Django

## Individual Reflections:
Each member should write this part on their own, reflecting on their own experience. Merge all members' mini-reports in the final report. Answer the following questions:
- Which part of the system did you directly contribute to?
- What were some of the difficulties you faced?
- List one useful skill you learned while working on the high-fi prototype.

<b>Mustafa</b>
- I was responsible with developing backend using Django and providing database model interfaces that are used in the system. I directly made features to prevent malicious interactions. I added some NLP libraries to support features like dictionary.
- I struggled mostly merging the user interface with the backend.
- I have learned that either backend or frontend should start working first. And one side always stick with the other. We had quite difficulty on merging.

<b>Timothy</b>
- I was also responsible for the backend. I developed the reader's mode. I developed the rating feature in review mode as well as a now defunct feature for detailed reports of a story with checkboxes. I also added the feature where the candidate with the most votes gets finalised after a preset time gap. I integrated the static UI for the menu bar at the top and the UI for the browse wordset page into Django with Mahmoud's assistance.
- I struggled to make use of the relations between different classes and different tables in the database whilst coding in python. I also struggled with integrating the static UI with the backend as it was not just a simple copy-paste. It would have been much easier if I was familiar with front-end as well. I also did not consider certain edge cases which Mustafa fortunately spotted and fixed.
- I developed a clearer understanding and first-hand experience with the process of integrating different components of the technology stack to make a website (the database, framework, scripting language, server, stylesheets, html).

<b>Mahmoud</b>
- contribution
- mock ui used in pitch
- modified mock ui used in prototype ( except review mode )
- boilerplate code for the website (theme,colors,logo,sidebar,topbar,etc )
- browse sets + writer mode webpage images below ( **to be integrated soon**)
-

- difficulties
- making a seamless User experience with social interaction in mind
- integrating the UI with django
- new skills
- designing with social interaction and anti soical behavior in mind

<b>Waleed</b>
- Contribution
- mock ui used in pitch
- modified mock ui used in "writers mode", home screen and review mode
- boilerplate code for the website (theme, colors and layout)
- review mode and writers mode **to be added soon**


- Difficulties
- understanding color theory
- Integrating UI with django
- New Skills
- Able to use django (color theory requires futher work)