update docs

README.md

@@ -24,9 +24,9 @@ This repo doesn't aim to be a silver bullet for all React applications as there
 - Uses the right tools for the job
 - Clean boundaries between different parts of the application
 - Everyone on the team is on the same page when it comes to how things are done
-- Security
-- Performance
-- Scalability in terms of codebase and team size
+- Secure
+- Performant
+- Scalable in terms of codebase and team size
 - Issues detectable as early as possible
 
 #### Disclaimer:

apps/nextjs-app/README.md

@@ -1,4 +1,4 @@
-# Next.js Pages Application
+# Next.js App Application
 
 ## Get Started
 
@@ -12,7 +12,7 @@ To set up the app execute the following commands.
 ```bash
 git clone https://github.com/alan2207/bulletproof-react.git
 cd bulletproof-react
-cd apps/nextjs-pages
+cd apps/nextjs-app
 cp .env.example .env
 yarn install
 ```
@@ -26,7 +26,3 @@ The mock server runs on [http://localhost:8080/api](http://localhost:8080/api).
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-## Project Structure
-
-Since the `pages` folder isn't very flexible and doesn't allow file collocation, we are keeping the `app` folder which is our application layer where we compose all the features, and then we just re-export Next.js page specific files (the pages and `getServerSideProps`) from the `pages` folder so Next.js can pick them up and serve as pages.

docs/application-overview.md

@@ -32,4 +32,5 @@ The application contains the following models:
 To get started, check the README.md file in the application you want to run.
 
 - [React Vite](../apps/react-vite/README.md)
+- [Next.js App Router](../apps/nextjs-app/README.md)
 - [Next.js Pages](../apps/nextjs-pages/README.md)

docs/project-structure.md

@@ -6,11 +6,11 @@ Most of the code lives in the `src` folder and looks something like this:
 src
 |
 +-- app               # application layer containing:
-|   |
-|   +-- routes        # application routes / can also be called pages
-    +-- app.tsx       # main application component
-    +-- provider.tsx  # application provider that wraps the entire application with different global providers
-    +-- router.tsx    # application router configuration
+|   |                 # this folder might differ based on the meta framework used
+|   +-- routes        # application routes / can also be pages
+|   +-- app.tsx       # main application component
+|   +-- provider.tsx  # application provider that wraps the entire application with different global providers - this might also differ based on meta framework used
+|   +-- router.tsx    # application router configuration
 +-- assets            # assets folder can contain all the static files such as images, fonts, etc.
 |
 +-- components        # shared components used across the entire application