Cipher-Connect

App is Work In Progress

A multimedia messaging app built with sockets, react, node and mySQL.

Demo

Deplyed on render

https://cipher-connect.onrender.com/

Features

• User managment
• User authentication
• Light/dark mode toggle
• Thorough form validation

Built With

• Database: mySQL. Hosted on aiven.io
• Client hosted on netlify
• Server hosted on render
• tsc-watch
• Typescript-React for the frontend
• Nodejs for backend
• Socket.io for fullduplix communication
• Material ui for design
• Express for handling routes
• mySQL for database
• Prisma as an ORM
• React-Hook-Form for handling forms
• Vite for managing development and production ecosystem

🚀 What I learned

• Error handling
• Routing
• User authentication
• Building forms with react-hook-form
• Error boundries
• Custom Hooks
• React-query
• crypto.randomUUID() only runs when the URL scheme is https or client is running on localhost
• Don't use ORMs, or at the very least avoid prisma. The overhead and absolute unnecessary computation outweighs the any benefits whatsoever.
• Better commits = good DX
• Git branches is a very good tool.
• Git experience can be improved significantly using "lazygit"

Installation

Install my-project with yarn

  yarn # Install dependencies
  yarn build # Run build script (optional)

  # One of the following commands
  yarn preview # For production preview
  yarn dev # For development preview

Design

Mohammad Hashemi from dribble

Acknowledgements

• Blog Explaining DBML Generator
• Awesome Readme Templates
• Awesome README
• How to write a Good readme
• Design inspiration
• prisma-erd-generator
• prisma-dbml-generator
• Wrap Balancer for balancing paragraphs
• Glassmorph/ frosted glass effect
• MDN's radius generator
• Reddit: Why doesn't res.redirect() redirects SPAs like react
• TS declaration merging
• Mai Vang's article on how to deploy a full-stack app on render
• Walrus operator equivalent in for-loops
• Axios interceptors to retry failed requests

ToDo

• Show ghost text when user types (not good for performance but it would look really nice).
• Send a private message to yourself.
• Extract list function from TemproratyDrawer into a separate component.
• A loader/ spinner for each element that depends on fetching data from server.
• Remove abstraction from TemporaryDrawer, It is causing unnecessary confusion.
• DO NOT SEND OTHER PEOPLE'S PASSWORD HASHS TO OTHER USERS!!! (How did this even happen??)
• userRooms in backend should be stored in a set (or something similar) not an array.
• Ensure a room without participants can not exist OR run a scheduled job in DB to delete all rooms without participants.
• Might wanna use a library like promise-retry to re-run failed queries to DB.
• Add support for group chat.
• Break text into multiple lines when a single word has too many characters and overflows.
• Host your own fonts.
• Fix .env variables to be platform agnostic.
• Setup protected API routes.
• Make website responsive by setting position "abolute" to room info and room list sidebar.
• Notify user if no internet connection is availabe.
• Throw error if logging in while the server is unreachable. (check if server is unreachable first)
• Provide option to hide password while typing.
• Redirect client to login page on logout using res.redirect('logout')
• Warn before running crypto.randomUUID() in an unsecure context (http scheme) and alert user or throw error.
• Use useInfiniteQuery for fetching messages.
• Have a default room that every new user has. Make it a room with the developer and a greeting message.
• Add option for ephemeral login which is deleted after some time. Or an option for tyring the app.
• Microphone icon in fevicon should only appear while recording.
• On smaller screens, combine tabs on sidebar and with room panel.

License

GPL 3