Veltrian

A modern web application built with React, Vite, and React Router.

Tech Stack

• Frontend Framework: React 18
• Routing: React Router v7
• Build Tool: Vite v6
• Styling: Tailwind CSS v3
• Authentication: Clerk
• State Management: Zustand
• Data Fetching: TanStack Query (React Query)
• UI Components: Chakra UI, Lucide React icons
• Charts: Recharts
• Testing: Vitest (unit), Cypress (E2E)

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm package manager

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd veltrian

3. Install dependencies:

   npm install

4. Install React Router:

   npm install react-router

5. Create a .env file based on .env.example:

   cp .env.example .env

6. Update the .env file with your environment variables, particularly:

   • VITE_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXX
   • VITE_CLERK_AFTER_SIGN_IN_URL=/app
   • VITE_CLERK_AFTER_SIGN_UP_URL=/app
   • VITE_CLERK_SIGN_IN_URL=/login
   • VITE_CLERK_SIGN_UP_URL=/signup

Development

Start the development server:

npm run dev

The application will be available at http://localhost:4000 (or another port if 4000 is busy).

Building for Production

Create a production build:

npm run build

Type Checking

Run TypeScript type checking:

npm run typecheck

Project Structure

src/
├── app/                  # App router structure (editable)
│   ├── api/              # API routes (editable)
│   ├── app/              # Main application page
│   │   └── page.jsx      # Main app component
│   ├── components/       # Reusable UI components
│   │   ├── FileManager/  # File management components
│   │   │   ├── FileList.jsx
│   │   │   ├── UploadArea.jsx
│   │   │   ├── PreviewModal.jsx
│   │   │   ├── PassphraseSetupModal.jsx
│   │   │   └── index.js
│   │   ├── Header.jsx    # Global header component
│   │   └── README.md     # Component documentation
│   ├── hooks/            # Custom React hooks
│   │   ├── useFileOperations.js
│   │   ├── useFormatting.js
│   │   ├── index.js
│   │   └── README.md     # Hooks documentation
│   ├── login/            # Login page (editable)
│   ├── __create/         # Auto-generated files (do not edit)
│   ├── layout.jsx        # Root layout (editable)
│   ├── page.jsx          # Root page (editable)
│   ├── root.tsx          # Root component (editable)
│   └── routes.ts         # Route configuration (editable)
├── utils/                # Utility functions (editable)
├── __create/             # Auto-generated templates (do not edit)
└── ...                   # Other auto-generated files (do not edit)

# Editable files:
# - src/app/ (except __create subdirectory)
# - src/utils/

# Auto-generated files (do not edit):
# - src/app/__create/
# - src/__create/
# - src/auth.d.ts
# - src/client.d.ts
# - src/global.d.ts
# - build/ (created after build)
# - node_modules/ (auto-generated by npm)

Authentication

This project uses Clerk for authentication. Make sure to set up your Clerk account and configure the required environment variables.

Available Scripts

• dev: Start the development server
• build: Create a production build
• typecheck: Run TypeScript type checking

Learn More

To learn more about the technologies used in this project:

• React Documentation
• Vite Documentation
• React Router Documentation
• Clerk Documentation
• Tailwind CSS Documentation

Deployment

This application can be deployed to various platforms that support Node.js applications, such as Vercel, Netlify, or traditional hosting providers.

Contributing

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