How to Build a React Firebase Photo Sharing App

TL;DR

Build a full-stack photo-sharing application by combining React and TypeScript with Firebase Authentication, Firestore, and Hosting. Structure the frontend with routes, protected pages, reusable components, and a user context, then add Uploadcare CDN image handling, Shadcn UI, Tailwind CSS, profile editing, post creation, likes, suggested users, and deployment.

Transcript

hey what's going on guys welcome back to another video so this is a 4 hours long tutorial where we built a full stack project from scratch this project will help you to learn react concepts with typescript for styling our components we are going to use shed CN with tailin CSS we will also understand how we handle the image upload in react and how w... Read More

Key Insights

• • Photogram is a full-stack social media application built with React, TypeScript, Firebase, Uploadcare, Shadcn UI, and Tailwind CSS. Its central workflow allows authenticated users to upload pictures, publish posts, interact with images, view suggested users, and maintain personal profiles.
• • The frontend architecture is organized around an app component containing a user provider and router provider. This structure places authentication state in a shared React Context API layer while app routes determine which page is displayed for each public or protected destination.
• • Protected routes are required for the home, create post, my photos, and profile pages. Login, signup, and the error page remain public, allowing visitors to authenticate or handle invalid navigation before entering sections intended only for authenticated users.
• • Firebase is the backend platform for Authentication, Firestore Database, and Hosting. Authentication supports email-based access and Google sign-in, Firestore stores application data and enables CRUD operations, and Firebase Hosting serves the deployed application demonstrated at the beginning of the course.
• • Uploadcare CDN handles image uploads and returns CDN links for retrieving images. The uploader also provides image editing capabilities, including cropping, predefined contrast adjustments, and filters, before the selected image is previewed and published as a post.
• • Service modules separate backend operations by responsibility. The post service contains CRUD operations for picture posts, while the user service handles profile updates, user-related information, and suggested users, keeping Firebase interactions outside the main page and presentation components.
• • Reusable components include the page layout, sidebar navigation, protected route wrapper, file uploader, suggested user list, and stories display. Breaking the interface into these smaller pieces supports a clear project structure and maps the demonstrated application features to distinct frontend modules.
• • Vite scaffolds the React and TypeScript project and provides the development server. The setup selects React and TypeScript, installs dependencies, runs the application locally, and adjusts the Vite server configuration to open the browser automatically and use port 3000.

Questions & Answers

Q: How do you structure a React and Firebase social media app?

Structure the application around an app component containing two central elements: a user provider for authentication context and a router provider for navigation. Define separate pages for home, creating posts, personal photos, profiles, login, signup, and errors. Add reusable layout, sidebar, protected route, uploader, story, and suggested-user components, then isolate Firebase operations inside post and user services.

Q: How do you protect private routes in a React application?

Use authentication state from a user context and place a protected route component around pages that require a signed-in user. In Photogram, the home, create post, my photos, and profile destinations are protected. Login, signup, and the error page remain public, so users can access authentication screens without already having an authenticated session.

Q: How is Firebase used as the backend for Photogram?

Firebase provides three backend capabilities for the project: Authentication, Firestore Database, and Hosting. Authentication manages email login, account signup, Google sign-in, and logout. Firestore stores user and post information and supports CRUD operations through service modules. Hosting is used to deploy and serve the completed application, as demonstrated in the project walkthrough.

Q: How are images uploaded and retrieved in the React project?

Images are selected through a reusable file uploader and transferred to Uploadcare rather than being described as stored directly in Firestore. Uploadcare supplies a CDN link that the application uses to retrieve the uploaded image quickly. Before publishing, users can preview the file and use available controls to crop it, adjust contrast, or apply filters.

Q: What features does the Photogram application include?

Photogram includes email login, signup, Google sign-in, logout, protected navigation, picture uploading, image previews, editing, cropping, filters, and post publishing. Authenticated users can like or dislike pictures, browse stories and suggested users, open a personal photo collection, and edit profile details. Changes to profile names and pictures appear across relevant areas of the application.

Q: How are Firestore operations organized in the project?

Firestore interactions are divided into service modules based on the type of data being handled. The post service is responsible for CRUD operations involving picture posts. The user service handles profile updates, suggested users, and other user-related tasks. This separation keeps data access responsibilities distinct from pages, routing, authentication context, and reusable interface components.

Q: How do you start the React and TypeScript project with Vite?

Run the Vite project creation command, choose a project name such as Photogram, select React, and then select TypeScript. Enter the generated project directory, install its dependencies, and start the development server with the provided npm development command. The demonstrated configuration also sets the server to open automatically in a browser and changes its port to 3000.

Q: Which pages and components are created for the application?

The page set includes home, create post, my photos, profile, login, signup, and an error page. The reusable component set includes a general page layout, sidebar navigation, protected route wrapper, file uploader, suggested users list, and stories component. Together with app routing, authentication context, and backend services, these pieces form the planned React frontend architecture.

Summary & Key Takeaways

• The project begins with a Vite-generated React and TypeScript application called Photogram. Its frontend is divided into pages, routes, reusable components, authentication context, and service modules. Shadcn UI and Tailwind CSS provide component styling, while the application structure separates user operations from post-related Firestore CRUD operations.

• Firebase supplies the backend through Authentication, Firestore Database, and Hosting. Public routes include login, signup, and an error page, while home, create post, my photos, and profile pages require authentication. A user context built with React Context API manages authentication state across the application and supports protected route behavior.

• Photogram allows authenticated users to upload, edit, crop, filter, preview, and publish pictures through Uploadcare CDN links. Users can also like or dislike images, browse stories and suggested users, review their own uploads, edit profile information, replace profile pictures, sign in with Google or email, and log out.