Skip to content

infornics/revine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

111 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Revine

npm version License: MIT

A minimal React framework with file-based routing and TypeScript-first approach.

Features

  • ⚑️ Vite-powered development
  • πŸ—‚ File-based routing (Next.js style)
  • πŸ›  TypeScript support out-of-the-box
  • πŸš€ Zero-config setup
  • πŸ”₯ Hot Module Replacement (HMR)

Installation

Create a new project with:

npx revine my-project

Documentation

CLI Options

npx revine <project-name>

Project Structure

Generated projects follow this structure:

my-project/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ pages/         # Route components
β”‚   β”‚   └── index.tsx
β”‚   β”œβ”€β”€ App.tsx        # Router configuration
β”‚   └── main.tsx       # Entry point
β”œβ”€β”€ public/            # Static assets
β”œβ”€β”€ vite.config.ts     # Vite configuration
└── package.json

Routing Convention

src/pages/index.tsx β†’ /

src/pages/about.tsx β†’ /about

src/pages/blog/[slug].tsx β†’ /blog/:slug

Data Fetching & Caching

Revine includes built-in support for cached API calls, allowing you to easily store and reuse server responses.

revineFetch

A wrapper around the native fetch API with caching capabilities.

import { revineFetch } from "revine";

const data = await revineFetch("https://api.example.com/data", {
  cacheTTL: 60000, // Cache for 1 minute (in ms)
  persist: true    // Optional: Persist to localStorage
});

useFetch Hook

A React hook for making cached API calls within components.

import { useFetch } from "revine";

function MyComponent() {
  const { data, loading, error, revalidate } = useFetch("https://api.example.com/data", {
    cacheTTL: 300000, // 5 minutes
    persist: true
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={() => revalidate()}>Refresh Data</button>
    </div>
  );
}

Contributing

Clone repository

git clone [https://github.com/your-username/revine.git](https://github.com/rachit-bharadwaj/revine)

Install dependencies

npm install

Build and link locally

npm run build
npm link

Test locally

revine test-project

Thank you for contributing!

Used by

Contributors

Languages