briantwene/ambitious-messenger

A modern web messaging application

A modern web messaging application

Run Database container

Clone the project

  git clone https://github.com/briantwene/ambitious-bishes.git

Go to the database folder

  cd database

Create a docker volume called db_data

  docker volume create db_data

Then, start the container

  docker compose up

The database should be running

Next, is to get prisma working, the schema is there already

Install dependencies (make sure that you're in /backend)

  npm install

now run the following to generate the prisma client

  npx prisma generate

OR

You probably wont have to do this, but @briantwene will let you know

if the prisma schema has changed (if a table has been added or modified) run this

  npx prisma migrate dev

Then

One last thing would be to create an .env file in /backend and add the following:

# Database configuration
DATABASE_URL=postgresql://username:password@localhost:5432/databasename?schema=public

The username, password and database can be found in docker-compose.yml

React app setup

1. Install dependencies

  cd frontend
  npm install

2. Run dev build

  npm run dev

Notes

Sass variables

Here is a list of the current Sass variables:

$color-primary: #0881a3;
$color-primary-bright: #84d2e8;
$color-primary-dark: #125067;

$color-secondary: #adadad;
$color-secondary-bright: #f7f7f7;
$color-secondary-dark: #363636;

$color-text: #111111;
$color-text-bright: #33373d;

$color-invalid: #dd1c1a;

$font-light: 300;
$font-regular: 400;
$font-semibold: 600;
$font-bold: 800;

$font-small: 0.85rem;

To use them just import the variables.scss file in the modules.scss file, for example:

@import "./sass_utilities/variables.scss";

ambitious-messenger's Issues

Implement Storage Bucket for application

Description

The idea here is to create a service that will handle the storage of things such as images, videos and files. Could also be used to store the profile pictures and voice messages themselves then have a pointer in the database

this will be a separate server like the webRTC server which I, @briantwene is working on.

For this a service called Minio will be used which is an open source self hosted AWS S3 like bucket. Virtually anything can be stored in it and it works for a small scale project like this.

TODO

• Create a folder at the root of the project called "storage-service"
• Follow the docs and setup a docker container (or docker-compose container)

Once you have it you can follow the instructions to login and create a bucket

Then you can make a function that would upload the file that is sent to the main server to the storage server
Also make a function that would get a file based on the reference that is stored in database.

This function can then be used for messages where a user has an attachment (video, image, other files)

Once you test it and it works we could then start adding different message types (I think you still have the code for that from when you first implemented message domain). It can also be used to store profile pictures that user uploads.

The process would go like this:

1. user upload file on frontend
2. server gets this file
3. stores the name or some reference (into the database) (depends on if it is an attachment to a message or profile pic)
4. store the file in the storage server
5. All done

And for downloads:

1. get data from db with reference to file
2. use reference to get file from storage
3. send the file back to the user

some links:

• minio docs on setting up in container
• article I found on setting up with docker compose (might be easier) - this one you can go as far as creating the bucket then go to below link
• minio javascript package docs

Yeah this is a lot to read but we don't have time and I have been thinking about this for weeks (was all in my head 🤣 ) so you don't have to worry. If you do have any issues let me know 🙂

[BACKEND] - Add isEdited to message model

@douzi-001 task
on the message model of prisma, just add an isEdited column that is a boolean (true/false)

this will be false by default but set to true when a user updates a message

[BACKEND] - User Authentication

Description

The aim here is to use passport.js combined with JWT to provide authentication

This is also for adding multiples integrations later on.

User sends login

create JWT and send it like normal

Make middle ware that uses passport to sign the user in

for generating a more secure secret

    node -e "console.log(require('crypto').randomBytes(256).toString('base64'));"

Some links

• https://medium.com/front-end-weekly/learn-using-jwt-with-passport-authentication-9761539c4314
• https://soshace.com/securing-node-js-applications-with-jwt-and-passport-js/
• https://www.digitalocean.com/community/tutorials/api-authentication-with-json-web-tokensjwt-and-passport
• for roles as well (current link being used): https://www.toptal.com/json/jwt-nodejs-security
• OSWAP cheatsheet on authentication: https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html
• Link for API Schema validation: https://dev.to/jeffsalive/the-right-way-to-use-joi-validator-in-your-nodejs-express-application-147g

[BACKEND][MVP] - Implement chat domain

[FRONTED] - Add friend functionality

[BACKEND] - Error Handling II

[FRONTEND] - Login and registration pages

[BACKEND] - Added error handling utils and logging

Add error handling and logging

some articles:

• https://www.toptal.com/nodejs/node-js-error-handling
• https://betterstack.com/community/guides/logging/how-to-install-setup-and-use-pino-to-log-node-js-applications/

[BACKEND][MVP] - Messages Domain Setup

so for messages we will have 4 operations based of CURD

domain endpoint /message

• create message - /create - HTTP (POST)
• delete message -/delete - HTTP (DELETE)
• update message - /update - HTTP (PUT)
• read message - /read - HTTP (GET)

read message can be for getting all the messages that are in a chat (for when a user opens a chat)

when doing the message.dao.js make a class and put the functions to do each of these and then return them

can use prisma client

WebSocket Implementation

Implement the WebSocket domain in the backend that will be used
to enable Realtime communications and messages to users

The NPM socket.io package will be used here

[BACKEND] - Folder setup

Description

Just to add the general folder structure using the NodeJS best practices

Folder Structure

Create WebRTC server

The Goal here is to create a WebRTC Signaling service that will be used to enable users to call each other by sending the call request

Link: https://web.dev/articles/webrtc-infrastructure

[BACKEND] - Database Setup

Description

The Aim is to create the database setup in such a way that it can be used with across the team

• Will first create the database using a docker container
• then will add some sql that will then add everything
• then to make it presistent

Some links: https://1kevinson.com/how-to-create-a-postgres-database-in-docker/

[DEVOPS] Setup basic DevOps fllow

Description

@briantwene's task

The aim here is to come up with a basic DevOps flow of some sort using GitHub actions

The main pipelines that will be made will be for building and deploying

Build Pipeline

This pipeline will run tests and package the application so that it can be deployed by the other script

Frontend

For the frontend a simple linting test can be done to ensure the code written based of ESlint rules

Backend

For the backend tests will be done in the following areas:

• Linting
• Prisma database: ensuring the main DAO functions work as expected with a mock Prisma client and DB
• API Layer tests: can start with simple postman tests before doing full on unit tests
• Lib functions: generic functions that are used accross the app should be tested too
• coverage: aim for 50% code coverage with tests

Deploy Pipeline

After building and everything going well, on push to main the deploy pipeline can be triggered. This can copy the repo to the production environment and then deploy the container

Notes

DigitalOcean will be used to deploy the application.

• Build action > create conatiner > push to registry >
• Link on pushing to digital ocean: https://www.reddit.com/r/docker/comments/rtd8b2/automatic_deployments_to_digital_ocean_droplet/
• will probably use nginx as a webserver for the react app or a proxy idk
• database could also be containerised idk

Some links:

• https://medium.com/free-code-camp/create-a-fullstack-react-express-mongodb-app-using-docker-c3e3e21c4074
• https://medium.com/swlh/creating-and-deploying-a-full-stack-web-application-31ad5c9f3b77
• https://github.com/goldbergyoni/javascript-testing-best-practices#section-5%EF%B8%8F%E2%83%A3-ci-and-other-quality-measures
• https://fakerjs.dev/

[BACKEND] - User Domain setup

Description

Create the following files based off the project structure for the user domain, you can do this once @briantwene has done
"[BACKEND] - Folder Setup"

• api.js: express routes will go here

• controller.js functions that handle the express routes will go here

• dao.js: database related functions will go here

Then

in user.api.js you can add the express router and create the following routes:

/profile/:id

• This will be a HTTP GET endpoint
• this will take in an id parameter which will be the id of a user profile
• this is for getting back infomation on a profile

[BACKEND] - Friends Feature

Description

Will add soon