From 970d604d6741ed9f04a8206de455acc4162ad155 Mon Sep 17 00:00:00 2001 From: Alan Alickovic Date: Tue, 14 May 2024 08:25:53 +0200 Subject: [PATCH] update --- README.md | 2 +- docs/application-overview.md | 11 +++++++++-- docs/error-handling.md | 2 +- docs/performance.md | 2 +- ...ject-configuration.md => project-standards.md} | 15 +++------------ package.json | 2 +- playwright.config.ts | 2 +- src/features/discussions/routes/discussion.tsx | 9 +++++++-- 8 files changed, 24 insertions(+), 21 deletions(-) rename docs/{project-configuration.md => project-standards.md} (85%) diff --git a/README.md b/README.md index 1e836878..9aa9b06b 100644 --- a/README.md +++ b/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) diff --git a/docs/application-overview.md b/docs/application-overview.md index 8c9cdbc0..6cc37757 100644 --- a/docs/application-overview.md +++ b/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://localhost:3000](http://localhost:3000) to view it in the browser. diff --git a/docs/error-handling.md b/docs/error-handling.md index c26fb57d..3ee3d8cb 100644 --- a/docs/error-handling.md +++ b/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 diff --git a/docs/performance.md b/docs/performance.md index 598aac59..4081865e 100644 --- a/docs/performance.md +++ b/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. diff --git a/docs/project-configuration.md b/docs/project-standards.md similarity index 85% rename from docs/project-configuration.md rename to docs/project-standards.md index bee63e4d..876a721a 100644 --- a/docs/project-configuration.md +++ b/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 diff --git a/package.json b/package.json index ede303c0..999053f8 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "type": "module", "scripts": { - "start": "vite", + "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "test": "vitest", diff --git a/playwright.config.ts b/playwright.config.ts index acb9192f..039c9200 100644 --- a/playwright.config.ts +++ b/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, diff --git a/src/features/discussions/routes/discussion.tsx b/src/features/discussions/routes/discussion.tsx index f25b5f68..ad121c87 100644 --- a/src/features/discussions/routes/discussion.tsx +++ b/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 = () => { -
+ Failed to load comments. Try to refresh the page.
+ } + > - +