Live Demo: https://www.youtube.com/watch?v=i8NBy8mppDk&feature=youtu.be&ab_channel=PlatoIII
Server side repo: https://github.com/plaetzaw/CringeXServer
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
Primary team role: Frontend; Styling and JSON Web Tokens
Primary team role: Frontend; Components and React/Redux Logic
Primary team role: Backend; Database and Routes
- HTML5
- CSS3
- JavaScript
- React
- Redux
- Node
- Express
- ElephantSQL (Hosting)
- PostgresSQL
- API calls
- MaterialUI
- JSON Web Tokens
- Google Firebase
- Allow a user to register an account.
- Allow a user to upload content.
- Display a feed of all the content uploaded to the site.
- Allow a user to view all of their posts on their profile page
- Upvoting and Downvoting posts
- Commenting on other users posts
- Add a user to friend's list
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.
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");
});
});
}
);
};
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;