Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
alan2207 committed May 14, 2024
1 parent b898a0d commit 1fb422b
Show file tree
Hide file tree
Showing 8 changed files with 24 additions and 21 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
11 changes: 9 additions & 2 deletions docs/application-overview.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs/error-handling.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion docs/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
15 changes: 3 additions & 12 deletions docs/project-configuration.md → docs/project-standards.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"type": "module",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "vitest",
Expand Down
2 changes: 1 addition & 1 deletion playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 7 additions & 2 deletions src/features/discussions/routes/discussion.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ErrorBoundary } from 'react-error-boundary';
import { useParams } from 'react-router-dom';

import { ContentLayout } from '@/components/layouts';
Expand Down Expand Up @@ -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>
</>
Expand Down

0 comments on commit 1fb422b

Please sign in to comment.