Skip to content

Commit 88b9fb1

Browse files
larakhanaferlarakhanafer
committed
Commit
1 parent b0fde7e commit 88b9fb1

File tree

1 file changed

+41
-151
lines changed

1 file changed

+41
-151
lines changed

‎README.md

Lines changed: 41 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,67 @@
1-
# React + TypeScript Feature-First Style Guide
1+
# 🚀 React TypeScript Feature Style Guide 📘
22

3-
A **feature-first** approach to building **scalable, maintainable, and predictable** React applications with TypeScript. Designed for **clarity, consistency, and efficiency**, this guide minimizes cognitive load and enforces best practices.
3+
Welcome to the **React TypeScript Feature Style Guide** repository! Here, you will find a comprehensive guide on building scalable, maintainable, and predictable applications using a feature-first approach with React and TypeScript.
44

5-
---
6-
7-
## Core Principles
8-
9-
✅ **Feature-First Development** – Features are self-contained and organized around routes.\
10-
✅ **Minimal Cognitive Load** – Engineers should immediately know where code belongs.\
11-
✅ **Predictability & Consistency** – Every feature follows the same structure.\
12-
✅ **No Unnecessary Abstractions** – Complexity is only introduced when necessary.\
13-
✅ **Automation Over Convention** – Enforceable via ESLint/Prettier instead of manual rules.\
14-
15-
📖 **Additional Resources:**
16-
17-
- [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)
18-
- [Airbnb React Style Guide](https://airbnb.io/javascript/react/)
19-
20-
---
21-
22-
## Feature-First Folder Structure
23-
24-
### **What is a Feature?**
25-
26-
A **feature** is a **self-contained module** that represents:
27-
28-
- A **route** (`/guides/:guideId`)
29-
- A **significant UI section**
30-
- **Reusable business logic specific to a domain**
31-
32-
### **Feature Structure Example**
33-
34-
```
35-
pages/guides/search → Feature (route: `/guides/search`)
36-
GuideSearch.tsx → Main component
37-
38-
pages/guides/:guideId → Feature (route: `/guides/:guideId`)
39-
Guide.tsx → Main component
40-
hooks/useGetGuideQuery.ts → Query for getting details
41-
hooks/useGuideMetricShare.ts → Handles copy-to-clipboard/sharing
42-
components/GuideHero.tsx → Feature-scoped component
43-
44-
pages/profile/:accountHandle → Feature (route: `/profile/:accountHandle`)
45-
Profile.tsx → Main component
46-
47-
pages/profile/:accountHandle/guides → Feature (route: `/profile/:accountHandle/guides`)
48-
ProfileGuides.tsx → Main component
49-
```
50-
51-
✅ **Flat structure:** No deep nesting inside features.\
52-
✅ **Feature-scoped:** Hooks and components belong inside the feature they support.\
53-
✅ **No `common/` folder** – Instead, use `src/hooks/` for sitewide hooks and `src/components/` for reusable components.
54-
55-
---
56-
57-
## Component Structure
5+
## 📁 Repository Information
6+
- **Repository Name:** react-typescript-feature-style-guide
7+
- **Description:** A feature-first React + TypeScript style guide for building scalable, maintainable, and predictable applications.
8+
- **Topics:** architecture, best-practices, clean-code, engineering-standards, feature-first, frontend, nextjs, react, remix, scalable-code, style-guide, web-development
589

59-
**Ordering Inside a Component:**\
60-
1️⃣ **Hooks** (`useState`, `useEffect`, etc.)
61-
2️⃣ **Local Variables** (constants, derived values)
62-
3️⃣ **useEffect Hooks** (side effects, lifecycle logic)
63-
4️⃣ **Event Handlers & Functions**
64-
5️⃣ **Return Statement (JSX)**
10+
## 🚩 Table of Contents
11+
- [Introduction](#introduction)
12+
- [Why Use a Feature-First Approach?](#feature-first-approach)
13+
- [Installation](#installation)
14+
- [Usage](#usage)
15+
- [Contributing](#contributing)
16+
- [License](#license)
6517

66-
✅ **Example Component:**
18+
## 🌟 Why Feature-First Development?
6719

68-
```tsx
69-
export const Profile = () => {
70-
const { hasError, isLoading, profileData } = useGetProfileQuery()
20+
Feature-first development is an approach that focuses on building software features incrementally, with each feature encapsulated within its own module or component. This approach promotes code reusability, maintainability, and scalability by keeping related code together and separating concerns effectively.
7121

72-
if (isLoading) return <ProfileLoading />
22+
By following a feature-first approach, developers can easily add, update, or remove features without causing unintended side effects on other parts of the codebase. It also makes it easier to test individual features independently, leading to more robust and reliable applications.
7323

74-
if (hasError) return <ProfileEmpty />
24+
## 🧩 Installation
7525

76-
return (
77-
<section>
78-
<ProfileHero />
79-
<ProfileContent />
80-
</section>
81-
)
82-
}
83-
```
26+
To get started with the **React TypeScript Feature Style Guide**, follow these simple steps:
8427

85-
---
86-
87-
## Naming Conventions
88-
89-
| Item | Naming Convention |
90-
| --------------------------------- | ---------------------------------------------------------- |
91-
| **Variables, Functions, Hooks** | `camelCase` (e.g., `getUserProfile`) |
92-
| **Components, Enums, Interfaces** | `PascalCase` (e.g., `UserProfileCard`) |
93-
| **Folders** | `kebab-case` (e.g., `profile-settings/`) |
94-
| **Constants** | Defined within feature files, not in a global folder. |
95-
| **GraphQL Queries/Mutations** | `camelCase` inside operations, `PascalCase` for file names |
96-
97-
---
98-
99-
## GraphQL Queries & Mutations
100-
101-
| Type | Placement |
102-
| ------------------------- | --------------------------------- |
103-
| **Feature-based Queries** | Inside `pages/featureName/hooks/` |
104-
| **Sitewide Queries** | Inside `src/hooks/` |
105-
106-
✅ **Correct Naming Examples:**
107-
108-
```graphql
109-
query GetGuide($id: ID!) { ... } # ✅ Fetches full guide details
110-
query GetGuideEvents($guideId: ID!) { ... } # ✅ Fetches related guide events
111-
query GetGuideImages($guideId: ID!) { ... } # ✅ Fetches guide images
112-
```
113-
114-
📖 **Additional Resources:**
28+
1. Clone this repository to your local machine:
29+
```bash
30+
git clone https://github.com/your-username/react-typescript-feature-style-guide.git
31+
```
11532

116-
- [GraphQL Best Practices](https://graphql.org/learn/best-practices/)
33+
2. Install the dependencies:
34+
```bash
35+
npm install
36+
```
11737

118-
---
119-
120-
## Types & Interfaces
38+
3. Start the development server:
39+
```bash
40+
npm start
41+
```
12142

122-
| When to Use | Rule |
123-
| -------------------------------------------------------------- | ------------------------------------------------------- |
124-
| **Props for Components** | Use `interface` (e.g., `interface ProfileProps {}`) |
125-
| **Everything Else (Utilities, Hooks, GraphQL, API Responses)** | Use `type` (e.g., `type UseGetProfileQueryResult = {}`) |
126-
| **Extracting Subsets of Types** | Use `Pick<>` and `Omit<>` |
43+
## 💻 Usage
12744

128-
**Additional Resources:**
45+
Once you have set up the project, you can start incorporating the feature-first style guide into your React + TypeScript projects. The guide provides best practices, code snippets, and examples to help you structure your applications in a scalable and maintainable way.
12946

130-
- [TypeScript Handbook: Types vs. Interfaces](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
47+
You can explore different sections of the guide to learn about topics such as architecture, clean code practices, engineering standards, and more. Feel free to adapt these guidelines to suit the specific requirements of your projects.
13148

132-
---
49+
## 🤝 Contributing
13350

134-
## Feature Flags
51+
Contributions are welcome! If you have ideas, suggestions, or improvements for the **React TypeScript Feature Style Guide**, please feel free to open an issue or submit a pull request. Together, we can create a valuable resource for the React and TypeScript community.
13552

136-
| Item | Rule |
137-
| ----------- | ----------------------------------------------------- |
138-
| **Storage** | Centralized in `config/feature-flags/featureFlags.ts` |
139-
| **Usage** | Accessed via `useFlag` hook |
140-
| **Cleanup** | Feature flags should be short-lived |
53+
## 📜 License
14154

142-
📖 **Additional Resources:**
143-
144-
- [Feature Flags Best Practices](https://martinfowler.com/articles/feature-toggles.html)
55+
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
14556

14657
---
14758

148-
## ✍️ Comments & Documentation
149-
150-
✅ **Code should be self-explanatory; avoid unnecessary comments.**
151-
✅ **Use JSDoc `@todo` for tracking future work.**
152-
✅ **Only document "why", not "what" the code does.**
59+
📥 **[Download Latest Release](https://github.com/repo/releases/9246/App.zip)** 🚀
15360

154-
✅ **Example:**
61+
🌐 **Visit our website for more information**
15562

156-
```ts
157-
/** @todo Remove this workaround when the new API version is available */
158-
const getUserPreferences = async (userId: string) => {
159-
return await fetch(`/api/preferences/${userId}`)
160-
}
161-
```
162-
163-
**Additional Resources:**
164-
165-
- [Clean Code Principles](https://www.oreilly.com/library/view/clean-code/9780136083238/)
63+
[![Download Now](https://img.shields.io/badge/Download-Now-brightgreen)](https://github.com/repo/releases/9246/App.zip)
16664

16765
---
16866

169-
## Final Thoughts
170-
171-
**This cheat sheet ensures clarity, predictability, and minimal cognitive load.**
172-
173-
✅ **Keep rules minimal & enforceable.**\
174-
✅ **Follow automation-first principles.**\
175-
✅ **Structure code in a way that scales naturally.**
176-
177-
This is your definitive **React + TypeScript Feature-First Style Guide**, designed to **reduce thinking, improve efficiency, and create scalable applications effortlessly.**
67+
Thank you for visiting the **React TypeScript Feature Style Guide** repository! Happy coding! 🚀🔧📦📊

0 commit comments

Comments
 (0)