Base React TypeScript Vite

A complete base structure to kickstart React projects with TypeScript and Vite, pre-configured with best practices and essential tools for modern development.

🚀 Features

• ⚡ Vite - Lightning-fast build tool
• ⚛️ React 19 - Latest React version
• 🔷 TypeScript - Static typing
• 🎨 Tailwind CSS - Utility-first CSS framework
• 🛣️ React Router DOM - Client-side routing
• 🌐 Axios - HTTP client
• 🔐 JWT Authentication - Complete authentication system
• 🍪 JS Cookie - Cookie management
• 📡 Socket.io Client - Real-time communication
• 🎉 React Toastify - Elegant notifications
• 🔧 ESLint - Configured linting
• 🔥 Firebase Integration - Ready for Firebase hosting
• 🌐 Hostinger Compatible - Hostinger deployment ready
• 📁 Organized structure - Scalable architecture

📦 Project Structure

├── public/          # Static assets
├── src/
│   ├── assets/      # Static resources (images, icons)
│   ├── configs/     # Application configurations
│   ├── context/     # React Context API
│   ├── hooks/       # Reusable custom hooks
│   ├── pages/       # Page components
│   │   ├── auth/    # Authentication pages
│   │   ├── dashboard.tsx
│   │   ├── layout-secure.tsx
│   │   └── not-found.tsx
│   ├── services/    # Services (Clinet API)
│   ├── types/       # TypeScript definitions
│   ├── utils/       # Utility functions
│   └── App.tsx      # Root component
├── .env             # Environment variables
├── .firebaserc      # Firebase project configuration
├── firebase.json    # Firebase hosting configuration
├── package.json     # Dependencies and scripts
├── tailwind.config.js
├── tsconfig.json    # TypeScript configuration
└── vite.config.ts   # Vite configuration

🛠️ Included Custom Hooks

• useAppContext - Access to global application context
• useConfirmation - Reusable confirmation modal
• useDeviceFingerprint - Unique device identification
• useScrollTop - Page scroll control
• useSecurePage - Protected route authentication

⚙️ Pre-configured Settings

Authentication

• Complete JWT system
• Route protection
• Session management
• Automatic token refresh

Communication

• Configured HTTP client (Axios)
• WebSocket ready (Socket.io)
• Authentication interceptors
• Global error handling

Styling

• Tailwind CSS configured
• Utility-first approach
• Responsive design ready
• Dark mode support

Notifications

• Configured toast notifications
• Customizable positioning
• Available themes

Deployment

• Firebase hosting integration
• Hostinger deployment ready
• Production build optimization

🚀 Getting Started

1. Clone or download the project

git clone https://github.com/raphaelvserafim/base-react-typescript-vite.git
cd base-react-typescript-vite

2. Install dependencies

npm install
# or
yarn install

3. Configure your environment variables

Create a .env file in the project root:

VITE_LOGO=public/vite.svg
VITE_NAME=My App
VITE_API_BASE_URL=http://localhost:3001
VITE_SOCKET_URL=http://localhost:3001/socket
VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
VITE_FAVICON=public/vite.svg

4. Start the development server

npm run dev
# or
yarn dev

5. Build for production

npm run build
# or
yarn build

📋 Available Scripts

• npm run dev - Start development server
• npm run build - Generate production build
• npm run lint - Run linting
• npm run preview - Preview production build
• npm run deploy:firebase - Build and deploy to Firebase hosting

🔥 Firebase Integration

This template comes pre-configured for Firebase hosting deployment.

Firebase Configuration

1. Configure firebase.json

{
  "hosting": {
    "site": "your-site-name",
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

2. Configure .firebaserc

{
  "projects": {
    "default": "your-project-id"
  }
}

Firebase Deployment Steps

1. Install Firebase CLI (if not already installed):

npm install -g firebase-tools

2. Login to Firebase:

firebase login

3. Initialize Firebase (if not already done):

firebase init hosting

4. Update configuration files:

   • Edit firebase.json and replace "your-site-name" with your actual site name
   • Edit .firebaserc and replace "your-project-id" with your Firebase project ID

5. Deploy to Firebase:

npm run deploy:firebase

🌐 Hostinger Deployment

This template is also compatible with Hostinger hosting:

Hostinger Deployment Steps

1. Build the project:

npm run build

2. Upload the dist folder contents to your Hostinger public_html directory

3. Configure URL rewriting by adding this to your .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

🎯 Next Steps

After setting up the project, you can:

1. Customize the context in src/context/provider.tsx
2. Configure your routes in src/App.tsx
3. Adapt the services in src/services/
4. Define your types in src/types/
5. Create your pages in src/pages/
6. Configure Firebase or Hostinger for deployment

🔧 Tech Stack

Technology	Version	Description
React	^19.1.1	UI library
TypeScript	~5.8.3	JavaScript superset
Vite	^7.1.2	Modern build tool
Tailwind CSS	^3.x	Utility-first CSS framework
React Router DOM	^7.8.2	Client-side routing
Axios	^1.11.0	HTTP client
Socket.io Client	^4.8.1	WebSocket client
React Toastify	^11.0.5	Toast notifications
JWT Decode	^4.0.0	JWT decoding
JS Cookie	^3.0.5	Cookie management
Firebase	Latest	Hosting and backend services

📝 License

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

👨‍💻 Author

Raphael Serafim

• Website

---

💡 Usage Tips

Context API

The global context is already configured to manage application state:

const { user, isAuthenticated, logout } = useAppContext();

Protected Routes

Use the useSecurePage hook to protect pages:

const MySecurePage = () => {
  useSecurePage(); // Redirects if not authenticated
  return <div>Protected content</div>;
};

Notifications

Display notifications easily:

import { toast } from 'react-toastify';

toast.success('Operation completed successfully!');
toast.error('Error processing request');

Device Fingerprint

Get unique device identification:

const { deviceId, generateFingerprint } = useDeviceFingerprint();

Tailwind CSS Styling

Style your components with utility classes:

const MyComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">
      <h1 className="text-2xl font-bold mb-2">Welcome</h1>
      <p className="text-blue-100">Styled with Tailwind CSS</p>
    </div>
  );
};

Deployment Commands

Quick deployment to different platforms:

# Firebase deployment
npm run deploy:firebase

# Manual build for Hostinger
npm run build
# Then upload dist/ contents to public_html/

---

⭐ If this template was helpful, consider giving the repository a star!