Skip to content

Latest commit

 

History

History
97 lines (63 loc) · 3.51 KB

README.md

File metadata and controls

97 lines (63 loc) · 3.51 KB
Raw

Project Template

This repository hosts the source code for the Project Template. This project aims to serve as a starting point for future React-based projects, integrating best practices and essential libraries for rapid and effective development.

Table of Contents

About The Project

This project template includes essential tools like React, TypeScript, Vite, Tailwind CSS, ESLint, Prettier, and PrimeReact.

Technologies Used

Project Structure

Atomic Design

This project follows the Atomic Design methodology, which ensures a structured, functional, and maintainable codebase.

Getting Started

Prerequisites

This project requires the following tools:

Installation

To set up the project on your local machine:

  1. Clone the repository:
git clone https://github.com/theam/react-vite-template.git
  1. Navigate to the project directory:
cd ./react-vite-template
  1. Install the project dependencies:
npm install

Development

Scripts

These are some of the available scripts for development:

  • npm run dev: Starts the development server.
  • npm run build: Builds the project for production.
  • npm run lint: Runs ESLint on the project to identify issues.
  • npm run lint:fix: Fixes ESLint identified issues.
  • npm run format: Runs Prettier to format the code.

Component Library: PrimeReact

In this project, we've chosen to use PrimeReact as our main component library. PrimeReact offers a rich set of open-source components with various themes. Some reasons for this choice include:

  • Rich Component Set: PrimeReact provides a wide range of ready-to-use components that can help speed up the development process.
  • Flexibility & Theming: The library offers various themes and customization options, making it easier to achieve our design goals.

While PrimeReact is our choice for this template, other alternatives like Material-UI can also be considered based on project-specific requirements. The decision should be based on the project's needs, familiarity with the library, and the specific components required.

Linting & Formatting

To ensure consistent code style and catch potential errors early, this template utilizes both ESLint for linting and Prettier for code formatting. You can run npm run lint to check for linting issues and npm run format to auto-format your code.

GitHub Actions

Automated checks are set up using GitHub Actions. Currently, it checks for linting, formatting, and ensures the build process runs without errors. This can be particularly useful to ensure PRs maintain a consistent code quality. Check out the .github/workflows directory for more details.