Before you begin, ensure you have met the following requirements:
- You have installed Node.js and npm.
- You have a code editor like Visual Studio Code installed.
- Clone the repository:
git clone https://github.com/your-repo/project.git
- Navigate to the project directory:
cd project - Install the dependencies:
npm install
- Always use Tailwind's predefined classes
- Avoid arbitrary values (square bracket notation)
// Correct: Use predefined Tailwind classes
<div className="w-full h-64 text-lg p-4 m-2">
Content
</div>
// Incorrect: Avoid arbitrary values
<div className="w-[345px] h-[200px] text-[17px] p-[15px]">
Content
</div>When a specific size isn't available in Tailwind:
- Use the closest predefined class
- Combine multiple classes if needed
- Consult the team for standardization
- Instead of
w-[345px], usew-96or nearest width class - Instead of
text-[17px], usetext-baseortext-lg - Instead of
p-[15px], usep-4 - Instead of
h-[200px], useh-48orh-52
Always create branches from the main branch with the following conventions:
-
For new features:
git checkout main git checkout -b feature/descriptive_feature_name
Example:
git checkout -b feature/create_hero_section -
For bug fixes:
git checkout main git checkout -b fix/descriptive_fix_name
Example:
git checkout -b fix/login_error_handling
Use descriptive commit messages with the following format:
-
For features:
git commit -m "feature: brief description of the feature"Example:
git commit -m "feature: add responsive navigation component" -
For fixes:
git commit -m "fix: brief description of the fix"Example:
git commit -m "fix: resolve login authentication error"
- Always compare your pull request against the
mainbranch, NOTmain - Ensure your branch is up to date with the
mainbranch before creating a pull request
- Install ESLint and TypeScript ESLint:
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
- Optionally add
...tseslint.configs.stylisticTypeChecked - Install eslint-plugin-react and update the config:
npm install eslint-plugin-react --save-dev
- Create or update
eslint.config.js:// eslint.config.js import react from "eslint-plugin-react"; export default tseslint.config({ // Set the react version settings: { react: { version: "18.3" } }, plugins: { // Add the react plugin react, }, rules: { // other rules... // Enable its recommended rules ...react.configs.recommended.rules, ...react.configs["jsx-runtime"].rules, }, });
- Start the development server:
npm start
- Open your browser and navigate to
http://localhost:3000.
- Run the tests:
npm test
To contribute to this project, please follow these steps:
- Ensure you're on the
mainbranch - Pull the latest changes
- Create a new branch following the naming conventions
- Make your changes and commit with the specified commit message format
- Push to the branch:
git push origin feature/your_feature_name
- Create a pull request targeting the
mainbranch
This project is licensed under the MIT License.