Progressive Web App demo development
Budget: $1,500 – $3,000 USD
Localized Incident Reporting Progressive Web App
Project Description:
We are seeking a skilled developer or development team to build a Progressive Web App (PWA) focused on allowing users to report incidents within a select Municipality (white labelable). The primary goal of this application is to collect photographic and geolocation data from users and then standardize this information for an export file (pdf or csv).
Key Features:
-User Registration & Authentication: Users should be able to sign up, log in, and manage their profiles.
-Report Submission: Users need the ability to:
-Capture/upload photos of the incident.
-Fetch their current geolocation or manually select a location on a map.
-Input additional comments or details about the incident.
-Simplicity for end user
-Data Storage: Store reports, photographs, and user information securely.
-Data Standardization & Integration: Convert user data into a format compatible (to be determined).
-User Dashboard: Where users can view their previous reports and any feedback or updates on them.
-Admin Dashboard: For moderation and management of reports.
-Responsive Design: The PWA should be accessible and functional on various device sizes, from mobile phones to desktops.
Preferred Technologies (but open to suggestions):
Frontend: React, Vue.js, or Angular
Backend: Node.js with Express.js, Django, or Flask
Database: MongoDB or PostgreSQL
Authentication: Auth0 or Passport.js
Additional Requirements:
-Ensure data protection and user privacy.
-Implement effective error handling and feedback mechanisms.
App must be SEO-friendly and performant, following best PWA practices.
-Clear documentation for the code and any setup procedures.
Project Timeline:
We are aiming to have the initial version of the app ready within 3 months. Please include your estimated timeline in your proposal. We are flexible and have the ability to extend.
Budget:
Our initial budget for this scope of project is $2500. However, we are open to negotiation based on your expertise and proposed solution.
Proposal Requirements:
When submitting your proposal, please include:
-A brief introduction about yourself or your team.
-Relevant projects or PWAs you've developed in the past.
-An estimated timeline and breakdown of tasks/milestones.
-*The developer/firm must execute a Non-Disclosure Agreement enforceable in both the United States and their host country.*
-Any questions or clarifications you might have about the project.
Thank you for considering our project. We look forward to collaborating with a dedicated developer or team to bring this valuable community tool to life!
-----
FIGMA DETAILS
------
1. Welcome Screen / Landing Page
Header: App name and possibly a small logo.
Main Content: Brief about the app, its purpose, and how to use it.
Footer: Links to privacy policy, terms of service, and contact info.
Call to Action (CTA): "Get Started" or "Report a Incident" button.
2. User Authentication Screens
Login Screen: Fields for email and password, buttons for "Login" and "Forgot Password".
Sign-Up Screen: Fields for name, email, password, and a "Sign Up" button.
Password Recovery: Fields to enter email and a "Send Reset Link" button.
3. Home / Dashboard
Header: Navigation links/icons for "Home", "My Reports", "Profile", and "Log Out".
CTA: Button for "Report a New Incident".
List/Map View: Display previously reported incidents (possibly with a map view option).
4. Report Submission Flow
Screen 1 - Photo Upload:
Ability to upload/take a picture of the pothole.
Next button.
Screen 2 - Location Information:
Automatically fetch current location or allow manual pinpoint on a map.
Field to input an address manually.
Next button.
Screen 3 - Additional Details:
Text field for additional comments.
Optional: Dropdowns or checkboxes for Incident/Pothole size, damage level, etc.
Submit button.
5. Report Status / User's Previous Reports
List View: Display all the reports submitted by the user.
Status Indicator: Indicate the status of each report (e.g., Submitted, In Progress, Resolved).
Detail Button: Option to view more details about each report.
6. Report Detail View
Images: Display images of the Incident.
Map: Small map snippet showing the location.
Details: Display user comments and details submitted.
Status: Display the current status and any feedback or messages from the admin/moderator.
7. Admin / Moderator Dashboard (if required)
Report Queue: List of all submitted reports.
Status Update: Options to update the status of reports.
Communication: Option to send feedback or messages to the user.
Map View: View all reports on a map for spatial analysis.
8. Profile Page
User Details: Display and allow editing of user name, email, etc.
Password Change: Option to change the password.
My Reports: Shortcut to view their own reports.
9. Responsive Views
Ensure you create designs for various breakpoints (desktop, tablet, mobile) to illustrate how the app will look across different devices.
10. User Feedback / Pop-ups
Success Message: Display after successfully submitting a report.
Error Message: Display in case of form error or issues.
Loading Spinner: Display while the app processes the submission.
Notes for Figma:
Components: Make use of Figma’s components to create reusable UI elements like buttons, input fields, etc.
Prototyping: Use Figma's prototyping feature to showcase the flow between different screens.
Style Guide: Create a style guide frame that includes color palette, typography, and common components to maintain consistency.
Project Description:
We are seeking a skilled developer or development team to build a Progressive Web App (PWA) focused on allowing users to report incidents within a select Municipality (white labelable). The primary goal of this application is to collect photographic and geolocation data from users and then standardize this information for an export file (pdf or csv).
Key Features:
-User Registration & Authentication: Users should be able to sign up, log in, and manage their profiles.
-Report Submission: Users need the ability to:
-Capture/upload photos of the incident.
-Fetch their current geolocation or manually select a location on a map.
-Input additional comments or details about the incident.
-Simplicity for end user
-Data Storage: Store reports, photographs, and user information securely.
-Data Standardization & Integration: Convert user data into a format compatible (to be determined).
-User Dashboard: Where users can view their previous reports and any feedback or updates on them.
-Admin Dashboard: For moderation and management of reports.
-Responsive Design: The PWA should be accessible and functional on various device sizes, from mobile phones to desktops.
Preferred Technologies (but open to suggestions):
Frontend: React, Vue.js, or Angular
Backend: Node.js with Express.js, Django, or Flask
Database: MongoDB or PostgreSQL
Authentication: Auth0 or Passport.js
Additional Requirements:
-Ensure data protection and user privacy.
-Implement effective error handling and feedback mechanisms.
App must be SEO-friendly and performant, following best PWA practices.
-Clear documentation for the code and any setup procedures.
Project Timeline:
We are aiming to have the initial version of the app ready within 3 months. Please include your estimated timeline in your proposal. We are flexible and have the ability to extend.
Budget:
Our initial budget for this scope of project is $2500. However, we are open to negotiation based on your expertise and proposed solution.
Proposal Requirements:
When submitting your proposal, please include:
-A brief introduction about yourself or your team.
-Relevant projects or PWAs you've developed in the past.
-An estimated timeline and breakdown of tasks/milestones.
-*The developer/firm must execute a Non-Disclosure Agreement enforceable in both the United States and their host country.*
-Any questions or clarifications you might have about the project.
Thank you for considering our project. We look forward to collaborating with a dedicated developer or team to bring this valuable community tool to life!
-----
FIGMA DETAILS
------
1. Welcome Screen / Landing Page
Header: App name and possibly a small logo.
Main Content: Brief about the app, its purpose, and how to use it.
Footer: Links to privacy policy, terms of service, and contact info.
Call to Action (CTA): "Get Started" or "Report a Incident" button.
2. User Authentication Screens
Login Screen: Fields for email and password, buttons for "Login" and "Forgot Password".
Sign-Up Screen: Fields for name, email, password, and a "Sign Up" button.
Password Recovery: Fields to enter email and a "Send Reset Link" button.
3. Home / Dashboard
Header: Navigation links/icons for "Home", "My Reports", "Profile", and "Log Out".
CTA: Button for "Report a New Incident".
List/Map View: Display previously reported incidents (possibly with a map view option).
4. Report Submission Flow
Screen 1 - Photo Upload:
Ability to upload/take a picture of the pothole.
Next button.
Screen 2 - Location Information:
Automatically fetch current location or allow manual pinpoint on a map.
Field to input an address manually.
Next button.
Screen 3 - Additional Details:
Text field for additional comments.
Optional: Dropdowns or checkboxes for Incident/Pothole size, damage level, etc.
Submit button.
5. Report Status / User's Previous Reports
List View: Display all the reports submitted by the user.
Status Indicator: Indicate the status of each report (e.g., Submitted, In Progress, Resolved).
Detail Button: Option to view more details about each report.
6. Report Detail View
Images: Display images of the Incident.
Map: Small map snippet showing the location.
Details: Display user comments and details submitted.
Status: Display the current status and any feedback or messages from the admin/moderator.
7. Admin / Moderator Dashboard (if required)
Report Queue: List of all submitted reports.
Status Update: Options to update the status of reports.
Communication: Option to send feedback or messages to the user.
Map View: View all reports on a map for spatial analysis.
8. Profile Page
User Details: Display and allow editing of user name, email, etc.
Password Change: Option to change the password.
My Reports: Shortcut to view their own reports.
9. Responsive Views
Ensure you create designs for various breakpoints (desktop, tablet, mobile) to illustrate how the app will look across different devices.
10. User Feedback / Pop-ups
Success Message: Display after successfully submitting a report.
Error Message: Display in case of form error or issues.
Loading Spinner: Display while the app processes the submission.
Notes for Figma:
Components: Make use of Figma’s components to create reusable UI elements like buttons, input fields, etc.
Prototyping: Use Figma's prototyping feature to showcase the flow between different screens.
Style Guide: Create a style guide frame that includes color palette, typography, and common components to maintain consistency.