azlou77 / js-node-projects Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 0.0 4.2 MB

Project with JS and Frameworks: ReactJS, NodeJS

JavaScript 25.46% HTML 24.62% CSS 44.28% TypeScript 5.64%

javascript nodejs reactjs

js-node-projects's Introduction

Hi there 👋

Azlou77/Azlou77 is a ✨ special ✨ repository because its README.md (this file) appears on your GitHub profile.

Here are some ideas to get you started:

🔭 I’m currently working on PHP cURL project
🌱 I’m currently learning JS and Frameworks like React, ExpressJS
👯 I’m looking to collaborate on ...
📫 How to reach me: [email protected]
😄 Pronouns: Azlou77
❤️ Loves:
🏅 Pratice sport: running, biking
📚 Romans classic with authors: Hugo, Balzac, Stendhal, Alexander Dumas
🔍 Investigation books: Agatha Christie, Conan Doyle
🇬🇷 Greek culture and Mythologies

js-node-projects's People

Contributors

Stargazers

Watchers

js-node-projects's Issues

Add fetch with Javascript

First to protect API key or others:

View issues #51

List record:

Use fetch fetch
Method GET
With async function
Add new headers
Stock sensitive variables in .env file
Call back with env.process.NameofVariable

Features form and database map

To do:

Delete all data in JS folder data
Search what field to put in form html

HTML:

PHP:

Connection to bdd with PDO method
Check if columns lat and long is created for table map
Check if the connection is correct else send error message
Save data in bdd
After create the Form, get data by curl or fetch
Display it in Open Street Map
Find a way to update automatically the changes.

Links:
My list API map Github
Converter GPS coordonees
Code box Fecth JS
GeoJson tools
Convert address to lat/long

Remove the markers onchange checkbox

Solve:
Check if the checkbox is unchecked by

Searching by input element with the value
Add event listener onclick
Define different of checked
Use the leaflet function to remove marker.remove();

Connection PDO

define data connection
instance new PDO
get message succes or failed

Using of webpack

Objective:

Import libraries, minify packages before putting them into production.
Installing Node Js
Package.json va lister les dépendances
Open shell, and write npm install
npm run build le dossier dist est rempli

List records of table weapons

Use Postman:

Go the dashboard
Then in your menu->espace développeurs

3. Go the personnal access
4. Settings the token's name and what you want to do with this token: write, read, delete.
5. Go the Postman
6. Add request with method GET
7. Set authorization to token Bearer
8. Add variables tableIdOrName, token, baseId with values
9. add in the url https://api.airtable.com/v0/{{baseId}}/{{tableIdOrName}}

Gitflow tool discover

❓ What is Gitflow ❓

It is a tool which upgrade the way you work with many collaborators
Install Gitflow:
git flow init

🔗 Links:

Gitflow Atlassian

Test on maps data

Link to #16 for data extraction:

SQL request to get 10 first data of city:
SELECT * FROM companie WHERE zip LIKE '94270' LIMIT 10;
Fill the fields lat and lon
Same request but with other city
Changes if neccessary the name's table and columns
Fecth with right url.
Change properties to changes icons colors

Post actions

Acess rights:

Create role author to modify Post
Make a filter date with from = query Params = timestamp in bdd Prisma
Ex: GET /api/posts?from=1674560065

cannot use import statment outside a module

Project color flipper

Description:

Project fork Free code camp color flipper

Notions:

arrays
document.getElementById()
document.querySelector()
addEventListener()
document.body.style.backgroundColor
Math.floor()
Math.random()
array.length

Set up data in Airtable table.

Go the artaible count
Go to the dashboard
Add field to the table

For example:

name with short text
prices with devise
quantity with number
description with long text
category with short text

Connection et login

Avant faire en sorte d'être connecté = token valide

Form login
Form register
View Posts before create function createPost

Make function to convert adresses to maps data extracted

Extract data in JSON format with empty fields lon and lat
SQL to extract maps data filter
Make a loop trought the companies.
Display JSON data lon and lat with key/value .
Add street and city
Concat to have address

Store data in BDD and display it

View on:
Github BDD

Make PDO connection and acess it.
Models to make request on BDD
Make simple map data wiht leaflet
Add on this html page a script using fetch method
Link the PHP file which store maps data and display them.

Uncaught reference error

Description:

I want to secure my data so I used dotenv package and process.env.
I write require response and data

Modal projects

what is a modal ❓

A modal is an element that when you touch that open up
a form with several fields like name, email, password for example
when you have a connexion.

part HTML:

create an hero section
create button modal
add script modal.js

part CSS:

/* The Modal (background) */
/* Modal Content/Box */
/* The Close Button */

part JS:

get elements by id
get the element by class
onclick add open or close events

Notions:

data-bs-toggle="modal":
data-bs-target="#exampleModal"
L'attribut data-toggle contient le type d'événement qui va être lié à un bouton

CRUD routes

User:

Routes:

/admin/user/delete = seul un User ayant le role admin doit pouvoir être capable de supprimer un autre User
/user/ la valeur du rôle est définie à user par défaut

Functions:

deleteUser();
createUser();
updateUser();
readUser();

Comments
Routes:

/author/post/comment/delete = seul l’auteur du Comment peut le modifier ou le supprimer
/author/post/comment/update
/admin/post/comment/delete= un admin doit pouvoir supprimer un Comment

Functions:

deleteComment();
createCommentr();
updateComment();
readComment();

Posts
Routes:

/user/post/delete = seul l’auteur du Post peut le modifier ou le supprimer
/user/post/update
/admin/post/delete= Un admin doit pouvoir supprimer un Post

Functions:

deletePost();
createPost();
updatePost();
readPost();

Mange multiple fetch getLatLng and file PHP

Solve:

Display variables maps data
Concatenate adresse with street, zip and city
Make function to get lon&lat properties using fetch open street map
Display function and the data in HTML front.

Results:

Airtable create Figma design index page

Create figma design:

navbar
hero section
caroussels

Asynchrones function wtih JSON

🔗 Links:

❓ What is async functions: ❓

It was a technique that allow you to continue to react to others events during the execution of the tasks.
At the end you will receive the result.

❓ What is programm synchrone ❓

It a programm which it write lign per lign

❓ What is first numbers ❓

A number is first if he has only 2 divisors itself or by one
For example: 7 has can be divisable only by 7 and 1

Exercise:

Create a function to welcoming a personn
Create variable to welcoming a personn
Create function with first numbers

The problem of function synchrone is if you submit the button to generate first numbers you can't do other things like write some text.
To solve this issue:

start operation long with function
start others events next to the main function
Receive a notification when the programm is done

🔗 Links:

Exercise for async function

Adapt database connection in dev server

Solve:

Create a new PDO connection
Add port and precise host:localhost
Set message error and success.

View how work API geolocation

Work with function like:

Getcurrent position
WatchPosition
Handling errors
Events activated only if we click on buttons

Extraction from database PHP

Links:
PDO connection
Query builder
API Faker JS

Generate fake map data:

Using API FakerJS
import the online CDN to use it in browser
generate fake data maps with properties: city, address, state, zip, lat, lon

Increases the performances of requests

Pour améliorer les performances en JavaScript, voici quelques bonnes pratiques à suivre :

Minification du code : La minification consiste à supprimer les caractères inutiles du code JavaScript, tels que les espaces, les commentaires et les noms de variables non utilisés. Cela permet de réduire la taille du fichier JavaScript et d'accélérer le temps de chargement de la page¹.
Optimisation des boucles : Les boucles sont souvent des points sensibles en termes de performances. Essayez d'optimiser vos boucles en évitant les opérations coûteuses à l'intérieur de celles-ci et en utilisant des techniques telles que la mise en cache des valeurs répétées².
Utilisation de requêtes asynchrones : Lorsque vous effectuez des appels réseau ou des opérations longues, utilisez des requêtes asynchrones (par exemple, AJAX) pour éviter de bloquer l'exécution du reste du code JavaScript. Cela permet d'améliorer la réactivité de l'application et d'éviter les temps d'attente inutiles³.
Optimisation des sélecteurs CSS : Lorsque vous utilisez des sélecteurs CSS pour cibler des éléments dans le DOM, essayez d'utiliser des sélecteurs spécifiques plutôt que des sélecteurs génériques. Cela permet au navigateur d'effectuer une recherche plus rapide et plus efficace dans le DOM.
Gestion de la mémoire : Assurez-vous de libérer la mémoire utilisée par votre code JavaScript lorsque vous n'en avez plus besoin. Cela peut être fait en supprimant les références aux objets non utilisés ou en utilisant des techniques telles que le garbage collection.

Ces pratiques peuvent contribuer à améliorer les performances de vos applications JavaScript. N'hésitez pas à consulter la documentation spécifique à votre environnement de développement pour obtenir des conseils supplémentaires.

J'espère que cela vous aide ! N'hésitez pas à me poser d'autres questions.

Source : conversation avec Bing, 21/09/2023
(1) Comment minifier JavaScript — Outils et méthodes recommandés - Kinsta. https://kinsta.com/fr/blog/minifier-javascript/.
(2) Performance Web - Apprendre le développement web | MDN. https://developer.mozilla.org/fr/docs/Learn/Performance.
(3) Mesure des performances - Apprendre le développement web | MDN. https://developer.mozilla.org/fr/docs/Learn/Performance/Measuring_performance.

Views props and components

Objets WINDOW et NAVIGATOR

Counter projects

This project will give you more practice working with the DOM and you can use this simple counter in other projects like a pomodoro clock.

Steps:

HTML : create 3 buttons and title counter
on click plus add events listener 🖱
incrementation ➕
Use query selector for button and 0:

Notions:

document.querySelectorAll()
forEach()
addEventListener()
currentTarget property
classList
textContent

Search on how to make local request on Postman

Links:
Building requests on Postman

Solve:

Set method GET
Ad link http://localhost/url
Set headers to jsonn charset="utf-8" and Access-Control-Allow-Origin: *
Click on the button execute

JSON exercise heroes

dowload html and css file
load JSON to interact with DOM ( Document Object Model)

add createElement h1
add createElement p
add text with the value of "squadName"

create function showheroes
work in section element
add createElement h2
add createElement p *2 for "secret identity" & "age"
add createElement ul for "superpower"
add createElement li

Duplicate for second and last members:

second member
third member

Checkboxes value in array

Descriptions:

step to get checkboxes
list variables
loop checkboxes
use push() method

make database postgresql

Gitlens coding part x ChartJS

Link to Azlou77/devops-tools#17
Exemple in Vscode:
For example I willl create a chart JS and use Gitlens to inscrease my productivity.

How to create a chartJS ?
Go the 3wschool site

Add script
Add canvas
Add instance new chart
Custom options with your data.

Take project NodeJS projects:

NodeJS fakerKS

Description:

Go the codebox io.
install faker by cmd : npm install @faker-js/faker --save-dev
For NodeJS apps make import by require import:
const { faker } = require("@faker-js/faker");
Custom what do you want for dake data.
Here I generate fake data of user

Make a form to get data API geolocation

Leaflet reference
Mozilla API gelocation
PDO connection PHP

Make basic form with POST method #8
Use the geolocation to get long lat #9
Check if the addresse exist else get message error
Convert the addresse in long and lat format.
Using Mysql PDO to get send POST data

Access to token

Description:
There was an error in evaluating the test script: TypeError: Cannot read properties of undefined (reading 'access_token')

Send POST data with updates

API JSON BLOB :

POST method https://jsonblob.com/api/jsonBlob
GET method https://jsonblob.com/api/jsonBlob/jsonID
Set headers json format and access-control-origin: *
Use method fetch
Stringtify data
response 201
Regroup in all url the data of companies

Create a list of caracters
With properties:
name
weapons
nickname
class
abilities
noble phantasm
Create HTMl page with
<script type="text/javascript">

Create for 7 servants:

Servants:

View the feature module in JS

what is a module ❓

Module is a small parts JS is like when you're using required in PHP.

Export:

export constantes
export functions

Import:

import constantes
import functions

Link:

Mozilla import/export

Create template HTML for index page

Create:

navbar
section hero
caroussel images

Make form part

HTML part

PHP

Check if all field is write before submit
Add fields required addresse, company
Check is the addresse is valide
Check is the mail is valide
Check is the phone is valid

Comments actions

Only comments authors can modify a comment.
Use PUT request

Merge request POST into one for companie data

Make only one request with response 201 if the request is good ✔
If the request bad: error 404 ❌

Test:

concat
push
merge array

Test : Have only 3 arrays we need 9 arrays

Protect secrets variables with Github Actions

Link:
NodeJs Github Actions

Create build.js

    console.log(`Hello ${process.env.HELLO}`)

Create package.json

    "scripts": {
      "build": "node build.js"
    }
  }

Create Github Action file

name: npm run build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 16
    - run: npm install
    - run: npm run build
      env:
        DOTENV_KEY: ${{ secrets.DOTENV_KEY }}

Install dotenv
npm install dotenv --save
Create .env file
Set build.js

// build.js
require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working

console.log(`Hello ${process.env.HELLO}`)

Run file build js
Results expectud: Hello world