Instagram clone with FastAPI, ReactJS and Android

Build and test a secure Instagram clone api with user authentication, post creation using image URLs, image upload, comments, and public post retrieval for web and mobile clients.

Explore the Udemy review system and its impact on course visibility, as the instructor asks for feedback to improve the course and earn five-star ratings.

Implement fast api authentication with signup, login, and token-based access, enable image posts with captions, and require authentication for deleting posts and commenting while posts and comments remain public.

Set up a FastAPI project in VS Code by creating main.py and a requirements file, creating a virtual environment, installing FastAPI and uvicorn, and building a basic root endpoint.

Set up the Instagram clone database by creating a SQLAlchemy user model and generating the user table with id, username, email, and password, then verify in a viewer.

Create a signup pathway in a FastAPI app by building db_user and schemas for user base and display, and exposing a /user POST endpoint that returns username and email.

Implement bcrypt-based password hashing to securely store user passwords in the database by using a hashing module with hash and verify methods and applying encrypted storage.

Implement post creation by setting up frontend schemas and a database model, including image URL type (absolute or relative), caption, and creator id, with a post display showing the username.

Implement a get all posts endpoint at /all in post.py that returns a list of post display models by querying the database with db.post.get_all, without authentication, including usernames.

Create an image upload endpoint in the Instagram clone, save files to a static images folder with a random suffix, and return a relative URL.

Implement authentication in the Instagram clone by adding an OAuth2 login flow, issuing access tokens, and enforcing current user checks for creating posts and uploading images.

Learn to implement delete post functionality in an authenticated Instagram clone using FastAPI, including a path parameter id, user authorization (only the post creator can delete), and proper error handling.

Implement and test a comment feature for posts by updating schemas and models, creating db_comment with post linkage, and exposing endpoints to create and fetch comments while ensuring user authentication.

Configure FastAPI cors middleware to allow access from http://localhost:3000, enabling credentials, methods, and headers so the Instagram clone api can be accessed by the frontend on local host.

Clean up the project by deleting images and data, then create a user, authenticate, and add posts with relative and absolute image URLs plus comments to populate API and UI.

Build the Instagram clone web client with ReactJS, HTML, and CSS, enabling post retrieval, login, uploading, commenting, and deletion by authorized users.

Set up the Instagram clone React client by generating a React app and running the front-end server against the FastAPI endpoints. Prepare UI work in upcoming videos.

retrieve posts from the backend by fetching the posts/all endpoint with a react useEffect and posts state, using a base URL and error handling.

Display images from the posts endpoint by building a post component, using useState and useEffect to create absolute or relative image URLs with a base url, and style with post.css.

Create and display post captions and comments in the Instagram clone by managing a comments state, loading comments with an effect, and rendering caption and user comments with styling.

Add a post header with avatar, username, and a delete button using Material UI, and implement a flexbox layout with space-between, and reverse posts by timestamp.

Create a sticky app header featuring the Instagram logo and login and sign up buttons, wired with React state to open sign-in or sign-up dialogs in a future step.

Create a signup/login dialog using a material UI modal, control its open state, and build a username/password form inside the popup.

Implement login by posting username and password to the login endpoint using form data, then store access token, token type, user id, and username for authenticated actions.

Store the authentication token, token type, username, and user id in window.localStorage to persist login state across page refreshes, and retrieve them on app load to maintain authentication.

Implement a signup modal in the Instagram clone, mirroring the login dialog with username, email, and password fields, and prepare the sign up action for the next network call.

Implement signup functionality by calling the create user API with username, email, and password using fetch, then sign in to obtain an auth token for backend API calls.

build a post upload UI that lets authenticated users select an image, add a caption, and initiate an upload in a React frontend for an Instagram clone.

Implement the upload image functionality with auth token and token type, sending an image in form data to the API via fetch, handling the response, and resetting the UI.

Implement the create post flow by posting image url, caption, and creator id to the /post endpoint using fetch with authentication. Refresh page and scroll to the top on success.

Implement delete post with authentication in the Instagram clone by wiring a handle delete, calling the API with the authorization header, and refreshing the user interface on success.

Implement posting comments by sending a post request with username, text, and postId to the comment endpoint, including auth, and clear the input after submission.

Learn to fetch updated comments for a post with a get request to /comment/all/{postId}, update the comments state, and handle errors, including a post id bug fix.

Review the progression building an Instagram-like app with FastAPI and a ReactJS client, importing posts, displaying images and comments, implementing login, signup, post upload, delete, and selective comment updates.

Create a new Android project for an Instagram clone, configure fast API integration, set up dependencies (retrofit, glide, mvvm), enable desugaring, and sync the build to prepare for implementation.

Build main screen UI for Instagram clone with a swipe refresh layout, header with the Instagram logo and login controls, a bottom upload area and a recycler view for posts.

Execute a backend network call to fetch all posts using a simple mvvm pattern, implementing a main view model and retrofit api integration with debugging and manifest setup.

Build the item_post layout for displaying individual posts, including avatar, username, delete button, post image, caption, comments section, and new comment input with proper constraints and spacing.

Create a post list adapter for a recycler view using view binding, enable view binding in Gradle, inflate item layouts, bind username, and attach the adapter to the main activity.

Retrieve the post list from the backend API and connect it to the UI using a mutable live data observable, then update the adapter to display usernames.

Implement image loading in the post list with glide and a circular progress placeholder, construct absolute or base URLs, and render comments with username and caption in the post view.

Build the login dialog layout for the Instagram clone, featuring a title, a separator, username and password fields, and a login button with appropriate padding and constraints.

Create a login dialog in Android with a login dialog fragment, an auth callback, binding UI, and validation of username and password before login.

Implement login call as a form URL encoded POST to the login endpoint, sending username and password, and handle the response with access token, token type, user id, and username.

Implement a logout flow with a yes/no alert dialog and update the view model to clear tokens and reset user state, reflecting the logged-out user interface; prepare centralized error messaging.

Design and implement the signup dialog user interface, adding an email field and a sign up button, mirroring the login interface and preparing for subsequent network communication.

Implement a sign up dialog fragment with binding and input validation, show it from the main activity, and collect username, email, and password via a callback.

Implement signup in the main view model by creating user signup request/response models, posting data with username, email, and password to the backend, then auto-login to obtain an authentication token.

Update the post ui to reflect login state by hiding delete and new comment controls when logged out. Propagate the logged-in flag from authentication to the adapter and bind method.

Parse the timestamp into a Kotlin date and sort API posts in descending order before rendering the UI, displaying the most recent post first.

Implement image upload for post creation using Android's system image picker in the main activity, handling the result to obtain an input stream for the API call.

Craft the image upload flow using a view model binding, upload the image with multipart and authorization, handle the response, and prepare for the final post creation call.

Map and implement the post upload flow in an Instagram clone by defining create post data, handling access tokens, and refreshing the feed after upload.

Implement a delete post flow by wiring a delete button to a post callback in main activity and view model, call the Instagram API delete post, and handle the response.

Add the post comment feature to the instagram clone by wiring a comment button and callback, defining create comment data types for the api, and updating the ui.

Implement swipe to refresh in the main activity by wiring the refresh layout to call VM.getAllPosts and briefly dismiss the spinner after one second.

Review the end-to-end Instagram clone project, demonstrating Android and React.js clients interacting with a FastAPI backend, including login, image upload, posts, comments, and full stack functionality.

Apply the knowledge from this course to refine the Instagram API-like prototype and extend it to your own application. Build on what you learned and explore future enhancements.