The rise of virtual learning has changed our way of obtaining new knowledge but many roadblocks exist in the world of online education. Many good tutorials or online resources can be in a different language. Envoy is a website that helps people learn from online videos get access to content they may not be able to understand. You can get translated versions of the best tutorial videos and bridge the gap in virtual learning.
- Accessible website UI/UX to show translated and educational content
- Upload videos/documents to be translated
- Store previous content
- Provide user with subtitles or a version of the document in selected language (Start with English, Hindi, Mandarin, as well as some languages that are underrepresented.)
- Take English spoken video, provide Hindi or Mandarin subtitles and vice versa
- Take generated subtitles and use Text-to-Speech to completely translate a video
- Interactive elements to deepen learning
- Points for each user
- Dynamic fun fact word translation
- Create public library of all users uploaded content
- Create pre-curated categories of learning material
- Quizzes and small assignments
- Collaborative feature where people can make suggestions for errors in the translations
- Add portions of textbooks / other resources to make them more Accessible
| Week # | Deliverables |
|---|---|
| 1 (BN1) | Decide meeting dates, team responsibilities/setup, learn git, discuss MVP and project goals, Set-up IDE, download frontend and backend frameworks, watch tutorials for the techstack |
| 2 | Continue to watch tutorials, research implementation ideas Front-End: Brainstorming frontend design and wireframing Back-End: Setup Database and connect to app, learn Node.js, look into AWS/Python for translations. |
| 3 (BN2) | Front-End: Finish wireframes. Back-End: Work on uploading and storing videos/documents. Start translating a video. |
| 4 | Front-End: Begin to implement wireframes using React Back-End: Continue to work on uploading and storing. Work on getting translated subtitles. |
| 5 (BN3) | Front-End: Continue working on implementing pages Back-End: Combine uploaded video and translation service to provide content to user. |
| 6 | Front-End: Add accessibility features to the pages to make them user-friendly for all people. Back-End: Continue working on usability and implement multiple languages and translation options |
| 7 (BN4) | Start working on front-end and back-end integration. |
| 8 | Complete any remaining integration. Work on stretch goals. Start working on presentation slide deck. |
| 9 (BN5) | Finish slide deck and begin presentation prep. |
| 10 | Practice presentation and add finishing touches! |
-
Frontend:
- Figma/Adobe XD for wireframing
- React.js
- What is React
- Tons of javascript libraries that you can use for a variety of purposes, can have better performance since you can pick and choose what needs to be there for the application, widely used in the industry.
-
Backend:
-
General:
- ACM’s Advice for you to be successful in ACM Projects
- React Front-End Tutorial
- React Back-End REST API Tutorial
- Different Language Dictionaries
- Jaszmine DeFranco - Full-Stack
- Muaaz Abed - Full-Stack
- Harper Wood - Full-Stack
- Aditya Udyavar - Back-End
- Chelsea Chourp - Front-End
General Use
| Command | Description |
|---|---|
| cd "Envoy" | Change directories over to our repository |
| git branch | Lists branches for you |
| git branch "branch name" | Makes new branch |
| git checkout "branch name" | Switch to branch |
| git checkout -b "branch name" | Same as 2 previous commands together |
| git add . | Finds all changed files |
| git commit -m "Testing123" | Commit with message |
| git push origin "branch" | Push to branch |
| git pull origin "branch" | Pull updates from a specific branch |
Frontend:
git clone -> npm install -> cd frontend -> npm install -> npm start
Backend:
Refer to this setup document to set up the server.
Running the Full Application:
npm run dev