Angular and Laravel Website Redesign
Budget: $250 – $750 CAD
Laravel + Angular Website Redesign (Figma to Responsive – Desktop & Mobile)
Budget Range: $250 – $750 CAD
1. Summary
We are looking for a highly experienced Laravel backend + Angular frontend developer to execute a complete redesign of our platform using an approved Figma design.
The redesign must be pixel-accurate, fully responsive across all devices, and must preserve the full functionality of the existing Laravel admin panel, API logic, and Angular frontend.
Only the Figma design will be provided; all UI layouts, components, and SCSS must be implemented directly from the design.
Placeholder bids will not be considered — review the complete scope before submitting your final offer.
2. Scope of Work (Expanded & Detailed)
The platform architecture consists of:
Laravel Backend → Admin panel, database, API endpoints
Angular Frontend → Rendering pages, forms, charts, user interactions
Dynamic Homepage Blocks → Fully admin-controlled, rendered by Angular
Below is the fully detailed scope required for a correct and safe delivery:
2.1 Dynamic Homepage Rebuild (Admin Panel–Controlled)
The homepage is composed of dynamic block modules, controlled through the Laravel admin panel.
You will rebuild the entire homepage to match the new Figma layout.
Developer Responsibilities
A. Rebuild the Homepage Frontend (Angular)
Recreate every section of the homepage according to Figma.
Build Angular components for each block type.
Ensure pixel-perfect spacing, alignment, and typography.
Apply correct responsiveness on:
Desktop
Tablet
Mobile
B. Create New Homepage Block Types (Laravel + Angular)
You will build new reusable modules such as:
Hero banner
Feature grid
Testimonials section
Slider/carousel
Call-to-action sections
Icon or card grids
Statistics and counters
Image/text sections
Video or media sections
Pricing tables (if in Figma)
Additional blocks defined in the design
Each block must be:
Fully configurable from the admin panel (title, text, images, button links, order, visibility).
Saved in the database.
Retrieved dynamically via an API endpoint.
Automatically rendered by Angular.
C. Admin Panel Enhancements (Laravel)
Add settings fields for each new block type.
Support drag-and-drop sorting or reordering.
Add toggles for block visibility (show/hide).
Add image upload fields (with validation).
Add text, subtitle, description, link, and button label fields.
D. API Enhancements (Laravel)
Update existing API endpoints or create new ones to deliver block data.
Ensure API responses follow a consistent structure for Angular rendering.
Optimize data loading for better page performance.
E. Real-Time Updates
Admin panel updates must apply instantly on the frontend after saving.
No hardcoded content is allowed — everything must be dynamic.
2.2 Dynamic Angular Pages Redesign (6 pages)
Your task is to implement the Figma redesign for the following data-driven Angular pages (example categories below, but depends on your system):
Dashboard
Wallet
Project Detail
Job Ad
Company Profile
Freelancer Profile
Developer Responsibilities
A. Apply New Figma Layouts to Angular Components
Replace old layouts with new Figma structures.
Rebuild component HTML and SCSS.
Ensure correct TypeScript bindings remain intact.
B. Preserve All Backend Logic
The Angular pages must keep:
Data connections with API
Authentication logic
Role-based permissions
Charts, analytics, counters
Forms, validation, subscriptions
Transactions and wallet flows
Project or profile data connections
Notification / message integrations (if present)
C. Performance Optimization
Reduce unnecessary API calls.
Optimize lazy loading for heavier sections.
Improve CSS/SCSS structure for maintainability.
D. Full Responsiveness
Implement responsive breakpoints for all screen sizes:
Desktop (primary)
Tablet
Mobile portrait & landscape
E. Browser Compatibility
Must render correctly on:
Chrome
Safari
Firefox
Edge
3. Testing & Deployment
Testing Requirements
Visual + functional testing across all pages.
Device responsiveness checks.
Cross-browser QA.
Ensure no backend logic is broken during redesign.
Validate homepage block management from admin.
Deployment Requirements
Deploy project to staging environment for review.
Resolve all reported issues prior to live deployment.
Deploy final version to production once approved.
Provide a video or written guide explaining:
How new homepage blocks work
How to update content
How to reorder blocks
How to manage images, text, and buttons
4. Requirements
Strong Laravel (Admin Panel, PHP 8+, API development)
Strong Angular (Components, TypeScript, SCSS)
Experience converting Figma → responsive code
Clean coding structure (modular architecture)
Git-based workflow
Pixel perfection
Fast communication and excellent attention to detail
5. Deliverables
Updated Laravel + Angular codebase (repo or zipped).
SQL database dump (schema + sample data).
.env.example for Laravel + environment.ts sample for Angular.
Deployment guide (server setup, migrations, build commands).
Cron job list (commands, purpose, schedule).
API documentation (Postman or Swagger).
Admin login for testing homepage configuration.
Documentation for any third-party integrations.
Design implementation summary (pixels, spacing, responsiveness).
Video or written walkthrough demonstrating homepage block management.
Budget Range: $250 – $750 CAD
1. Summary
We are looking for a highly experienced Laravel backend + Angular frontend developer to execute a complete redesign of our platform using an approved Figma design.
The redesign must be pixel-accurate, fully responsive across all devices, and must preserve the full functionality of the existing Laravel admin panel, API logic, and Angular frontend.
Only the Figma design will be provided; all UI layouts, components, and SCSS must be implemented directly from the design.
Placeholder bids will not be considered — review the complete scope before submitting your final offer.
2. Scope of Work (Expanded & Detailed)
The platform architecture consists of:
Laravel Backend → Admin panel, database, API endpoints
Angular Frontend → Rendering pages, forms, charts, user interactions
Dynamic Homepage Blocks → Fully admin-controlled, rendered by Angular
Below is the fully detailed scope required for a correct and safe delivery:
2.1 Dynamic Homepage Rebuild (Admin Panel–Controlled)
The homepage is composed of dynamic block modules, controlled through the Laravel admin panel.
You will rebuild the entire homepage to match the new Figma layout.
Developer Responsibilities
A. Rebuild the Homepage Frontend (Angular)
Recreate every section of the homepage according to Figma.
Build Angular components for each block type.
Ensure pixel-perfect spacing, alignment, and typography.
Apply correct responsiveness on:
Desktop
Tablet
Mobile
B. Create New Homepage Block Types (Laravel + Angular)
You will build new reusable modules such as:
Hero banner
Feature grid
Testimonials section
Slider/carousel
Call-to-action sections
Icon or card grids
Statistics and counters
Image/text sections
Video or media sections
Pricing tables (if in Figma)
Additional blocks defined in the design
Each block must be:
Fully configurable from the admin panel (title, text, images, button links, order, visibility).
Saved in the database.
Retrieved dynamically via an API endpoint.
Automatically rendered by Angular.
C. Admin Panel Enhancements (Laravel)
Add settings fields for each new block type.
Support drag-and-drop sorting or reordering.
Add toggles for block visibility (show/hide).
Add image upload fields (with validation).
Add text, subtitle, description, link, and button label fields.
D. API Enhancements (Laravel)
Update existing API endpoints or create new ones to deliver block data.
Ensure API responses follow a consistent structure for Angular rendering.
Optimize data loading for better page performance.
E. Real-Time Updates
Admin panel updates must apply instantly on the frontend after saving.
No hardcoded content is allowed — everything must be dynamic.
2.2 Dynamic Angular Pages Redesign (6 pages)
Your task is to implement the Figma redesign for the following data-driven Angular pages (example categories below, but depends on your system):
Dashboard
Wallet
Project Detail
Job Ad
Company Profile
Freelancer Profile
Developer Responsibilities
A. Apply New Figma Layouts to Angular Components
Replace old layouts with new Figma structures.
Rebuild component HTML and SCSS.
Ensure correct TypeScript bindings remain intact.
B. Preserve All Backend Logic
The Angular pages must keep:
Data connections with API
Authentication logic
Role-based permissions
Charts, analytics, counters
Forms, validation, subscriptions
Transactions and wallet flows
Project or profile data connections
Notification / message integrations (if present)
C. Performance Optimization
Reduce unnecessary API calls.
Optimize lazy loading for heavier sections.
Improve CSS/SCSS structure for maintainability.
D. Full Responsiveness
Implement responsive breakpoints for all screen sizes:
Desktop (primary)
Tablet
Mobile portrait & landscape
E. Browser Compatibility
Must render correctly on:
Chrome
Safari
Firefox
Edge
3. Testing & Deployment
Testing Requirements
Visual + functional testing across all pages.
Device responsiveness checks.
Cross-browser QA.
Ensure no backend logic is broken during redesign.
Validate homepage block management from admin.
Deployment Requirements
Deploy project to staging environment for review.
Resolve all reported issues prior to live deployment.
Deploy final version to production once approved.
Provide a video or written guide explaining:
How new homepage blocks work
How to update content
How to reorder blocks
How to manage images, text, and buttons
4. Requirements
Strong Laravel (Admin Panel, PHP 8+, API development)
Strong Angular (Components, TypeScript, SCSS)
Experience converting Figma → responsive code
Clean coding structure (modular architecture)
Git-based workflow
Pixel perfection
Fast communication and excellent attention to detail
5. Deliverables
Updated Laravel + Angular codebase (repo or zipped).
SQL database dump (schema + sample data).
.env.example for Laravel + environment.ts sample for Angular.
Deployment guide (server setup, migrations, build commands).
Cron job list (commands, purpose, schedule).
API documentation (Postman or Swagger).
Admin login for testing homepage configuration.
Documentation for any third-party integrations.
Design implementation summary (pixels, spacing, responsiveness).
Video or written walkthrough demonstrating homepage block management.