You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+200-3Lines changed: 200 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,17 +6,214 @@ Due to time constraints, our back-end developer leaving, and other commitments,
6
6
7
7
## Timestamps
8
8
The state for the timestamps is located in `src/redux/reducers/gameConfig.ts`.
9
-
9
+
### Periods
10
10
-`register_start:`**restrictedAccess** is set and they are only allowed to the profile.
11
11
-`game_start` the 'game' has started everyone is **allowed everywhere** except for the **Event Results page**.
12
12
-`review_start`**challenge submissions** and the **raffle** are now in review and the **game is closed**, but only for the **player role**.
13
13
-`review_end` winners are now shown and everyone can only access the **Event Results page** with the **Proile page** as an exception.
14
14
-`game_end` end of the 'game' and the **Game Closed page** is always shown after login.
15
15
16
16
## Tech Used
17
+
This is a `TypeScript``React` application built using `Craco`. The app also uses `Redux` for efficient state management, and utilizes `CSS modules` for styling.
18
+
19
+
## Getting Started
20
+
- Nodejs version 20 or greater.
21
+
- Choose either NPM or Yarn as your package manager.
22
+
- Run "npm install" or "yarn install" to install all dependencies and that's it.
17
23
18
24
## Folder Structure
25
+
To maintain good development practices and consistency across files/folders, we recommend using the same guidelines and structure as follows if you're building upon the code. In this project we used a `reusable architecture` for all folders, so create a new `component` only if it is used in more than one file, the same goes for `utils`, `constants`, and the other folders. I am only going to be explaining things that I think are important to know and clarify aspects that may not be self-explanatory:
19
26
20
-
## Getting Started
27
+
### components
28
+
- Each component has a folder as the name of the component and must include `index.tsx` and `styles.module.css` files.
29
+
- We use `Layout` and `Content` components, kind of like Nextjs, and they should be used in every `view`.
30
+
- The `gate` component is the `gateway` component, which is wrapped around every route.
31
+
-`src/components/forms/user` is the user form meaning where the user registers and edits their profile, it serves as both.
32
+
33
+
### redux
34
+
- The `gameConfig` is where all game-specific (it's an event, not a game) 'configurations' are, e.g. the `timestamps` for the countdown, and each `period` of the game as explained above in the Timestamps section.
35
+
- The `coinTracker` is for mulipating the coins (dubl-u-nes).
36
+
- The `user` for updating the local state of the user and the user session.
37
+
- You might notice page (view) specific reducers like `getBusinesses.ts`, `raffle.ts`, etc.
38
+
- The `actions` handles the `API calls`, essentially every action is a `redux-thunk`.
39
+
<br />
21
40
22
-
## License
41
+
```
42
+
/
43
+
├── .env
44
+
├── craco.config.cjs
45
+
├── package.json
46
+
├── tsconfig.json
47
+
├── ...
48
+
├── node_modules/
49
+
| └── ...
50
+
├── public/
51
+
│ ├── favicon.ico
52
+
| ├── index.html
53
+
| └── ...
54
+
└── src/
55
+
├── index.jsx
56
+
├── index.css
57
+
├── store.js
58
+
├── ...
59
+
├── components/
60
+
| ├── forms/
61
+
| | ├── controls/
62
+
| | | ├── Input.tsx
63
+
| | | └── ...
64
+
| | ├── password/
65
+
| | | ├── index.tsx
66
+
| | | └── styles.module.css
67
+
| | ├── user/
68
+
| | | ├── index.tsx
69
+
| | | └── styles.module.css
70
+
| | └── ...
71
+
| ├── gate/
72
+
| | └── index.tsx
73
+
| ├── image/
74
+
| | ├── index.tsx
75
+
| | └── styles.module.css
76
+
| ├── loaders/
77
+
| | ├── overlayLoader/
78
+
| | | └── ...
79
+
| | ├── spinner/
80
+
| | | └── ...
81
+
| ├── modals/
82
+
| | ├── ModelTemplate.tsx
83
+
| | ├── areYouSure/
84
+
| | | └── ...
85
+
| | ├── challengeModal/
86
+
| | | └── ...
87
+
| | └── ...
88
+
| ├── notification/
89
+
| | ├── index.tsx
90
+
| | └── styles.module.css
91
+
| ├── partials/
92
+
| | ├── content/
93
+
| | | ├── Input.tsx
94
+
| | | └── ...
95
+
| | ├── currentDoblons/
96
+
| | | ├── index.tsx
97
+
| | | └── styles.module.css
98
+
| | ├── header/
99
+
| | | ├── index.tsx
100
+
| | | ├── Hamburger.tsx
101
+
| | | └── styles.module.css
102
+
| | ├── layout/
103
+
| | | ├── index.tsx
104
+
| | | └── styles.module.css
105
+
| | ├── status(footer)/
106
+
| | ├── index.tsx
107
+
| | └── styles.module.css
108
+
| └── ...
109
+
|
110
+
├── constants/
111
+
| ├── emailRegex.js
112
+
| ├── treasureMapNavContent.js
113
+
| ├── uuidRegex.js
114
+
| └── temporaryDb/ --- This is the temporary hardcoded data that was only used for this year as explained above.
115
+
| ├── businesses.js
116
+
| └── ...
117
+
|
118
+
├── hooks/
119
+
| ├── useContinueCountdown.ts --- To keep the countdown moving, which is displayed in the status component and gameEnd
120
+
| └── usePagination.ts files.
121
+
|
122
+
├── redux/
123
+
| ├── actions/
124
+
| | ├── coinTracker.js
125
+
| | ├── gameConfig.js
126
+
| | ├── notifications.js
127
+
| | ├── user.js
128
+
| | ├── index.js
129
+
| | └── ...
130
+
| └── reducers/
131
+
| ├── coinTracker.ts
132
+
| ├── gameConfig.ts
133
+
| ├── notifications.ts
134
+
| ├── user.ts
135
+
| ├── index.js
136
+
| └── ...
137
+
|
138
+
├── routes/
139
+
| └── index.jsx --- holds data about the routes and the RoutesProvider which is used in the base index.tsx file.
140
+
|
141
+
├── services/
142
+
| ├── errorHandler.js
143
+
| ├── initializeFirebase.ts --- Temporary for this year; explained above.
144
+
| ├── socketProvider.ts
145
+
| └── index.js
146
+
|
147
+
├── static(assets)/
148
+
| ├── bg.jpg
149
+
| └── ...
150
+
|
151
+
├── typings/ --- All types are done in their respective files unless they need to be used elsewhere then they are put
152
+
| ├── declarations.d.ts here.
153
+
| ├── NotificationValues.ts
154
+
| └── UserCredentials.ts
155
+
|
156
+
├── utils/
157
+
| ├── copyToClipboard.ts
158
+
| ├── delay.ts
159
+
| ├── History.ts --- Use this for useNavigate.
160
+
| └── forms/
161
+
| ├── checkMatchingPasswords.ts
162
+
| ├── checkValidEmail.ts
163
+
| ├── checkValidity.ts
164
+
| ├── updateField.ts
165
+
| └── ...
166
+
|
167
+
├── views(pages)/ --- the views are separated by game (main pages), user (auth pages), and errors (universal) folders
0 commit comments