The Journey of #100DaysOfCode (@Amir_BouGhanem)

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฌ - ๐—ฟ๐—ฒ๐—พ.๐—บ๐—ฒ๐˜๐—ต๐—ผ๐—ฑ & ๐—ฟ๐—ฒ๐—พ.๐˜‚๐—ฟ๐—น :closed_book:

In Express.js, req.method and req.url are properties of the req object that give you information about the HTTP requestโ€™s method and the requested URL. These properties are fundamental for routing and handling different types of requests.

- req.method

  • Purpose : Contains the HTTP method used in the request, such as GET, POST, PUT, DELETE, etc.
  • Usage : Useful for determining how the request should be handled based on the method used. This can be especially important in middleware or route handlers that need to perform different actions depending on the method.

- req.url

  • Purpose : Contains the full URL of the request, including the path and query string.
  • Usage : Useful for routing, logging, and determining the specific resource or endpoint being accessed.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿญ - ๐—ป๐—ฒ๐˜…๐˜() ๐—ถ๐—ป ๐—˜๐˜…๐—ฝ๐—ฟ๐—ฒ๐˜€๐˜€ :closed_book:

next() is a function that is used within middleware to pass control to the next middleware function in the stack. If next() is not called within a middleware function, the request will not move on to the next middleware or route handler, and the request will effectively be left hanging.

When a request is made to the server, Express processes it through a series of middleware functions. These middleware functions are executed sequentially in the order they are defined in your application. The next() function is crucial in this chain as it allows you to move from one middleware function to the next.

You can also pass an error to next() by calling it with an argument, like next(err). This tells Express to skip all remaining non-error-handling middleware and pass the error to the error-handling middleware.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฎ - ๐—ฒ๐˜…๐—ฝ๐—ฟ๐—ฒ๐˜€๐˜€.๐—ฅ๐—ผ๐˜‚๐˜๐—ฒ๐—ฟ( ) :closed_book:

express.Router() is a feature in Express.js that allows you to create modular and mountable route handlers. It is useful for organizing routes into separate files or sections, making your codebase more manageable and easier to maintain.

Key Features of express.Router( )

  1. Modular Routing : Define routes in separate modules/files and import them into your main application.
  2. Route Separation : Group related routes together, improving readability and organization.
  3. Middleware Specificity : Apply middleware to specific route groups rather than globally.

Using express.Router() helps keep your codebase organized and scalable, especially as your application grows.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฏ - ๐—ณ๐˜€.๐—ฟ๐—ฒ๐—ฎ๐—ฑ๐—™๐—ถ๐—น๐—ฒ & ๐—ณ๐˜€.๐˜„๐—ฟ๐—ถ๐˜๐—ฒ๐—™๐—ถ๐—น๐—ฒ :closed_book:

The fs.readFile and fs.writeFile methods are fundamental for file operations in Node.js. They are part of the fs (File System) module, which provides an API for interacting with the file system.

- fs.readFile

fs.readFile reads the contents of a file asynchronously. It takes the file path and an optional encoding as parameters and provides the fileโ€™s data via a callback function.

Syntax: fs.readFile(path[, options], callback)

- fs.writeFile

fs.writeFile is used to asynchronously write data to a file. If the file does not exist, it will be created. If it does exist, it will be overwritten.

Syntax: fs.writeFile(file, data[, options], callback)

Key Points

  • Both methods use callbacks to handle asynchronous operations, which helps prevent blocking the main thread.
  • fs.readFile can be replaced with fs.readFileSync for synchronous operations, and fs.writeFile can be replaced with fs.writeFileSync.
  • Error handling is crucial to deal with issues such as file permissions or non-existent files.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฐ - ๐—ฝ๐—ฎ๐˜๐—ต.๐—ท๐—ผ๐—ถ๐—ป ๐—ถ๐—ป ๐—ก๐—ผ๐—ฑ๐—ฒ.๐—ท๐˜€ :closed_book:

The path.join method is a useful utility in Node.js for constructing file paths. It is part of the path module, which provides utilities for working with file and directory paths.

Usage of path.join

path.join is used to join multiple path segments into a single path. This method ensures that the resulting path is properly formatted according to the operating systemโ€™s conventions (e.g., using backslashes on Windows and forward slashes on Unix-based systems).

In this example:

  • __dirname is a global variable that contains the directory name of the current module.
  • path.join combines __dirname, directory, and fileName into a single path string.

Key Points

  • path.join can accept multiple arguments. Each argument is treated as a segment of the path, and they are joined together.
  • If any segment is an absolute path (starts with a / or ), all previous segments will be discarded, and the path will be based on this absolute segment.
  • It automatically normalizes the path, removing redundant or unnecessary slashes.

This method helps ensure that file paths in your Node.js applications are correctly formatted and compatible across different platforms.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฑ - ๐—ผ๐˜€ ๐— ๐—ผ๐—ฑ๐˜‚๐—น๐—ฒ ๐—ถ๐—ป ๐—ก๐—ผ๐—ฑ๐—ฒ.๐—ท๐˜€ :closed_book:

The os module in Node.js provides a variety of methods to interact with the operating system. It allows you to gather information about the system environment, perform platform-specific operations, and manage system resources. This module is especially useful for writing cross-platform Node.js applications.

Practical Uses of the os Module

  • System Monitoring : You can use the os module to create simple scripts that monitor system performance, memory usage, and CPU load.
  • Cross-Platform Compatibility : By using methods like os.platform() and os.arch(), you can write code that behaves differently depending on the operating system and architecture.
  • Resource Management : The module can help you decide how to allocate resources in an application, such as determining the number of worker threads based on CPU cores.

The os module is a powerful tool for gaining insights into the operating environment of your Node.js applications and ensuring they run smoothly across different platforms.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿฒ - ๐— ๐—ฉ๐—– ๐—”๐—ฟ๐—ฐ๐—ต๐—ถ๐˜๐—ฒ๐—ฐ๐˜๐˜‚๐—ฟ๐—ฒ ๐—ถ๐—ป ๐—ก๐—ผ๐—ฑ๐—ฒ.๐—ท๐˜€ :closed_book:

In a Node.js MVC (Model-View-Controller) architecture without server-side rendering, the server is used to handle API requests and manage data, while the client-side (typically a frontend framework like React, Vue, or Angular) is responsible for rendering the user interface (UI). In the next few days, I will be tackling the role of each component in building an organized RESTful API.

100daysofcode lebanon-mug

image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿณ - ๐— ๐—ผ๐—ฑ๐—ฒ๐—น๐˜€ ๐—™๐—ผ๐—น๐—ฑ๐—ฒ๐—ฟ :closed_book:

The Model is responsible for data handling and interacting with the database (MongoDB, etc.). This is where all database schemas are constructed and CRUD operations are handled using a library like Mongoose.

100daysofcode lebanon-mug

image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿด - ๐—–๐—ผ๐—ป๐˜๐—ฟ๐—ผ๐—น๐—น๐—ฒ๐—ฟ๐˜€ ๐—™๐—ผ๐—น๐—ฑ๐—ฒ๐—ฟ :closed_book:

The Controller handles requests and responses between the client and the model. It processes the incoming API requests (usually JSON), interacts with the model, in order to fetch or update data, and sends the appropriate response. The Controller is where all the business logic is held.

100daysofcode lebanon-mug

image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿฒ๐Ÿต - ๐—ฅ๐—ผ๐˜‚๐˜๐—ฒ๐˜€ ๐—™๐—ผ๐—น๐—ฑ๐—ฒ๐—ฟ :closed_book:

The Routes map URLs to the corresponding controller functions. These routes serve as the endpoints for the frontend to make API requests.

100daysofcode lebanon-mug

image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฌ - .๐—ฒ๐—ป๐˜ƒ :closed_book:

The .env file is used to store environment variables in your project. These variables typically include configuration settings like database connection strings, API keys, ports, and secret keys that should not be hardcoded in your application, especially when working with sensitive data. The .env file is crucial for keeping the applicationโ€™s sensitive information secure, especially when sharing code or deploying it.

To access โ€œ.envโ€ variables through process.env, โ€œdotenvโ€, an NPM package module, easily simplifies the process.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿญ - ๐—ฑ๐—ฎ๐˜๐—ฎ๐—ฏ๐—ฎ๐˜€๐—ฒ.๐—ท๐˜€ :closed_book:

The database.js file is typically used to configure the connection to your database. In a Node.js application, especially when using MongoDB with Mongoose, database.js is responsible for establishing and managing the connection to the database. This setup keeps the database connection logic separate from the rest of your application code.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฎ - ๐—ถ๐—ป๐—ฑ๐—ฒ๐˜….๐—ท๐˜€ / ๐—ฎ๐—ฝ๐—ฝ.๐—ท๐˜€ :closed_book:

The index.js or app.js file in a Node.js project serves as the main entry point of the application. This is where you set up and start your Express server, connect to the database, define middleware, and initialize routes. Typically, you would set up your Express app in app.js but not start your server. You would then import your app.js configuration to index.js and tell your app to listen on a specific port.
I personally just perform both functionalities inside 1 file (index.js).

100daysofcode lebanon-mug


3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฏ - ๐—ฃ๐—ฟ๐—ผ๐˜๐—ฒ๐—ฐ๐˜๐—ถ๐—ป๐—ด ๐—ฌ๐—ผ๐˜‚๐—ฟ ๐—•๐—ฎ๐—ฐ๐—ธ๐—ฒ๐—ป๐—ฑ :closed_book:

When building a secure backend, protecting your server and data from unauthorized access, injections, and abuse is critical. This can be done by implementing authentication, validating user input, and rate-limiting requests to avoid overuse.

ยท JWT Authentication: JSON Web Tokens (JWT) are a popular way to authenticate users. After login, a token is issued and sent with every request to verify the userโ€™s identity.

ยท Input Validation: Sanitizing and validating input is key to preventing malicious data from reaching your server. Libraries like Joi or express-validator ensure only clean data gets processed.

ยท Rate Limiting: To prevent Denial-of-Service (DoS) attacks or abuse of your API, you can use rate limiting. This limits the number of requests a user can make in a certain period. Tools like limitkeeper, an Express.js middleware offer this

ยท HTTPS: Enforce HTTPS to encrypt the communication between clients and the server, securing data in transit.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฐ - ๐—ฅ๐—˜๐—ฆ๐—ง๐—ณ๐˜‚๐—น ๐—”๐—ฃ๐—œ๐˜€ :closed_book:

REST (Representational State Transfer) APIs are designed to make communication between clients and servers easy by following certain conventions. RESTful principles ensure APIs are stateless, resource-based, and use appropriate HTTP methods.

ยท Statelessness: Each client request is independent, meaning it must contain all necessary information (like authentication tokens) since the server does not remember previous requests.

ยท HTTP Methods: RESTful APIs rely on specific HTTP methods:

  • GET for retrieving data,
  • POST for creating data,
  • PUT/PATCH for updating,
  • DELETE for removing resources.

ยท Resource-Based Endpoints: REST organizes data into resources. For example, a usersโ€™ resource would be represented by /users.

ยท Status Codes: Return appropriate HTTP status codes (e.g., 200 for success, 404 for not found, 500 for server errors).

100daysofcode lebanon-mug

image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฑ - ๐— ๐—ผ๐—ป๐—ด๐—ผ๐——๐—• ๐Ÿด :closed_book:

It is day 75 of the 100daysofcode challenge. Almost there! After this post, I will share information about React.js! Letโ€™s talk about MongoDB 8 coming out in November!
It introduces several new features that enhance data handling and operations. Understanding these features will help you leverage MongoDBโ€™s full capabilities.
โ€ข Time Series Collections: MongoDB 8 is optimized for storing time-sensitive data, making it ideal for use cases like logging, IoT sensor data, and real-time analytics.
โ€ข Enhanced Aggregation Framework: The new aggregation stages provide more flexibility and performance improvements when processing and transforming data.
โ€ข Transactions: MongoDB 8 offers multi-document transactions, ensuring ACID-compliant operations, which is crucial for applications that require consistency across multiple collections.

Here are some statistics that visualize the improved performance and efficiency of MongoDB 8:
โ€ข 54% faster for bulk writes (Yahoo! Cloud Serving Benchmark, YCSB)
โ€ข 27% faster for reads (YCSB)
โ€ข 25% faster for 95/5 mix of reads & writes (YCSB)
โ€ข 18% faster according to Metaโ€™s social graph benchmark (Linkbench)
โ€ข 60% faster for time series data (Timescale Time Series Benchmark Suite, TSBS)

100daysofcode lebanon-mug
image

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿฒ - ๐—œ๐—ป๐˜๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐˜๐—ผ ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜.๐—ท๐˜€ :closed_book:

React.js is a popular JavaScript library for building user interfaces, especially single-page applications (SPAs). Developed and maintained by Facebook, React allows developers to create fast, dynamic, and interactive UIs by building them with reusable components. Instead of working directly with the DOM, React uses a virtual DOM to optimize updates and improve performance.

Key advantages of React:

  • Component-Based Architecture : Build encapsulated components that manage their own state, then combine them to create complex UIs.
  • Declarative : React allows you to describe what the UI should look like at any given time, and it handles the updates when your underlying data changes.
  • Fast and Efficient : React updates only whatโ€™s necessary by using the virtual DOM to minimize costly real DOM operations.
  • Strong Ecosystem : Alongside React, youโ€™ll find related tools like React Router for navigation and Redux for state management, making it easier to build scalable applications.

Reactโ€™s flexibility and powerful features have made it one of the most widely-used libraries for modern web development.

Check React out here: https://react.dev/

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿณ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ฆ๐—ฒ๐˜๐˜‚๐—ฝ :closed_book:

Before diving into building React applications, itโ€™s important to get familiar with the setup process. This is foundational throughout your journey in React. Please refer to the image below for details on setup steps!

100daysofcode lebanon-mug

1. Install Node.js (Check If You Have It By Running In Bash Shell

node -v

2. Create a New React App

npx create-react-app <your-app-name>

3. Navigate Into Your Project Directory

cd <your-app-name>

4. Start the Development Server

npm start

This will launch a local development server on port 3000.

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿด - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—™๐—ผ๐—น๐—ฑ๐—ฒ๐—ฟ ๐—ฆ๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ฒ :closed_book:

Today, we will talk about the folder structure in a React project.

  • public folder: Contains all static files like HTML, imagesโ€ฆ

  • src folder: Contains the source code of your React app.

  • index.js: Main entry point of your React app.

  • App.js: Main component if your app. This is where you define the structure and behavior of your UI.

  • index.css: Contains global styling that applies to your app.

  • assets folder: Add images, font files, etc.

  • components folder: Contains re-usable React components you will need.

  • pages folder: Corresponds to the specific routes.

  • utils folder: Utility functions (reusable functionalities).

There are a lot of ways to organize your React project. I personally prefer this method. You can check out more structures online or via courses.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿณ๐Ÿต - ๐—œ๐—ป๐˜๐—ฟ๐—ผ๐—ฑ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐˜๐—ผ ๐—๐—ฆ๐—ซ :closed_book:

JSX (JavaScript XML) is the syntax extension used in React to describe UI elements. It looks like HTML but allows you to embed JavaScript expressions.

In this example, {name} is a JavaScript expression embedded in JSX.

Important JSX Rules :

  • JSX must have a single parent element.
  • You can use JavaScript expressions inside JSX by wrapping them in curly braces {}.
  • JSX attributes use camelCase (e.g., className instead of class).

100daysofcode lebanon-mug

3 Likes