Learn to build a full-stack application with Spring Boot and React.js for uploading and downloading files, particularly images. Dive into creating a backend using Spring Boot, storing files in Amazon S3, and developing a frontend with React and hooks. Explore essential concepts like setting up AWS credentials, implementing S3 bucket operations, creating user profile models, and building RESTful APIs. Master frontend development with React components, Axios for HTTP requests, and React Dropzone for file uploads. Follow along with hands-on exercises to implement file upload and download functionalities, connect the frontend and backend, and polish the user interface. By the end of this comprehensive tutorial, gain practical experience in full-stack development and file handling in web applications.
Overview
Syllabus
- Intro.
- Spring Initializr.
- IntelliJ and AWS SDK.
- AWS Credentials.
- Amazon S3 Client.
- Creating S3 Bucket.
- Saving files to S3 Bucket Implementation.
- User Profile Model.
- Create in-memory Database .
- API & Service Layer Implementation.
- Upload Image API.
- Check list to upload images (logic).
- Facebook Create React App.
- React Components and Axios.
- Rendering User Profile.
- React Dropzone.
- Pexels.
- UI Logic to send files to backend.
- Increate servlet max file size.
- Exercise.
- Lets implement uploadUserProfileImage().
- Lets test things.
- Set user profile image link.
- Lets implement downloadImages().
- Implement download images on frontend.
- Final touches.
- Lets wrap it up.
Taught by
Amigoscode
