React Front-End Development for Bible App
Budget: £50 – £55 GBP
Build React Front-End for Bible Search App (Using Approved Mockup)
This project is to implement the front-end UI in React for an existing Bible search application.
The search logic and backend are already complete and working correctly.
The design has been finalised and approved (Mockup 1).
Your job is to build the front-end exactly according to the approved design, using React, in a clean and maintainable way.
⸻
Objective
Create a clean, responsive React front-end that:
• matches the approved mockups (desktop and mobile)
• integrates with the existing search functionality
• provides a smooth and modern user experience
• is structured for future growth (saved, reading, audio, etc.)
⸻
Scope of Work
1. Front-End Framework
• Use React for the UI
• Structure code using reusable components (e.g. SearchBar, ResultCard, AudioPlayer)
• Keep code clean and maintainable
⸻
2. Core Screens to Implement
A. Search Page (Main Screen)
Must include:
• Search bar at the top
• Results header (e.g. “Baal appears 18 times in the Bible”)
• Word suggestion chips (e.g. baal, baal-peor, idol)
• List of verse results
Each result card must include:
• Verse reference (e.g. Judges 2:13)
• Verse text
• Highlighted matched word (subtle highlight)
• Actions:
• Play
• Save
• Copy
• “…” menu (for additional actions like Share)
⸻
B. Audio Player
• Sticky audio player at the bottom of the screen
• Must include:
• Play / Pause
• Progress bar
• Current verse reference (e.g. “Playing: Judges 2:13”)
• Remove unnecessary text such as “Queue: Search results”
⸻
C. Mobile Navigation
Bottom navigation bar with:
• Search
• Reading
• Audio
• Saved
• Account
⸻
D. Desktop Layout
• Left sidebar navigation:
• Search
• Reading
• Audio
• Saved
• Account
• Sidebar should not be overly wide (keep focus on content)
⸻
3. UI Requirements (Important)
• Follow Mockup 1 exactly for layout and structure
• Keep UI clean and minimal
• Do not add extra features or redesign elements
Specific requirements:
• Results header must be a single natural sentence
• No technical wording (e.g. remove “phrase prioritisation” text)
• Only one Play button per result (no duplication)
• Highlight colour must be soft and subtle
• Keep visible actions minimal (Play, Save, Copy)
⸻
4. Responsiveness
• Must work properly on:
• Mobile (primary focus)
• Desktop
• Layout should adapt cleanly between screen sizes
⸻
5. Integration
• Connect UI to existing search functionality
• No changes required to backend/search logic
⸻
Deliverables
The project is complete when:
1. React front-end is fully implemented
2. UI matches approved mockups (Mockup 1)
3. Mobile and desktop layouts work correctly
4. Search results display correctly using existing logic
5. Audio player is functional and positioned correctly
6. Code is clean and structured (not messy or duplicated)
⸻
Out of Scope (Important)
Do NOT:
• redesign the UI
• change the product structure
• modify search logic
• add new features not listed above
⸻
Acceptance Criteria
The work will be accepted when:
• UI visually matches Mockup 1
• All components behave correctly
• No duplicated buttons or clutter
• Layout is clean and consistent
• Works properly on both mobile and desktop
⸻
Final Note
The design is now locked, so the goal is execution, not redesign.
This project is to implement the front-end UI in React for an existing Bible search application.
The search logic and backend are already complete and working correctly.
The design has been finalised and approved (Mockup 1).
Your job is to build the front-end exactly according to the approved design, using React, in a clean and maintainable way.
⸻
Objective
Create a clean, responsive React front-end that:
• matches the approved mockups (desktop and mobile)
• integrates with the existing search functionality
• provides a smooth and modern user experience
• is structured for future growth (saved, reading, audio, etc.)
⸻
Scope of Work
1. Front-End Framework
• Use React for the UI
• Structure code using reusable components (e.g. SearchBar, ResultCard, AudioPlayer)
• Keep code clean and maintainable
⸻
2. Core Screens to Implement
A. Search Page (Main Screen)
Must include:
• Search bar at the top
• Results header (e.g. “Baal appears 18 times in the Bible”)
• Word suggestion chips (e.g. baal, baal-peor, idol)
• List of verse results
Each result card must include:
• Verse reference (e.g. Judges 2:13)
• Verse text
• Highlighted matched word (subtle highlight)
• Actions:
• Play
• Save
• Copy
• “…” menu (for additional actions like Share)
⸻
B. Audio Player
• Sticky audio player at the bottom of the screen
• Must include:
• Play / Pause
• Progress bar
• Current verse reference (e.g. “Playing: Judges 2:13”)
• Remove unnecessary text such as “Queue: Search results”
⸻
C. Mobile Navigation
Bottom navigation bar with:
• Search
• Reading
• Audio
• Saved
• Account
⸻
D. Desktop Layout
• Left sidebar navigation:
• Search
• Reading
• Audio
• Saved
• Account
• Sidebar should not be overly wide (keep focus on content)
⸻
3. UI Requirements (Important)
• Follow Mockup 1 exactly for layout and structure
• Keep UI clean and minimal
• Do not add extra features or redesign elements
Specific requirements:
• Results header must be a single natural sentence
• No technical wording (e.g. remove “phrase prioritisation” text)
• Only one Play button per result (no duplication)
• Highlight colour must be soft and subtle
• Keep visible actions minimal (Play, Save, Copy)
⸻
4. Responsiveness
• Must work properly on:
• Mobile (primary focus)
• Desktop
• Layout should adapt cleanly between screen sizes
⸻
5. Integration
• Connect UI to existing search functionality
• No changes required to backend/search logic
⸻
Deliverables
The project is complete when:
1. React front-end is fully implemented
2. UI matches approved mockups (Mockup 1)
3. Mobile and desktop layouts work correctly
4. Search results display correctly using existing logic
5. Audio player is functional and positioned correctly
6. Code is clean and structured (not messy or duplicated)
⸻
Out of Scope (Important)
Do NOT:
• redesign the UI
• change the product structure
• modify search logic
• add new features not listed above
⸻
Acceptance Criteria
The work will be accepted when:
• UI visually matches Mockup 1
• All components behave correctly
• No duplicated buttons or clutter
• Layout is clean and consistent
• Works properly on both mobile and desktop
⸻
Final Note
The design is now locked, so the goal is execution, not redesign.