FactorSphere

Democratizing academic journal rankings through transparent, community-driven metrics.

Overview

FactorSphere is an open-source platform that provides transparent, accessible journal rankings for researchers worldwide. Built with modern web technologies and clean design principles.

Live Site: https://lander.factorsphere.org

Features

• Smart Search - Instantly find journals by name, field, or impact factor
• AI Recommendations - Get personalized journal suggestions powered by semantic search
• Comprehensive Metrics - Impact factors, SJR rankings, H-index, and citation analytics
• 100% Open Source - Transparent methodologies and open data
• 4,000+ Journals - Extensive database of indexed journals

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Animations: CSS animations with scroll-triggered effects
• Deployment: Cloudflare Pages

Deploying to Cloudflare Pages

Prerequisites

1. A Cloudflare account
2. Node.js v18 or later installed locally
3. Git installed locally

Option 1: Deploy via Cloudflare Dashboard (Recommended)

Step 1: Push Code to GitHub

```bash

Initialize git repository (if not already)

git init

Add all files

git add .

Commit

git commit -m "Initial commit"

Add your GitHub remote

git remote add origin https://github.com/YOUR_USERNAME/factorsphere-lander.git

Push to GitHub

git push -u origin main ```

Step 2: Connect to Cloudflare Pages

1. Log in to Cloudflare Dashboard
2. Navigate to Workers & Pages in the sidebar
3. Click Create application > Pages > Connect to Git
4. Select your GitHub account and the factorsphere-lander repository
5. Click Begin setup

Step 3: Configure Build Settings

Use these settings in the Cloudflare Pages configuration:

Setting	Value
Project name	factorsphere-lander
Production branch	main
Framework preset	Next.js (Static Export)
Build command	npm run build
Build output directory	out
Node.js version	18 (or higher)

Step 4: Add Compatibility Flags

Important: You must add the nodejs_compat flag:

1. Go to your Cloudflare Pages project
2. Navigate to Settings > Compatibility Flags
3. Add nodejs_compat to both Production and Preview environments

Step 5: Environment Variables (if needed)

If your project uses environment variables, add them in: Settings > Environment variables

Common variables you might need: ``` NODE_VERSION=18 ```

Step 6: Deploy

Click Save and Deploy. Cloudflare will:

1. Clone your repository
2. Install dependencies
3. Build the project
4. Deploy to the Cloudflare edge network

Your site will be available at: https://factorsphere-lander.pages.dev

---

Option 2: Deploy via Wrangler CLI

Step 1: Install Wrangler

```bash npm install -g wrangler ```

Step 2: Authenticate with Cloudflare

```bash wrangler login ```

This will open a browser window to authenticate.

Step 3: Install Dependencies

```bash npm install ```

Step 4: Build for Static Export

```bash npm run build ```

Step 5: Deploy

```bash wrangler pages deploy out --project-name=factorsphere-lander ```

---

Custom Domain Setup

Step 1: Add Custom Domain

1. Go to your Cloudflare Pages project
2. Navigate to Custom domains
3. Click Set up a custom domain
4. Enter lander.factorsphere.org (or your domain)

Step 2: Configure DNS

If your domain is on Cloudflare:

• DNS records are automatically configured

If your domain is elsewhere:

• Add a CNAME record pointing to factorsphere-lander.pages.dev

Type	Name	Content
CNAME	@	factorsphere-lander.pages.dev
CNAME	www	factorsphere-lander.pages.dev

Step 3: SSL/TLS

Cloudflare automatically provisions SSL certificates. Ensure your SSL/TLS mode is set to Full (strict) in: SSL/TLS > Overview

---

Local Development

Install Dependencies

```bash npm install ```

Run Development Server

```bash npm run dev ```

Open http://localhost:3000 in your browser.

Build for Production

```bash npm run build ```

Preview Production Build

```bash npm run start ```

---

Project Structure

``` factorsphere-lander/ ├── app/ │ ├── globals.css # Global styles and theme │ ├── layout.tsx # Root layout with fonts │ └── page.tsx # Main landing page ├── components/ │ ├── ui/ # shadcn/ui components │ ├── header.tsx # Navigation header │ ├── hero-section.tsx # Hero with owl mascot │ ├── stats-bar.tsx # Animated statistics │ ├── problem-section.tsx │ ├── solution-section.tsx │ ├── features-section.tsx │ ├── tech-stack-section.tsx │ ├── security-section.tsx │ ├── screenshots-section.tsx │ ├── testimonials-section.tsx │ ├── cta-section.tsx │ ├── footer.tsx │ └── scroll-to-top.tsx ├── public/ │ └── images/ # Static assets └── README.md ```

---

Troubleshooting

Node.js Compatibility Error

If you see "no nodejs_compat compatibility flag set" error:

1. Go to your Cloudflare Pages project
2. Navigate to Settings > Compatibility Flags
3. Add nodejs_compat to both Production and Preview environments
4. Redeploy your site

Build Fails with Static Export Issues

Ensure your next.config.mjs has: ```js output: 'export', trailingSlash: true, distDir: 'out', ```

Node.js Version Issues

Set the Node.js version in Cloudflare Pages:

1. Go to Settings > Environment variables
2. Add NODE_VERSION = 18

CSS Not Loading

Clear the Cloudflare cache:

1. Go to Caching > Configuration
2. Click Purge Everything

Images Not Displaying

Ensure images are in the public/ directory and referenced with absolute paths: ```tsx ```

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

Links

• Website: https://lander.factorsphere.org
• GitHub: https://github.com/REXFEDEC
• Open Data: https://github.com/FactorSphere/data
• Support: Buy Me a Coffee
• Contact: sameer@factorsphere.org

---

License

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

---

Made with passion by @REXFEDEC