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