DEV Community: Antoine CHEVALIER

3 Tips to improve your coding skills

Antoine CHEVALIER — Tue, 07 Mar 2023 06:27:57 +0000

3 Tips to improve your coding skills

Table of content :

Understand your environnement
Small bites
Move it around, refine

1. Understand your environnement

Developing your curiosity is crucial for becoming a successful developer. Always ask yourself questions and experiment with your code to enhance your understanding of it. Try removing certain parts, comment them out, and observe how the program behaves. It's crucial to understand the purpose of the code you're writing, as well as the structure of your project. This knowledge will help you create high-quality software that is efficient and easy to maintain.

To create efficient, maintainable, and scalable code, you must always be critical of your work and strive to improve it. This includes evaluating your coding practices and learning from your mistakes. A curious and analytical mindset will help you to develop your skills and stay ahead in your field. Moreover, it will enable you to write code that is more precise, effective, and easy to maintain.

Never stop exploring and experimenting with your code. Keep striving to improve your skills. By doing so, you'll become a more competent and confident developer.

2. Small bites

One good practice to develop is to work on the smallest feature possible. This approach allows you to focus on one manageable piece of code at a time. And once your done, you can review it and write a well-named commit. By breaking down the work into smaller chunks, you can improve the quality of your code and gain a better understanding of your craft. Moreover, it can help reduce the amount of stress that coding can provide.

Working on small but manageable pieces of code enables you to be more efficient and productive. And it allows for better collaboration with other team members. Furthermore, when you encounter a bug, it's easier to identify the root cause when the code is well organised into smaller components. Always aim to break down your work into smaller features and iterate on them until they are complete, tested, and well-named. This way, you can create high-quality code that is easy to maintain and scale in the future.

3. Move it around, refine

Refactoring is a critical practice for developers, and it should get done regularly and proactively. Always keep in mind the next person who will read your code and try to make it more readable and understandable. Consider renaming your variables, functions, folders, and files to be more descriptive and consistent with one another.

By taking the time to improve the readability of your code, you'll gain a better understanding of your codebase, and it will be easier to maintain and scale in the future. Refactoring can be a daunting task, but by following Rule 2 (i.e., breaking down the work into manageable pieces), you can make it a stress-free and enjoyable process.

Don't wait until your code is riddled with technical debt before you start refactoring. Instead, make it a regular part of your development process, and you'll find that your code will be more efficient, maintainable, and scalable over time. So, keep your codebase clean and consistent, and you'll be setting yourself up for success in the long run.

How to make a CRUD application with Firestore and React.

Antoine CHEVALIER — Sat, 03 Dec 2022 13:27:12 +0000

Table of content :

Setup Firebase
Update Firestore rules
Post
Get
Delete

Setup Firebase

You can import the firebase settings from Project Settings inside your firebase application. I will only suggest you to store the values of the given config into a .env file for security reason. (We don’t want to let anyone access our firebase application).

import { getFirestore } from ‘firebase/firestore’;
import { initializeApp } from “firebase/app”;

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain:  process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL:  process.env.REACT_APP_DATABASE_URL,
  projectId:  process.env.REACT_APP_PROJECT_ID,
  storageBucket:  process.env.REACT_APP_STORAGE_BOCKET,
  messagingSenderId:  process.env.REACT_APP_MESSAGING_SENDER,
  appId:  process.env.REACT_APP_APP_ID,
  measurementId:  process.env.REACT_APP_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db, app };

The only difference between the default config is that we initialized the Firestore db.

Update Firestore Rules

Firestore got a defined rule that only allow us to write inside a document named like our userID. To do so we need a userID, received when login in. But we are not dealing with auth today so we need to change this rule.

Initial Rules :

service cloud.firestore {
  match /databases/{database}/documents {
    match /{userId}/{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Simplify rules :

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Post

We can then process to the creation of new users.

import { db } from “./firebase”;
import { setDoc, doc  } from “firebase/firestore”;
  const createUser = async (name, age) => {
    try {
    const mockUserId = name + age
      await setDoc(doc(db, “users”, mockUserId), {
        name,
        age,
      });
    } catch (e) {
      console.log(e);
    }
  };

DB : Reference to our Firestore Database that we exported during the setup process.

A Doc : A document is a lightweight record that contains certains fields. Data-type : Object

A Collection : A collection is a container of documents. Data-type : Array

We create a function that take as an argument the name and the age of the user. We then call the setDoc function.“users” is the name of the collection that will contains our users. mockUserId is the id of our user table.

Get

Now let’s get the list of our users.

  const getUsers = async () => {
    try {
      const usersRef = collection(db, “users”);
      const usersSnap = await getDocs(usersRef)
      const users = [];
      usersSnap.forEach(user => users.push(user.data()));
      return users;
    } catch (e) {
      console.log(e);
    }
  }

We select the collection users, then get the docs of this collection. We then create a list of users. And for each documents we add their data to the list of users and return it.

Delete

  const deleteUser = async (userID) => {
    try {
      const userRef = doc(db, “users”, userID);
      await deleteDoc(userRef)
    } catch (e) {
      console.log(e);
    }
  }

To delete a user we need their reference ID in the collection. So we get it and create a ref of the document, and call the deleteDoc function.

import "../common/style/index.css";
import Navbar from "../common/components/NavBar";
import { db } from "../common/firebase";
import { setDoc, doc, deleteDoc, getDocs , collection } from "firebase/firestore";
import { useEffect, useState } from "react";

function App() {
  const [newUser, setNewUser] = useState();
  const [users, setUsers] = useState([])

  const createUser = async (name, age) => {
    try {
      await setDoc(doc(db, "users", name + age), {
        name,
        age,
      });
    } catch (e) {
      console.log(e);
    }
  };

  const getUsers = async () => {
    try {
      const usersRef = collection(db, "users");
      const usersSnap = await getDocs(usersRef)
      const users = [];
      usersSnap.forEach(user => users.push(user.data()));
      return users;
    } catch (e) {
      console.log(e);
    }
  }

  const deleteUser = async (userID) => {
    try {
      const userRef = doc(db, "users", userID);
      await deleteDoc(userRef)
    } catch (e) {
      console.log(e);
    }
  }

  const handleDeleteUser = async (userRef) => {
    try {
      await deleteUser(userRef);
      setUsers(await getUsers());
    } catch (e) {
      console.log(e);
    }
  }

  useEffect(() => {
    (async() => setUsers(await getUsers()))()
  }, [])

  const handleCreateUser = async (e) => {
    e.preventDefault();
    createUser(newUser.name, newUser.age);
    setUsers(await getUsers());
  };

  return (
    <div className="App">
      <form className="form" onSubmit={(e) => handleCreateUser(e)}>
        <div className="group">
          <input
            type="text"
            required
            minlength="3"
            placeholder="Name..."
            onChange={(e) =>
              setNewUser({
                ...newUser,
                name: e.target.value,
              })
            }
          />
          <span className="highlight"></span>
          <span className="bar"></span>
        </div>

        <div className="group">
          <input
            type="text"
            placeholder="Age..."
            required
            onChange={(e) =>
              setNewUser({
                ...newUser,
                age: e.target.value,
              })
            }
          />
          <span className="highlight"></span>
          <span className="bar"></span>
        </div>
        <button className="button">Create User</button>
      </form>
     {users.length > 1 && users.map((user, index) => {
      return (
        <div key={index}>
          {" "}
          <h1>Name: {user.name}</h1>
          <h1>Age: {user.age}</h1>
          <button
          onClick={() => handleDeleteUser(user.name + user.age)}
          >
            X
          </button>
        </div>
      );
    })}
    </div>
  );
}

export default App;

End

Thanks for reading this article. - Antoine

Here’s a link to the Github application

How to make a React Application support more than One language.

Antoine CHEVALIER — Fri, 18 Nov 2022 10:17:45 +0000

What are we learning ?

How to Create a Context.
Import and use our Hook.

A bit of context

What's an hook ?

Hooks are functions that let you add into the React State and lifecycle.

What's a context ?

Context provides a way to pass data through the component without having to pass props.

Create our Context.

We create our context with the createContext function. We pass an Empty Object {} (we don't want to define any default value). Then add an empty Interface (We will use it later to enforce our typing).

Then we create a Function Provider to wrap our application with.

Function Component => Type our function to be a React Component.

Props With Children => Type our application to contain a children props.

Children => Is the react component that will get rendered in our component. In this case our Application.

value={{}} => There we will pass the function/data we want to share to the other components. (The type of value is our TranslationContextActions interface).

Create our translation files

We are gonna create a folder named Translation with 2 different files within. French and English.

Once those files created we create another file name language.interface.ts . This file will ensure that both files contain the same Data.

Then we populate our French.ts file with

And our English.ts file with

Now that our data is type safe, and created we can begin the importation.

Import the right Language

To do so, we start by setting a type of the supported Language by our application.

Then we create a function that get the navigator language of our user. Then, with an if statement, we return the correct value. Without forgetting the default one, English in our case.

Our function name is self explained and everything got a correct type so we can move on to the importation.

Nothing special on this function, we import our file based on the given variable. The name also makes sense, and we gave a type to the Function and our Variable. Now let's import this file when the component renders.

We check if our translationData is undefined cause we don't want to import it twice. Then we call our fonctions and use setTranslationData on the imported file.

Why making so much different function ?

I'm a strong believer that a function should serve one action. If it does more then one thing, slice it.

But why ?

Small well named function are self explanatory which make them easy to understand, to maintain and are way more readable.

Creating a hook

First we need to type our ContextActions. So let's add an action named translationData with the same type of our useState.

Then we add the value translationData of our useState to value. We can now access translationData through our application.

Our hook

We make sure that our hook is placed in a TranslationProvider and we return our translationData

Using our Translation Hook

Let's place the Application between our TranslationProvider.

And boom ! We can then use our hook !

Here's a link to the Github Repo : https://github.com/SeyBoo/translation-hook

A Beginner guide to structuring your Python Projects

Antoine CHEVALIER — Tue, 01 Nov 2022 10:46:34 +0000

A Beginner guide to structuring your Python Projects

Packages and Environment
Linting and code style
Get rid of the old make file

Packages and Environment

The old way of doing things

Back then the way to deal with packages in python was to create a new environment with Conda or the included venv and active it, then installing you're packages with pip then freezing them into a requirements.txt so that you're team could install the same deps as you do.

An easier way to approach this problem

With Pipenv you no longer need to use pip and virtualenv separately. They work together.

Simply install it with pip

pip install --user pipenv

Then active your environment

pipenv shell

And install whatever you want !

pipenv install request

Linting and code style

I personally picked pylint cause it felt like it's the more easy and intuitives to use and seem to contain all the use full features and is compatibility with code editor.

pipenv install pylint

Get rid of the old make file

Pipenv give us the possibility to run scripts easily !

Simply give create a Script inside the Scripts section of you're Pipfile

Now i can run pipenv run lint to lint my files
or
pipenv run start to start my Django Project !

Thanks for taking time to read this article i hope it help you !

If you have any suggestion or way i can improve it i'll be happy to ear them !

How to successfully start with Nest.js and Postgres

Antoine CHEVALIER — Tue, 09 Aug 2022 18:50:57 +0000

In this tutorial will see how to install, configure postgres with Nest.js typeorm.

Postgres

1. Let's install Postgres

Install postgres on the official website. I'll recommend installing it on the official website rather then using homebrew cause it could lead to some trouble later

2. Basic of Postgres

Start Postgres app and start server
Open your terminal and add psql to your path.

export PATH="/Applications/Postgres.app/Contents/Versions/9.5/bin:$PATH"

Basic Command

To open psql terminal : psql postgres

List all Database with \l
``
Create a Database with CREATE DATABASE name;
Connect to a Database with \c name
Exit postgres with \q

Nest

Setup Nest Project

npm i -g @nest/cli
nest new project-name

Create .env file for the config of our Database

Create a .env file containing the PORT, USERNAME, DATABASE NAME, URL ...

PORT=4242 POSTGRES_PORT=5432 POSTGRES_USER=postgres POSTGRES_DB=nest POSTGRES_HOST=localhost

Configure App Module

Inside your app module add the .env config file :

import { ConfigModule } from '@nestjs/config';
ConfigModule.forRoot({ envFilePath: ['.env'] })

Configure and install TypeOrm

Install Typeorm postgres for Next :

npm install --save @nestjs/typeorm typeorm postgres

Then import our configuration inside the app.module :

import { TypeOrmModule } from '@nestjs/typeorm'
TypeOrmModule.forRoot({ type: 'postgres', host: 'process.env.POSTGRES_HOST, port: parseInt(process.env.POSTGRES_PORT), username: process.env.POSTGRES_USER, database: process.env.POSTGRES_DB, entities: [], synchronize: true, logging: true, autoLoadEntities: true, })

Little explanation
synchronize: true, autoLoadEntities: true,

Allow schema to be automatically with Database.

Little explanation
logging: true

Log all the interaction with the Database

Create Entity

Create a user.entity.ts file inside an entities folder.

I won't go into detail about this code cause you can find good documentation on Typeorm website.

`import {
Entity,
Column,
PrimaryGeneratedColumn,
CreateDateColumn,
} from 'typeorm';

@Entity()
export class User {
@PrimaryGeneratedColumn()
id: number;

@Column()
username: string;

@Column()
email: string;

@Column()
password: string;

@Column({
nullable: true,
unique: true,
})
access_token: string;

@CreateDateColumn()
created_at: Date;
}`

Then inside your app.module add entities: [User]

How to learn React Native and Firebase in a month.

Antoine CHEVALIER — Fri, 17 Jun 2022 06:51:34 +0000

How to learn React Native and Firebase in a month.

During the month of April i quitted my job and started to work on a personal project, the first that i faced problem is that i had no prior experience with building a Mobile Application so i had to learn everything from scratch.

What did i had to learn ?

React Native
Firebase
Redux
Native Base

My learning journey...

Week 1

The first days i spent the majority of my time reading the docs about React Native and Native Base (if you don't know about Native base it's a component library, so i don't had to focus too much on Design)

After understanding the core concept about this Framework i have watched a video about someone creating a todo application with it. And i decided to clone the code base and try to understand the code, after spending an hour or so figuring it out the logic of the code....

I have decided to build a small project i just integrated a small design at first with Native Base and React Native then i decided to challenge my self a bit and i stated to integrate a small api the goal was to know the basic.

Understanding the basic i started to go all in for my application i was full of hope that i could start building it with my new knowledge that i just acquired, that's what i did i set my project my Github Repo and i started to integrate all the basic design that i could.

Week 2

The next week it was time to get into the core of the application, the user account so it was time to learn Firebase, like always i have setup the project and i have read the doc to see how should i use it and how, and i started to register and sign in my users, the only problem was that i didn't know how to show/hide the authentification screen based on if the users was logged in or no, and after doing some research Redux was the solution for me, well not at 100% i still had to spend a couple of days trying to understand how it work, and how it work with Typescript and after giving all of my sanity into crash course, the doc and Stackoverflow i had a perfectly working authentification system.

Week 3

I was so happy about the current progress of the application but it still wasn't finished i needed to continue working on it, so i finished my work concerning the user account and i create a personal info page where users can change their email, password, name, phone number and delete their account, i also added Two Factor Auth with phone number which took me a lot of time to research and build.

Week 4

During the last week i already had a good understanding on both React Native and Firebase i was really confident about those tools, but i wanted to go further and i started to implement a bottom sheet that will allow me to take picture/ upload picture to Firestore and map those in the application.

Resume :

If you wanna learn something, know why you are doing it and every-time you wanna quit think about why you're doing it, it's the easiest way to stay consistency knowing why. Then improve, challenge yourself do something harder and harder everyday when you pick your project you say to yourself i don't know how to do anything about this project but i will learn to finish it.

But what's the project about ?

Simplyfile is a document managing app built for Web and Mobile so that you can access them from everywhere, Simplyfile also make the sorting process very easy thanks to some I.A.

You can support the project by giving a star to the Github Repo. Or feel free to give any feedback about the project or the article.

Thanks for reading -

Chevalier Antoine

How to become a Mobile Developper in a month.

Antoine CHEVALIER — Fri, 17 Jun 2022 06:50:02 +0000

How to become a Mobile Developper in a month.

During April i quitted my job and started to work on a personal project. The first problem that i faced was that i had no experience on how to build a Mobile Application... So i had to learn everything from scratch.

What did i had to learn ?

React Native

Firebase

Redux

Native Base

My learning journey...

Week 1

The first days, i spent the majority of my time reading the docs about React Native and Native Base. (if you don't know about Native base it's a component library, so i don't had to focus too much on Design)

After understanding the big picture of it, i started to watch a guy creating a todo application with it. And i decided to clone the code and try to understand it, after spending an hour or so figuring out the logic of the code....

I decided to build a small project, integrating a small design with Native Base and React Native. After doing so i wanted to challenge my self a bit and i started to play with a small api, the goal was to make basic requests.

Understanding the request, i wanted to go all in, i was full of hope that i could build it with my new knowledge. So that's what i did, creating a repo on Github and integrating all the design of my application.

Week 2

The next week it was time to get into the core of the application, the user account so it was time to learn Firebase. Like always i setup the project and read the doc to see how can i use it . So i started to register and sign in my users. The only problem was that i didn't knew how to display a different type of navigation if a user get logged in. After doing some research it seemed that Redux was the solution for me. Well not at 100% i still had to spend a couple of days trying to understand how it work, and how to use it with Typescript. After spending all the rest of my sanity into some crash course, Stackoverflow and the doc... I had a working authentification system.

Week 3

I was so happy about the current progress of the application. But it still wasn't done i was in the need to continue working on it. So i finished my work on the user account. And i created a personal info page where users can change their infos and delete their account. I also decided to add a Two Factor Auth with phone number which took me a lot of time to research and build.

Week 4

During the last week i already had a good understanding of both React Native and Firebase. I was confident about those tools, but i wanted to go further. So i started to put in place a bottom sheet that will allow me to take picture/ upload picture to Firestore. To conclude i mapped those pictures in the application.

Resume

If you wanna learn something, know why you are doing it and every-time you wanna quit think about why you're doing it. Doing so is the easiest way to stay consistency, knowing why. Then improve, challenge yourself, do something harder and harder everyday. When you picking your project you need to say to yourself i don't know how to build any of that but i will learn it.

But what's the project about ?

Simplyfile is a document managing app built for Web and Mobile. Making you capable of accessing them from everywhere. Simplyfile also make the sorting process very easy thanks to some A.I.

You can support the project by giving a star to the Github Repo. Or feel free to give any feedback about the project or the article.

Thanks for reading -

Chevalier Antoine