Skip to content

gaurav337/TPG

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

ElevateFund - Modern Investment Platform Frontend

Introduction

ElevateFund is a cutting-edge, user-friendly investment platform built to connect investors with promising startup opportunities. Developed using React and TypeScript, this platform provides an intuitive experience for users to explore, analyze, and invest in high-growth startups.

The platform offers powerful features such as real-time portfolio tracking, AI-powered opportunity matching, investment performance analytics, and educational resources designed to assist investors in making well-informed decisions. ElevateFund is designed to streamline and enhance the investment process, making it easier for investors to achieve their financial goals.


Table of Contents:


Technology Stack:

  • Frontend Framework: React
  • Programming Language: TypeScript
  • State Management: React Context API/Redux
  • Styling: Tailwind CSS and Custom UI Components
  • Authentication: JWT/OAuth
  • Animation: Framer Motion
  • API Integration: REST API endpoints
  • Package Management: npm/yarn

Contributors:

Team Name: Aura++

  • Gaurav Kumar Jangid
  • Piyush Kumar
  • Dhruv Gupta

Made at: SVBH, MNNIT


Prerequisites

Before running the project locally, make sure you have the following installed on your machine:

  • Node.js (v14 or higher)
  • npm or yarn
  • Git

Getting Started

Step 1: Clone the Repository

Clone the project repository to your local machine:

git clone https://github.com/gaurav337/elevatefund_front.git

Navigate to the project folder:

cd elevatefund_front

Step 2: Install Dependencies

Install the necessary project dependencies:

npm install
# or
yarn install

Step 3: Set Up Environment Variables

Copy the example configuration to create a .env.local file:

cp .env.example .env.local

Update the environment variables with your configurations (e.g., API keys, database connections) in .env.local.

Step 4: Run the Development Server

To run the development server and see the app in your browser, execute:

npm run dev
# or
yarn dev

This will launch the app at http://localhost:3000.

Step 5: Build for Production

To build the app for production:

npm run build
# or
yarn build

Project Structure

The project is structured as follows:

elevatefund_front/
├── src/
│   ├── assets/          # Static assets (images, icons)
│   ├── components/      # Reusable UI components
│   ├── pages/           # Page components (e.g., Home, Dashboard)
│   ├── utils/           # Utility functions
│   ├── hooks/           # Custom React hooks
│   ├── contexts/        # React context providers for global state
│   ├── services/        # API service functions
│   └── styles/          # Global styles and Tailwind configuration
├── public/              # Public assets (favicon, index.html)
├── package.json         # Project dependencies and build scripts
└── .env.example         # Example environment variables

Key Features Implementation

1. Authentication System

  • JWT token management: Handles user registration, login, and token storage.
  • Protected Routes: Restricts access to specific routes for authenticated users only.
  • Multi-factor Authentication: Adds an extra layer of security during login.

2. Investment Platform Features

  • Investment Dashboard: Provides an overview of investments, portfolio growth, and performance analytics.
  • Opportunity Discovery: AI-powered system that matches investors with suitable startup opportunities.
  • Investment Tracking: Real-time tracking of investment updates and performance metrics.

3. Educational Resources

  • Investment Guides: Helps users understand various investment strategies and opportunities.
  • Market Insights: Regular blog posts and reports on market trends and investment opportunities.
  • Success Stories: Showcases successful investments made through ElevateFund.

Security Features

  • HTTPS Enforcement: Ensures secure communication between the frontend and the backend.
  • JWT Authentication: Protects sensitive user information and ensures secure user sessions.
  • XSS Protection: Prevents cross-site scripting attacks.
  • CSRF Protection: Secures the app from cross-site request forgery.
  • Input Validation: Ensures all inputs are sanitized and validated.

UI/UX Features

  • Responsive Design: Fully responsive layout that adjusts to different screen sizes.
  • Dark/Light Mode: Users can toggle between dark and light themes.
  • Animated Transitions: Smooth animations to improve user experience.
  • Error Handling: Meaningful error messages for any issues encountered.
  • Toast Notifications: Displays important notifications (e.g., successful investment) in real-time.

Performance Optimization

  • Code Splitting: Reduces load times by splitting JavaScript into smaller bundles.
  • Lazy Loading: Only loads the components necessary for the current page view.
  • Image Optimization: Compresses images for faster load times.
  • Caching Strategies: Implements browser caching and service workers for faster page loads.

Available Scripts

  • Start the development server:

    npm run dev
    # or
    yarn dev
  • Build for production:

    npm run build
    # or
    yarn build
  • Run tests:

    npm run test
  • Run linting:

    npm run lint
  • Format code:

    npm run format

Contributing

We welcome contributions from the community! To contribute:

  1. Fork the repository

  2. Create your feature branch:

    git checkout -b feature/AmazingFeature
  3. Commit your changes:

    git commit -m 'Add some AmazingFeature'
  4. Push to the branch:

    git push origin feature/AmazingFeature
  5. Open a Pull Request to merge your changes.


License

This project is licensed under the MIT License. See the LICENSE file for details.


Acknowledgments

  • Design inspiration from modern fintech platforms.
  • Open-source community contributions.
  • Frontend development best practices.
  • Built with ❤️ by the ElevateFund Team.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published