Audio Player Application with React.js + AWS Amplify

Audio Player Application with React.js + AWS Amplify

AWS Amplify?

AWS Amplify provides a complete solution that lets frontend web and mobile developers easily build, ship, and host full-stack applications on AWS, with the flexibility to leverage the breadth of AWS services as use cases evolve. The Amplify Console provides a continuous delivery and hosting service for web applications.

Idea behind the Project

This is my First Participation in any kind of Hackathon. So, I picked up a beginner level's project that would be easy to start with and can also showcase my current understanding and learning around AWS Amplify and building React.js Application.

About Project

This Audio Player Application uses Email ID Authentication to Sign up new Users. To login into the application you need to provide your username and password which you created during Sign up. Authenticated Users then can upload/Save their favorite Audio Files(.mp3 files only). Users can also view and play their uploaded music files.

Technologies Used

-Here I am listing all the Frameworks , Languages , Tools , AWS Services , Libraries that were used in this project

           1. Languages -
                  - HTML
                  - CSS
                  - JavaScript

           2. Frameworks -
                   - React.js

           3. Tools -
                   - Amplify CLI
                   - Git
                   - GitHub
                   -Visual Studio Code
                    -npm

           4. Libraries -
                     - aws-amplify
                     - aws-amplify/ui-react

           5. AWS Services -
                      - AWS S3
                      - AWS Cognito
                      - AWS IAM
                      - AWS Amplify Studio

Project Images

1. Authentication Page

SignIn.png

SignUp.jpg

2. Home Page / Add Song Page

ProjectImage.png

ProjectImage2.png

Demo of the Project

https://www.youtube.com/watch?v=H601_0oEh7A

Resources Used

https://www.youtube.com/watch?v=6W2TuBDaaiI

https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/

https://ui.docs.amplify.aws/react

Conclusion

An Audio Player Application that's let's you upload and play your Audio(.mp3) files

Thanks for reading the article.

Participate in AWS-AMPLIFY-HACKATHON to get a chance to win exciting prizes.