StackSurge : Base Release

StackSurge : Investor and Startup Association Platform

Overview

The Investor and Startup Association Platform connects Investors with Startups/Companies, providing a seamless and efficient environment for investment and growth. The platform has been built to cater to two types of users: Investors and Companies (Startups). Each user type has a tailored dashboard and user experience, ensuring that the platform meets the specific needs of investors and startups while maintaining clear separation between the two roles.

Tech Stack

• Frontend:

  • Next.js, TypeScript, Tailwind CSS for building a responsive, dynamic, and interactive user interface.
  • Material UI, Shad CN UI, Recharts for data visualization and consistent, modern UI components.

• Backend:

  • Convex for backend management, handling real-time data synchronization and secure, scalable database storage.
  • Kinde Authentication for managing user identities and securing access.
  • UploadThing SaaS for handling file uploads.
  • Stripe for secure payment handling (for investments and fundraising).

Core Functionalities

1. User Registration and Role Management

Users can register as either an Investor or a Company (Startup), with each role unlocking different features and views within the platform.

• Investor Registration: Investors can sign up using their email and basic information, after which they are granted access to the Investor Dashboard.
• Company Registration: Startups and companies can register their business details to gain access to the Company Dashboard.

Upon registration, the system uses Kinde Authentication to manage user roles, ensuring that an Investor cannot access the Company dashboard, and a Company user cannot view the Investor dashboard. This separation guarantees that each user type has a customized experience and only sees relevant information.

2. Profile Creation and Verification

Both Investors and Companies can create a detailed profile that includes essential information such as:

• Investors: Investment preferences, previous investments, and areas of interest.
• Companies: Business plans, funding requirements, and key metrics for potential investors.

Before they can access key platform features (such as making investments or raising funds), both Investors and Companies must verify their profiles. Verification typically involves submitting required documentation, and the platform will ensure that only verified users can perform transactions. This step is crucial for maintaining the integrity and trustworthiness of the platform.

3. Separate Dashboards for Investors and Companies

After registration and verification, users are directed to their respective dashboards.

• Investor Dashboard:
  Investors can view key metrics and performance data related to their investments. The dashboard includes several charts and graphs that provide insights into:

  • Growth Tracking: A chart showing the growth of investments over the last few days, weeks, or months.
  • Investment History: A detailed history of past and ongoing investments, including return on investment (ROI) and performance data.
  • Investment Analytics: A breakdown of returns and growth to help investors make data-driven decisions.
  • Company Exploration: A section where investors can browse companies, view their profiles, and explore new investment opportunities.

• Company Dashboard:
  Startups and companies have a dashboard tailored to their needs, which includes:

  • Company Statistics: Key business performance data, funding requirements, and growth projections.
  • Investor Interactions: Companies can find and pitch offers to investors. The dashboard includes a tool to search for investors based on preferences such as industry, investment history, and fund availability.
  • Offer Pitching: Startups can prepare and send detailed pitches to investors outlining the benefits of investing in their business.

4. Investment and Fundraising

• Investing in Companies: Investors can explore and select startups to invest in. The process is seamless, and Stripe is integrated for handling secure payments. Investors can make investments directly through the platform, and payments are processed using Stripe for easy, secure transactions.

• Raising Funds for Companies: Companies can raise funds by pitching their offers to investors. After verifying their profiles, they can submit funding requests. Investors can review these offers and decide whether to invest, making the process transparent and efficient.

5. Charts and Data Visualization

Both Investors and Companies benefit from advanced data visualization:

• Investor Charts:
  Investors have access to various charts that show critical data such as:

  • Growth over time: How their investments have grown in the past few days or weeks.
  • Returns on investment: How profitable each investment has been, with detailed statistics.
  • Investment History: A visual timeline of investments made by the user.

• Company Charts:
  Companies can also use charts to track their fundraising progress, growth metrics, and future funding needs, helping them make informed decisions on how to approach investors.

6. Payment Integration (Stripe)

Both Investors and Companies benefit from integrated payment systems via Stripe. This includes:

• Secure Transactions: Stripe ensures that all investments and fundraising activities are secure, fast, and compliant with financial regulations.
• Fundraising: Startups can raise funds from investors with the assurance that payments are processed safely and efficiently.
• Investment: Investors can make secure payments when investing in companies, ensuring that all financial transactions are handled seamlessly within the platform.

The Investor and Startup Association Platform provides a robust, secure, and efficient environment for investors and startups. With separate dashboards, advanced data visualization, and secure payment handling, the platform ensures a seamless experience for both user types. The profile verification system enhances trust, while integration with Stripe ensures secure investments and fundraising. By offering these features, the platform enables both Investors and Companies to make informed decisions, build meaningful relationships, and drive business growth.

Connecting Investors and Startups/Companies seamlessly. This platform empowers investors to find valuable opportunities while enabling startups and companies to request and secure investments.

---

Key Features

• Dual User System: Distinct interfaces for Investors and Startups/Companies
• Role-based Functionalities: Investors can explore, evaluate, and invest in potential businesses; Startups/Companies can request funding and manage profiles
• Rich Data Visualization: Interactive charts and detailed insights

---

Tech Stack

• Framework: Next.js
• Authentication: Kinde Auth
• Backend: Convex
• File Storage: UploadThing
• Payment Method: Stripe
• Styling: Tailwind CSS
• Languages: TypeScript, TSX (TypeScript XML)

---

Libraries Used

• UI Libraries: Shad CN UI, Material UI, Hyper UI
• Icons: Lucid Icons
• Form Validation: Zod, React Hook Form
• Charts: Recharts for data visualization

---

📂 Project Structure

Here's a glimpse into the file structure to navigate through the project components efficiently:

Click to view file structure

└── 📁src
    └── 📁app
        └── 📁_components
            └── CompanyCard.tsx
            └── CompanyDashboard.tsx
            └── Companysidebar.tsx
            └── Companysnippet.tsx
            └── CProfile.tsx
            └── CProfileComponent.tsx
            └── Cregister.tsx
            └── CuserProfile.tsx
            └── Footer.tsx
            └── Header.tsx
            └── Hero.tsx
            └── InvestmentBarChart.tsx
            └── InvestorCard.tsx
            └── InvestorCardSnip.tsx
            └── InvestorDetails.tsx
            └── Iregister.tsx
            └── LinearLineChart.tsx
            └── LineChart.tsx
            └── LineChartInvForLastWeek.tsx
            └── Loader.tsx
            └── Loggedheader.tsx
            └── Notfound.tsx
            └── Payment.tsx
            └── SelectRole.tsx
            └── ShareHolders.tsx
            └── Side.tsx
            └── TrackList.tsx
        └── 📁(routes)
            └── 📁company
                └── 📁dashboard
                    └── page.tsx
                └── 📁equity-holder
                    └── page.tsx
                └── 📁investors
                    └── 📁[investorId]
                        └── page.tsx
                    └── page.tsx
                └── 📁profile
                    └── page.tsx
                └── 📁your-company
                    └── page.tsx
                └── layout.tsx
                └── page.tsx
            └── 📁dashboard
                └── 📁[userid]
                    └── page.tsx
                └── layout.tsx
                └── page.tsx
            └── 📁investor
                └── 📁(routes)
                    └── 📁companies
                        └── 📁[companyId]
                            └── 📁invest
                                └── page.tsx
                            └── page.tsx
                        └── 📁sample
                            └── page.tsx
                        └── page.tsx
                    └── 📁dashboard
                        └── page.tsx
                    └── 📁investments
                        └── page.tsx
                    └── 📁profile
                        └── page.tsx
                    └── 📁startups
                        └── 📁[startupId]
                            └── 📁invest
                                └── page.tsx
                            └── page.tsx
                        └── page.tsx
                └── layout.tsx
                └── page.tsx
            └── 📁select
                └── page.tsx
            └── 📁test
                └── page.tsx
        └── 📁api
            └── 📁auth
                └── 📁[kindeAuth]
                    └── route.js
            └── 📁create-payment-intent
                └── route.ts
            └── 📁uploadthing
                └── core.ts
                └── route.ts
        └── 📁fonts
            └── GeistMonoVF.woff
            └── GeistVF.woff
        └── 📁payment-success
            └── page.tsx
        └── 📁stripe-component
            └── CheckoutPage.tsx
        └── ConvexClientProvider.tsx
        └── favicon.ico
        └── globals.css
        └── layout.tsx
        └── loading.tsx
        └── page.tsx
    └── 📁components
        └── 📁ui
            └── alert-dialog.tsx
            └── avatar.tsx
            └── button.tsx
            └── card.tsx
            └── chart.tsx
            └── checkbox.tsx
            └── dropdown-menu.tsx
            └── form.tsx
            └── input.tsx
            └── label.tsx
            └── progress.tsx
            └── select.tsx
            └── separator.tsx
            └── skeleton.tsx
            └── sonner.tsx
            └── table.tsx
    └── 📁lib
        └── convertToSubcurrency.ts
        └── utils.ts
    └── 📁shared
    └── 📁utils
        └── uploadthing.ts
    └── middleware.ts