Week 11 Worklog

Week 11 Objectives:

• Develop frontend with React and Vite
• Implement user interface components
• Integrate frontend with backend APIs
• Deploy frontend to S3 and CloudFront

Tasks to be carried out this week:

Week 11 Achievements:

• Frontend Development:

  • Designed clean and responsive UI with Material-UI
  • Created reusable React components
  • Implemented authentication pages (Login, Register)
  • Built dashboard with blood donation statistics
  • Developed blood donation request form
  • Created donor search with filters (blood type, location)
  • Implemented React Router for navigation

• API Integration:

  • Configured Axios for API calls
  • Implemented JWT token storage in localStorage
  • Created API service layer for clean code organization
  • Added loading states and error handling
  • Tested complete user flows: Register → Login → Create Donation → Search Donors

• Frontend Deployment:

  • Built optimized production bundle with Vite: npm run build
  • Configured S3 bucket for static website hosting
  • Uploaded dist files to S3 using AWS CLI
  • Set up CloudFront distribution for CDN
  • Configured custom domain (optional)
  • Verified application working on CloudFront URL

Challenges Encountered:

• CORS Issues: Backend blocking frontend requests → Configured CORS in Spring Boot
• State Management: Complex state across components → Used React Context API
• CloudFront Caching: Old files being served → Created invalidation for /*

Key Learnings:

• Mastered React hooks (useState, useEffect, useContext)
• Understood frontend-backend integration patterns
• Learned S3 static hosting and CloudFront CDN setup

References:

• React Documentation
• Vite Build Tool
• AWS S3 Static Hosting
• CloudFront CDN