Skip to content

README.md

Latest commit

 

History

History
74 lines (57 loc) · 3.52 KB

README.md

File metadata and controls

74 lines (57 loc) · 3.52 KB

React Essential

React Essential - An Essential Template to get started with React.js application with all the essentials included...

Features

  • ✨ Library: React with Vite - Fast and efficient development environment
  • 🚀 Styling: Tailwind CSS - Utility-first CSS framework
  • 💻 Language: TypeScript - Typed superset of JavaScript
  • 🧹 Linting and Formatting: Biome.js - Fast and customizable linter and formatter
  • 🎨 Themes: next-themes - Easy theming for React.js.
  • 💄 Icons: lucide-react - A comprehensive set of icons for React.js
  • ⚙️ Build: Github Actions - Automated workflows for CI/CD
  • 🛠 Commit: Husky - Git hooks made easy
  • 📦 Package: pnpm - Fast, disk space efficient package manager
  • 🚀 Routing: TanStack Router - Type-safe routing for React

Project Structure

  • src/: Source code directory
    • /routes: Contains all routes and pages
    • /components: Contains reusable, presentational components that can be shared across different parts of the application.
    • /primitives: Contains basic UI elements or primitive components such as buttons, inputs, etc., that are used in building more complex components.
    • /hooks: Contains custom React hooks for specific logic or functionality that can be reused across the app.
    • /interfaces: Contains TypeScript interfaces that define types for the app's data models or API responses.
    • /lib: Includes helper functions, utilities, and configuration files like API clients, authentication methods, etc.
    • /providers: Contains context providers for managing global state across the application.
    • /styles: Global styles and theme configuration
  • public/: Static assets and images

Getting Started

  1. Clone the repository
  2. Install dependencies: pnpm install
  3. Run the development server: pnpm run dev
  4. Open http://localhost:5173 in your browser

Guidelines

  • Keep reusable components in the components/ folder
  • Place primitive components like buttons, inputs, etc., in the primitives/ folder
  • Store hooks in the hooks/ folder to make them easily reusable
  • Define all interfaces in the interfaces/ folder
  • Store helpers, utilities, and configurations in the lib/ folder
  • Use context and global state management with the providers/ folder
  • Follow the TypeScript and Biome.js linting rules
  • Use Husky pre-commit hooks to ensure code quality

Customization

  • Modify the theme in tailwind.config.ts
  • Adjust global styles in src/styles/root-layout.css
  • Configure Vite settings in vite.config.ts

Available Scripts

  • pnpm run dev: Start the development server
  • pnpm run build: Build the production-ready application
  • pnpm run typecheck: Run TypeScript type checking
  • pnpm run lint: Run Biome.js linter
  • pnpm run lint:fix: Run Biome.js linter and fix issues
  • pnpm run format: Format code using Biome.js

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a new branch: git checkout -b feature/your-feature-name
  3. Make your changes and commit them: git commit -m 'Add some feature'
  4. Push to the branch: git push origin feature/your-feature-name
  5. Submit a pull request

For major changes, please open an issue first to discuss what you would like to change.