S&P 500 Returns After 10% Corrections: Investment Opportunity Analysis

Overview

This project, titled "S&P 500 Returns After 10% Corrections: Investment Opportunity Analysis", is a comprehensive market research report presented as a web application. Built using React, TypeScript, and Vite, the app analyzes historical S&P 500 data to identify investment opportunities following market corrections of 10% or more. It provides insights into historical performance, recovery patterns, risk assessment, and actionable investment strategies for investors.

The app is deployed on GitHub Pages and can be accessed at: https://kasduck.github.io/sp500/.

Project Purpose

The S&P 500 is a widely followed stock market index, and significant corrections (drops of 10% or more) often present unique opportunities for investors. This project aims to:

• Analyze historical S&P 500 data to understand returns after 10% corrections.
• Classify recovery patterns and assess risks associated with investing during these periods.
• Provide a technical assessment of current market conditions.
• Offer actionable investment strategies based on historical validation and comparisons.
• Present findings in an interactive web app with visualizations, including sections like Executive Summary, Historical Validation, Risk Assessment, and more.

The app includes features like:

• A responsive navbar and sidebar for navigation.
• Sections such as Executive Summary, Historical Comparison, Investment Strategy, Technical Assessment, Current Market Conditions, Conclusion, Appendix, and Disclaimer.
• Visualizations using charts (likely powered by a library like Chart.js or similar).
• PDF export functionality using jsPDF and html2canvas for users to download the report.

Technologies Used

• React: For building the user interface with reusable components.
• TypeScript: For type-safe JavaScript development.
• Vite: As the build tool and development server for fast builds and hot module replacement.
• Bootstrap: For responsive styling and layout (via react-bootstrap).
• jsPDF & html2canvas: For generating downloadable PDF reports.
• GitHub Pages: For hosting the deployed app.
• Git: For version control and deployment workflows.

Project Structure

The project follows a standard React + Vite structure:

sp500/
├── assets/                   # Static assets (images, etc.)
├── dist/                     # Build output (generated by Vite)
├── node_modules/             # Dependencies
├── src/                      # Source code
│   ├── components/           # React components (e.g., ExecutiveSummary.tsx, HistoricalValidation.tsx)
│   ├── App.tsx               # Main app component
│   ├── index.css             # Global styles
│   ├── main.tsx              # Entry point for React
│   └── vite-env.d.ts         # Vite environment types
├── index.html                # Root HTML file
├── package.json              # Project metadata and dependencies
├── vite.config.ts            # Vite configuration
├── tsconfig.json             # TypeScript configuration
└── README.md                 # Project documentation

What I Did

This project was a journey of building, troubleshooting, and deploying a React-based web app. Here’s a detailed breakdown of the steps I took:

1. Project Setup

• Initialized a new React project with TypeScript using Vite:

  npm create vite@latest sp500 -- --template react-ts
  

• Installed dependencies like react-bootstrap, bootstrap, jsPDF, and html2canvas for styling and PDF generation:

  npm install react-bootstrap bootstrap jspdf html2canvas
  

• Set up the project structure with components for each section (e.g., ExecutiveSummary.tsx, HistoricalValidation.tsx).

2. Development

• Built the app’s UI with a navbar, sidebar, and main content area using React and Bootstrap.
• Created components for each section of the report, including:
  • Executive Summary
  • Historical Comparison
  • Historical Validation
  • Recovery Classification
  • Risk Assessment
  • Investment Strategy
  • Technical Assessment
  • Current Market Conditions
  • Conclusion
  • Appendix
  • Disclaimer
• Added visualizations (likely charts) to display S&P 500 data.
• Implemented PDF export functionality using jsPDF and html2canvas to allow users to download the report.
• Configured vite.config.ts to set the base path for GitHub Pages deployment:

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import path from 'path';
  
  export default defineConfig({
    plugins: [react()],
    base: '/sp500/',
    build: {
      outDir: 'dist',
      rollupOptions: {
        input: path.resolve(__dirname, 'index.html'),
        output: {
          entryFileNames: 'assets/[name]-[hash].js',
          chunkFileNames: 'assets/[name]-[hash].js',
          assetFileNames: 'assets/[name]-[hash].[ext]'
        }
      }
    }
  });

3. Build and Bundling Challenges

• Initial Build Issues:
  • Encountered errors where Vite couldn’t find index.html because it was in public/. Moved index.html to the root and updated vite.config.ts to resolve this.
  • Fixed the build output structure to ensure dist/index.html (not dist/public/index.html) was generated. Initially, the build output showed:

    dist/public/index.html                       1.32 kB │ gzip:   0.68 kB
    dist/assets/index-BxebLMmD.css             236.52 kB │ gzip:  32.16 kB
    dist/assets/index-BA9XM4Mo.js            1,079.40 kB │ gzip: 319.30 kB
    

    After adjusting vite.config.ts, the output correctly showed:

    dist/index.html                              1.98 kB │ gzip:   0.95 kB
    dist/assets/index-BA9XM4Mo.js            1,079.40 kB │ gzip: 319.30 kB
    

• Bundling Confirmation:
  • Confirmed the app was bundled by checking the build output: 1180 modules transformed, including main.tsx, App.tsx, and dependencies like html2canvas and purify.es.
  • Addressed Vite’s warning about large chunks (>500 kB) by considering dynamic imports and manual chunking (future improvement).

4. Deployment Challenges

• Initial Deployment Attempts:
  • Set up a gh-pages branch to deploy the app to GitHub Pages.
  • Faced issues where the app was blank on https://kasduck.github.io/sp500/ due to incorrect file paths (e.g., index.html referencing /src/main.tsx instead of the bundled /sp500/assets/index-[hash].js).
  • Used the following deployment workflow initially:

    npm run build
    git checkout gh-pages
    xcopy dist\*.* . /E /H /C /I
    git add .
    git commit -m "Deploy to gh-pages"
    git push -f origin gh-pages
    git checkout main
    

  • Encountered issues where git checkout gh-pages failed due to uncommitted changes on main, leading to commits on the wrong branch:

    error: Your local changes to the following files would be overwritten by checkout:
        index.html  package.json  src/main.tsx  tsconfig.json  vite.config.ts
    

• Local File Deletion:
  • Accidentally deleted local files with aggressive cleaning commands while on gh-pages:

    Get-ChildItem -File | Remove-Item -Force -ErrorAction SilentlyContinue
    Get-ChildItem -Directory -Exclude .git | Remove-Item -Recurse -Force -ErrorAction SilentlyContinue
    

    These commands deleted critical files (src/, package.json, etc.), breaking the local project and causing errors like:

    npm error code ENOENT
    npm error path C:\Users\AMIT\downloads\sp500\package.json
    

  • Also lost the .git folder at one point, leading to:

    fatal: not a git repository (or any of the parent directories): .git
    

5. Recovery and Final Deployment

• Recovery:
  • Cloned the repository from GitHub multiple times to restore lost files:

    Remove-Item -Path C:\Users\AMIT\downloads\sp500 -Recurse -Force
    cd C:\Users\AMIT\downloads
    git clone https://github.com/kasduck/sp500.git
    cd sp500
    

  • Reinstalled dependencies after each recovery:

    npm install
    

• Safe Deployment:
  • Adopted a safer deployment method using a separate directory to avoid risking local files:

    mkdir C:\Users\AMIT\downloads\sp500-gh-pages
    cd C:\Users\AMIT\downloads\sp500-gh-pages
    git clone https://github.com/kasduck/sp500.git --branch gh-pages .
    xcopy C:\Users\AMIT\downloads\sp500\dist\*.* . /E /H /C /I
    git add .
    git commit -m "Deploy to gh-pages"
    git push -f origin gh-pages
    

• Fixed Blank Page:
  • Ensured dist/index.html had the correct script path (/sp500/assets/index-[hash].js).
  • Verified GitHub Pages settings: Source = gh-pages, Folder = / (root).

Setup Instructions

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/kasduck/sp500.git
   cd sp500
   

2. Install Dependencies:

   npm install
   

3. Run the Development Server:

   npm run dev
   

   • Open http://localhost:5173/sp500/ in your browser (note the /sp500/ path due to base config).

4. Build for Production:

   npm run build
   

   • Output will be in the dist/ folder.

5. Preview the Build Locally:

   npm run preview
   

   • Open http://localhost:4173/sp500/.

Deployment to GitHub Pages

To deploy the app to GitHub Pages:

1. Build the Project:

   npm run build
   

2. Deploy to gh-pages (Safe Method):

   mkdir ../sp500-gh-pages
   cd ../sp500-gh-pages
   git clone https://github.com/kasduck/sp500.git --branch gh-pages .
   xcopy ..\sp500\dist\*.* . /E /H /C /I
   git add .
   git commit -m "Deploy to gh-pages"
   git push -f origin gh-pages
   cd ..\sp500
   

3. Verify Deployment:

   • Visit https://kasduck.github.io/sp500/.
   • Check GitHub Pages settings: Source = gh-pages, Folder = / (root).

Challenges Faced

• Build Issues:
  • Vite couldn’t find index.html when it was in public/. Moved it to the root and updated vite.config.ts.
  • Output was initially dist/public/index.html, fixed by adjusting vite.config.ts to flatten the structure.
• Deployment Issues:
  • Blank page on GitHub Pages due to incorrect script paths in index.html.
  • Accidentally deleted local files with aggressive Remove-Item commands while on gh-pages.
  • Pushed to the wrong branch (main instead of gh-pages) due to uncommitted changes.
• Recovery:
  • Cloned the repo multiple times to recover lost files.
  • Used a separate directory for deployment to avoid further local file loss.
• Bundling:
  • Confirmed bundling by analyzing build output (1180 modules transformed).
  • Noted large chunk sizes (>500 kB) as an area for optimization.

Future Improvements

• Optimize Bundle Size:
  • Address the Vite warning about large chunks (>500 kB) by using dynamic imports or manual chunking:

    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['react', 'react-dom', 'react-bootstrap'],
            jspdf: ['jspdf']
          }
        }
      }
    }

• Add More Visualizations:
  • Enhance the app with additional charts or interactive data visualizations.
• Improve PDF Export:
  • Optimize html2canvas rendering for better PDF quality.
• Testing:
  • Add unit tests using a framework like Jest or Vitest.

License

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

Contact

For questions or feedback, feel free to reach out:

• GitHub: kasduck
• Email: [aryansingh1535@gmail.com]

---

### How to Add This to Your Project
1. Open a text editor (e.g., Notepad, VS Code).
2. Copy the entire text above (from `# S&P 500 Returns After 10% Corrections: Investment Opportunity Analysis` to the end).
3. Navigate to `C:\Users\AMIT\downloads\sp500\`.
4. If `README.md` doesn’t exist, create it:

New-Item README.md

5. Open `README.md` in your editor and paste the copied text.
6. Replace `[your-email@example.com]` with your actual email address.
7. Save the file.
8. Commit and push to GitHub:

git add README.md git commit -m "Add detailed README" git push origin main