Hoosin
published on June 26, 2023
-
last updated on July 8, 2023
-
React
TanQuery
MaterialUI
TailwindCSS
Jotai
Netlify
Node.js
Express.js
MongoDB
Docker
Docker Compose
Linode
Description
A multi-user platform for reserving office spaces or indicating remote work location. Used in production for 50+ users.
Demo 🔗
👤 demo 📋
🔑 demo 📋
PROJECT GOALS
The main goal of this project was to make it easier for colleagues to share office space.
There were two functional achievements
- Allow employees to reserve conference space
- Represent which employees are in the office
TECHNOLOGY SUMMARY
- Technology: React, TanQuery, MUI, Tailwind, Jotai
- Hosting: deployed on Netlify
Table of Contents
- UI components
- Particularly: rendering modular desks, toggle button, transition css
- Rendering async information from backend.
- Particularly: when querying for more multiple async information (BookingList and getUsername). - later integrated ReactQuery for both.
- Fast rendering
- Rendering an interactive map of the office that reflects current information
- Error when rendering on halfsteps
- Authentication
- Particularly: Conditional rendering, authenticated requests (sessions)
- Backend routing/Authentication architecture. Including middleware
- Utilizing CORS to send requests from frontend and cookies from REST-API
- Practice proper html elements for voice support
- Efficient state management utilizing Jotai, Zustand, and useState
- Handling database Load, Success, Failure: https://17.reactjs.org/docs/concurrent-mode-suspense.html
- Stable React Queries and API request caching
- Server-side scalability -> Modular server architecture
- DevOps
- deploying server-side services (PAA-Server, MongoDB, MongoExpress)
- understanding and responding to errors
- MongoDB connection and authentication
- MongoDB data import and export
- persistent data/volume configuration
- environment variables
Axios
Routing
UI / CSS
- Burger menu-1
- Burger menu-2
- Responsive UI
- Viewports
- Scaling SVG
- Absolute vs Relative positioning
- Change colour of SVG on hover
- Cursor changes
- Module css
- Unicodes-1
- Unicodes-2
- Unicodes-3
- Tables
- Colours-1
- Colours-2
- Colours-3
- Colours-4
- Radial Graph
- Autocomplete search
- Autocomplete example - Digitalocean
- Autocomplete - MUI
- Autocomplete - ReactCommunity
Session / Cookies
- Session management-1
- Session management-2
- Solved getting cookies from server(doesn’t work in production)
- Lax vs strict cookies?
- JS-Cookies
- Cookies with Axios
- Cookie and session-1
- Cookie and session-2
- JWT insecure
- Auth0 Attack
- Localhost cookie management
- Cookies, the right way - Tania Rascia(Goated)
- Where to store JWT
React Components
- Async functions in useEffect
- Navigate tag vs navigate hook-1
- Navigate tag vs navigate hook-2
- Form event handling-1
- Form event handling-2
- Don’t over-optimize React - Prateek Surana
- Re-render hell