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.
- Introduction
- Technology Stack
- Prerequisites
- Getting Started
- Project Structure
- Key Features Implementation
- Security Features
- UI/UX Features
- Performance Optimization
- Available Scripts
- Contributing
- License
- Acknowledgments
- 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
Team Name: Aura++
- Gaurav Kumar Jangid
- Piyush Kumar
- Dhruv Gupta
Made at: SVBH, MNNIT
Before running the project locally, make sure you have the following installed on your machine:
- Node.js (v14 or higher)
- npm or yarn
- Git
Clone the project repository to your local machine:
git clone https://github.com/gaurav337/elevatefund_front.gitNavigate to the project folder:
cd elevatefund_frontInstall the necessary project dependencies:
npm install
# or
yarn installCopy the example configuration to create a .env.local file:
cp .env.example .env.localUpdate the environment variables with your configurations (e.g., API keys, database connections) in .env.local.
To run the development server and see the app in your browser, execute:
npm run dev
# or
yarn devThis will launch the app at http://localhost:3000.
To build the app for production:
npm run build
# or
yarn buildThe 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
-
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
We welcome contributions from the community! To contribute:
-
Fork the repository
-
Create your feature branch:
git checkout -b feature/AmazingFeature
-
Commit your changes:
git commit -m 'Add some AmazingFeature' -
Push to the branch:
git push origin feature/AmazingFeature
-
Open a Pull Request to merge your changes.
This project is licensed under the MIT License. See the LICENSE file for details.
- Design inspiration from modern fintech platforms.
- Open-source community contributions.
- Frontend development best practices.
- Built with ❤️ by the ElevateFund Team.