• Production: N/A (for now)
• Staging: N/A

Matthew Palmer

DreamStream is a video streaming application. It is a passion project for fun and with the ultimate goal of upgrading my knowledge around video streaming, user accounts, cookies, security and more.

• To learn about video streaming.
• To establish a stable stream from server to client
• Implement full tests

• #1 - The first challenge I encountered was with the initial signup form. The problem came to be when it was time to make my landing page responsive. I realized that I didn't structure the form well enough for this task, so I solved it by refactoring style properties until the intended behavior was achieved.

• #2 - I have worked with JWT tokens and password encryption before in Ruby on Rails and Spring Boot, but the approach is slightly different in JavaScript-based APIs. Learning how best to compare passwords with a schema that hides a password from being selected in a query was interesting. This issue was solved with research and review.

• #3 - On the front-end, I needed to establish a login form with validations and needed to check for buggy behavior. Unfortunately, I spend a good amount of time working through this and didn't give myself a break for about 4 hours. This lead to burnout. I learned that even with tasks I've accomplished before, sometimes taking a step away is required to return with a clear mind. This was also a great way to learn more about cookies instead of using unsecure methods like localStorage. I made it through this challenge by slowing down, taking a break, and thinking more carefully about the way logic flows.

• #4 - Some routes needed to be gated if a user was not signed in. I had a couple issues with this. To begin with, I needed a high quality way to notify a user when they have tried to access a route restricted to signed-in users only. If this wasn't a challenge by itself, I needed to establish a way for user information to update before a redirect (e.g. User signs in => then gets directed to the /films page). Otherwise, a user signs in, gets redirected to a gated route, and then gets redirected again to /login because the cookies didn't update fast enough. This was mostly my fault because I'm silly and was not calling the history hook inside of useEffect(). Once I changed this, necessary information had time to become available before other conditionals were run. As for notifying users, I used a nice dependency called react-toastify. I established the <ToastContainer /> at the App root outside of routes so that it is available for use no matter where a user is. toast can be used in one component and show up in another! You can see how this works when you're not signed in and attempt to access a protected route.

• Video Streaming
• Front-end (React)
• Back-end (Express/Mongo DB Cloud)

• MongoDB
• React.js
• Express
• Node.js
• JavaScript
• SCSS/CSS
• HTML

TBA

To get the site running locally:

• Clone this repo
• cd into dream-stream-server
• Run npm install to ensure the dependencies are installed
• Run npm start to run the application in a production environment
• Copy the localhost URL. You will need it in the client.
• In your terminal, type cd ../dream-stream-client/dream-stream-client/dream-stream
• touch .env
• inside of your .env file, type REACT_APP_API_URL=<YOUR_SERVER_URL_HERE>
• Start application => npm start

Note: You may find trouble using this project if you don't have the back-end running locally on your machine. The database attached in the cloud is not configured to allow your connection locally, so you will need to create your own MongoDB database.

• npm run - Runs the environment on your system

TBA

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

If you are having an issue with the existing project code, please submit a bug report under the following guidelines: -Check first to see if your issue has already been reported. -Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository. -Create a live example of the problem. -Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.

I would love to hear from you about new features which would improve this app and further the aims of my project. Please provide as much detail and information as possible to show me why you think your new feature should be implemented.

If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.

Pull Request Guidelines

• Ensure any install or build dependencies are removed before the end of the layer when doing a build.
• Ensure that your code conforms to our existing code conventions and test coverage.
• Include the relevant issue number, if applicable.
• You may merge the Pull Request in once you have the sign-off of the developer(s).