Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature reddux toolkit and firebase #15

Merged
merged 3 commits into from
Mar 27, 2023
Merged

Feature reddux toolkit and firebase #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f33d230
refactor folder structure
mbvalent Mar 19, 2023
0e66d70
git commit -m "setup redux with ts"
mbvalent Mar 19, 2023
229ae9f
Add firebase and authentication pages with custom wrapper components
mbvalent Mar 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .env
View file
Open in desktop
Empty file.
7 changes: 6 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
"env": {
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
// By extending from a plugin config, we can get recommended rules without having to add them manually.
"eslint:recommended",
Expand Down Expand Up @@ -31,6 +33,9 @@
// Add your own rules here to override ones from the extended configs.
"react/react-in-jsx-scope": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off"
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-empty-interface": "off",
"react/prop-types": "off",
"jsx-a11y/no-autofocus": "off"
}
}
19 changes: 1 addition & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1 @@
# Project structure 🏗

I've used this architecture on multiple larger projects in the past and it performed really well.

There are two special root folders in `src`: `App` and `shared` (described below). All other root folders in `src` (in our case only two: `Auth` and `Project`) should follow the structure of the routes. We can call these folders modules.

The main rule to follow: **Files from one module can only import from ancestor folders within the same module or from `src/shared`.** This makes the codebase easier to understand, and if you're fiddling with code in one module, you will never introduce a bug in another module.

<br>

| File or folder | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src/index.jsx` | The entry file. This is where we import babel polyfills and render the App into the root DOM node. |
| `src/index.html` | The only HTML file in our App. All scripts and styles will be injected here by Webpack. |
| `src/App` | Main application routes, components that need to be mounted at all times regardless of current route, global css styles, fonts, etc. Basically anything considered global / ancestor of all modules. |
| `src/Auth` | Authentication module |
| `src/Project` | Project module |
| `src/shared` | Components, constants, utils, hooks, styles etc. that can be used anywhere in the codebase. Any module is allowed to import from shared. |
TODO
Loading