teleren/devto huggingface dataset:
Folder structure for Next JS 13
Tags: nextjs, react, javascript, typescript
Published: 2023-09-23 14:55:43

As a React framework, Next.js offers a high degree of flexibility in organizing your projects, which can sometimes make it challenging to determine the 'best practices' or to know what approaches others are adopting.

It's important to note that there isn't a one-size-fits-all solution, as each project has its unique requirements. However, here are some ways to structure your projects.

The first decision is whether you want a src folder or not, honestly either way is fine, you don't need to spend too thinking about this, I like having the src folder just because it has been the common practice.

Here is my suggested structure:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4o80swpu7f64cai3wsr.png)

Now let's go one by one.

### App folder

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2en7c31rbaq80zyzsiks.png)

Nest JS 13 allows us to group routes under the same folder by creating a folder using parentheses (). That way we can group our routes using names that make sense to our application.

If you want to make sure no route is created under a folder you can name that folder starting with an underscore character _.

### Components folder
This is self-explanatory, here you will store your react components. Here you have multiple options, you could:

- Have all all .tsx/jsx components files directly under. This is good if you have a small app.
- Have components with their own folder and an index.tsx/jsx under it. This is good if your components have file dependencies like CSS modules, specific custom hooks, config files, etc.
- Another option is to divide your components folder into features and into components grouping related components together. This works well in a big app.
 
###Config Folder
Here is very simple, just store any config file.

###Context Folder
Store your react context files

###DB Folder 
store your database-related files

###Hooks Folder
Store your custom react hooks.

###Server actions

Next JS allows us to have functions that we can call from the client components that run on the server by using the 'use server' string on top of a function. A good to organize those functions is by creating a server-actions folder. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36j3eql185hd3jqe0wqe.png)

### Vendor Folder
Here you would store code that calls 3rd parties services.

###Types/Models folder
If you are using Typescript having a types folder is very useful for having your types easily accessible.

### Constant files
Another useful folder to have to have all your constants in one place.

That's it from me,

Let me know what suggestions you have!
How I Built My First Online Business With Zero Dollars
Published: 2023-09-23 14:22:15

Back in 2019, I was brainstorming ideas for a business.

I already knew how to code in Python and knew the data stack pretty well.

At that time I was playing around with the [Open Exoplanet Catalog](https://www.openexoplanetcatalogue.com/) dataset trying to find habitable planets. (Yes, I really did lol)

Then a few weeks passed and I found out about a side hustle called "Phone Flipping". Which consists of buying phones for a low price and reselling them at a higher price on sites like eBay.

I then decided to dig more so I joined a couple phone resale groups on Facebook.

And I noticed something, a recurring question from phone resellers.

A lot of them were asking others for help when appraising and estimating phone prices.

Asking questions such as: 

> Hey! I just bought an iPhone, how much should I resell it for?

I found what I was looking for.

A problem, now I needed a solution.

I knew that eBay was the main marketplace where iPhones were getting sold in the US.

And since I was into data science and I knew web scraping, that's exactly what I did.

I started pulling phone pricing data every single day of the week and running analysis on it inside a Jupyter Notebook on my Thinkpad X230.

![Photo of a Thinkpad laptop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhkzosz26704hdgldnur.png)

I built an MVP in a couple weeks and released it to the world. Everything was built using Python and It was running on a local Debian Linux server in my bedroom.

This is how it worked:

1. Pull pricing data from eBay using Scrapy
2. Store data in text files
3. Clean data and analyze
4. Plot data in graphs inside Jupyter Notebook
5. Generate PDF reports from Jupyter Notebook
6. Send PDF reports using Gmail's SMTP Mail server 

I had a free and paid monthly plan which I was charging $40 per month. 

My first client was a Sprint store manager, when I saw that $40 deposited on my Paypal account I was the happiest man alive.

I then started sharing the pricing charts on multiple Facebook Groups every Friday morning.

I ended up with hundreds of free and paid users.

Then in 2020, the pandemic happened and I lost all my paying customers.

I took down everything.

I couldn't sustain it, it was too overwhelming for me.

I lost my business but I gained a ton of experience.

This is a short rewrite of [another article of mine in Startup Stash](https://blog.startupstash.com/how-i-launched-my-first-saas-business-with-0-bc68ab5cb9e2).
Leetcode - Palindrome Number (Go)
Tags: tutorial, programming, beginners, go
Published: 2023-09-23 14:20:14

This post is the first in a series of Golang-based answers to some code challenges on [Leetcode](https://leetcode.com/). Please note that the solution I provided is not the only solution to this challenge, as there are other ways to solve this challenge. Please write down your alternative solutions and suggestions in the comments if you have one. I'll work on the [**Palindrome Number**](https://leetcode.com/problems/palindrome-number/) challenge in this post.

> Given an integer `x`, return `true` if `x` is **_a palindrome_**, and `false` otherwise.

In this challenge, we are given an integer `x` and tasked to determine whether the `x` is _**a palindrome**_ or not.

> A palindrome is a word, number, phrase, or other sequence of symbols that reads the same backwards as forwards, such as madam or racecar, the date and time 12/21/33 12:21, and the sentence: "A man, a plan, a canal – Panama".
>-- <cite>[Wikipedia](https://en.wikipedia.org/wiki/Palindrome)</cite>

That is, to say that if we have `x = 121`, then **it is a Palindrome**, while `x = 1234` isn't. Now, One way to solve the challenge is to do these steps:
1. Check whether the `x` is a negative number or not, if so, return false.
2. Convert the `x` to `string`
3. Using _the two pointers_ technique, traverse through `x` to compare the elements from left and right, and if they don't equal, then return false. Otherwise, return true.

## Code:
```go
func IsPalindrome(x int) bool {
	if x < 0 {
		return false
	}

	strX := strconv.Itoa(x)

	j := len(strX) - 1

	for i := 0; i < j; i++ {
		if strX[i] != strX[j] {
			return false
		}
		j--
	}

	return true
}
```

## Explanation:

```go
if x < 0 {
	return false
}
```

Here we implement the first step with this code to determine whether `x` is a negative number or not. Doing this will make the function early return and doesn't have to run unnecessary steps after.

```go
strX := strconv.Itoa(x)
```

Next, change the `x` from type `int` to `string`, and store it to a new variable `strX` because we are gonna loop through it's elements. To do this, we can use one of Golang's [`strconv`](https://pkg.go.dev/strconv) functions, `strconv.Itoa()`.

```go
j := len(strX) - 1

for i := 0; i < j; i++ {
	if strX[i] != strX[j] {
		return false
	}
	j--
}

return true
```

After that, using _the two pointers_ technique, we traverse the `strX`, with `i` starting from the first element and `j` starting from the last element.

![first-iteration](https://drive.google.com/uc?id=1ytEWQCfGCedJ31fyUjbB17aO4v4aQy-0)

![second-iteration](https://drive.google.com/uc?id=1_P_-l9t7TYFnLMfXgP2buJ494Fy-3tX9)

The `i` will increment through the loop, while `j` will decrement. Inside the loop we check if they are equal or not, when there is a single occurrence where they aren't equal, then return a false. Otherwise, return true.

That's all! You can check the code on my GitHub as well as solutions for other challenges [here](https://github.com/LethalWarrior/leetcode-solutions/tree/master/easy/palindrome-number).
Feedback from React devs
Tags: react, opensource, javascript
Published: 2023-09-23 14:15:20

Hey React devs! We need your feedback for an open source tool that focuses on eliminating the effort of building pipelines. 

We need React devs testing the workflow end-to-end and provide feedback and input. This is an open source community initiative. Get started with the docs page below and let us know if you have questions in our discord. Look forward to connecting. 

https://docs.trustacks.io/

https://discord.gg/ccmerZpt
How I Found a Way to Pay for AWS in Cryptocurrency and Get Up to 25% Discount
Published: 2023-09-23 14:06:10

Not long ago, I faced a dilemma: how to optimize my cloud computing expenses. My business heavily relied on Amazon Web Services (AWS), and I knew there had to be a way to save, but I wasn't sure how.

A friend of mine recommended trying to pay for AWS with cryptocurrency. They argued it was fast, secure, and anonymous. However, as I soon discovered, not all services allowed payments in cryptocurrency.

I started my search for a solution and stumbled upon Umbrelly Cloud. It was a real game-changer! They offered discounts of up to 25% on AWS services when paid for in cryptocurrency. This meant I could reduce my cloud resource costs without compromising service quality.

What particularly pleased me was the ability to earn cashback by referring clients to AWS through Umbrelly Cloud. The discount they provided could be seen as cashback that could later be withdrawn to a bank card or converted into cryptocurrency. This became a great incentive to share this excellent solution with others.

As a result, thanks to [Umbrelly Cloud](https://umbrelly.cloud/), I managed to optimize my AWS expenses and even make money from it. Now I'm confident that my cloud computing is not only an efficient tool but also a smart investment in my business. Good luck in your search for optimal solutions!
Application Functionalities
Tags: businessfunctionality, architecture, vue, fastapi
Published: 2023-09-23 14:03:42

After last week's post, today I will be sharing the functionality Map for the Application. These functionalities/features, I am planning to develop in upcoming days.

Below functionality map image shows the business architecture of the application. The application is divided into multiple modules and each module has various functionalities or engine.  The functionality of the application refers to the specific features and capabilities it offers to its users.  

The application module may also contain the engine. Engine takes the input data, performs the validation and perform the business actions e.g. Billing engine, which takes the usage data, performs the validation such as data integrity and then generate the bills using price list.


![Application Functionalities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhr0yw6dyez7727trejd.jpg)

At technical level, each functionality or process engine is represented as microservice and can be interacted with, using APIs. While all the functionalities are defined under module, there can be interaction and dependancies between different functionality blocks.

A microservice is a self-organising container with it’s own business logic, schema, data validations and  APIs to interact with other micro-services or applications. Each microservice component performs a specific functionality. 

The  application map above is currently defined at high level and will be further elaborated at later step. 

Do let me know your thoughts/feedback in comments
SOOOO.. I learned something!!!
Tags: beginners, tutorial, webdev
Published: 2023-09-23 14:03:27

About a month ago or so i decided I needed to learn new skills and one of those skills had to be coding. I had no clue where to begin. But, I decided to take a class and learn the basics! Today is literally my very first day of this course; well technically no, not the first day. I am doing pre-work for this course and in this pre-work i learned about dev.to and many other sources of information. None that i ever heard of before; and that is my own fault...I haven't tried. I give up too easily. But here is a a new opportunity to learn and actually acquire these new skills. Wish me luck!!!! And thank you for the support in advance.
Vetores em Java
Tags: java, beginners, programming, braziliandevs
Published: 2023-09-23 13:34:45

**O que são vetores em Java?**
Vetores, também chamados de arrays, são estruturas de dados que permitem armazenar um conjunto de valores do mesmo tipo em uma única variável. Eles são úteis quando você precisa lidar com múltiplos valores relacionados.

**Declarando um vetor em Java:**
Para declarar um vetor em Java, você precisa especificar o tipo de dados dos elementos que serão armazenados no vetor e dar um nome a ele. Aqui está um exemplo:

```
int[] numeros;
```

Isso declara um vetor de inteiros chamado "numeros".

**Inicializando um vetor:**
Depois de declarar um vetor, você pode inicializá-lo. Existem várias maneiras de fazer isso. Uma maneira simples é usando a palavra-chave new:

```
numeros = new int[5];
```

Isso cria um vetor de inteiros com espaço para 5 elementos. Os elementos são inicializados com valores padrão (0 no caso de inteiros).

**Acessando elementos de um vetor:**
Os elementos de um vetor são acessados através de índices, começando em 0. Por exemplo, para acessar o primeiro elemento do vetor "numeros", você usaria:

```
int primeiroNumero = numeros[0];
```

**Exemplo completo:**

```
public class ExemploVetor {
    public static void main(String[] args) {
        // Declarar e inicializar um vetor de inteiros
        int[] numeros = new int[5];
        
        // Atribuir valores aos elementos do vetor
        numeros[0] = 10;
        numeros[1] = 20;
        numeros[2] = 30;
        numeros[3] = 40;
        numeros[4] = 50;
        
        // Acessar e imprimir elementos do vetor
        System.out.println("O primeiro número é: " + numeros[0]);
        System.out.println("O terceiro número é: " + numeros[2]);
    }
}
```

Este programa cria um vetor de inteiros com 5 elementos, atribui valores a esses elementos e, em seguida, acessa e imprime dois deles.

Linkedin: https://www.linkedin.com/in/antonio-rodrigo-wanderley-serra/
GitHub: https://github.com/antoniorws
How to Change the Bytecode of an Already Deployed Smart Contract
Tags: solidity, hardhat, testing, javascript
Published: 2023-09-23 13:25:09

## Intro
Developing smart contracts with the Solidity or Vyper programming language always leads to creating some tests in a special environment. Currently, in order to deploy newly created smart contracts in testnet several tools exist, the most popular of which are hardhat, Ape, Boa, and foundry. In this note, we will discuss how you can change the bytecode of a smart contract already deployed on mainnet and, therefore in testnet. This can be useful if you want to change some logic for test purposes or if you want to change prices in oracles, as in a case that will be discussed below.

## Updating bytecode of an already deployed smart contract
To prepare these tests, we used [this article](https://kndrck.co/posts/local_erc20_bal_mani_w_hh/) as an example. First of all, you need to install hardhat > 2.4.0 via npm or yarn. Next, you must add a copy of the smart contract code you want to change in your project repo. A little tip before we start discussing the code: if you use `blockGasLimit` in hardhat config, you must tune it right so that tests would execute (in our case, we simply removed this parameter from config). Add all necessary changes to this code and deploy it to testnet via `ethers.getContractFactory()` like this:
```javascript=
const oracles = await ethers.getContractFactory("AaveOracle");
const oracle = await oracles.deploy(
      ["0x6B175474E89094C44Da98b954EedeAC495271d0F"], 
      ["0x773616E4d11A78F511299002da57A0a94577F1f4"], 
      "0x5B09E578cfEAa23F1b11127A658855434e4F3e09", 
      WETH.address,
    );
```
In the code above, we have `AaveOracle`, which contains all code from Aave Oracle with small additions, and `WETH.address`, which is simply a string with wrapped ETH in Ethereum mainnet (`0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2`). The first parameter in the deploy function is an array of assets, which is used in oracle (in our case, it is an array of 1 asset == DAI address `0x6B175474E89094C44Da98b954EedeAC495271d0F`). The second parameter is an array of data feeds (in our case, it is chainlink's data feed for DAI/ETH `0x773616E4d11A78F511299002da57A0a94577F1f4`). The third parameter is a fallback oracle (in our case, it is simply Aave fallback oracle `0x5B09E578cfEAa23F1b11127A658855434e4F3e09`). After all these steps are taken, you can use the hardhat function `eth_getCode()` to get the bytecode of your newly deployed smart contract, and after that, you must use `eth_setCode()` to add this code to the contract address in testnet:
```javascript=
const code = await hre.network.provider.send("eth_getCode", [
        oracle.address,
    ]);
await hre.network.provider.send("hardhat_setCode", [
      "0xA50ba011c48153De246E5192C8f9258A2ba79Ca9",
      code,
    ]);
```
In the code above, we get the bytecode of our deployed contract and set it to Aave Oracle, which has the address `0xA50ba011c48153De246E5192C8f9258A2ba79Ca9`.
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-09-23 13:20:00

Hey y'all! 🙌

What ya learning on this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

🎶 Keep on growing! 🎶 🎸

{% embed https://www.youtube.com/watch?v=jUVUJ_Wbw4E %}
Benefits of note taking...
Tags: productivity, webdev, learning
Published: 2023-09-23 12:53:49

My productivity was dead...

I was spending hours working without recovering and getting nothing done.

After 2 weeks: 

- I had more focus and motivation to work.
- I was working 3 hours a day and getting more done.

Here's how I did it:

First, I started bedtime writing ✍️.  This helped me sleep faster 😴 and get me motivated to do what I wrote when I woke up.

Second, writing easily achievable and few goals. The trick is to make your brain 🧠 think you have less work, thereby putting all your focus on what you have to do without feeling overwhelmed. It's a rule of thumb "Greater focus plus fewer goals equals the best result".

You can try it out and comment what your experience was like below 👇.
c++da 2 dars
Tags: beginners, programming, python, news
Published: 2023-09-23 12:32:09

assalomu alekum bugun biz c++ 2 darsimizda ozgaruvchi yaratishni organdik va input qilishni organdik , ozgaruvchini int codi bilan yaratish mumkin ,input qilish uchun cin codidan foydalansak boladi .
misol;
#include <iostream>

using namespace std;

int main()
{
	int son,son1;
	 
	cout << "Birinchi sonni kiriting" <<endl;
	cin >>son;
	
	cout <<"ikkinchi sonni kirinting" <<endl;
	cin>>son1;

	int natija = son + son1;

	cout <<"natija:" << natija;
	
  	return 0;
}
bu mini kalkulyator.
#12 Type Of Buttons in Android |Android Studio Tutorial| Learn Android #SoftwareTechIT #tutorials
Tags: android, programming, app, development
Published: 2023-09-23 11:54:00

{% embed  https://www.youtube.com/watch?v=em91Pd-16q0&list=PLmwJLue37PZfiGUAwQ6uhh5bbYkeFUOpj&index=12&ab_channel=SoftwareTechIT %}

Subscribe Channel SoftwareTechIT 
And Visit:- https://SoftwareTechIT.com
More Here:- https://home.softwaretechit.com
Buy Anything From Here :-https://shop.softwaretechit.com

{% embed https://softwaretechit.com/type-of-buttons-in-android-android-studio-tutorial-learn-android-softwaretechit-tutorials/ %}

Questions:- 
What is buttons in android app development ?
Why We Use buttons in android app?
How to Create buttons in android studio?
How We Create Android buttons in android studio?
how many types of buttons in android studio ?
What is android studio buttons ?
What does android buttons is use?
What is An buttons in android studio?
How to Code buttons in android app?
how does android buttons work in android app ?

Download Our App:- https://play.google.com/store/apps/details?id=com.softwaretechit
Read More Here :- https://softwaretechit.com/top-10-quetions-on-ai-and-chatgpt-ai-tool-can-ai-is-new-future-of-world/
https://softwaretechit.com/what-is-chatgpt-develope-chatgpt-11-things-you-can-do-with-chatgpt/
Watch Other Video:-https://youtube.com/shorts/7MmZi6GHizM?feature=share
🌎 Website :- https://softwaretechit.com
📰 Blog:- https://blog.softwaretechit.com
🛒 Shopping :- https://shop.softwaretechit.com 
📑 Product Review :- https://productsellermarket.softwaretechit.com
🔎 Business & More:- https://golbar.net/
🏡 https://home.softwaretechit.com

💬 https://instagram.com/softwaretechit

LeetCode Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeATQcUaHddx4-TJ5cjkT0t
Angular Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZfQTgu-AXNee3EDj7oIlqeh
Android Playlist :-https://www.youtube.com/playlist?list=PLmwJLue37PZcEUyMLhaa3jnfyq3lETiSe
Python Flask Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZdqqr9wj6c5uY2iXQsSVxZK
Java Project Link :- https://www.youtube.com/playlist?list=PLmwJLue37PZcvpGWO8tjlFzXCRS7FDfwA
Installation Tutorial Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeRGo1hOc3Mh4QcHVSIKQ9Y
Kali Linux Installation:- https://youtu.be/7uqH2om9itY

Thank You... #softwaretechit #2023 #tech
Frontend Architecture: The Architecture - Summary
Published: 2023-09-23 11:42:07

## What is Frontend Architecture after all this?
Frontend architecture refers to the structure and organization of the client-side part of a web application and converting the architectural drivers into a technical solution, technical roadmap, communicating the vision to a number of stakeholders both inside and outside the software development team, and introducing the technical leadership.

## What is the difference between Architecture and design?
"Architecture" typically refers to the high-level structural decisions that have a significant impact on the system and are difficult to change once made. On the other hand, "design" encompasses the detailed decisions and implementations that are more flexible and can be adjusted without major consequences.

## What are the Architectural Drivers?
- **Functional Requirements**: The technical functions that represent the main product features. These functions describe how the system behaves and what it should do.
- **Quality Attributes**: Quality Attributes are a set of criteria that describe how a software system should behave and perform rather than specifying specific functionalities or features.
- **Constraints**: Constraints can encompass various factors, such as technical limitations, resource constraints, or environmental considerations. 
- **Principles**: The Standards or the Guidelines that should be applied while implementing and creating the Frontend solution.


### References
1. Book: **Software Architecture for Developers** by @simonbrown 
2. Book: **Frontend Architecture for Design System** by Micah Godbolt
3. Youtube: GOTO Conferences