Giter Club home page Giter Club logo

anki_sound_frontend's Introduction

README

  • This app is the frontend and user interface for anki_sound_backend (https://github.com/bretfunk/anki_sound_backend). AnkiSound allows users to covert text to audio files and download them in one of 20+ languages. A user can then use these files in Space Repetition Systems (SRS) like Anki. The frontend works by itself to download audio files without accessing the backend. To save phrases to a user profile, the backend applciation is needed.
  • The frontend is written in React.js, Redux and Javascript and the backend is written in Ruby and Rails and AWS. Stying is done with bootstrap. B
  • This app uses AWS API Gateway, Lambda, and S3. The lambda code can be found here: https://github.com/bretfunk/anki_sound_lambda
  • You can see a live version of this program at: https://bretfunk.github.io/anki_sound_frontend/
  • A basic walkthrough can be found here: https://youtu.be/3ly823FDBK0

React version

Deployment instructions

  1. Clone down the repo using the command below in your terminal:
  1. Change directory into the anki_sound_frontend directory
  • $ cd anki_sound_frontend
  1. Run npm install to install dependencies
  • $ npm install
  1. To run locally, run npm start
  • $ npm start
  1. This app is currently hardcoded to work with the static heroku URI that is live. To change, change the .url.js file. You will also need to add the new address to the backend's cors.rb initialize file if using anywhere other than localhost:3000.

Accessiblity

  1. This application was built with accessiblity in mind.
  2. Contrasting colors and reliance on buttons were used to make this application accessiable.
  3. A future accessiblity feature will be the ability to listen to files without downloading them, providing the audio in a lot fewer steps.
  4. If there is a feature you would like to request, email the application creator at [email protected]

Bugs

If you notice any bugs please add a PR or email the application creator directly at [email protected]

Troubleshooting

Reread the instructions to make sure you didn't miss anything. Most of the issues revolve around CORS so troubleshoot using the inspector on your browser of choice. If you are recieving CORS issues, double check that the backend application has your frontend URI on the list of acceptable origins.

If you are having issues logging in then the user might not be in the database. Check inspector tools to ensure the request coming back from the server is acceptable.

If the file you wish to download cases the application to crash, this is a download bug that is currently being investigated. We are in the process of changing how our backend downloads files to make it more reliable.

Upcoming Features

-Once a user is created they are automatically logged-in -Users can play files from profile

To request a feature, email the application creator directly at [email protected]

anki_sound_frontend's People

Contributors

bretfunk avatar renovate-bot avatar

Stargazers

 avatar

Watchers

 avatar  avatar

anki_sound_frontend's Issues

question marks (and probably similar non letters) throw off the download

Phrases download correctly into AWS, just not accessing via the download button, the user receives a XLM error. I think AWS changes the filename, maybe.

This is the correct AWS link for: ¿Cuándo_va_a_venir?
http://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-747213477632/es/%C2%BFCu%C3%A1ndo_va_a_venir?

I have it incorrectly going to:
http://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-747213477632/es/¿Cuándo_va_a_venir?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.