Improve the information about the app

Heyo! 👋

I'm Shabier, a 24 year old web developer from the Netherlands. I'm a developer that loves to design and realize designs in code! My ambitions are to make impactful digital products that help to make a better tomorrow. My passion lies in helping others and improving their lives with digital solutions. You can find my resume over at read.cv/shabier and my portfolio site, which is this page but graphical 😆 , over at shabier.vercel.app

Skills

Publications

Publications are posted on Medium: link to profile

[Draft] Web development: the principle of 0kb JavaScript
[New!] Web development: documenting your work - read the article
[New!] Web development: is the job market a meritocracy or an exclusive network? - read the article
[<1k reads] Web development: a Node CRUD web application - read the article
[2k reads] Design trends: Neumorphism. Part 2 - read the article
[22k reads] Design trends: Neumorphism. Part 1 - read the article

Cool stuff

Front-end web projects

🔥 Hotspot Lookup: a PWA dashboard for Helium Hotspot Owners.
PokeAPI: an online pokemon finder.
Parking in the Netherlands: A data visualization project about accessible parking in the Netherlands for the publication company De Volkskrant.
Coination: a single-page application displaying crypto by marketcap and prices.
Musicle: an accessible music player for users suffering with muscular- and neuronal diseases.
Project NO₂ x Corona: a visualization of carbon emissions in Europe before- and during covid-19.

Full-stack web projects

TogetherTube: a YouTube client with real-time video playback and chat using Socket.io.
Read-it: a PWA, offline available, performance first, reddit reader.
Enquetter: a progressively enhanced enquette.
Nerdr.Match(): an online dating platform for programmers.
Mad-chatter: a meme chatroom.
Bol-deals: a bol.com discount finder.

Tools

Cache-this: a node cli tool to cache api responses (for performace improvements and rate-limit prevention).
Front-end setup: a continiously growing template repo.

Automatization

Krakenbot: a telegram bot that fetches prices for cryptocurrency.
DeHetBot: a telegram bot that helps you find articles to dutch words.
Archillect-mirror: an Archillect scraper and instagram-bot

Tools

I’m currently working on:

Bloom: a social media platform for recovering cancer patients.
Biopic: a linkshortner and link bio using Firebase, written in Next.js

	fetch("http://localhost:3001/register", {
	method: "POST",
	body: JSON.stringify(regData),
	headers: {
	"Content-Type": "application/json",
	},
	}).then(res => res.json())
	.then(data => console.log(data));

	/**
	* Function find document in collection based on a keyword and optional options
	* @param {String} db target database
	* @param {String} collect target collection
	* @param {String} keyword keyword to search with
	* @param {Object} options search options (optional)
	* @source https://docs.mongodb.com/drivers/node/usage-examples/findOne/
	* @source https://shabier.medium.com/web-development-crud-web-application-76f3b7ce127b
	*/

	const Checkbox = ({ type = "checkbox", name, onChange, id, value }) => (
	<input type={type} name={name} onChange={onChange} id={id} value={value} />
	);

	const Text = ({ type, name, placeholder, onChange, id }) => (
	<input type={type} name={name} placeholder={placeholder} id={id} onChange={onChange} />
	)

	const TextArea = ({ name, placeholder, onChange, id, rows, cols }) => (
	<textarea name={name} placeholder={placeholder} id={id} onChange={onChange} rows={rows} cols={cols} />
	)

	const DatePicker = ({ type = 'date', name, onChange, id }) => (
	<input type={type} name={name} id={id} onChange={onChange} />
	)

	const Radio = ({ type = "radio", name, onChange, id, value }) => (
	<input type={type} name={name} onChange={onChange} id={id} value={value} />
	);

	const accountCredsData = [
	{
	type: 'email',
	name: 'email',
	label: 'Wat is je email adres?',
	placeholder: '[email protected]',
	id: 'email'
	},
	{
	type: 'password',
	name: 'password',
	label: 'Wat is je password',
	id: 'password'
	}
	]

	const personalInfoData = [
	{
	name: 'name',
	label: 'Hoe heet je?',
	placeholder: 'voornaamachternaam',
	id: 'name'
	}
	]

	const birthDateData = [
	{
	name: "birthDate",
	label: "Geboortedatum",
	id: 'birthDate',
	}
	]

	const kankerTypesData = [
	{
	name: "kankerType",
	label: "KankerType1",
	value: 'kanker1',
	id: 'kanker1',
	},
	{
	name: "kankerType",
	key: "checkBox2",
	label: "KankerType2",
	value: "kanker2",
	id: 'kanker2',
	}
	];

	const residenceData = [
	{
	name: "residence",
	label: "Waar woon je?",
	id: 'residence',
	placeholder: 'Voer hier je woonplaats in.'
	}
	]

	const genderData = [
	{
	name: "gender",
	label: "Man",
	value: 'man',
	id: 'gender-man',
	},
	{
	name: "gender",
	label: "Vrouw",
	value: 'Vrouw',
	id: 'gender-vrouw',
	},
	{
	name: "gender",
	label: "Neutraal",
	value: 'Neutraal',
	id: 'gender-neurtraal',
	},
	]

	let pictogramData = [
	{
	name: "pictogram",
	value: 'pictogram-1',
	id: 'pictogram-1',
	},
	{
	name: "pictogram",
	value: 'pictogram-2',
	id: 'pictogram-2',
	},
	{
	name: "pictogram",
	value: 'pictogram-3',
	id: 'pictogram-3',
	},
	{
	name: "pictogram",
	value: 'pictogram-4',
	id: 'pictogram-4',
	},
	{
	name: "pictogram",
	value: 'pictogram-5',
	id: 'pictogram-5',
	},
	]

	let aboutData = [
	{
	name: 'about',
	label: 'Vertel meer over jezelf',
	placeholder: 'Vertel meer over jezelf',
	id: 'about'
	}
	]


	const validate = values => {
	const errors = {};
	if (!values.firstName) {
	errors.firstName = 'Required';
	} else if (values.firstName.length > 15) {
	errors.firstName = 'Must be 15 characters or less';
	}

	if (!values.lastName) {
	errors.lastName = 'Required';
	} else if (values.lastName.length > 20) {
	errors.lastName = 'Must be 20 characters or less';
	}

	if (!values.email) {
	errors.email = 'Required';
	} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
	errors.email = 'Invalid email address';
	}

	return errors;
	};

	await fetch("http://localhost:3001/login", {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
	"Content-Type": "application/json",
	},
	})
	.then((res) => res.json())
	.then((data) => {
	setCookie("user", JSON.stringify(data), {
	path: "/",
	maxAge: 3600, // Expires after 1hr
	sameSite: true,

	exports.insertOne = async (db, collect, data) => {
	// We want to connect to the "userdb" database
	const database = client.db(db);
	// We want to connect to the "users" collection in the "userdb" database
	const collection = database.collection(collect);
	// We want to add this document to the "users" collection
	const document = data;

	// We insert the document to the "users" collection
	collection
	.insertOne(document)
	.then(
	console.log(
	`Inserted ${document.email} with the data ${document.toString()}`
	)
	);
	};

	app.post("/login", async (req, res) => {
	const email = req.body.email;
	const password = req.body.password;

	let response = await db.findOne("bloom", "userdata", { email: email });
	return bcrypt.compareSync(password, response.password, salt)
	? res.json({
	status: "passed",
	data: {
	email: response.email,
	},
	})
	: res.json({ status: "failed" });
	// ? handle data in frontend
	});

	app.post("/register", async (req, res) => {
	let userData = {
	email: req.body.email,
	password: bcrypt.hashSync(req.body.password, salt),
	name: req.body.name,
	birthDate: req.body.birthDate,
	residence: req.body.residence,
	gender: req.body.gender,
	kankerType: req.body.kankerType,
	pictogram: req.body.pictogram,
	about: req.body.about
	}

	switch (progress) {
	case 0:
	return formElement(
	<>
	{accountCredsData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Text
	type={item.type}
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	placeholder={item.placeholder}
	/>
	</label>
	))}
	<Link href="/login">Ik heb al een account</Link>
	<Link href="/login">Ik ben een hulpverlener</Link>
	</>
	)
	case 1:
	return formElement(personalInfoData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Text
	type="text"
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	placeholder={item.placeholder}
	/>
	</label>
	)))
	case 2:
	return formElement(birthDateData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<DatePicker
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	/>
	</label>
	)))
	case 3:
	return formElement(residenceData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Text
	type="text"
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	placeholder={item.placeholder}
	/>
	</label>
	)))
	case 4:
	return formElement(genderData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Radio
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	value={item.value}
	/>
	</label>
	)))
	case 5:
	return formElement(kankerTypesData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Checkbox
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	value={item.value}
	/>
	</label>
	))
	)
	case 6:
	return formElement(pictogramData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<Radio
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	value={item.value}
	/>
	</label>
	)))
	case 7:
	return formElement(aboutData.map((item, index) => (
	<label key={index} htmlFor={item.id}>{item.label}
	<TextArea
	name={item.name}
	id={item.id}
	onChange={formik.handleChange}
	value={item.value}
	rows="10"
	cols="50"
	/>
	</label>
	)))
	case 8:
	return <>
	<h1>Let's start</h1>
	<Link href='/login'>Start</Link>
	</>

	/*
	.formContainer input[id^='gender-'] ~ label[for^='gender-'] {
	border: 5px solid hsl(30, 97%, 48%);
	} */

	.formContainer label[for^='gender-']:focus-within {
	border: 5px solid hsl(30, 97%, 48%);

	}

sjagoori / bloom Goto Github PK

bloom's Introduction

Heyo! 👋

Skills

Publications

Cool stuff

Tools

I’m currently working on:

Fun stats

bloom's People

Contributors

Stargazers

Watchers

Forkers

bloom's Issues

What is the issue

Solution

What is the issue

Solution

What is the issue

Solution

What is the issue

Solution

What is the issue

Solution

Relevant links

Issue with styling

Recommend Projects

Recommend Topics

Recommend Org