---
# System prepended metadata

title: 'Milestone 4: Hi-Fi Prototype'

---

# Milestone 4: Hi-Fi Prototype


![image alt](https://i.imgur.com/uB9IpkE.png)

## 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 ![](https://i.imgur.com/Sc4Hghd.jpg =430x200)
2. Log in ![](https://i.imgur.com/TW9u3yO.jpg =430x200)
3. Click on Browse. You'll see a list of word sets. ![](https://i.imgur.com/dMLiQ02.jpg =400x150)
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) ![](https://i.imgur.com/9uoOzh8.jpg =300x200)
6. Write a candidate sentence to continue the story ![](https://i.imgur.com/ZqkhKPy.jpg =300x150)
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 ![](https://i.imgur.com/HK72tN7.jpg)
* 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**)
        - 
        ![image alt](https://i.imgur.com/U5Qdla1.png)
        ![image alt](https://i.imgur.com/FChKfYo.png)
        

        
- 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**

    ![image](https://i.imgur.com/atdHAQW.jpg)

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