GitHub actions

README.md

@@ -29,18 +29,14 @@ My personal go-to boilerplate for most frontend projects using the React Library
 		<td>for client-side routing.</td>
 	</tr>
 		<tr>
-		<td>React Testing Library</td>
+		<td>Vitest + React Testing Library</td>
 		<td>for testing UI components</td>
 	</tr>
 	</tr>
 		<tr>
-		<td>i118</td>
+		<td>i18n</td>
 		<td>for internationalization</td>
 	</tr>
-	</tr>
-		<tr>
-		<td>Redux</td>
-		<td>for handling state management</td>
 	</tr>
 	</tr>
 		<tr>
@@ -57,6 +53,10 @@ My personal go-to boilerplate for most frontend projects using the React Library
 		<td>Framer Motion</td>
 		<td>for animating</td>
 	</tr>
+	<tr>
+		<td>Sanity</td>
+		<td>for content management </td>
+	</tr>
 </table>
 
 ## How to run the project:
@@ -67,12 +67,18 @@ My personal go-to boilerplate for most frontend projects using the React Library
 npm install
 ```
 
-**Run the dev server**
+**Run the dev server:**
 
 ```bash
 npm run dev
 ```
 
+**Run test:**
+
+```bash
+npm run test
+```
+
 ### Status
 
 🟢 In progress...

src/components/README.md

@@ -0,0 +1,9 @@
+# Components Folder
+
+This folder holds all the components used in building an application.
+
+**/ui:**
+
+In this folder, we can further group UI primitives into a seperate folder called **ui**. Basically, a UI primitive is a small standalone component that is not made of other components.
+
+Other general components can live directly in the components root folder. A general component in this case will be components that are made up of other components.

src/hooks/README.md

@@ -0,0 +1,8 @@
+# Hooks Folder
+
+This folder holds all the custom hooks defined in a React application. It is Reacts' best practice to extract a logic in a custom hook component that can be used anywhere in an application.
+
+**For example:**
+
+- useData.s
+- useDebounce.ts

src/pages/README.md

@@ -0,0 +1,14 @@
+# Pages Folder
+
+This folder is where all the **root level pages** a user can navigate to will live.
+
+It defines the entire **structure** or **skeleton** of an application and how a user can navigate through it.
+
+**For example:**
+
+- Home Page
+- About Page
+- Dashboard Page
+- Login Page
+
+**NB:** You can customize this folder in any way you deem it fit for the application you are building. There is no one fit solution.

src/services/README.md

@@ -0,0 +1,10 @@
+# Services Folder
+
+This folder holds any type of service an application might consume:
+
+For example:
+
+- **/api**: fetching an api endpoint
+- **/i18n**: implementing different languages within an application
+- **/state**: handling global state
+- **/providers**: for any shared data(mostly context) that can be wrapped around the root component of an application. In other words, any sort of provider an app might use.

src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles Folder
+
+This folder holds all the global styling that an application needs.

src/utils/README.md

@@ -0,0 +1,5 @@
+# Utils Folder
+
+This folder holds any piece of functionality that is small but very useful and doesn't fit anywhere within an application(folder).
+
+For example, helper functions.