React Frontend for Web Application Revamp
Budget: $30 – $250 USD
Project Requirements
Overview:
This React frontend project involves restoring, updating, and securing various components of an existing web application. The deliverables must be completed within one week, with progress deployed to the staging environment daily for testing.
General Requirements:
Use React (functional components with hooks preferred)
Daily commits and deployment to a staging site
Maintain consistent styling using existing design system or CSS framework
Ensure responsiveness and accessibility across devices
Ensure code is modular, clean, and follows best practices
Component Requirements:
1. Registration Page:
Revert or cherry-pick code to the version before the pre-render bug was introduced
Reapply any lost styling changes
Reintegrate logic for copying input data where applicable (e.g., autofill or state mirroring)
Test registration flows to confirm restoration integrity
2. Roster Page:
Replace outdated or placeholder graphics with updated visuals
Reposition UI elements as per new layout requirements
Copy data presentation logic from previous iteration
Conditionally render certain graphics based on provided data (e.g., status badges, icons)
3. Website Lock (Password-Protected Area):
Remove any third-party dependencies currently used to implement site locking
Implement pure React logic to control page visibility based on access state
Style locked pages to match rest of the site (login screen, access denied page)
Ensure no content is accessible via "View Source" or browser scraping tools before authentication (e.g., SSR or hydration guard logic, obfuscation, or use of dynamic rendering with minimal preloaded content)
4. Gatewall Pages (Restricted Access):
Implement conditional rendering logic to restrict access based on user state (logged in or valid magic link)
Integrate existing backend API endpoint for magic link validation
If user has no access or magic link is invalid/expired, display appropriate redirect or error message
5. Navigation Menu:
Fix visibility issue with menu buttons (e.g., z-index, opacity, CSS transitions)
Ensure buttons are functional and accessible via keyboard and screen readers
Maintain consistent user experience across mobile and desktop views
Testing & Deployment:
Deploy to staging each working day
Conduct basic UI and functionality regression tests daily
Use testing framework such as Jest + React Testing Library where applicable
Ensure integration with backend services for gated content and magic link functionality
Final Notes:
This project emphasizes attention to both security (auth/content locking) and visual fidelity (correct styling, layout, and component behavior). Work should be tracked and demoed daily.
DON'T MENTION ABOUT OUTSIDE OF FREELANCER
Overview:
This React frontend project involves restoring, updating, and securing various components of an existing web application. The deliverables must be completed within one week, with progress deployed to the staging environment daily for testing.
General Requirements:
Use React (functional components with hooks preferred)
Daily commits and deployment to a staging site
Maintain consistent styling using existing design system or CSS framework
Ensure responsiveness and accessibility across devices
Ensure code is modular, clean, and follows best practices
Component Requirements:
1. Registration Page:
Revert or cherry-pick code to the version before the pre-render bug was introduced
Reapply any lost styling changes
Reintegrate logic for copying input data where applicable (e.g., autofill or state mirroring)
Test registration flows to confirm restoration integrity
2. Roster Page:
Replace outdated or placeholder graphics with updated visuals
Reposition UI elements as per new layout requirements
Copy data presentation logic from previous iteration
Conditionally render certain graphics based on provided data (e.g., status badges, icons)
3. Website Lock (Password-Protected Area):
Remove any third-party dependencies currently used to implement site locking
Implement pure React logic to control page visibility based on access state
Style locked pages to match rest of the site (login screen, access denied page)
Ensure no content is accessible via "View Source" or browser scraping tools before authentication (e.g., SSR or hydration guard logic, obfuscation, or use of dynamic rendering with minimal preloaded content)
4. Gatewall Pages (Restricted Access):
Implement conditional rendering logic to restrict access based on user state (logged in or valid magic link)
Integrate existing backend API endpoint for magic link validation
If user has no access or magic link is invalid/expired, display appropriate redirect or error message
5. Navigation Menu:
Fix visibility issue with menu buttons (e.g., z-index, opacity, CSS transitions)
Ensure buttons are functional and accessible via keyboard and screen readers
Maintain consistent user experience across mobile and desktop views
Testing & Deployment:
Deploy to staging each working day
Conduct basic UI and functionality regression tests daily
Use testing framework such as Jest + React Testing Library where applicable
Ensure integration with backend services for gated content and magic link functionality
Final Notes:
This project emphasizes attention to both security (auth/content locking) and visual fidelity (correct styling, layout, and component behavior). Work should be tracked and demoed daily.
DON'T MENTION ABOUT OUTSIDE OF FREELANCER