rowinruizendaal / bloom

Bloom is an application to connect people with each other who have had or still have cancer, these people can tell share their thought and opinions with others.

Hi there 👋

Tech and Tools

Current favourites

Other tools I use

"The best error message is the one that never shows up."

bloom's Issues

Change the total amount sentence of the filter at /buddies

Can this file be removed?

Bloom/server/app/models/tutorial.model.js

Line 1 in 0c2ec36

// module.exports = (mongoose) => {

Write debriefing

Standalone routes

Bloom/server/server.js

Lines 36 to 39 in 0923374

	app.post("/api/login", handleLogin);
	// Register
	app.post("/api/register", handleRegister);

Maybe you can take a look at MVC pattern;

You have your index/app.js as root
You will create a router folder - which includes all your routing logic, from the routing folder you call your controllers which contain logic with respect to handling events etc.

Try a more modular approach here

Bloom/server/server.js

Lines 16 to 27 in 0923374

	db.mongoose
	.connect(db.url, {
	useNewUrlParser: true,
	useUnifiedTopology: true,
	})
	.then(() => {
	console.log("Connected to the database!");
	})
	.catch((err) => {
	console.log("Cannot connect to the database!", err);
	process.exit();
	});

Maybe it's an idea to create a config folder where you can write your db logic - then export the connect function and simply call that function inside your index.js / app.js. This way you keep your root file clean.

Dynamic backbutton

App remembers what user's latest page is he/she has visited. So can the back button (arrow) linked to that page.

Onboarding cards

After creating account and logged in, the buddies page cant be displayed because of ObjectID error

Login: Authorizing routes

If there is a session render the page, if not redirect the user to the login page

Silka Font

Silka font in the h2 in the header is too thin. There must be a bolder font.

vue.runtime.esm.js:1888 TypeError: Cannot read property 'id' of undefined

Enter a chat gives the error cannot read property id of undefined

Update README

Update the readme and check the grammar

Login: Salting passwords

Bycrypt or any method that seems good

test

test

li elements need to be nested inside ul/ol

Bloom/client/src/views/onboarding.vue

Line 5 in 0c2ec36

<li class="logo"><h2>bloom</h2></li>

PWA

Change PWA icon, and make gif to show what PWA is all about. Install-> open

Destructure object for better readability, or pass through a cleaner object?

Bloom/client/src/views/chat/chatDetail.vue

Line 22 in 0c2ec36

<div :class="messagesData[0].participant.profileAvatar">

Ok

messagesData[0].participant.profileAvatar

Better

participant.profileAvatar

vue with node

Update state after register

Register: Email & pw steps

Email and password were not available in the register proces, but they are required to login with your account. So I add these 2 inputs in the register process.

test

test

Adding additional logic to schema

Bloom/server/app/models/user.js

Lines 5 to 16 in 0923374

	const userSchema = new Schema({
	firstName: String,
	surName: String,
	emailAddress: String,
	password: String,
	birthDate: String,
	town: String,
	gender: String,
	typeIllness: String,
	profileAvatar: String,
	about: String,
	});

You can write more in depth requirements for your schema, e.g:

email: {     
  type: String,      
  required: [true, 'E-mail is verplicht'],      
  unique: true,      
  trim: true,      
  minlength: 1,      
  maxlength: [50, 'E-mail mag niet meer karakters dan 50 bevatten']    
}

Buddies

You can currently see yourself on the buddies list

Login / register

Front-end:

• Log in page
• Register page

Backend:

• Database structure for logging in and registering new users

https://bezkoder.com/vue-node-express-mongodb-mevn-crud/

Styling UI

Check if the styling of the whole application is equal to the design

Accesibility; PE and every-time focus (tab) , need to define in wiki?

Check variable/function/parameter naming

Check the naming in the project and check if each name is descriptive and clear.

Bug: chats overview

When clicking on a chat and you go back to the overview, the overview is empty.

move to a socket module?

Bloom/server/server.js

Lines 20 to 50 in 0c2ec36

	// Sockets
	io.on('connection', (socket) => {
	socket.emit('connections', Object.keys(io.sockets.connected).length);
	socket.on('disconnect', () => {
	console.log("A user disconnected");
	});
	socket.on('chat-message', (data) => {
	socket.broadcast.emit('chat-message', (data));
	});
	socket.on('typing', (data) => {
	socket.broadcast.emit('typing', (data));
	});
	socket.on('stopTyping', () => {
	socket.broadcast.emit('stopTyping');
	});
	socket.on('joined', (data) => {
	socket.broadcast.emit('joined', (data));
	});
	socket.on('leave', (data) => {
	socket.broadcast.emit('leave', (data));
	});
	});

And thus keeping the app.s file cleaner...

Slugs for themes

Making the slugs for theme's so we are preventing making 20 pages.

Date to age converter

I have to make a function to calculate someone's age only out date

Index page

Making the index page (first screen), also setting up variables & project structure

Chat list overview ordened by last chat date.

Making more components

• Bottom nav

props:

  props: {
    active: {
      type: String,
      default: "home",
    },

We can use different props to make the active icon in the navbar highlighted these are:

home
buddies
messages
profile

refactor folder structure

Bloom/server/server.js

Lines 29 to 33 in 0923374

	// Get all users of db
	async function getAllUsers() {
	const users = await Users.find().catch((err) => console.log(err));
	console.log(users);
	}

Ideally you want to have stand alone folders/files for this kind of logic. Create a helper function which gets the users. This way you can import the helper function in more files - without having to write duplicate code.

Put axios functions in a folder - frontend

Chat with other users

• sockets
• resource: https://www.youtube.com/watch?v=To5y2WLsKIw
• https://www.npmjs.com/package/vue-socket.io

Register: Nodemailer

Maybe it is cool to use nodemailer to send mails to registered members

Button step 10 needs to be aligned right instead of left

Nice readme but check grammar

The readme is nicely structured and informative, but the grammar needs some extra attention.

Chat - Datastructure

Finding out how the data can be structured of a user's chats.

Need to define we make a PWA in our wiki?

sw, cache, manifest, (robot?)

/users

/users returns full json

Did you consider using a component based approch on the server aswell?

The frontend is build in Vue and mad up out of conponents. The server has a more traditional structure.
NO need to fix this.. I'm just curious

UI Stack

Login

• When an account doesn't exist
• When password/email isn't correct
• styling

Create good timestamp

Create good timestamp voor chat messages

onboarding

Buddy details vue parse error

[Vue warn]: Error in render: "TypeError: Cannot read property 'profileAvatar' of undefined"

found in

---> <BuddyDetail> at src/views/buddies/buddyDetail.vue
       <App> at src/App.vue
         <Root>

Login: Storing sessions

Rewrite the about section of this repo to the Bloom context