Swipe Chat

A chat web app for desktop and mobile screens, where meeting new people is as easy as a glance followed by a click. Built as a uni project.

Main views and functions:

/ index router index.pug

• Unauthenticated auth router
  • Login login.pug
  • Register register.pug
• Swipe swipe router swipe.pug
  • Other users' profiles will show up one by one
  • Like or dislike, if they like you back, a chat will be created
  • If you like someone who already likes you, an option to jump to the chat appears
• Profile profile router profile.pug
  • See your current username, change it if you wish
  • Change your password, input twice
• Images images router image.pug
  • See your current images in a grid, add new ones
• Messaging messaging router messaging.pug
  • Matches are listed, in pages of 10 if you are popular enough
  • Click on a match to open the chat window
    • 'Last edited' timestamp
    • Send and receive messages
    • Search for messages containing text using the magnifying glass
• Logout

Technologies

HTMX was chosen to drive interaction in the application as it provides server-side rendering and a simplified form of communication between server and client. Omitting json, and simply relying on the transfer of markup to exchange state, many benefits in complexity management can be gained.

Pug and TailwindCSS streamline the development of views and work very well together with HTMX markup.

MongoDB exposes an abstracted interface for simple database queries in the express back end.

Passport does the heavy lifting for user authentication and does not interfere with other middlewares.

Testing

cypress/e2e/api Contains sets of unit tests for different routers and their routes

cypress/e2e/e2e-general Contains general end-to-end tests for the main application functions

cypress/e2e/component Contains tests for different component views. Server-side rendering means api testing is more critical.

Security

The app contains countless security vulns like XSS holes which should still be addressed.

Assignment related features and requested points

Requirement	Points
Mandatory requirements - Node.js back-end - MongoDB database - Authentication (session based) Users can - Like/dislike other users - Update their profile - Chat with matches Non-authenticated users can register Responsive design - Usable on desktop and mobile Documentation - Technology, installation, manual	25
Use of a front-end framework: HTMX	5
Option to start chat immediately with a new match	2
User profiles have images which are visible when swiping and in chat	3
'Last edited' timestamp stored and shown in chat	2
Translation of whole UI in two or more languages (en, fi)	2
Unit tests created and automated using Cypress	5
Search filter for chat messages	3
Use of pager when there are more than 10 matches to chat with	2
Dark mode switch which changes the theme of every element in the application	3
Total	52

Usage

• npm run build Compiles the TypeScript code and outputs them in the /dist directory

• npm run tw:watch Continually compile Tailwind to /dist/public/styles/style.css when changing .pug files

• npx cypress open Launches the Cypress client for testing

Initial plan and ideation