Skip to content

Replay allows its users to search for content using the Google Youtube API and add that content to individual playlists.

Notifications You must be signed in to change notification settings

DoubleLForce5/Replay

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project 3 - Replay

License: ISC

Table of Contents

  1. Description
  2. Criteria
  3. Wireframe
  4. User Flow Diagram
  5. User Story
  6. Elevator Pitch
  7. APIs and Technologies Used
  8. Installation
  9. Usage
  10. Contributing
  11. Issues
  12. Credits
  13. License
  14. Questions

Description

This is our final project, and we did our best to bring together everything we have learned over the course.

This application involves user authentication, MongoDB database storage including Model relationships, allows user interaction via CRUD operations, stores encrypted passwords, uses an external API, is made using ReactJS, utilizes a Node and Express server, hides sensitive API key information, and more.

We're very happy with what we managed to achieve with this app! There is still plenty of room for growth, but we achieved what we set out to accomplish and even some stretch goals.

Deployed website

View of homepage

Criteria

  • Must use ReactJS

  • Must use a Node and Express Web Server

  • Must use a backend by a MySQL or MongoDB Database with a Sequelize or Mongoose ORM

  • Must have both GET and POST routes for retrieving and adding new data

  • Must be deployed using Heroku (with Data)

  • Must utilize at least two libraries, packages, or technologies that we haven't discussed

  • Must allow for or involve the authentication of users in some way

  • Must have a polished frontend/UI

  • Must have folder structure that meets MVC Paradigm

  • Must meet good quality coding standards (indentation, scoping, naming)

  • Must not expose sensitive API key information on the server

Wireframe

Landing page

Wireframe - landing page

Login/Signup Page

Wireframe - login/signup page

Dashboard

Wireframe - dashboard

Search page

Wireframe - search page

UserFlowDiagram

UserFlowDiagram

UserStory

As a music enthusiast, I want to build playlists based my taste in music so that I can create a playlist for every occasion.

ElevatorPitch

This application is made for users to be able to create their own playlists with curated video choices from the youtube API to watch.

APIsAndTechnologies

These are the API's and technologies that we used that we have not discussed previously:

  • Youtube API
  • connect-mongo
  • googleapis
  • he
  • react-youtube

Installation

Files must be downloaded from Github. Then run npm install to get the necessary node modules. Lastly run npm start.

A ready version is also available at the deployed website.

Usage

With this application, a user can create custom playlists and view the videos in their playlists on the playlist page. They can search for videos on the search page. After done for the day, users can log out via the logout button in the navbar, or they will be logged out automatically after 12 hours.

Contributing

For contributions, please create a fork to work on then, when done, create a Pull Request.

Issues

Submit an Issue through Github for any bugs or problems.

Credits

Assignment was developed as part of the SMU Coding Bootcamp.

License

Copyright Ashley Wright, Amanda Rodriguez, and Olivia Lopez 2021

This is covered under the ISC license.

Questions

Feel free to contact through the following with any questions:

Ashley's Github: ashleyaggie

Amanda's Github: amandardz

Olivia's Github: DoubleLForce5

About

Replay allows its users to search for content using the Google Youtube API and add that content to individual playlists.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •