Kacy Phan Logo Image
Kacy Phan

InstaVerse

Languages, Frameworks, & Libraries Used

Bootstrap
CSS
Cloudinary
CRUD
Express.js
Heroku
HTML
JavaScript
MongoDB
Netlify
Node.js
NPM
PostgreSQL
Postman
React
REST API

Features of InstaVerse

InstaVerse was built using the MERN stack. The backend was built using Node.js, Express.js, and MongoDB. The frontend was built using React.js. The app is hosted on Heroku and Netlify.

home

InstaVerse uses Cloudinary's API to upload a user's profile image to the Cloudinary cloud. The image is then stored in Cloudinary's database and a secure URL is generated for the image. The secure URL is then used to update the user's profile information on the server.

profile-bio

When called, the function logs a message to indicate that the function is being executed. A new FormData object is created to store the image data. The image is appended to the FormData object using the append method, and the upload preset (named 'instaverse') is also appended.

Then, an HTTP POST request is made to the Cloudinary API endpoint for image upload using the axios.post method. The FormData object is passed as the request payload. If the upload is successful, the response data is retrieved. The secure URL of the uploaded image is extracted from the response and stored in a variable called secureUrl. A new user object is created with the profilePicture field set to the secureUrl value.

profile-post

Another HTTP PUT request is made to the server API endpoint to update the user's profile information. The request includes the updated user object and the user's ID retrieved from the local storage. If the update is successful, the response data is logged and the loading state is set to false, indicating that the upload process is complete. In case there are any errors during the image upload or profile update, appropriate error messages are logged in the console.

Entity Relationship Diagram

The User entity has a one-to-many relationship with the Follow entity, meaning that a user can follow many other users, but each user can only be followed by one user. The User entity also has a one-to-many relationship with the Post entity, meaning that a user can create many posts, but each post can only be created by one user. The Post entity has a many-to-many relationship with the Comment entity, meaning that a post can have many comments, and each comment can be associated with many posts.

edr

Wireframe

edr