A web application for importing, viewing, and downloading Jupyter notebooks directly from GitHub repositories. This Jupyter reader provides a beautiful interface to browse, read, and organize your Jupyter notebooks without leaving your browser. A quick way to browse all the Jupyter files(.ipynb) from a repository.

This project is built on React + Vite + Tailwind CSS and Node.js.

Main Page

More pictures at the bottom.

• 🔍 Smart GitHub Integration - Automatically discover and import Jupyter notebooks from any public GitHub repository
• 📚 Organized Library - Beautiful grid layout to browse all your imported notebooks with repository information
• 👀 Rich Notebook Viewer - Clean, responsive notebook viewer with syntax highlighting and collapsible cells
• 💾 One-Click Downloads - Download original .ipynb files for offline use
• 💫 Real-time Stats - Track your repository and notebook counts in real-time
• 👀👀Run Code - Run code as viewing .ipynb in library(without downloading)

1. Clone the repository

git clone https://github.com/richardiffusion/Github_Jupyter_Reader.git cd github_jupyter_reader

2. Install Dependencies

# Install frontend dependencies cd frontend npm install # Install backend dependencies cd backend npm install

3. Start Development Servers

# Terminal 1 - Start backend (Port 3001) cd backend npm start # Terminal 2 - Start frontend (Port 3000) cd frontend npm run dev 

Navigate to http://localhost:3000 to check website in development

Note: GITHUB_TOKEN=your_github_token_here in .env in backend folder Please replace 'your-github-token-here' with your actual GitHub token. This token is necessary for authenticating requests to the GitHub API. Do not share this token publicly to avoid unauthorized access to your GitHub account. For more information on generating a GitHub token, visit: www.github.com/settings/tokens

4. Start Production Deployment

# Build the frontend cd frontend npm run build # Start production server cd backend npm start

The application will be available at http://localhost:3001

Frontend React 18 - UI framework Vite - Build tool and dev server Tailwind CSS - Styling and design system React Router - Client-side routing React Query - Data fetching and state management (to be updated) Framer Motion - Animations Lucide React - Icons

Backend Node.js - Runtime environment Express.js - Web framework GitHub REST API - Repository and file access CORS - Cross-origin resource sharing

Due to the limited speed and access of Github Access Token, the maximum processing file per request has been set to 15. If you want to change this limit, please visit github.js in backend/utils folder, and change the following codes.

// Process the first 15 notebook files const notebooks = []; for (const item of items.slice(0, 15)) { // change this number to the maximum number of files you want the token to process per request try { console.log(`Processing: ${item.path}`); ...