/soundbreak

Soundbreak | Epicodus capstone project

Primary LanguageJavaScript

Soundbreak

By Carlos Urquiza

Final capstone project for Epicodus.

Technologies Used

  • React
  • JavaScript
  • Spotify API
  • Bootstrap
  • Firebase
  • Cypress
  • CircleCI

Description

Soundbreak is a React application that allows a user to interact with a stopwatch feature which they can stop, resume, or reset as they please. The stopwatch feature is intended to help the user keep track of their time while studying, taking a break, or anything else they can think of. If the user completes the authentication process by clicking the Login to Soundbreak button, they will be able to listen to full length songs from a preselected Spotify playlist. The stopwatch and Spotify playlist functionality do not interact with each other. Each feature is part of an individual React component.

As part of the above React application, I implemented the use of Cypress.io. Cypress is a frontend test automation framework that allows developers to see, in an easy and automated way, that the frontend user experience they built is working as expected.

Finally, I implemented the use of CircleCI which triggers automated tests (including my Cypress tests) each time I make a commit to the main branch of this repository. The next part of this process, which I did not implement, would be to automate a new Firebase deployment each time a new CircleCI test runs and passes. Once this process is implemented, I will no longer have to manually run a new Firebase deployment via my terminal.

Soundbreak Demo

Watch the demo

Cypress Demo

Watch the demo

CircleCI Demo

Watch the demo

Setup/Installation Requirements

  • Clone this repository.
  • Open your terminal.
  • Navigate to the directory (such as your Desktop) where you want the cloned directory.
  • Type git clone and paste the URL you copied.
  • Press Enter.
  • Navigate to sounbreak by running cd sounbreak.
  • Run npm install.
  • Run npm run start to view project in local host.

Firebase URL

Run Cypress test

  • To run Cypress test, ensure you're currently in the main project directory, soundbreak
  • Run npm run cypress:open
  • When the Cypress test runner opens, click on the soundbreak_spec.js file. This will start the end to end test.

Known Bugs

  • No known bugs.

License

MIT License

Copyright (c) 2021 Carlos Urquiza

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact Information

Feel free to contact me at webquiza@gmail.com with any questions regarding this webpage.