CringeX Social Media App

Live Demo: https://www.youtube.com/watch?v=i8NBy8mppDk&feature=youtu.be&ab_channel=PlatoIII

Server side repo: https://github.com/plaetzaw/CringeXServer

Overview:

We built a full-stack social media app. CringeX is a hybridized version of Reddit and Tik-Tok centered around cringeworthy content. We allow users to register with us. Then users are able to upload content that will then be displayed into the feed. We also have a page that displays all of the users submissions.

• Upvoting and Downvoting posts
• Commenting on other users posts
• Add a user to friend's list

The Team:

Jaye Jensen

Primary team role: Frontend; Styling and JSON Web Tokens

Alex Plaetzer

Primary team role: Frontend; Components and React/Redux Logic

Matt Ryan

Primary team role: Backend; Database and Routes

Technologies used in the project:

Languages:

• HTML5
• CSS3
• JavaScript
• React
• Redux
• Node
• Express
• ElephantSQL (Hosting)
• PostgresSQL
• API calls
• MaterialUI
• JSON Web Tokens
• Google Firebase

Base Objectives:

• Allow a user to register an account.
• Allow a user to upload content.
• Display a feed of all the content uploaded to the site.

Stretch Goals Achieved:

• Allow a user to view all of their posts on their profile page

Stretch Goals Future

• Upvoting and Downvoting posts
• Commenting on other users posts
• Add a user to friend's list

Challenges & Solutions:

Some of the biggest challenges we faced with this project build included:

Challenge: Uploading conent and then pulling it out of a database.
Solution: We used an ElephantSQL database to store user and post information and Google Firebase to store the image and it's pathway, we then used an API call to the server to retrive that information and render it on the page.

Code Snippets:

This is our logic for uploading to both firebase and our database at the same time.

 handleUpload = (event) => {
    event.preventDefault();
    console.log("handle upload button called");

    const { image } = this.state;
    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        console.log("Taking snapshot...");
        // progress function ...
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        this.setState({ progress });
      },
      (error) => {
        // Error function ...
        console.log(error);
      },
      () => {
        // complete function ...
        console.log("Saving to storage...");

        console.log(image);
        console.log(image.name);
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then((url) => {
            this.setState({ url: url });
            //make api call here to post information back to the server
            console.log("Posting to server...");
            console.log(this.state.url);
            let type = "";
            // let media = this.state.url.split(".");
            let firebaseURL = this.state.url;
            let splitURL = firebaseURL.split("?");
            let splitPeriod = splitURL[0];
            let media = splitPeriod.split(".");
            console.log("Testing split URL");
            console.log(splitPeriod);
            console.log(media);
            console.log(media[media.length - 1]);

            switch (media[media.length - 1]) {
              case "jpg" || "png" || "jpeg" || "gif":
                type = "image";
                break;
              case "mp4" || "mp5" || "flv" || "mpeg":
                type = "video";
                break;
              default:
                console.log("UNSUPPORTED FILE TYPE");
                break;
            }
            console.log(type);
            console.log(this.state.url);
            // console.log(this.state.caption);

            let apiPayload = {
              videoUrl: this.state.url,
              postType: type,
              caption: this.state.caption,
            };

            axios.post("/upload", apiPayload).then((response) => {
              console.log(response);
              console.log("information submitted to database");
            });
          });
      }
    );
  };

This snippet shows our logic for the upload on the backend.

router.post("/upload", auth, (req, res) => {
  let user = req.user.id;
  let url = req.body.videoUrl;
  let postType = req.body.postType;
  let caption = req.body.caption;

  console.log(user);
  console.log(url);
  console.log(typeof user);
  console.log(typeof url);
  console.log(req.body.videoUrl);

  console.log("Trying to find content type in this world that we live in");
  console.log(req.body);
  console.log(req.body.postType);

  let post = db.videos.build({
    userId: user,
    videoUrl: url,
    contentType: postType,
    caption: caption,
  });

  console.log("Building the post with the following");
  console.log(post);

  post
    .save()
    .then(() => {
      console.log("Saving post to database...");
      res.sendStatus(200);
    })
    .catch((err) => {
      console.error(err);
    });
});

module.exports = router;

Screenshots:

Login.

Upload.

Feed.