- src/
- components/ → Reusable UI components
- pages/ → Application pages (Login, Dashboard, etc.)
- routes/ → Route definitions
- assets/ → Images and static files
This project follows a modular React architecture for scalability and maintainability.
A consistent UI theme has been implemented using Tailwind CSS.
The project uses a unified color palette (Primary, Secondary, Accent) and typography to ensure visual consistency across the platform.
📸 Screenshot: UI theme and dashboard layout
A meeting scheduling calendar has been integrated using FullCalendar.
This calendar allows entrepreneurs to visually view scheduled meetings and upcoming discussions.
Key highlights:
- Monthly calendar view
- Clean and responsive UI
- Ready for future availability and booking logic
📸 Screenshot: Calendar integrated into Entrepreneur Dashboard
Dummy meetings have been added to demonstrate calendar functionality:
- Investor Meeting – 20 Dec
- Pitch Discussion – 22 Dec
- Follow-up Call – 25 Dec
📸 Screenshot: Calendar with sample meeting events
In Week 1, the foundation of the project was established with a strong focus on UI setup and meeting scheduling functionality. A consistent and scalable UI theme was implemented using Tailwind CSS, ensuring uniform colors, typography and layout across the application. This provided a solid visual base for future feature development.
The core highlight of this week was the integration of a meeting scheduling calendar into the Entrepreneur Dashboard. Using a clean and responsive calendar UI, entrepreneurs can visually track meetings and discussions. Demo meeting events were added to showcase functionality and simulate real-world usage scenarios, making the feature easy to understand and review.
Overall, Week 1 successfully laid down the structural and visual groundwork of the application, preparing the platform for advanced collaboration features in the upcoming phases.
-brightgreen?style=for-the-badge){kind=icon}
A video calling interface has been added as a frontend mock to demonstrate real-time collaboration capabilities between investors and entrepreneurs.
Features included:
- Video call screen layout
- Mic on/off toggle
- Video on/off toggle
- End call button
- Clean and minimal UI for demo purposes
Screenshot: Full page dashboard with video call section 
Screenshot: Video calling mock interface
A document chamber UI has been added to manage deal-related files such as proposals and agreements.
The interface includes document listing, upload button (mock), and status labels like Draft, In Review and Signed.
📸 Screenshot: Document Chamber UI
Status: Completed successfully
In Week 2, key UI features were implemented and integrated smoothly into the Nexus project. The focus was on improving usability, visual consistency and core dashboard functionality.
- Calendar Dashboard integrated and displayed correctly
- Video Call Mock UI added for meeting simulation
- Document Chamber UI implemented for managing startup documents
- Consistent color theme & layout applied across new components
All features were tested locally, screenshots were captured and changes were pushed to GitHub.
Week 2 tasks are fully completed and ready for review.
-brightgreen?style=for-the-badge){kind=icon}
In Week 3, the focus is on implementing the Payment UI for the Nexus Platform.
This module allows users to view and interact with a clean, user-friendly payment interface, preparing the system for future payment integrations.
- Dedicated Payments page accessible from the sidebar
- Card-based payment layout (UI mock)
- Consistent design using Tailwind CSS theme
- Fully responsive layout inside Dashboard
- New Payments page created and connected via routing
- Sidebar navigation updated to include Payments
- Dashboard layout reused for consistency
- UI prepared for future backend/payment gateway integration
Below screenshots demonstrate the completed Payment UI setup:
-
Payment Card UI / Slide
-
Payment Page – Full View
✅ Payment UI created
✅ Routing configured
✅ Screenshots documented
⏳ Next: Payment flow logic & enhancements
The following screenshots demonstrate the mock payment actions implemented as part of the Payment UI.
These actions are UI-based simulations designed to represent real-world payment workflows.
-
Wallet Overview & Add Payment (Mock UI)
Displays the wallet balance with an option to add funds. This screen provides a quick overview of available payment balance inside the wallet.
-
Payment Actions: Deposit / Withdraw / Transfer (Mock UI)
Shows available payment actions including deposit, withdraw and transfer. These actions are UI simulations representing common financial operations.
-
Recent Transactions List (Mock UI)
Represents transferring funds between users within the platform (UI mock).
Below are the key screenshots demonstrating the completed features:
Entrepreneur Dashboard – Funding Request View
Payments Page – Recent Transactions (Sender → Receiver visible)
Funding Offer Form (Investor Side)
The following screenshots demonstrate the mock funding deal flow from an investor to an entrepreneur. This completes the simulated investment lifecycle on the platform.
Entrepreneur Dashboard – Funding Request View Shows pending funding requests received from investors on the entrepreneur dashboard.
Funding Offer Card (Zoomed View) Displays an individual funding offer card with Pending status and available actions.
Send Funding Offer Section (Investor Side) Investor can enter funding amount, add an optional message and send a funding offer.
Entrepreneurs can view funding offers sent by investors and take action (Accept / Decline). This completes the mock funding deal flow between Investor and Entrepreneur.
Security & Access Control (Completed)
Overview
Milestone 6 focuses on improving frontend security and access control for the Nexus platform.
This module enhances the authentication flow with role awareness and additional security layers.
Implemented Features
• Role-based Login UI (Investor / Entrepreneur) with separate dashboard redirects
• Multi-step Login Flow with a mock OTP (2FA) screen for enhanced security
• Clean, responsive authentication UI using reusable components
-
• Login Page (Role Selection)
-
• OTP Verification Screen*
• Successful Redirect to Role-based Dashboard
Module Status These updates mark the start of Module 6 and prepare the platform for stronger authentication and access control mechanisms.
In this milestone, we focused on integrating all newly developed modules into the main application flow. All major features such as Payments, Security & Access Control, and role-based dashboards are now accessible directly from the sidebar navigation.
The application layout ensures clear separation between Entrepreneur and Investor panels, improving usability and navigation clarity. Basic responsive checks were performed to ensure proper layout on different screen sizes.
This milestone also prepares the platform for final demo and walkthrough by adding a dedicated Platform Demo entry. Screenshots below demonstrate successful integration of modules and navigation flow.
This screenshot shows the complete dashboard sidebar with role-based navigation, including Payments, Security & Access and Platform Demo modules.
This view highlights the Entrepreneur dashboard with startup management, investor discovery, payment and document access.
This screenshot demonstrates the Investor dashboard, including portfolio access, startup discovery, payments and the Deals module.
This screen represents the Security & Access module featuring password strength indicators, access-related settings and role-based UI control.
Description:
A welcome popup appears as soon as the dashboard loads, introducing the user to the main dashboard area and the overall layout. This helps users quickly understand the interface and feel comfortable navigating the system.
Description:
In this step, the guided tour highlights the sidebar and explains how users can navigate between different modules and sections using the sidebar menu. This ensures a clear and user-friendly navigation experience.
Description:
This step focuses on the top navigation bar, showing where users can access notifications, profile options and account-related settings. It helps users stay informed and manage their profile easily.
Description:
The final step highlights the main content area, explaining that this section is used to display core data, pages, reports and important dashboard information.
- Interactive dashboard onboarding experience
- Clear and step-by-step navigation guidance
- Professional, demo-ready UI walkthrough
- UI-only guided tour implemented using React Joyride
- This walkthrough is UI-only and does not affect backend logic
- Designed for demos, presentations and first-time user onboarding
- Fully compatible with modern React dashboards
Note: This guided walkthrough enhances the user experience and helps new users understand the dashboard quickly and effectively.
- Walkthrough is UI-only with no backend impact
- Designed for demos and first-time user onboarding
- Built using React Joyride for smooth step-by-step guidance
Milestone 7 focuses on final integration, testing, and demo preparation of the Business Nexus frontend project. At this stage, all major UI modules are connected, walkthrough guidance is implemented and the project is ready for presentation and evaluation.
- All modules are now accessible through main navigation & sidebar
- Role-based UI navigation verified (Investor / Entrepreneur)
- Responsive testing across desktop and tablet views
- Guided walkthrough implemented using React Joyride
- Demo video recorded and published
The walkthrough helps first-time users understand the dashboard layout:
- Welcome popup on dashboard load
- Sidebar navigation highlighted
- Navbar actions (profile, notifications)
- Main content area explanation
This improves usability and gives a professional onboarding experience.
▶️ YouTube Demo Video: YouTube Video link- 💼 LinkedIn Demo Post: LinkedIn Demo Post
- 🌐 Live Deployment (Vercel): Live Link
- Frontend: React.js, Tailwind CSS
- Routing: React Router
- Calendar: FullCalendar
- Tour Guide: React Joyride
- Icons: Lucide React / Heroicons
- Build Tool: Vite
# Clone the repository
git clone https://github.com/your-username/nexus-platform.git
# Navigate to project directory
cd nexus-platform
# Install dependencies
npm install
# Start development server
npm run dev
The project is 98%+ complete, with all planned frontend milestones successfully delivered.
Special thanks to:
*Special thanks to Developer Hub Corporation for learning support and guidance.
This project is licensed under the MIT License.
🔗 License details will be added here.
Muhhammad Yasir
Muhammad Yasir
GitHub: https://github.com/YasirAwan4831
LinkedIn: https://www.linkedin.com/in/yasirawan4831/
Email: my3154831409@gmail.com