streamin-frontend

Overview

Streamin is a React-based social media app that allows users to post videos they find interesting with full CRUD capabilites. Meaning they can create, show, update, and delete the posts they make. All while being able to like the videos posted by themselves and other users, as well as comment on videos and like said comments.

Deployed App

Frontend
Backend

User Stories

  • As a user, I want to create an account
  • As a user, I want to sign in/out
  • As a user, I want to post a video
  • As a user, I want to edit a video post
  • As a user, I want to delete a video post
  • As a user, I want to like any video
  • As a user, I want to comment on any video
  • As a user, I want to delete comments I've made
  • As a user, I want to like a comment

Technologies Used

  • React - Front-end interface
  • Monogoose - Database
  • HTML - Basic webpage design
  • Javascript - Basic programming for front-end and back-end funtions
  • JSX - Used to display HTML compoents within our functions
  • Node.js - Used for development and local app deployment
  • CSS - Styling
  • Font Awesome - Additional styling
  • Heroku - Deployment

Approach

The methods taken were to get all routes working on the backend while doing preliminary work on the frontend. Once the backend routes were finished and working, we were able to full flesh out the front end with minimum changes needed to the backend. Different basic aspects of the front end were worked on first such as registration, signing in, and the user homepage. Then things like the search function, the about page, and each individual video's page were worked on. Near the end, adding the comments on each video and the related function were added, all while styling was applied to each part of the app as we progressed.

Contributors

Barnard Calma

Rousse Bidon

Jorge Gonzalez

Troubleshooting

Error: error:0308010C:digital envelope routines::unsupported

Go to your package.json file and replace "start": "react-scripts start", with "start": "react-scripts --openssl-legacy-provider start",

Issue: Failed to parse source map from "" error Fix: GENERATE_SOURCEMAP=false Notes: CRA with Webpack 5.x issue