DEV Community: Killian Frappart

Instant messaging app made with React, Typescript, Node & Socket.io 🦜

Killian Frappart — Mon, 18 Jan 2021 09:58:01 +0000

Hello everyone, I am back on Dev.to today to share another of my project!

We all know how important it is to practice regularly in order to improve our development skills. As I am getting more confident, I try to build more complex and robust applications.

This last project was a lot of fun to build. It took me almost a month to deploy it (I mainly work after school hours).

Enjoy reading 😇

Project Introduction
Features
Tech Stack
Wireframe & Design
Data modeling & API routing
Project Organization
Sprint 01: Frontend
Sprint 02: Backend
Sprint 03: Fix & Deploy
Conclusion

Project Introduction 👋

I am glad to introduce GroupChat 🥳

This challenge's wireframes are provided by devchallenges which offers many cool ideas of projects to build and practice. Take a look if you are missing inspiration!

Ok, let's talk about GroupChat, it is an instant messaging app that allows users to create channels and chat with people interested in a particular topic.

Sounds simple ? Well, I would not say that it was "complicated" but it is always challenging to try something new.

It was the first time I have worked with socket.io and it was also my first medium-sized project built with TypeScript.

Features 🌟

✅ Custom Authentication (Email - Password)
✅ Login as guest (limited access)
✅ Random Avatar / Profile image upload
✅ Authorization (json web tokens)
✅ End to End input validation
✅ Create and join channels
✅ Instant messaging
✅ Bug report
✅ Mobile friendly

Tech Stack ⚛️

Once again, I went for my best friend the MERN stack which includes:
➡️ MongoDB
➡️ Express
➡️ React
➡️ Node

In addition to above technologies, I worked with TypeScript to improve the robustness of my code and with Redux to manage the app state.

I should also mention socket.io that enables real-time, bidirectional and event-based communication between the browser and the server.

For deployment, an easy and efficient way is to host the frontend on Netlify and backend with Heroku.

Here is a list of tools I usually work with to enhance my programming experience:
➡️ OS: MacOS
➡️ Terminal: iterm2
➡️ IDE:VSCode
➡️ Versioning: Git
➡️ Package Manager: NPM
➡️ Project Organization: Notion

Wireframe & Design 🎨

To be honest, I don't have too much pleasure designing a product's UI. So, I decided to work with existing wireframes and focus on the code instead.

As I said already, I inspired from devchallenges. Quick overview:

Data modeling & API routing 💾

Database design and API routing are important steps. Make sure you have an action plan before starting coding, or it will be a disaster 🧨

Here is a simple data model made with Lucidchart:

It is indeed simple, but it is enough for this project.

As you could guess, we are building a REST API with Node/Express which involves HTTP requests.

Let's imagine our routes:

Note: API doc made with Apiary

Project Organization 🗂️

I love when everything is clean and well-organized. Here is the folder structure I decided to work with:

Simple, clean and consistent 💫

In order to keep track of my progress, I made myself a task board on Trello

Before you head over to the next step, I will briefly talk about the Git workflow.

As I was the only one working on this project, GitHub flow worked just fine.

Every addition to the code has a dedicated branch and the code is reviewed (by myself only...) for each new PR.

Note: Around 180 commits and 40 branches were created

Sprint 01: Setup & Frontend 🖥

It is always so exciting to start coding, this is my favorite part of the process.

I would say that the first week was the easiest.I began with setting up both Frontend and Backend which means install dependencies, environment variables, CSS reset, create a database, ...

Once setup is done, I built every single component that should appear on the screen and made sure they are mobile friendly (flex, media queries, ...).

Speaking of components and UI, here is a simple example:



// TopBar/index.tsx
import React from 'react';
import { IconButton } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

// Local Imports
import styles from './styles.module.scss';

type Props = {
  title?: String;
  menuClick: () => void;
};

const TopBar: React.FC<Props> = props => {
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <IconButton className={styles.iconButton} onClick={props.menuClick}>
          <MenuIcon className={styles.menu} fontSize="large" />
        </IconButton>
        <h2 className={styles.title}>{props.title}</h2>
      </div>
    </div>
  );
};

export default TopBar;



// TopBar/styles.module.scss
.container {
  width: 100%;
  height: 60px;
  box-shadow: 0px 4px 4px rgba($color: #000, $alpha: 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 95%;
  display: flex;
  align-items: center;
}

.title {
  font-size: 18px;
}

.iconButton {
  display: none !important;
  @media (max-width: 767px) {
    display: inline-block !important;
  }
}

.menu {
  color: #e0e0e0;
}

Nothing fancy, it is a basic implementation of TypeScript (I still have a lot to learn) and SCSS modules.

I like SCSS a lot and wrote an introduction for anyone interested:

SCSS Introduction 🎨

Killian Frappart ・ Oct 7 '20

#css #productivity #codenewbie #webdev

You can also notice that some components (icons, inputs, ...) are imported from my favorite UI library out there: Material UI.

Speaking of TypeScript, the first days were really painful and tiring but in the end, it appeared to be extremely easy to catch bugs during development.

If you find struggling with TypeScript, you may want to have a look to this post:

Get started with TypeScript today! 🆗

Killian Frappart ・ Oct 30 '20

#typescript #webdev #javascript #codenewbie

I am not so familiar with Redux and I had to spend some time reading the doc in order to make it right.

Another cool tool I worked with is Formik which manages form validation in a smart and simple way.



// Login/index.tsx

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { TextField, FormControlLabel, Checkbox, Snackbar, CircularProgress } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert';
import { useDispatch } from 'react-redux';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { useHistory } from 'react-router-dom';

// Local Imports
import logo from '../../../assets/gc-logo-symbol-nobg.png';
import CustomButton from '../../Shared/CustomButton/index';
import styles from './styles.module.scss';

type Props = {};

type SnackData = {
  open: boolean;
  message: string | null;
};

const Login: React.FC<Props> = props => {
  const dispatch = useDispatch();
  const history = useHistory();

  const [isLoading, setIsLoading] = useState(false);
  const [checked, setChecked] = useState(false);
  const [snack, setSnack] = useState<SnackData>({ open: false, message: null });

  // Async Requests
  const loginSubmit = async (checked: boolean, email: string, password: string) => {
    setIsLoading(true);
    let response;
    try {
      response = await axios.post(`${process.env.REACT_APP_SERVER_URL}/users/login`, {
        checked,
        email: email.toLowerCase(),
        password: password.toLowerCase()
      });
    } catch (error) {
      console.log('[ERROR][AUTH][LOGIN]: ', error);
      setIsLoading(false);
      return;
    }
    if (!response.data.access) {
      setSnack({ open: true, message: response.data.message });
      setIsLoading(false);
      return;
    }
    if (checked) {
      localStorage.setItem('userData', JSON.stringify({ id: response.data.user.id, token: response.data.user.token }));
    }
    dispatch({ type: 'LOGIN', payload: { ...response.data.user } });
    history.push('');
    setIsLoading(false);
  };

  const formik = useFormik({
    initialValues: {
      email: '',
      password: ''
    },
    validationSchema: Yup.object({
      email: Yup.string().email('Invalid email address').required('Required'),
      password: Yup.string()
        .min(6, 'Must be 6 characters at least')
        .required('Required')
        .max(20, 'Can not exceed 20 characters')
    }),
    onSubmit: values => loginSubmit(checked, values.email, values.password)
  });

  return (
    <div className={styles.container}>
      <Link to="/">
        <img className={styles.logo} alt="logo" src={logo} />
      </Link>
      <form className={styles.form}>
        <TextField
          className={styles.input}
          id="email"
          label="Email"
          variant="outlined"
          type="text"
          helperText={formik.touched.email && formik.errors.email}
          error={formik.touched.email && !!formik.errors.email}
          {...formik.getFieldProps('email')}
        />
        <TextField
          className={styles.input}
          id="password"
          label="Password"
          variant="outlined"
          type="password"
          {...formik.getFieldProps('password')}
          helperText={formik.touched.password && formik.errors.password}
          error={formik.touched.password && !!formik.errors.password}
        />
        <FormControlLabel
          className={styles.check}
          control={
            <Checkbox checked={checked} onChange={() => setChecked(prev => !prev)} name="checked" color="primary" />
          }
          label="Remember me"
        />
        <CustomButton type="submit" onClick={formik.handleSubmit} isPurple title="Login" small={false} />
      </form>
      <Link to="/signup">
        <p className={styles.guest}>Don't have an account? Sign Up</p>
      </Link>
      {isLoading && <CircularProgress />}
      <Snackbar open={snack.open} onClose={() => setSnack({ open: false, message: null })} autoHideDuration={5000}>
        <MuiAlert variant="filled" onClose={() => setSnack({ open: false, message: null })} severity="error">
          {snack.message}
        </MuiAlert>
      </Snackbar>
    </div>
  );
};

export default Login;

Sprint 02: Backend 📊

The server is pretty straightforward, it is a classic representation of what a Node/Express server should look like.

I created mongoose models and their associations.

Then, I registered routes and connected corresponding controllers. Inside my controllers, you can find classic CRUD operations and some custom functions.

Thanks to JWT, it was possible to work on the security, which was an important point for me.

Now comes the coolest feature of this app, bidirectional communication or maybe should I say socket.io ?

Here is an example:



// app.js - Server side

// Establish a connection
io.on('connection', socket => {
  // New user
  socket.on('new user', uid => {
    userList.push(new User(uid, socket.id));
  });

  // Join group
  socket.on('join group', (uid, gid) => {
    for (let i = 0; i < userList.length; i++) {
      if (socket.id === userList[i].sid) userList[i].gid = gid;
    }
  });

  // New group
  socket.on('create group', (uid, title) => {
    io.emit('fetch group');
  });

  // New message
  socket.on('message', (uid, gid) => {
    for (const user of userList) {
      if (gid === user.gid) io.to(user.sid).emit('fetch messages', gid);
    }
  });

  // Close connection
  socket.on('disconnect', () => {
    for (let i = 0; i < userList.length; i++) {
      if (socket.id === userList[i].sid) userList.splice(i, 1);
    }
  });
});

// AppView/index.tsx - Client side

  useEffect(() => {
    const socket = socketIOClient(process.env.REACT_APP_SOCKET_URL!, { transports: ['websocket'] });
    socket.emit('new user', userData.id);
    socket.on('fetch messages', (id: string) => fetchMessages(id));
    socket.on('fetch group', fetchGroups);
    setSocket(socket);
    fetchGroups();
  }, []);

I discovered express-validator and it helped a lot to provide input validation on the server side. With no doubt, a library that I am going to use again.

Sprint 03: Fix & Deploy ☁️

Alright, the app is looking good and features are working fine. It is time to finish this portfolio project and start a new one.

I am not a pro of cloud solution and complex CI/CD methods so I will satisfy with a free hosting service.

Heroku has a free solution that works fine for the backend. 5 minutes after my node server was uploaded, it was running independantly. Awesome 🌈

I experienced some security issues with the client. Usually, everything is ok when I send my React app to Netlify via GitHub but not this time.

Many of my friends could not reach the given URL because of some "security reasons" and I had to buy a domain name to fix it. No big deal here, 15 euros for a year does not seem overpriced.

Finally, images uploaded by users are stored on my Cloudinary account via their public API.

Conclusion ✅

Once again, I enjoyed myself so much working on this project and learned a lot.

It was a pleasure to share the process with you and I can't wait to hear your tips and feedbacks.

This project is nothing more than a portfolio project and there is no "production" intention behind. However, the code is open sourced on GitHub, feel free to do whatever you want with it.

KillianFrappartDev / GroupChat

Instant messaging webapp project made with React, Redux, TypeScript, Node, MongoDB & Socket.io

I know that there is a lot to improve in term of code quality, security, optimization, ... Whatever, I managed to finish this and the result looks pretty cool and I hope you like it as well.

Live version: GroupChat

Never stop challenging yourself 🚀

Python: Inheritance, File System, Error Handling 🎯

Killian Frappart — Wed, 13 Jan 2021 10:50:48 +0000

Another week of Python has passed and once again, there are a lot of new topics to write about!

Every hour spent learning make me realize how powerful and complex this language is.

Let's dive in 🏊‍♂️

Inheritance
Error Handling
File System

Inheritance

Inheritance is a key aspect of the object-oriented programming paradigm.

In the last post, I introduced classes with a simple example. The idea here, is to create a "child" class that inherits from its "parent" class.

A child class has access to public attributes and methods of its parents.

# Parent Class
class Vehicle:
    def __init__(self, color):
        self.color = color

    def info(self):
        print(f"Vehicle => color: {self.color}")


vehicle = Vehicle("red")
vehicle.info()  # Vehicle => color: red

# Child Classes
class Car(Vehicle):
    def __init__(self, color, brand):
        super().__init__(color)
        self.brand = brand
        self.wheels_count = 4

    def info(self):
        print(f"Car => color: {self.color} - brand: {self.brand} - wheels count: {self.wheels_count}")


class Bike(Vehicle):
    def __init__(self, color, brand):
        super().__init__(color)
        self.brand = brand
        self.wheels_count = 2

    def info(self):
        print(f"Bike => color: {self.color} - brand: {self.brand} - wheels count: {self.wheels_count}")


car = Car("blue", "Ferrari")
car.info()  # Car => color: blue - brand: Ferrari - wheels count: 4

bike = Bike("Yellow", "Yamaha")
bike.info()  # Bike => color: Yellow - brand: Yamaha - wheels count: 2

In the example above, we declare "Car" and "Bike" classes that derives from the "Vehicle" class. They both have access to "Vehicle"'s constructor (init) and the info() method.

Here I decided to override the constructor to add one more field and adapt the info method's behavior.

NOTE: The "super" keyword simply refer to the parent class.

Error Handling

We are used to errors and programs wipe out as developers but if possible, you should ship a rock-solid, error-proof and bug free program to production.

From now, I assume that your Python code is correct and does not raise syntax error.

If you run an unhandled exception, the program will probably crash and stop the execution straight away.

In order to avoid potential crashes, it is recommended to wrap error-prone code in a "try-except-else" block.

try:
    # Code to execute
    raise Exception("An error occured.")  # Some code raise an exception.
except:
    # If there is an exception
    print("Something failed ❌")
else:
    # If no exception was raised
    print("Everything is Ok ✅")
finally:
    # Code to execute
    print("We made it 👍")

It ain't much, but it is enough to start working on your code's quality. Of course, it would not be a good practice to wrap your whole codebase in a massive try block...

File System

Python offers a simple way to interact with local files and directories.

The best practice for opening and closing files uses the with keyword. This keyword closes the file automatically after the nested code block completes.

# text.txt
Hello

# main.py
with open("text.txt", "r") as file:
    print(file.read()) # Display "Hello" in the console.

with open("text.txt", "a") as file:
    file.write(" World!") # file.txt's content is "Hello World!" now.

with open("text.txt", "w") as file:
    file.write("Cool!") # file.txt's content is "Cool!" now.

The first argument is the target file and the second is the opening mode.

It is also possible to interact with directories using "os" methods. The example below shows how to list every files in the current directory.

# main.py
import os

with os.scandir("./") as entries:
    for entry in entries:
        print(entry.name)

# Displays in the console: 
# file.txt
# main.py
# .vscode

Another interesting method is "mkdir" that creates a new directory.

# main.py
import os

try:
    os.mkdir("Test")
except:
    print("Directory already exists.")
else:
    print("Directory created ✅")

Here, it might be clever to wrap your code in a "try-except" block because the program will crash if a directory with the same name already exists.

thank you for reading 😇

Coding challenges #2 🧩

Killian Frappart — Mon, 04 Jan 2021 11:07:09 +0000

Greetings fellow problem solvers! 🤓

As I said already, problem-solving is just like a muscle and it is necessary to practice often in order to improve and grow as a developer.

In this second episode, I picked some easy problems to solve from my favorite algorithms website.

Can you get the loop ?
Morse Code
Rectangle into Squares
Meeting
Playing with digits

Can you get the loop ?

From Codewars

The problem:

You are given a node that is the beginning of a linked list. This list always contains a tail and a loop.

Your objective is to determine the length of the loop.

For example in the following picture the tail's size is 3 and the loop size is 11.

Use the "next" attribute to get the following node.

Note: do NOT mutate the nodes!

My solution (JavaScript):

function loop_size(node){
  let turtle = node;
  let rabbit = node;

  /* We need the turtle and the rabbit to start at the same 
  place. (The rabbit being faster will catch up the turtle at 
  some point) */
  do {
    turtle = turtle.getNext();
    rabbit = rabbit.getNext().getNext();
  } while (turtle !== rabbit)

  /* The rabbit goes for a run and we know that ends when he 
  reaches the turtle position again. */
  let counter = 0;
  do {
    rabbit = rabbit.getNext();
    counter++;
  } while (turtle !== rabbit)

    return counter;
}

Morse Code

From Codewars

The problem:

In this kata you have to write a simple Morse code decoder. While the Morse code is now mostly superseded by voice and digital data communication channels, it still has its use in some applications around the world.
The Morse code encodes every character as a sequence of "dots" and "dashes". For example, the letter A is coded as ·−, letter Q is coded as −−·−, and digit 1 is coded as ·−−−−. The Morse code is case-insensitive, traditionally capital letters are used. When the message is written in Morse code, a single space is used to separate the character codes and 3 spaces are used to separate words.

NOTE: Extra spaces before or after the code have no meaning and should be ignored.

In addition to letters, digits and some punctuation, there are some special service codes, the most notorious of those is the international distress signal SOS (that was first issued by Titanic), that is coded as ···−−−···. These special codes are treated as single special characters, and usually are transmitted as separate words.

Your task is to implement a function that would take the morse code as input and return a decoded human-readable string.

For example:

decodeMorse('.... . -.--   .--- ..- -.. .')
#should return "HEY JUDE"

NOTE: For coding purposes you have to use ASCII characters . and -, not Unicode characters.

The Morse code table is preloaded for you as a dictionary, feel free to use it:

JavaScript/TypeScript: MORSE_CODE['.--']

My solution (JavaScript):

const decodeMorse = (morseCode) => {
  const response = [];

  const words = morseCode.trim().split('   ');

  for (const word of words) {
    const wordArr = [];
    for (const letter of word.split(' ')) {
      wordArr.push(MORSE_CODE[letter]);
    }
    response.push(wordArr.join(''))
  }

  return response.join(' ');

}

Rectangle into Squares

From Codewars

The problem:

The drawing below gives an idea of how to cut a given "true" rectangle into squares ("true" rectangle meaning that the two dimensions are different).

Can you translate this drawing into an algorithm?

You will be given two dimensions

a positive integer length (parameter named lng)
a positive integer width (parameter named wdth)

You will return a collection or a string (depending on the language; Shell bash, PowerShell, Pascal and Fortran return a string) with the size of each of the squares.

Example:

  sqInRect(5, 3) should return "3 2 1 1"
  sqInRect(3, 5) should return "3 2 1 1"

My solution (JavaScript):

function sqInRect(lng, wdth){
  console.log(lng, wdth);

  if (lng === wdth) { return null; }

  let lngx = lng;
  let wdthx = wdth;

  let area = lng * wdth;
  let result = [];



  while (area > 0) {
    if (lngx > wdthx) {
      area -= Math.pow(wdthx, 2);
      result.push(wdthx);
      lngx =  lngx - wdthx;
    } else {
      area -= Math.pow(lngx, 2);
      result.push(lngx);
      wdthx = wdthx - lngx;
    }
  }

  return result;  
}

Meeting

From Codewars

The problem:

John has invited some friends. His list is:

s = "Fred:Corwill;Wilfred:Corwill;Barney:Tornbull;Betty:Tornbull;Bjon:Tornbull;Raphael:Corwill;Alfred:Corwill";

Could you make a program that

makes this string uppercase
gives it sorted in alphabetical order by last name.

When the last names are the same, sort them by first name. Last name and first name of a guest come in the result between parentheses separated by a comma.

So the result of function meeting(s) will be:

"(CORWILL, ALFRED)(CORWILL, FRED)(CORWILL, RAPHAEL)(CORWILL, WILFRED)(TORNBULL, BARNEY)(TORNBULL, BETTY)(TORNBULL, BJON)"

It can happen that in two distinct families with the same family name two people have the same first name too.

My solution (Python):

def meeting(s):
    result = ""

    # Convert string to list
    names_list = s.upper().split(";")

    # Create a dictionnary and bind a list of first names to every last names
    names_dic = {}
    for name in names_list:
        first_name = name.split(":")[0]
        last_name = name.split(":")[1]

        if last_name in names_dic: names_dic[last_name].append(first_name)
        else: names_dic[last_name] = [first_name]

    # Sort and add every entry to the result string
    for key in sorted(names_dic):
        for first_name in sorted(names_dic[key]):
            result = result + f"({key}, {first_name})"

    return result

Playing with digits

From Codewars

The problem:

Some numbers have funny properties. For example:

89 --> 8¹ + 9² = 89 * 1

695 --> 6² + 9³ + 5⁴= 1390 = 695 * 2

46288 --> 4³ + 6⁴+ 2⁵ + 8⁶ + 8⁷ = 2360688 = 46288 * 51

Given a positive integer n written as abcd... (a, b, c, d... being digits) and a positive integer p

we want to find a positive integer k, if it exists, such as the sum of the digits of n taken to the successive powers of p is equal to k * n.
In other words:

Is there an integer k such as : (a ^ p + b ^ (p+1) + c ^(p+2) + d ^ (p+3) + ...) = n * k

If it is the case we will return k, if not return -1.

Note: n and p will always be given as strictly positive integers.

dig_pow(89, 1) should return 1 since 8¹ + 9² = 89 = 89 * 1
dig_pow(92, 1) should return -1 since there is no k such as 9¹ + 2² equals 92 * k
dig_pow(695, 2) should return 2 since 6² + 9³ + 5⁴= 1390 = 695 * 2
dig_pow(46288, 3) should return 51 since 4³ + 6⁴+ 2⁵ + 8⁶ + 8⁷ = 2360688 = 46288 * 51

My solution (JavaScript):

function digPow(n, p){
  if(!n || !p){
    return -1;
  }
  let digitArray = n.toString().split("");
  let sun = 0;
  for(let i = 0; i<digitArray.length; i++){
    sun += Math.pow(digitArray[i], p+i);

  }
  if(parseInt(sun/n) === sun/n){
  return sun/n;
  }
  else{
    return -1;
  }
}

Python: Modules, Dictionaries, Tuples & Classes 🌟

Killian Frappart — Tue, 29 Dec 2020 14:41:02 +0000

This is my second week of Python and the second episode of this Python dedicated series 🤓

I am a big fan of "organization" and today I decided to learn more about related topics.

As always, please keep in mind that I am writing and learning simultaneously. Therefore, you might come across mistakes while reading through this article even if I double-check every topic I write about.

Packages & Modules
Dictionaries
Tuples
Classes

Packages & Modules

Set up a new project and install dependencies was not that intuitive for me, so I will walk with you through the main steps.

Create an environment

The idea here is to create a context for your project. Imagine that you have an open source project with many contributors, how tedious would it be to tell everybody how to set up and configure locally ?

You want to make sure that every contributor is running the project in the same environment and can easily install dependencies.

Python3 is shipped with the venv package which gives you the possibility to create a virtual environment like this:

$ python3 -m venv <environment-name>

Install packages

Nobody wants you to write code that has been written before, there is a huge community of developers that offers you an incredible amount of packages.

A package is a container for one or more modules and a module is simply a python file that exports variables, classes or functions.

If you are familiar with JavaScript, you probably know NPM or Yarn. PyPi is the most common option to install packages in your Python project.

$ pip install <package-name>

You should always have a file in your project that list all packages installed.

$pip freeze > requirements.txt

Import modules

As I said, a module is nothing more than a python file that lets you access its content.

Here is an example:

# hello.py

def greeting():
  print("Hello")

# main.py

import hello

hello.greeting()

It is as simple as that 🤯 Optionally, you can rename your imports as follows:

# main.py

import hello as hi

hi.greeting()

Lastly, it is also possible to import some specific functions or variables from a module like this:

# main.py

from hello import greeting

greeting()

Dictionaries

In my last article, I introduced lists which is a really useful data structure.

Lists work just fine, but it might not be the solution for every problem you face.

Today, I would like to write about dictionaries. A dictionary is a data structure that store data as key-value pairs.

Dictionary item:
✅ Unordered
✅ Changeable
✅ Values can be any data type
❌ Duplicates not allowed

# Create a new dictionary
tech_dictionary = {
    "React": "Library for building user interfaces.",
    "Node": "JavaScript runtime.",
    "C#": "Strongly typed programming language",
}

# Read
print(tech_dictionary["Node"]) # "JavaScript runtime."

# Check if key exists
if "Java" in tech_dictionary:
  print(Java is in the dictionary!)

# Change item value
tech_dictionary["React"] = "Popular frontend library"

# Add item
tech_dictionary["Python"] = "Most famous programming language in 2020"

# Remove item
tech_dictionary.pop("C#")

Tuples

Speaking of data structure, it is worth to mention tuples. A tuple is used to store a collection of data in a single variable.

Tuple item:
✅ Ordered
✅ Allow duplicates
❌ Unchangeable

# Create a new tuple
tech_tuple = ("C++", "Django", "Ruby")

# Read
print(tech_tuple[1]) # "Django"

# Convert a tuple to a list
tech_list = list(tech_tuple)

# Change item value
tech_tuple[1] = "Flask"

# Items cannot be added or removed after tuple is created

Classes

Python is an object-oriented programming language. OOP is a though topic that I will not dive too deep in because of its complexity.

Still, I will introduce classes and related syntax. If you have never worked with classes before, it is a very common feature available in many programming languages.

A class is a blueprint used to build objects.

# Create a new class
class Car:

    # Constructor
    def __init__(self, color):

    # Attributes
    self.color = color

    # Methods
    def info(self):
        print(self.color)

Constructor

Every class has an init function which is executed when a new instance of the class is created.

This function should be used to assign values or execute some operations.

The "self" parameter is used to access values of a given instance.

def __init__(self, color, weight):
   self.color = color
   self.weight = weight
   print("New car created")

Attributes

Attributes are variables related to an instance of a class. They can be modified from the outside.

car = Car("Red", 200)
print(car.color) # "Red"

car.weight = 500
print(car.weight) # 500

Methods

Methods are functions that belongs to a class instance.

red_car = Car("Red")
blue_car = Car("Blue")

red_car.info() # "Red"
blue_car.info() # "Blue"

Thank you for reading 😇

Coding challenges #1 🧩

Killian Frappart — Thu, 17 Dec 2020 18:21:23 +0000

Greetings fellow problem solvers! 🤓

As I am learning programming, I decided to spend more time on my problem-solving skills. Practice is a key aspect of the learning process and a great way to stay motivated.

With this new post series, I would like to share with you some code katas' solution. If you feel like it, don't hesitate to take those challenges on your own and share your solutions.

Algorithm/problem solving is just like a muscle that we must often train in order to improve. Today's problems are beginner-friendly, I will slowly bring harder problems on the table as this series is growing up.

Depending on my mood, I will provide solutions written in JavaScript, Python or C#. I can't wait to have your feedbacks and advices!

Multiples of 3 & 5
Valid Braces
Roman Numerals Encoder
Pascal's Triangle
Persistent Bugger.

Multiples of 3 & 5

From Codewars

The problem:

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.

Finish the solution so that it returns the sum of all the multiples of 3 or 5 below the number passed in.

My solution (Python):

def solution(number):

    # Return 0 if argument is negative
    if number <= 0: return 0

    # Create a list to store multiples
    multiples_list = []

    # Loop from 1 to argument
    for i in range(1, number):
        if (i % 3 == 0) or (i % 5 == 0):

            # Add multiples to the list
            multiples_list.append(i)

    # Return the sum
    return sum(multiples_list)

Valid Braces

From Codewars

The problem:

Write a function that takes a string of braces, and determines if the order of the braces is valid. It should return true if the string is valid, and false if it's invalid.

All input strings will be nonempty, and will only consist of parentheses, brackets and curly braces: ()[]{}.

What is considered Valid?
A string of braces is considered valid if all braces are matched with the correct brace.

Example:

"(){}[]"   =>  True
"([{}])"   =>  True
"(}"       =>  False
"[(])"     =>  False
"[({})](]" =>  False

My solution (Python):

def validBraces(string):
    # Return False if arg is not a string  
    if type(string) is not str: return False

    # Return False if arg's length is not even
    if len(string) % 2 is not 0: return False

    # Convert string to list
    braces_list = list(string)

    # Create a braces dictionnary
    braces_dictionnary = {
        "(": ")",
        "{": "}",
        "[": "]"
    }

    # Create a list of 'opened' braces
    opened_braces = []

    # Loop through the list generated by the string
    for brace in braces_list:

        # It is an opening brace
        if brace in braces_dictionnary: 

            # Push it at the end of our opened braces list
            opened_braces.append(brace)

        # It is a closing brace    
        else: 

            # Check if opened braces list is empty
            if len(opened_braces) == 0:
                return False

            # Check if the last encountered opening brace corresponds
            if braces_dictionnary[opened_braces[-1]] == brace:

                # It is the same so we remove it from the opened list
                opened_braces.pop()

            # They are different, string is not valid!    
            else:
                return False

    # Check if there are still opened braces in the list
    if len(opened_braces) > 0:
        return False
    else:
        return True

Roman Numerals Encoder

From Codewars

The problem:

Create a function taking a positive integer as its parameter and returning a string containing the Roman Numeral representation of that integer.

Modern Roman numerals are written by expressing each digit separately starting with the left most digit and skipping any digit with a value of zero. In Roman numerals 1990 is rendered: 1000=M, 900=CM, 90=XC; resulting in MCMXC. 2008 is written as 2000=MM, 8=VIII; or MMVIII. 1666 uses each Roman symbol in descending order: MDCLXVI.

Help

Symbol    Value
I          1
V          5
X          10
L          50
C          100
D          500
M          1,000

Example:

solution(1000) # should return 'M'

My solution (Python):

def solution(n):

    # Check that n is an integer
    if type(n) is not int:
        return False

   # Symbols sorted by index
    sym_dictionnary = {
        0: { 1: 'M' },
        1: { 9: "CM", 5: "D", 4: "CD", 1: "C" },
        2: { 9: "XC", 5: "L", 4: "XL", 1: "X" },
        3: { 9: "IX", 5: "V", 4: "IV", 1: "I" },
    }

    # Create a digit list from n
    digit_list = list(str(n / 10000))[2:]

    # We will build the result with this list
    result_list = []

    # Loop through the digit list
    for i in range(0, len(digit_list)):

        current_digit = int(digit_list[i])

        # Until the current digit reaches 0
        while current_digit > 0:

            # Find the appropriate symbol in the dictionnary and push it to the result list
            for key in sym_dictionnary[i]:
                if current_digit - key >= 0:
                    current_digit -= key
                    result_list.append(sym_dictionnary[i][key])
                    break;

    # Convert to string and return the result                
    return "".join(result_list)

Pascal's Triangle

From Codewars

The problem:

In mathematics, Pascal's triangle is a triangular array of the binomial coefficients expressed with formula

Task
Write a function that, given a depth n, returns n top rows of Pascal's Triangle flattened into a one-dimensional list/array.

Example:

n = 1: [1]
n = 2: [1,  1, 1]
n = 4: [1,  1, 1,  1, 2, 1,  1, 3, 3, 1]

My solution (JavaScript):

function pascalsTriangle(n) {

  // Helper variable that represents the pyramid as an array of arrays
  const pyramid = [[1]];

  // Result variable that will be returned
  const result = [1];

  // Loop until our pyramid has enough rows
  for (let i = 1; i < n; i++) {
    const newRow = [];

    // Populate every slots in a row
    for (let j = 0; j <= i; j++){

      // The current number is the sum of the number at the current index and current index - 1 from the previous row
      const currentNum = (pyramid[i-1][j] || 0) + (pyramid[i - 1][j - 1] || 0);
      newRow[j] = currentNum;
      result.push(currentNum)
    }

    // Append a new populated row at the end of every iteration
    pyramid.push(newRow);

  }

  return result;
}

Persistent Bugger

From Codewars

The problem:

Write a function, persistence, that takes in a positive parameter num and returns its multiplicative persistence, which is the number of times you must multiply the digits in num until you reach a single digit.

Example:

 persistence(39) => 3  # Because 3*9 = 27, 2*7 = 14, 1*4=4
                       # and 4 has only one digit.

 persistence(999) => 4 # Because 9*9*9 = 729, 7*2*9 = 126,
                       # 1*2*6 = 12, and finally 1*2 = 2.

 persistence(4) => 0   # Because 4 is already a one-digit number.

My solution (Python):

def persistence(n):

    # Convert a number to a list of digits
    digit_list = [int(char) for char in str(n)]

    # Count every loop iteration
    count = 0

    # Loop until we have 1 digit left
    while len(digit_list) > 1:

        # Multiply every digits in the list
        newNumber = 1
        for digit in digit_list: newNumber *= digit

        # Update count and current number values
        count += 1
        digit_list = [int(char) for char in str(newNumber)]

    return count

Python Fundamentals ☕️

Killian Frappart — Tue, 15 Dec 2020 19:04:45 +0000

Python is one of the most famous programming language in 2020, it is widely used for machine learning, data analysis, scripting and much more.

In order to improve as a developer and add a new skill to my tool belt, I decided to start learning Python. It is so exciting to begin this journey with you.

I love to share about my work and programming in general and can't wait to hear your feedbacks! 🔥

Variables
Arithmetic, Comparison & Logical Operators
Control Flow
Lists
Loops
Functions
Conclusion

Variables

Variables are used to store data, they give developers the possibility to reuse and manipulate data in a program.

Naming conventions differ from one language to another. When writing Python code, you should name your variables as following.

✅ Comprehensive and specific name
✅ Lower case (❗️ constants should be upper case)
✅ Words separated with underscores

Example:

username = "John"
number_input = 25
PI = 3.14

The scope is also important to mention. A variable is only accessible within the context it is declared in.

Example:

# Declared in the global context
API_KEY = "ABCDEF1234"

def demo():
   # It works fine.
   print(API_KEY)

   # Declared in local context
   SECRET_STRING = "Something secret"

# It won't work. (Undefined variable: 'SECRET_STRING')
print(SECRET_STRING)

It might not be obvious but under the hood, every variable as a type. Primitives data types are Boolean, Integer, Float and String.

You have the possibility to convert a variable to another like this:

# Integer
number = 5

# Float (5 => 5.0) 
number_to_float = float(number)

# String (5.0 => '5.0')
float_to_string = str(number_to_float)

Arithmetic, Comparison & Logical Operators

Now that we are able to store data, let's use it! In this section, we will have a look to data manipulation and comparison.

It is pretty easy to perform math operations in Python. This might sound surprising, but it does work with numbers, strings and lists 🤯

first_number = 2
second_number = 5

# 2 + 5 => 7
number_result = first_number + second_number 

first_word = "Hello"
second_word = "World!"

# "Hello" + "World!" => "HelloWorld!".
string_result = first_word + second_word

Of course, there is a lot more to learn about that topic since you can perform subtraction, division, multiplication, ...

It is also possible to compare variables. This will make sense during the next section where we start working with conditions.

# True
number_number = 5 == 5

# False
number_string = 5 == '5'

# True
greater = 5 > 3

# True
not_equal = 5 != '5'

Once again, there is a lot more to do with comparison operators, but it is enough to introduce that topic.

Finally, it is possible to combine multiple comparisons with logical operators.

Example:

age = 25
gender = 'Male'

#True (both expressions are true).
is_adult_or_girl = (age > 18) or (gender == 'Female')

#True (both expressions are true).
is_adult_boy = (age > 18) and (gender == 'Male')

At the end of the day, logical operators answer a question we ask with True or False depending on what operator we used.

Control Flow

This is probably THE very first thing that comes to my mind when speaking about programming, conditions and "if" statements.

If something is true, do this... else do that...
Hopefully, Python syntax is pretty easy to work with:

age = 25

if age > 18:
   # We will end down here.
   print("You can buy alcohol")
else:
   print("You can buy Pepsi")

As you can see, it is pretty straightforward! If needed there is the 'elif' statement that lets you add more possibilities to your program.

There is a way to enhance the syntax a bit by using the ternary operator as follows:

first = 5
second = 8

# Display "Second".
print("First") if first > second else print("Second")

A little side note to notify that indentation is very important in the Python syntax since there is no code blocks like in JavaScript syntax.

Lists

So far, we used primitives data types such as integer and strings. It was working just fine, but you might come across a situation where it would make sense to store multiple information at the same place.

Lists come to the rescue with a simple way to store collections of data and provides plenty of useful methods. Items in a lists are indexed, the first one starts at index 0.

people = ["John", "James", "Max"]

# Display "James".
print(people[1])

# Display "Max".
print(people[-1])

# Display ["John", "James"].
print(people[0:2])

It is very easy to find out how many items a list contains:

fruits = ["Apple", "Banana", "Orange"]

# Result is 3.
len(fruits)

# It works for Strings too! Result is 5.
len("Hello")

Let's play around with lists and their items.

fruits = ["Apple", "Banana", "Orange"]
people = ["John", "James", "Max"]

# Result is ["Apple", "Banana", "Orange", "John", "James", "Max"].
fruits_and_people = fruits + people

# Add an item. Result is ["Apple", "Banana", "Orange", "Lemon"].
fruits.append("Lemon")

# Remove an item. Result is ["John", "Max"].
people.remove("James")

# Clear the list. Result is [].
people.clear()

# Sort the list. Result is ["James", "John", "Max"].
people.sort()

There are other collections we can work with such as tuples and dictionnaries and I will definetly speak about those later 🤓

Loops

We are slowly but surely going deeper into this incredibly powerful language. As a developer you hate repetitive tasks (yes you do, it is not a question).

Lists are great but would you imagine yourself manually go through every item in order to extract or manipulate data? Hell no!

By far the most common way of programmaticaly repeat a task is by using loops. Let's begin with "for" loops.

people = ["John", "James", "Max"]

# Every person will be displayed in the console.
for person in people:
   print(person)

# Every character will be displayed. It works on Strings as well!
for character in "Something":
   print(character)

# "Hello" is displayed 5 times.
for n in range(5):
   print(character)

# "else" after a loop describe an execution that should occurs once the loop is finished.
else:
   print("Loop finished")

Now that "for" loops have no secret for you, let's move on and give "while" loops a try:

# Infinite loop
while True:
   print("I will never stop!")

# This loop will run until current_count reaches 10.
current_count = 0

while current_count < 10:
   current_count += 1

Thanks to "break" and "continue" statements, you have full control over your loop execution.

number_list = [1, 2, "Hello", 3]

# "Break" will stop the loop execution if it finds a string in the list.
for number in number_list:
   if type(number) is str:
      break

   print("This list is full of numbers!") 

# "Continue" will ignore what comes next and jump to the next loop iteration.
for number in number_list:
   if type(number) is str:
      number_list.remove(number)
      continue

   print(f"{number} is not a string!")

Functions

We are almost done with this introduction to Python's fundamentals! This is the last topic I am going to cover and you should be able to work with functions really quick 🌟

Functions are reusable blocks of code that only executes when they are asked to do so. You can define a new function with the "def" keyword.

def print_hello():
   print("Hello!")

# Here I ask the function to execute and the result is displayed in the console.
print_hello()

When defining a function, you can pass in parameters to work with just like this:

def add_numbers(num1, num2):
   print(num1 + num2)

# Here we call our function with two arguments and print the result.
add_numbers(5, 3)

Sometimes, printing the result is not enough and we want to store the result of the logic inside a function. In that case, we use the "return" keyword.

def multiply_numbers(num1, num2):
   return num1 * num2

# Now the variable 'answer' holds the value returned by our function.
answer = multiply_numbers(5, 3)

Less common but still interesting to mention, you can accept as many arguments as you want with '*'.

def print_args(*args):
   for arg in args:
      print(arg)

# It will print every argument we pass in the function
print_args(1, 2, 3, 4)

Optionally, it is possible to assign a default value to function parameters. If you do so, it is not anymore necessary to pass a value for a given parameter when you call the function.

def default_params(num1 = 5, num2 = 3):
   return num1 + num2

# "answer" is equal to 15.
answer = default_params()

Last but not least, lambda functions are small anonymous functions that can only handle one expression.

# This single line function takes one argument and returns it.
lambda_function = lambda arg: return arg

Lambda functions might seem confusing at this point but it will make sense later when we get the chance to work with functions inside of functions.

Conclusion

It was a lot of fun to dive in this ocean of possibilities that Python offers! I hope you enjoyed reading, please share your thoughts and feedbacks in the comment section 👇

How I built a real world project for the first time 🌈

Killian Frappart — Sat, 21 Nov 2020 16:56:33 +0000

I have been learning web development for a year and I have just delivered my very first MVP for a client, this is a huge step forward in my journey to become a real world developer.

In this article, I will write about the building process and design thinking in general. This is not a tutorial by any means, I will simply share my experience with anyone interested.

Project Introduction
Tech Stack
Wireframe & Design
Data modeling
Project Organization
Sprint 01: Frontend
Sprint 02: Backend
Sprint 03: Implementing features
Sprint 04: Fix & Deploy
Conclusion

Project Introduction 👋

Let me introduce the project first. We have to build an MVP for a mobile app that works on both Android and IOS. This app's name is Allergio and aims to make people with food allergies' life easier.

Thanks to Allergio, you can create a profile for your relatives, register their allergies and share their profiles with your contacts.

The core feature is the scanner. Open up your phone's front camera, point it towards any food product and a list of the potential allergens will be displayed.

In order to complete this mission, I teamed up with my friend Walid. He is a talented growing JavaScript developer, and it is a pleasure to share this experience with him.

Tech Stack ⚛️

To build this app, we decided to rely on the very popular MERN stack which includes:
➡️ MongoDB
➡️ Express
➡️ React Native
➡️ Node

Although these are technologies I am familiar with, I never worked with React Native and I don't know much about Mobile development concepts.

We are considering AWS and Heroku to host the Backend part and for file management but I will provide more details in the Fix & Deploy section.

It already sounds like a great and exciting challenge 🤩

Here is a list of tools I usually work with to enhance my programming experience:
➡️ OS: MacOS
➡️ Terminal: iterm2
➡️ IDE:VSCode
➡️ Versioning: Git
➡️ Package Manager: NPM
➡️ iOS Emulator: Xcode
➡️ Andorid Emulator: Android studio
➡️ Communication: Slack
➡️ Project Organization: Trello

Wireframe & Design 🎨

Our client Xavier provided simple wireframes and we reworked them a little to make it look "modern" and improve UI/UX.

We mainly worked with Figma which is a great tool that I 100% recommend. Let me show you a few examples.

Splash Screen:

Of course, we redesigned the app following 2020's mobile development conventions, and we took inspiration from famous applications such as Yuka, Shazam, Spotify, ...

Data modeling 💾

Since we are building a Full-Stack application, we must store and manage data. It would be crazy to jump into the coding process without a clear and well-designed action plan.

What kind of data are we playing with:

Users 👤

{
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  name: { type: String, required: true },
  lastName: { type: String, required: true },
  image: { type: String },
  profiles: [{ type: mongoose.Types.ObjectId, ref: 'Profile' }],
  allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
  contacts: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
}

Profiles 👨‍👩‍👧‍👦 (Created by the user for his relatives)

{
  name: { type: String, required: true },
  image: { type: String, required: true },
  allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
  readers: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
  owner: { type: mongoose.Types.ObjectId, ref: 'User', required: true }
}

➡️ Allergens 🥜

{
  name: { type: String, required: true },
  image: { type: String, required: true },
  description: { type: String, required: true },
  reaction: { type: String, required: true }
}

PS: Unique IDs are provided by MongoDB by default.

Awesome, we now know what our data looks like but this is not enough. To make our app able to create, read, delete and update data, we must give it the chance to communicate with our server.

You might already know it, Express makes it really easy to build Rest API and that is exactly what we are about to do!

If you are not familiar with API architecture, I recommend you skip this section.

API routes:

Users 👤 ⏩ /api/users/
➡️ (GET /:uid ) Get user by ID.
➡️ (POST /signup ) Create user account.
➡️ (POST /login ) Log user in.
➡️ (PUT / ) Edit user information.

Profiles 👨‍👩‍👧‍👦 ⏩ /api/profiles/
➡️ (GET /:uid/all ) Get all profiles of user.
➡️ (GET /:pid ) Get profile by ID.
➡️ (POST / ) Create a new profile.
➡️ (PUT /:pid ) Edit profile information.

Contacts 👥 ⏩ /api/contacts/
➡️ (GET /:uid ) Get user's contacts.
➡️ (POST /search ) Search new contacts.
➡️ (POST /share ) Share profiles with contact.
➡️ (POST / ) Add a contact.
➡️ (DELETE / ) Delete a contact.
➡️ (POST /unshare ) Unshare profiles with contact.

Allergens 🥜 ⏩ /api/allergens/
➡️ (GET /:aid ) Get allergen by ID.
➡️ (GET / ) Get all allergens.
➡️ (GET /name/:name ) Get allergen by name.

We are almost good to go, before you head to the next section, I want to have a quick word about file management.

This is one of the trickiest topic we came across when building Allergio and I thought it would be interesting to share the solution we came up with.

Here is the problem: how to store images ?

Uploading images directly to the database would slow it down and most image hosting services require you to pay monthly fees.

We decided to build a very simple custom image uploader service that stores images on the server itself and provides a URL to fetch them. This simple server is hosted on an Ubuntu instance running in the cloud.

This is definitely not the best solution but considering the huge amount of work we have to achieve in a relatively short period of time, it does the job.

KillianFrappartDev / image-manager

Project Organization 🗂️

I will never tell this enough: Organization is the key! 🔑

The organization relies mostly on the Agile Methodology because we were introduced to it during our coding bootcamp.

The building process is split in 4 sprints of 5 days (each sprint has its own section) and every one of them must have clearly defined tasks.

On Monday morning, we used to group up to establish an exhaustive list of tasks for the whole week. We used Trello to create little cards for every task.

Every Friday, there was a meeting with our client. He was always happy to have a little demo and thanks to his weekly feedback we could finally deliver a product close to his initial expectations.

Moreover, we tried to stick to daily stand-up in the morning and day retrospective around 5.30 pm.

There is another organization key point whenever you start a brand-new project and it is workflow setup.

We are working with GitHub following Git flow's recommendations as much as possible.

➡️ Not familiar with Git flow ? No worries, have a look to my article! 🧐

Git Flow Introduction 🌲

Killian Frappart ・ Sep 23 '20 ・ 3 min read

#github #git #productivity

Finally, let me show you the folder structure we worked with:

Allergio 📂

Backend/
--- controllers/
--- models/
--- routes/
--- utils/
--- middlewares/
Frontend/
--- app/
------ assets/
------ components/
------ screens/
------ context/
------ utils/
------ navigation/

Sprint 01: Frontend 📲

Time has finally come to start coding! 🔥

Shout out to Expo that litteraly made this project possible. Expo is a framework for React applications, it provides a set of tools to start building your application in a matter of minutes and hides most of the complexity when setting up a new project.

It was very scary at first to work with React Native because we never used it before but Expo's documentation is well-written and I felt like doing mobile development forever in a couple days only.

After we initialized the project, setting up in-app navigation is a great starting point. Very similar to React Router for Web, React Navigation is a great library that is easy to get started with and provides a good solution for every use cases.

We decided to implement a bottom tab navigation for optimal user experience:

Another important step is to setup a global context. Every React developer knows how tidious it might be to lift state up through props when you project is growing bigger.

To answer that need of a global state, we went for React Context mainly to store user information such as name, last name, image and wether he is logged or not.

Everything seems to work fine so far, let's build our screens and components. We have about 10 screens to build (There is inner navigation for each tab) and around twice as much components like buttons, cards, inputs, bottom sheets and much more.

At this point, we are working with dummy hard coded data. Our components are mostly function components and their state is managed with React Hooks.

Hopefully, we have enough time to implement camera features and request to an external API to gather information about food products before the end of the first sprint.

Sprint 02: Backend 📊

As I mentionned before, this project's backend is a Node/Express Rest API linked to a cloud MongoDB database.

In order to make it work, we start by installing dependencies such as cors, body-parser, mongoose, nodemon, ...

When working with MongoDB, I highly recommend you work with mongoose as well. It makes your life so much easier. Define mongoose models for your data, connect to the database and you are good to go ✅

Then, we register routes just like I already explained here and connect each route to a dedicated controller.

Every controller's behavior must be tested and for that you can give Postman a try.

Finally, we improve our server's robustness with proper error handling middleware and enhance development experience with nodemon and environement variables.

Sprint 03: Implementing features ⭐

This is by far the most exciting week, when we finally see the result of everything we did before.

We spend this entire week connecting Frontend user interface to Backend controllers via HTTP requests and update the database in real time.

HTTP request are done using Axios which is a personnal preference.

There are many features to implement this week:
➡️ Login/Signup with Email and password.
➡️ Create and update profiles.
➡️ Edit user information.
➡️ Add/remove contacts.
➡️ Share profiles with contacts.
➡️ Upload images from phone's gallery.
➡️ Send SMS to invite friends.
➡️ ...

Native functionnalities such as SMS, camera and photo gallery could be implemented thanks to Expo's incredible doc 🌟

Sprint 04: Fix & Deploy ☁️

Last week of this incredibly enriching adventure. I already learned a lot and spent so much time and energy. We are getting tired but there is still work to do before we send our project to the client.

Thousands of lines are waiting to be refactored and plenty of little bugs still remain. Let's start by cleaning this up and fixing as many style issues as possible.

AWS has a cloud service called EC2. We create an Ubuntu instance and connect via SSH. After a bit of setting things up, our server and image manager are running in the cloud.

Right now, the app is only available through Expo's hosting but we are looking to deploy it on App store and play store soon.

Conclusion ✅

Four intensive weeks have passed, we are tired, the project is still a little buggy but the client is happy and that is what matters the most.

In my opinion, my friend Walid and I did a great job here, working on a real project for the first time and facing obstacles made us better developers.

I wanted to provide a link to the app's demo or source code with this article but since this project is in the alpha phase, the client would like to keep some information confidential.

Thank you very much for reading!

I would love to have a feedback from you, any tips to improve as a developer or as a blogger is very appreciated 😇

Get started with TypeScript today! 🆗

Killian Frappart — Fri, 30 Oct 2020 16:54:40 +0000

What & why ? 🧐

TypeScript is an open-source language which builds on JavaScript. At the end of the day, TypeScript is no more than compiled JavaScript code and it runs everywhere.

Writing TypeScript code let you catch error during development and saves you a lot of time when debugging. It brings new features that considerably improve your code maintainability and if you are already familiar with JavaScript, there is a gentle learning curve.

Setup 🔨

In order to get started with TypeScript, you should install the compiler locally.

npm install -g typescript

You can now create any .ts file you want and run the following command:

tsc app.ts

It should compile your app.ts file and create a new app.js file that contains "classic" JavaScript code.

TypeScript compiler is very flexible and lets you decide how it should behave. The first thing you have to do when starting a new project is to run this command:

tsc --init

Well done, you successfully created a tsconfig.json file that allows you to customize the compiler behavior.

Understanding the configuration file is a great way to improve your TypeScript skills, read the official doc if you want to dive deeper in.

Core features ⭐️

✅ Types
The main feature that comes from using TypeScript is type declaration. Most of JavaScript code running out there is un-typed and it is perfectly fine but if you are used to strongly typed programming languages, you may not like it so much.

TypeScript comes to the rescue, you are now able to explicitly tell the compiler what type of data your variables should have and what type of data a function returns.

// app.js
let num;
num = 5;
num = "Five"; /* It works */

// app.ts
let num: Number;
num = 5;
num = "Five"; /* Type 'string' is not assignable to type 'Number' */

In this example, the compiler will complain if I accidentally assign a String to a variable that was supposed to be a Number.

Here is a non-exhaustive list of types that TypeScript understands:

// Primitives
const num: Number = 5;
const word: String = "Hello";
const bool: Boolean = true;

// Non-Primitives
const numArr: Array<Number> = [1, 2, 3];
const obj: Object = {};

// Tuples
const tuple: [String, Number, Number] = ["Hello", 1, 2]; // Fixed size and types array

// Unions
let union: Number | String = 5; // Allow multiples type possibilities
union = "World";

// Enums
enum Color { // Initialize numeric values with a name
    Red = 0,
    Blue = 1,
    Green = 42,
  }
const color = Color.Green;
console.log(color); // Displays 42

// Any
let something: any; // Any type

// Void
let nothing: void;
const returnNothing = (): void => console.log("Nothing"); // Return nothing

// Never
const error = (message: string): never => { // Always throw an exception
    throw new Error(message);
  }

// Custom 
type Name = "John" | "James";
let customName: Name;
customName = "John";
customName = "James";
customName = "Max"; // Type '"Max"' is not assignable to type 'name'

✅ Object-Oriented Programming

JavaScript already supports the object-oriented approach but with TypeScript, we take things to the next level!

If you are unfamiliar with classes, here is an example:

// Class
class Pet {
    name: String;

    constructor(name: String) {
        this.name = name;
    }

    makeNoise = (): void => console.log(`${this.name} makes noise`);
}

// Inheritance
class Dog extends Pet {
    breed: String;

    constructor(name: String, breed: String) {
        super(name);
        this.breed = breed;
    }
}

const dog = new Dog("Max", "Akita");
dog.makeNoise(); // Displays: Max makes noise

So far, nothing really new. This works quite the same way with JavaScript.

Access modifiers are a thing in many others programming languages and thanks to TypeScript we can work with them as well.

// Class
class Pet {
    public name: String; // Accessible everywhere
    private _age: Number; // Accessible from the class itself only
    protected isDog: Boolean; // Accessible from the class and its subclasses

    static petCount = 0; // Not accessible from instances of the class
    static readonly species = 'Canis Familaris'; // Cannot be modified

    constructor(name: String, age: Number, isDog: Boolean) {
        this.name = name;
        this._age = age;
        this.isDog = isDog;
    }

    makeNoise = (): void => console.log(`${this.name} makes noise`);
}

const pet = new Pet("Maw", 5, true);

console.log(pet.name); // Displays: "Max"
pet.name = "Rex";
console.log(pet.name); // Displays: "Rex"

console.log(pet._age); // Property 'age' is private and only accessible within class 'Pet'
console.log(pet.isDog); // Property 'isDog' is protected and only accessible within class 'Pet' and its subclasses.

console.log(Pet.petCount); // Displays: 0
console.log(Pet.species); // Displays: 'Canis Familaris'

In this dummy example, we manage the access to our class variables thanks to access modifiers. They prevent unwanted variables assignments from the outside.

A quick side note for the 'static' keyword. Static variables are available on the class itself and does not differ from one instance of this class to another.

Conclusion

TypeScript is a great tool to work with and has a lot to offer. I am only at the beginning of my journey and I already love it.

Let me know what you think of TypeScript and my article.

Thank you for reading! 😇

SCSS Introduction 🎨

Killian Frappart — Wed, 07 Oct 2020 16:29:39 +0000

NOTE: I am only working with SCSS syntax in this little guide but SASS and SCSS are extremely similar and pretty much every example work for both.

I know about SASS for a while but I did not dive into because I thought pure CSS was doing the job well enough.

After a couple of weeks using SCSS, here is my personal opinion. Pure CSS is enough but once you worked with SCSS it is really frustrating to write CSS code again ...

SCSS brings cool features on the table that make our lives as Front-End developers easier and I wanted to write a quick introduction for anyone interested to get started.

Setup

Unfortunately, browsers do not understand SCSS, before your SCSS code can be used, it needs to be compiled.

➡️ If you are using VSCode, you can simply use Live SASS Compiler.

Once the extension is installed, you can create any .scss/.sass file and click on the Watch SASS button.

You are already good to go! It will automatically compile your changes every time you save.

➡️ Another option is to install SASS compiler globally on your machine.

npm install -g sass

Then, compile your SCSS files from CLI like this:

sass --watch index.scss index.css

Head over to the official documentation for more information.

➡️ Finally, if you are building web apps using React or any other JavaScript frameworks, it will most likely be working out of the box.

I personally work with React and any app made with create-react-app template supports SCSS by default. Under the hood, webpack uses sass-loader to compile your SCSS code.

Features

➡️ Variables are supported by CSS as well but SCSS provides a nice and easy to use syntax for declaring and using variables.

$robotoFont: 'Roboto', sans-serif;
$color: (
  primary: #fff,
  secondary: #000,
);

body {
  font-family: $robotoFont;
  background-color: map-get($color, secondary);
}

I think it is not necessary to point to your attention how useful it is to work with variables. Re-use your code, store and update data shared across your app more easily.

➡️ Nesting introduces a new way to select your HTML elements. You can aim for a specific element from its parent.

body {
  margin: 0;

  header {
    background-color: red;

    button {
      width: 200px;
      height: 200px;

      &:hover {
        background-color: blue;
      }
    }
  }
}

This is also the way you use pseudo-classes.

➡️ At-rules add new functionalities. I won't go through all of them but let me show you this one.

/* second.scss */
$color: red;

@forward 'second.scss';

/* index.scss */
@use 'second.scss';

body {
  background-color: $color;
}

Export your variables and mixins (this is the next feature I will introduce) from a SCSS file with @forward and import it with @use.

➡️ Mixins allow you to define styles that can be re-used across your stylesheet. Thanks to mixins you can avoid classes like "float-left" or "flex-center".

@mixin centerFlex {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin formButton($color) {
  border-radius: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: $color;
  border: solid 3px $color;

  &:hover {
    background-color: $color;
    color: #fff;
    cursor: pointer;
  }
}

form {
  @include centerFlex;

  button {
    @include formButton(blue);
  }
}

Write @mixin to declare a new style and import it in your elements with @include. Pass in parameters in your mixin's declaration for even more flexibility 🤸.

➡️ Functions, conditions and loops are another powerful feature available. If you are familiar with programming languages in general you should feel comfortable with this one.

@function getHeight($width, $ratio) {
  @return $width / $ratio;
}

div {
  width: 200px;
  height: getHeight(200px, 4);
}

Declare your functions with @function and simply call them with their name and parentheses (and optional arguments).

@mixin drawCircleOnly($width, $height) {
  width: $width;
  height: $height;
  @if $width = $height {
    border-radius: 50%;
  } @else {
    display: none;
  }
}

div {
  background-color: black;
  @include drawCircleOnly(100px, 100px);
}

Conditionally execute code thanks to @if and @else. The code will only be executed if the expression returns true.

@for $i from 1 through 5 {
  .section-#{$i} {
    background-color: black;
    width: 10px * $i;
  }
}

Avoid writing similar code multiple times yourself thanks to loops. Initialize your counter, write your code once and you are good to go!

➡️ Bonus! When converting your SCSS code, the compiler will automatically add --webkits to provide a wider browser support, you don't have to think about it, How cool is that?

/* index.scss */
div {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(180deg);
}

/* index.css */
div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

Conclusion

SCSS is a great addition to your Front-End developer toolkit. It has useful features and it is easy to get started with. More and more companies work with CSS preprocessors nowadays for a good reason.

I hope you enjoyed reading, see you soon!

A simple Slack bot with Crontab and JavaScript

Killian Frappart — Wed, 30 Sep 2020 14:15:41 +0000

Hello everyone 👋

I am still engaged in my coding bootcamp, and we are using Slack to stay in touch and share courses resources.

One of my classmate and me built a really simple bot that notify everybody when it is time for daily stand up or lunch break.

I thought it could be interesting to share the building process with you 😇.

Slack API

Let's start by diving into Slack API Documentation which is in my opinion extremely well written.

They literally did half the job for us! If we look for "sending message" we will probably be redirected to the webhook section.

Head over to "Your apps" and create a new one, give it a name and select the workspace. We can now add features to our app by enabling webhooks for example.

However, we need a URL to reach our app. At the very bottom we are allowed to add our app to a channel in our workspace and it will automatically generate the corresponding URL.

Before we move on to the next step, make sure our app has permission to send messages and our app is correctly installed in our workspace.

Node Script

Alright, we have our app able to write messages, but alone it won't do much...

We are about to write a very simple node script that send HTTP requests directly to Slack API through the URL we received when we installed our app.

//Environement variable
require('dotenv').config({ path: __dirname + '/.env' });


//Import Axios & MomentJS
const axios = require('axios');
const moment = require('moment-timezone');

//Get Time
const currentTime = moment.tz("Europe/Brussels");

//Messages array
const MESSAGES = [
  'Daily Stand Up in 10 minutes 🔥',
  "Lunch Break 🍔",
  'Good job everybody! 🏠',
];

//Pick message depending on current time
let currentMessage;
if (currentTime.hours() === 8 && currentTime.minute() === 50) {
  currentMessage = MESSAGES[0];
} else if (currentTime.hours() === 12 && currentTime.minute() === 30) {
  currentMessage = MESSAGES[1];
} else {
  currentMessage = MESSAGES[2];
}

//HTTP Request
const sendMessage = async () => {
  try {
    axios.post(
      process.env.SLACK,
      { text: currentMessage },
      { headers: { 'Content-type': 'application/json' } }
    );
  } catch (error) {
    console.log(error);
  }
};

sendMessage();

node script.js

It would be an awful idea to push the URL to our GitHub right? Work with .env and .gitignore files to avoid this mistake.

When this script is executed, an HTTP request is sent to our app and carries the message that will be displayed in our Slack's channel.

AWS Cloud server

Our code is working locally on our machines, but we are not going to manually execute that code ourselves right ?

Here is the solution we came up with, we are going to create an instance of a Linux machine that runs in the cloud.

AWS comes to the rescue! Create an account and head over to EC2's section.

It is very straightforward, in a couple clicks we can set up a Linux instance and connect via ssh. Store your ssh key preciously 🔑

Now we want to access our instance and to do so, look in the console for the "connect" button and choose ssh client.

By following instructions, we should be able to access our cloud instance from the terminal and it is time to set everything up.

At first, we notice that node and npm are not installed.

sudo apt install nodejs

Thereafter, we clone our script from our remote repository (GitHub for example) and install dependencies.

Cron

We are almost done! Cloud server is live and our script works just fine. The very last thing we are going to work on is some way to schedule our script execution.

You may already have heard of Cron job before, it is well known of Unix users and allow us to schedule any task we want.

It is really easy to get started with, look at this.

crontab -e

Conclusion

✅ App is installed in our Slack's channel and able to write messages.

✅ There is a working Node script that reaches out to our app.

✅ A Linux instance is running on AWS.

✅ Our script is automatically executed thanks to Cron job.

That was a quick summary of the building process.

Thank you for reading! 😇

Git Flow Introduction 🌲

Killian Frappart — Wed, 23 Sep 2020 09:08:01 +0000

When I started learning development a couple month ago, I was introduced to Git and GitHub pretty early in the process.

At first, I didn't understand how it works but I kept working on and at some point, I was able to manage commits and branching.

To be honest, as I self-taught developer working 100% of the time alone in my basement, commit and push directly on the master branch was enough for my dummy projects.

Now, as I am currently attempting an intensive coding training with 10 other people, and we are supposed to work together I finally understand why Git is important and how powerful it is.

I am diving deeper into Git and different Git workflows and I will humbly share the little knowledge I gathered on this topic.

Why do we need a Git workflow ?

Git itself is powerful and prevent most mistakes we could possibly make. However, merge conflict is a thing, data leak, ...

Without an established bullet-proof methodology, working on larger project with your team could end up being a mess.

In fact, it works perfectly to push on your master branch directly when working alone on simple projects (as I did for a while) but it is probably not good practice.

How does it work ?

I would like to speak about Vincent Driessen branching model. As the author say, this model is already 10 years old and might not be optimal for every modern projects. However, this well finished model has been a reference for years and it is a great starting point.

1. Main branches

We have two main branches with an infinite lifetime, master and develop and developers should never write code directly on those.

➡️master is always ready to be deployed, it is a stable version of our product.

➡️develop is the latest version of our product, there we merge new features.

2. Supporting branches

Since we are not supposed to write code on main branches directly, we need supporting branches to work on.

➡️feature branches off from develop and may only merge to develop.

Every new feature should have its own branch with a specific purpose.

➡️release branches off from develop and may merge to master.

We create a new release branch whenever the current state of develop represent a satisfying version of the next product update.

After the release branch is created, its state is polished until it is ready to be merged to master.

➡️hotfix branches off from master and must merge to master and develop.

As soon as a bug show up on the production build, a hotfix branch is created to fix it.

Of course, this branch should always represent a production ready state since it is meant to merge back to master.

Conclusion

It might sound scary or overkill to adopt this branching system but in the end, there is no doubt that improving your organization will boost your products quality.

That is something I am going to work on for my next projects ! 🔥

Let me know what you think about it, I did my best to stick to the original methodology introduced by Vincent Driessen.

Thank you for reading!

Source:

Bash commands introduction 🧑🏿‍💻

Killian Frappart — Thu, 17 Sep 2020 14:01:08 +0000

I just learned about some basic terminal commands and it was a great experience!

It might not be as instinctive as a graphical user interface, still there are some good reasons to start using your terminal.

🔷 High performance

🔷 Real control of what is happening under the hood

🔷 Task automation

Note: We will only walk through the basic commands of Linux/macOS terminal.

Get started

If you are using Linux or macOS as your operating system, you are very likely to use bash shell which is the most widely used shell.

Once you opened up your terminal, should have something that look like this:

Navigation

The cd (change directory) command lets you navigate through your computer's file system.

# Go to target folder
cd /target

# Go to parent folder
cd ..

# Go to home folder
cd ~

List

The ls (list) command print files and directories.

# Print files located in the current directory.
ls

# Print files located in the target directory
ls targetparent/target

Options

You can add some options to most of existing commands by simply appending your command with -[option]

For example:

# Print files located in the current directory with more details.
ls -l

# Print every files located in the current directory (hidden files as well).
ls -a

Make/remove file or directory

The mkdir (make directory) command create a new directory.

# Make a new directory in current directory.
mkdir directoryName

The touch command create a new file.

# Make a new file in current directory.
touch fileName

The rm/rmdir (remove) commands delete file/directory.

# Delete an empty directory.
rmdir myDirectory

# Delete a file.
rm myFile

# Delete a directory recursively.
rm -r myDirectory

Where am I?

The pwd (print working directory) command display your current location.

# Display current location in terminal.
pwd

File management

The cp (copy) command lets you copy and paste your files.

# Create a copy of a file to target location.
cp myFile target/

The mv (move) command moves a file to another location OR rename it if you stay in current directory.

# move file to target location.
mv myFile target/

# rename file.
mv myFile newName

Read/Edit file from the terminal

The head/tail commands print a part of the file.

# Print 10 first lines of a file.
head myFile

# Print 10 last lines of a file.
tail myFile

# Print 30 first lines of a file.
head -n 30 myfile

The cat (concatenate) command can print content of a file, concatenate multiple files together, create and edit files, ...

# Print content of a file in terminal.
cat myFile

# Print content of a file with numbers.
cat myFile -n

# Combine multiple files ogether.
cat fileOne fileTwo > target

Search

The grep (get regular expression) search for a given expression.

# Look for a word in a file.
grep word fileName

# Look for a word in a file without case sensitivity.
grep -i word fileName

Here is my personal cheat sheet for bash commands!

Thank you for reading 😇

DEV Community: Killian Frappart

Instant messaging app made with React, Typescript, Node & Socket.io 🦜

Table of contents

Project Introduction 👋

Features 🌟

Tech Stack ⚛️

Wireframe & Design 🎨

Data modeling & API routing 💾

Project Organization 🗂️

Sprint 01: Setup & Frontend 🖥

SCSS Introduction 🎨

Killian Frappart ・ Oct 7 '20

Get started with TypeScript today! 🆗

Killian Frappart ・ Oct 30 '20

Sprint 02: Backend 📊

Sprint 03: Fix & Deploy ☁️

Conclusion ✅

KillianFrappartDev / GroupChat

Instant messaging webapp project made with React, Redux, TypeScript, Node, MongoDB & Socket.io

Python: Inheritance, File System, Error Handling 🎯

Table of Contents

Inheritance

Error Handling

File System

Coding challenges #2 🧩

Table of Contents

Can you get the loop ?

Morse Code

Rectangle into Squares

Meeting

Playing with digits

Python: Modules, Dictionaries, Tuples & Classes 🌟

Table of Contents

Packages & Modules

Dictionaries

Tuples

Classes

Coding challenges #1 🧩

Table of Contents

Multiples of 3 & 5

Valid Braces

Roman Numerals Encoder

Pascal's Triangle

Persistent Bugger

Python Fundamentals ☕️

Table of Contents

Variables

Arithmetic, Comparison & Logical Operators

Control Flow

Lists

Loops

Functions

Conclusion

How I built a real world project for the first time 🌈

Table of contents

Project Introduction 👋

Tech Stack ⚛️

Wireframe & Design 🎨

Data modeling 💾

KillianFrappartDev / image-manager

Project Organization 🗂️

Git Flow Introduction 🌲

Killian Frappart ・ Sep 23 '20 ・ 3 min read

Sprint 01: Frontend 📲

Sprint 02: Backend 📊

Sprint 03: Implementing features ⭐

Sprint 04: Fix & Deploy ☁️

Conclusion ✅

Get started with TypeScript today! 🆗

What & why ? 🧐

Setup 🔨

Core features ⭐️

Conclusion

SCSS Introduction 🎨

Setup

Features

Conclusion

A simple Slack bot with Crontab and JavaScript

Slack API

Node Script