MERN Custom App UI Development
Budget: $750 – $1,500 USD
Looking for a custom app interface for our registered users (screenshot below):
Create a user experience similar to the one in the screenshot below we need to (you can use the stack that you know that best gets you to our goal but that will also be easy for me to take over edits after you have completed most tasks):
Project note:
To see an example of the app refereed to in the image (And the design scheme we are looking to implement), register for free at: spikes.studio where you will be taken to: https://app.spikes.studio/
(spikes studio is being referenced so you can see a live version of the type of user interface We're going for. that's the only purpose that I'm showing you spike studio. This 3 page attachment I provided details specifically the functions That should be able to be enabled within the application. It is also enough for you to be able to gauge The time frame and the cost without necessarily understanding the business theme that will be going inside of it. )
The left side bar for our app will have tabs for:
Dashboard: Needs to show a progress completion bar with timeline points that are clickable. When they click on the timeline point it will Redirect them to the proper tutorial In the app that explains the details of that particular point on the timeline. Their original registration info and ability to update their basic Registration data while still showing the old data to admin that was submitted.
Tutorials (video tuts) View is three columns on desktop converting to one column on mobile (I will be adding the future video we just need this tabs UI set up)
Guides (pdfs, docs, Should be scroll-able on page as well as downloadable Via buttons)
Loyalty Program where they can Invite a friend with their own url/link/code if the friend registers on the site they can be auto shown as the referrer. If someone registers from an already registered users link then both parties should have a notification in the application that shows the traffic from any link clicks from the use of their link As well as the initials of the person that referred them if anyone. There will also need to be an earnings integration based off of the six different packages that can be purchased and the commission's earned via each of the different packages. People that are connected via referral should be able to see the commissions that either party has made each week.
Upgrade The upgrade button will also be on the top right of the application interface. When they click upgrade it will take them within the application to a four option price boxes That all have a button (Current paid members upgrade with a 10% discount) that Will open a payment request submission form that will allow them to request A discounted payment For upgrade. When the form is submitted an email said will be sent admin. The upgrade button should be highlighted like in the spike studio app.
Live support use Matrix's API or Rocket.Chat's API to send and receive calls & messages. The support personnel will need to be able to have an application ( Matrix's API or Rocket.Chat) on either an Android or Apple phone to be able to respond to message support submissions live. End-to-End Encryption: Implement end-to-end encryption for sensitive communication, ensuring data is encrypted on the sender's device and only decrypted on the recipient's device.
Keep in mind the details below are a mix between a chat GPT copy and paste as well as edited lines in the appropriate areas.
1. Design a Dashboard Layout
- Header Section: Include a navigation menu at the top, with options like "UPGRADE" and a user profile icon/popup As well as a search box that uses the guides and tutorial sections for keywords and phrases submitted in the search box.
- Sidebar: Create a sidebar on the left with menu items like "Tutorials," "Dashboard," "Settings," and more, similar to what is shown in the screenshot and provided above.
- Main Content Area: Display a dashboard area where key metrics and subscription information are visible. Ensure that the data is presented in a clean and organized way.
2. Backend Development
- User Authentication: Implement user authentication to differentiate between free and pro users. Use JWT (JSON Web Tokens) or session-based authentication to manage user sessions. When they register they will need to provide a password as well as a field to verify their originally submitted password.
- Subscription Management: Integrate a subscription management system to handle free and paid plans where you can manage the status and features available to different subscription levels. For example we want it set up where everyone regardless if they've paid for a package or not can register for free and have access to the guides section while everything else will be unavailable except upgrade. There will be no payment integration via PayPal or stripe or anything like that. When they click on upgrade on the sidebar or the top menu area it will go to the Request to make a payment form In the app.
- Database Structure: Set up a database to store user information, subscription details, and other necessary data. Consider using MySQL, PostgreSQL, or NoSQL databases like MongoDB.
- API Integration: If your platform offers API features (like the "API New" in the sidebar), set up an API management system that handles user requests based on their subscription level.
3. Frontend Development
- Responsive Design: Use a responsive CSS framework like Bootstrap or Tailwind to ensure the dashboard looks good on different screen sizes.
- React/Vue.js/Angular: Consider using a frontend framework like React, Vue.js, or Angular to build a dynamic and responsive user interface.
- Custom Components: Create custom components for different dashboard sections, such as subscription details, metrics, and call-to-action buttons.
4. Integrate Analytics & User Metrics
- Display real-time metrics such as "You were referred by," "Commissions earned," and "Number of Downloads" using data fetched from the backend.
- Use Mixpanel for tracking user interactions and engagement on your dashboard.
5. UI/UX Enhancements
- Tooltip and Help Sections: Provide users with tooltips or a help section to guide them through using your platform (Which is the guides and tutorial section tabs).
- Loyalty Program Integration: If applicable, integrate a loyalty program that tracks user activity and offers rewards.
6. Testing & Iteration
- Conduct user testing to gather feedback and make necessary UI/UX adjustments.
- Implement A/B testing for different dashboard layouts or feature placements to optimize user engagement.
7. Deployment
- We will be hosting on a german server let us know when you need access (Deploy your application using a reliable hosting service. Consider using platforms like AWS, Heroku, or DigitalOcean for scalable hosting solutions.)
Next to chat about the following Steps
- Decide on the technology stack you will use for both frontend and backend development.
- Start with designing the UI in a tool like Figma or Sketch.
- Implement the backend authentication and subscription management features (there will be no payments integration).
- Develop the frontend dashboard with dynamic data integration.
Create a user experience similar to the one in the screenshot below we need to (you can use the stack that you know that best gets you to our goal but that will also be easy for me to take over edits after you have completed most tasks):
Project note:
To see an example of the app refereed to in the image (And the design scheme we are looking to implement), register for free at: spikes.studio where you will be taken to: https://app.spikes.studio/
(spikes studio is being referenced so you can see a live version of the type of user interface We're going for. that's the only purpose that I'm showing you spike studio. This 3 page attachment I provided details specifically the functions That should be able to be enabled within the application. It is also enough for you to be able to gauge The time frame and the cost without necessarily understanding the business theme that will be going inside of it. )
The left side bar for our app will have tabs for:
Dashboard: Needs to show a progress completion bar with timeline points that are clickable. When they click on the timeline point it will Redirect them to the proper tutorial In the app that explains the details of that particular point on the timeline. Their original registration info and ability to update their basic Registration data while still showing the old data to admin that was submitted.
Tutorials (video tuts) View is three columns on desktop converting to one column on mobile (I will be adding the future video we just need this tabs UI set up)
Guides (pdfs, docs, Should be scroll-able on page as well as downloadable Via buttons)
Loyalty Program where they can Invite a friend with their own url/link/code if the friend registers on the site they can be auto shown as the referrer. If someone registers from an already registered users link then both parties should have a notification in the application that shows the traffic from any link clicks from the use of their link As well as the initials of the person that referred them if anyone. There will also need to be an earnings integration based off of the six different packages that can be purchased and the commission's earned via each of the different packages. People that are connected via referral should be able to see the commissions that either party has made each week.
Upgrade The upgrade button will also be on the top right of the application interface. When they click upgrade it will take them within the application to a four option price boxes That all have a button (Current paid members upgrade with a 10% discount) that Will open a payment request submission form that will allow them to request A discounted payment For upgrade. When the form is submitted an email said will be sent admin. The upgrade button should be highlighted like in the spike studio app.
Live support use Matrix's API or Rocket.Chat's API to send and receive calls & messages. The support personnel will need to be able to have an application ( Matrix's API or Rocket.Chat) on either an Android or Apple phone to be able to respond to message support submissions live. End-to-End Encryption: Implement end-to-end encryption for sensitive communication, ensuring data is encrypted on the sender's device and only decrypted on the recipient's device.
Keep in mind the details below are a mix between a chat GPT copy and paste as well as edited lines in the appropriate areas.
1. Design a Dashboard Layout
- Header Section: Include a navigation menu at the top, with options like "UPGRADE" and a user profile icon/popup As well as a search box that uses the guides and tutorial sections for keywords and phrases submitted in the search box.
- Sidebar: Create a sidebar on the left with menu items like "Tutorials," "Dashboard," "Settings," and more, similar to what is shown in the screenshot and provided above.
- Main Content Area: Display a dashboard area where key metrics and subscription information are visible. Ensure that the data is presented in a clean and organized way.
2. Backend Development
- User Authentication: Implement user authentication to differentiate between free and pro users. Use JWT (JSON Web Tokens) or session-based authentication to manage user sessions. When they register they will need to provide a password as well as a field to verify their originally submitted password.
- Subscription Management: Integrate a subscription management system to handle free and paid plans where you can manage the status and features available to different subscription levels. For example we want it set up where everyone regardless if they've paid for a package or not can register for free and have access to the guides section while everything else will be unavailable except upgrade. There will be no payment integration via PayPal or stripe or anything like that. When they click on upgrade on the sidebar or the top menu area it will go to the Request to make a payment form In the app.
- Database Structure: Set up a database to store user information, subscription details, and other necessary data. Consider using MySQL, PostgreSQL, or NoSQL databases like MongoDB.
- API Integration: If your platform offers API features (like the "API New" in the sidebar), set up an API management system that handles user requests based on their subscription level.
3. Frontend Development
- Responsive Design: Use a responsive CSS framework like Bootstrap or Tailwind to ensure the dashboard looks good on different screen sizes.
- React/Vue.js/Angular: Consider using a frontend framework like React, Vue.js, or Angular to build a dynamic and responsive user interface.
- Custom Components: Create custom components for different dashboard sections, such as subscription details, metrics, and call-to-action buttons.
4. Integrate Analytics & User Metrics
- Display real-time metrics such as "You were referred by," "Commissions earned," and "Number of Downloads" using data fetched from the backend.
- Use Mixpanel for tracking user interactions and engagement on your dashboard.
5. UI/UX Enhancements
- Tooltip and Help Sections: Provide users with tooltips or a help section to guide them through using your platform (Which is the guides and tutorial section tabs).
- Loyalty Program Integration: If applicable, integrate a loyalty program that tracks user activity and offers rewards.
6. Testing & Iteration
- Conduct user testing to gather feedback and make necessary UI/UX adjustments.
- Implement A/B testing for different dashboard layouts or feature placements to optimize user engagement.
7. Deployment
- We will be hosting on a german server let us know when you need access (Deploy your application using a reliable hosting service. Consider using platforms like AWS, Heroku, or DigitalOcean for scalable hosting solutions.)
Next to chat about the following Steps
- Decide on the technology stack you will use for both frontend and backend development.
- Start with designing the UI in a tool like Figma or Sketch.
- Implement the backend authentication and subscription management features (there will be no payments integration).
- Develop the frontend dashboard with dynamic data integration.