Shreyas K Site Logo Image

Pinterest Clone

Full-Stack Pinterest Clone with Google Authentication, Firestore Database, AWS S3 for Image Uploads, and Dynamic Explore, MyPins, and Profile Pages Built with React.js and Express.js hosted on Oracle Cloud.

Project Demo

Project Overview

This project is a feature-rich Pinterest clone, built using React.js for the frontend and Node.js with Express.js for the backend. The application replicates core functionalities of Pinterest, allowing users to explore, upload, and manage images in a visually engaging manner. It is hosted on Oracle Cloud, ensuring robust and scalable deployment. Users can sign in using Google Authentication or opt for traditional email-based registration. The platform includes three primary pages: Explore (Home Page) for browsing content, MyPins for managing personal uploads, and Profile for user-specific details. A dynamic search bar enhances user experience by allowing quick retrieval of images based on titles or descriptions.

The project leverages Google Firebase Firestore as the database, ensuring efficient storage and retrieval of user details, uploaded images, and organizational data. Uploaded images are managed using an AWS S3 bucket, providing a secure and scalable solution for handling user-generated content. The Explore page showcases all images available on the platform, while the MyPins page is restricted to signed-in users for viewing and managing their personal uploads. The integration of server-side logic ensures a seamless connection between the React.js frontend and backend APIs for an optimal user experience.

With its modern tech stack and cloud-first approach, this Pinterest clone demonstrates efficient use of third-party services and frameworks to build a scalable, secure, and user-friendly application. The project not only showcases essential CRUD operations but also implements authentication, file storage, and search functionalities in a cohesive manner. This serves as a strong foundation for creating sophisticated, full-stack web applications.

Features and Functionalities

Authentication: Users can sign in using Google Authentication or register with their email, ensuring secure access to personalized features like MyPins and uploads.

Dynamic Pages: The platform includes three key pages: Explore (Home Page) for browsing all uploaded content, MyPins for managing personal uploads, and a user-specific Profile page.

Search Functionality: A powerful search bar allows users to find images by title or description, enhancing the discoverability of content.

Image Upload and Management: Users can upload images to AWS S3, which are displayed on the Explore and MyPins pages. Upload and MyPins functionalities are restricted to signed-in users.

Firestore Database: All data, including user information, uploaded images, and metadata, is stored in Google Firebase Firestore for efficient and secure access.

Cloud Hosting: The application is hosted on Oracle Cloud, providing a robust and scalable environment for the backend server and APIs.

Scalable File Storage: Uploaded images are securely stored and managed using AWS S3, ensuring scalability and reliability for user-generated content.

Current Limitations and Planned Enhancements

Search Functionality: The search feature for pins only works on the homepage and not on other pages.

Responsiveness: The website is not fully responsive and may not display properly on all devices.

Profile Page Missing: A dedicated profile page for users has not been implemented yet.

Save and Share Buttons: These buttons are not functional and need to be developed.

Image Preview During Upload: The application does not show a preview of the image being uploaded, which may cause confusion for users.

Performance Issues: The website experiences slow loading times due to large chunks of bundled files. Some chunks exceed 500 kB after minification, which may affect performance. Suggested fixes include using dynamic import() for code-splitting, configuring manualChunks in Rollup options, or adjusting chunk size warnings.

Direct Link Issue: Navigating directly to the MyPins page (e.g., https://shreyask.in/projects/pinterest-clone/demo/my-pins) results in a loading screen instead of prompting the user to sign in. This will be addressed in a future update.

Upload Metadata: The upload timestamp and uploader's name are not displayed correctly and should be fixed. Title length should be limited, while allowing descriptions to remain detailed. Currently, excessively long descriptions are displayed when hovering over an image.

Email OTP for Sign Up: An OTP (One-Time Password) system for email sign-up has not yet been implemented and is planned for a future update.

Tools Used

React.js
Node.js
Express.js
Vite
Shadcn-UI
Tailwind CSS
Firebase Firestore
Google Authentication
AWS S3
Oracle Cloud
HTML
CSS
JavaScript
TypeScript
AWS
Nginix
Docker Compose
EC2