Web App

Responsive PWA to manage lists, books and more. Uses ReactJS and Django.

Demo (Username: guest, Password: 123)

Features

Frontend

📱 Complete PWA integration with automatic updates (installable as phone app)
🌌 Pretty Three.js space background (via React Three Fiber)
⚡ High performance input UI (no re-renders!) with React Hook Form (schema validation via Yup)
Material UI styling
Stylish, responsive scrollbars on desktop and mobile
Virtualized scrolling
State management with Redux
Query caching with RTK Query
Sortable tree for Literature genres
Random daily wallpaper
(Debounced) autosave on type

Backend

🔒 Security

🔑 2FA TOTP support with support for remembered browsers
Session Management with ability to log out other sessions
Session Hijacking Protection (via country code)
🔉 Notification on new logins

📰 Lists

Undo
Support for recurring tasks
View completed tasks

📘 Literature

Goodreads/Google Books API lookup

Password Generation

Cryptographically secure in-browser password generation (via Web Crypto API)
Have I Been Pwned cached database lookup

CI/CD

Automatic rebuild on git push via Github Actions

Naming Conventions

Directories: kebab-case
Component directories: PascalCase
Component .js files: PascalCase
Non-component .js files: camelCase

Directory structure

app/: app-wide setup and globals that depend on all the other folders e.g. - auth, notifications, network error/loading statuses
modules/:
- Module1/: No subdirectories
  - Module1.js
  - moduleApi.js: RTK Query definitions via injectEndpoints
  - moduleSlice.js: Module specific actions/reducers via createSlice
shared/:
- components/ Shared components e.g. GenericList
- static/: Images, fonts
- useSomeHook.js
- util.js
test/: Mocks (MSW) and tests
- mocks/:
  - module1/
    - module1Api.js: MSW definitions for module1's api
    - module1FakeData.js
  - browser.js: MSW endpoint

Misc

.github/workflows/main.yml configures the CI process
Check for circular dependencies with madge -c src before pushing to master