update

README.md

@@ -38,7 +38,7 @@ To get most out of it, do not get limited by the technologies used in this sampl
 ## Table Of Contents:
 
 - [💻 Application Overview](docs/application-overview.md)
-- [⚙️ Project Configuration](docs/project-configuration.md)
+- [⚙️ Project Standards](docs/project-standards.md)
 - [🗄️ Project Structure](docs/project-structure.md)
 - [🧱 Components And Styling](docs/components-and-styling.md)
 - [📡 API Layer](docs/api-layer.md)

docs/application-overview.md

@@ -1,6 +1,13 @@
 # 💻 Application Overview
 
-The sample application is relatively simple. Users can create teams where other users can join, and they start discussions on different topics between each other.
+The sample application has been bootstrapped using `Vite` and its `react-ts` template. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc. Another reason for using Vite is simplicity, as it doesn't force us to use the meta-framework specific things, and allows us to focus on React.
+
+Other popular ways you can bootstrap the application are:
+
+- [Next.js](https://nextjs.org/)
+- [Remix](https://remix.run/)
+
+The application is relatively simple. Users can create teams where other users can join, and they start discussions on different topics between each other.
 
 A team is created during the registration if the user didn't choose to join an existing team and the user becomes the admin of it.
 
@@ -43,7 +50,7 @@ cp .env.example .env
 yarn install
 ```
 
-##### `yarn start`
+##### `yarn dev`
 
 Runs the app in the development mode.\
 Open [http:https://localhost:3000](http:https://localhost:3000) to view it in the browser.

docs/error-handling.md

@@ -10,7 +10,7 @@ Implement an interceptor to manage errors effectively. This interceptor can be u
 
 Utilize error boundaries in React to handle errors within specific parts of your application. Instead of having only one error boundary for the entire app, consider placing multiple error boundaries in different areas. This way, if an error occurs, it can be contained and managed locally without disrupting the entire application's functionality, ensuring a smoother user experience.
 
-[Error Boundary Example Code](../src/providers/app.tsx)
+[Error Boundary Example Code](../src/features/discussions/routes/discussion.tsx)
 
 ### Error Tracking
 

docs/performance.md

@@ -2,7 +2,7 @@
 
 ### Code Splitting
 
-Code splitting involves dividing production JavaScript into smaller files to optimize application loading times. This technique enables the application to be downloaded in parts, fetching only the necessary code when required.
+Code splitting involves splitting production JavaScript into smaller files to optimize application loading times. This technique enables the application to be downloaded in parts, fetching only the necessary code when required.
 
 Ideally, code splitting should be implemented at the routes level, ensuring that only essential code is loaded initially, with additional parts fetched lazily as needed. It's important to avoid excessive code splitting, as this can lead to a performance decline due to the increased number of requests required to fetch all the code chunks. Strategic code splitting, focusing on critical parts of the application, helps balance performance optimization with efficient resource loading.
 

docs/project-configuration.md → docs/project-standards.md

@@ -1,21 +1,12 @@
-# ⚙️ Project Configuration
+# ⚙️ Project Standards
 
-The sample application has been bootstrapped using `Vite ` and its `react-ts` template. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc.
-
-Other popular ways you can bootstrap the application are:
-
-- [Next.js](https://nextjs.org/)
-- [Remix](https://remix.run/)
-
-For simplicity we will use Vite, as it doesn't force us to use the meta-framework specific things, and allows us to focus on React.
-
-You should always configure and use the following tools:
+Enforcing project standards is crucial for maintaining code quality, consistency, and scalability in a React application. By establishing and adhering to a set of best practices, developers can ensure that the codebase remains clean, organized, and easy to maintain.
 
 #### ESLint
 
 ESLint serves as a valuable linting tool for JavaScript, helping developers in maintaining code quality and adhering to coding standards. By configuring rules in the `.eslintrc.js` file, ESLint helps identify and prevent common errors, ensuring code correctness and promoting consistency throughout the codebase. This approach not only helps in catching mistakes early but also enforces uniformity in coding practices, thereby enhancing the overall quality and readability of the code.
 
-[ESLint Configuration Example Code](../.eslintrc.js)
+[ESLint Configuration Example Code](../.eslintrc.cjs)
 
 #### Prettier
 

package.json

@@ -4,7 +4,7 @@
  "private": true,
  "type": "module",
  "scripts": {
- "start": "vite",
+ "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "vitest",

playwright.config.ts

@@ -48,7 +48,7 @@ export default defineConfig({
 
  /* Run your local dev server before starting the tests */
  webServer: {
- command: `yarn start --port ${PORT}`,
+ command: `yarn dev --port ${PORT}`,
  timeout: 10 * 1000,
  port: PORT,
  reuseExistingServer: !process.env.CI,

src/features/discussions/routes/discussion.tsx

@@ -1,3 +1,4 @@
+import { ErrorBoundary } from 'react-error-boundary';
 import { useParams } from 'react-router-dom';
 
 import { ContentLayout } from '@/components/layouts';
@@ -56,9 +57,13 @@ export const DiscussionRoute = () => {
  </div>
  </div>
  </div>
- <div>
+ <ErrorBoundary
+ fallback={
+ <div>Failed to load comments. Try to refresh the page.</div>
+ }
+ >
  <Comments discussionId={discussionId} />
- </div>
+ </ErrorBoundary>
  </div>
  </ContentLayout>
  </>