teleren/devto huggingface dataset:
MERN Stack WebApp for Centralised Store
of Projects with MongoDB Data API.
Tags: atlashackathon, mongodb, node, react
Published: 2022-01-13 10:29:03

Implementation of WebApp with MVC(Model/View/Controller)
Pattern and to get the benefits of MongoDB Atlas to store the data, Powerful Search and Tag based Project Creation to make it a Generalised solution to all kinds of projects to be shareable.

### Overview of My Submission
[allprojects.ml](allprojects.ml) uses CI/CD with Microsoft Azure and Cloudflare pages, API Requests on Subdomain(api.allprojects.ml), Express.js Session and UI with React Js, Interfaces, Backend Controllers, and Models of Mongoose (mongoose is a mongodb object modeling tool designed to work in an asynchronous environment), Google Auth API to SignIn the user in the webApp, Aggregation used for Count in Projects, Enabled Schema Index for Search in Projects with any String field, Database(AllProjects), Collection(users, projects), Controllers(AuthRoutes, ProjectRoutes, UserRoutes)

### Submission Category: 

**Choose Your Own Adventure**: Centralised and shareable set of
Projects with MongoDB Atlas API and Full-Stack(NodeJs, Express.js, React Js).


### Link to Code
{% github https://github.com/Kartik1397/allprojects %}


### Additional Resources / Info


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

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

Contributors:
@kartik1397 
@deepshah1309
Most simplistic tutorial to React Router - create routing in 2 minutes
Published: 2022-01-13 10:20:13

Hi!
I wanted to create very fast guide to React Router because first time I routing it was big struggle.

So, let's begin.

1. After creating app by command npx create-react-app "your-app-name" install React Router with command  `npm install react-router-dom@6`.
2. In main file mostly called App.jsx import React Router components by adding in the beginning `import { Route, HashRouter as Router, Routes } from "react-router-dom";`
3. Again in App.jsx create structure like this: 

```
<Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/SubPageOne" element={<SubPageOne/>} />
          <Route path="/SubPageTwo" element={<SubPageTwo/>} />
        </Routes>
      </div>
    </Router>
```
4. As you can see there are few react components (Navbar, Home, SubPageOne, SubPageTwo). I've created Navbar component outside of Routes container so it can be available on every subpage.
5. In Navbar component where we want to have navigation to every subpage create links to them:

```
<Link to="/">strona główna</Link>
<Link to="/Database">baza danych</Link>
<Link to="/Create">stwórz nowe ogłoszenie</Link>
```

And that's everything. Your React Router is done and fully working!
Five first episodes of TRAILBLAZER TALES
Tags: screencast
Published: 2022-01-13 10:17:20

Finally, I started producing short 6 minutes [episodes on Youtube](https://www.youtube.com/channel/UCi2P0tFMtjMUsWLYAD1Ezsw) to learn about Trailblazer. This is actually more fun than I expected!

![Our Youtube channel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1wengxz7cm7si4sl7yo.png)
 
The first five episodes focus on refactoring a messy Rails controller action to a Trailblazer operation. Here is the [link to our channel](https://www.youtube.com/channel/UCi2P0tFMtjMUsWLYAD1Ezsw). 

Let us know what you think, and what is missing! In the following episodes we are going to discuss Reform, macros, nesting operations, and the new dependency injection features.
Atlas Store - E Commerce web app with Next.js and TailwindCSS
Tags: atlashackathon, nextjs, tailwindcss
Published: 2022-01-13 10:09:30

### Overview of My Submission
I created an E-Commerce store using Atlas search and Realm functions to make the web app serverless. Atlas search's fuzzy logic is enabled so that even if search term is not completely correct you can still receive result. You can browse, search for product and add the products to cart. Also localStorage is enabled so that even if you close the browser, the items in your cart stay. The website is responsive for smaller screens.

### Submission Category: E-Commerce Creation 

#### Link to Code

{% github https://github.com/aryanarayantiwari/atlas-store %}

### [Live Demo](https://atlas-store.vercel.app/)

### Additional Resources / Info
I'm still learning Next and TailwindCSS and this project was a great learning experience for me as a beginner. Here are some resources that helped me build this project.

1.[MongoDB Jumpstart 2021](https://www.youtube.com/playlist?list=PL4RCxklHWZ9v2lcat4oEVGQhZg6r4IQGV)
2.[React Use Cart NPM Package](https://www.npmjs.com/package/react-use-cart)
3.[freeCodeCamp's Article on Routing in Next.js](https://www.freecodecamp.org/news/routing-in-nextjs-beginners-guide/)
4.[MongoDB Crash Course](https://www.youtube.com/watch?v=ofme2o29ngU)

### Landing Page
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jvcl87nw8vcddq0vxae.png)
### Product Component
![Product Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkuvh5xb8l59cfzfnugu.png)

### Atlas Search Implementation
![Atlas Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8yzp8wyhan5bvgvcyue.png)

### Cart Functionality

![Cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/089fi8c70b7b90qxwdoe.png)
Two ways to auto focus React input element
Tags: react, javascript, webdev, beginners
Published: 2022-01-13 10:00:57

If you want to focus an input element when the DOM mounts, you have to place a ref on your input element and trigger the focus function in the useEffect hook.

Calling that function in the useEffect hook is because the callback that we pass to this hook will be triggered only when the DOM finishes to mount. Otherwise, we risk triggering the focus function before the input element is on the screen.

But there is a more straightforward option. You can pass the autoFocus attribute to that input element.

Nevertheless, it is sometimes helpful to use the first option to focus on an input element. For instance, we want our user to focus on the last input element when refreshing the page or return to that page from another one. 

The attached example stores the latest input value in the local storage. We have to use the state as well to cause a new render cycle and keep the newest value. We are also checking if there is a value before setting it to local storage. This is meant to prevent empty strings from being stored.

Live playground:

https://stackblitz.com/edit/react-8arjym?file=src/App.js

![auto focus react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2cvt68mfsxiedetz0nk.png)

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
Break Lock Challenge Game In JavaScript
Tags: javascript, html
Published: 2022-01-13 09:53:17

Project: Break Lock Challenge Game in JavaScript
[Source Code](https://github.com/GarudaID/Breaking-Lock)

Break lock challenge is a javascript project. The objective of this game is to break the lock by drawing the pattern. The starter guide is available in the project. This game is made in JavaScript and HTML5. When you try to draw mobile lock pattern if it matches then it opens but closes for sudden if it fails. This project is similar to that concept.

About The Project
Talking about the project, this project uses simple logic when it comes to the pattern drawing and locking the phone. To run the project you will need a browser. Use Google Chrome for a better experience. When you run the game you will see the home page with some hints about the gameplay. You can select the mode you want to play to unlock the pattern. Practice, Challenge and Countdown mode are available in the project.

You can use the practice mode for preparing yourself for the real game challenge. Select the challenge mode if you want to really to give a challenge. You will get a total of ten attempts during the gameplay. With each wrong pattern is drawn in the game will lead you to the deduction in the moves.
Notes app using MongoDB and Google Auth 
Tags: atlashackathon
Published: 2022-01-13 09:44:02




## Overview of My Submission ✨
An simple but good implementation of notes app along with google login.


## Submission Category:  🎊


Choose your own adventure

### Link to Code 👩‍💻

{% github aditikumrawat/Project-using-MongoDB %} 


## Additional Resources / Info

💎 Ejs for dynamic page rendering.
💎 Passport and express sessions for login management.
🎲 Bodyparser for post request handling 




![Notes app mern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j5p5ic37xnmczwp2aoa.png)
PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
[Attitude]
Tags: atlashackathon
Published: 2022-01-13 09:42:49

I have not been able to carry out what was planned due to lack of time, so far there is no release. **My apologies**
May well be the worst project ever delivered. I have done it simply to participate in OPENSOURCE. But I am a **newbie**

### License
[Apache-2 permissive license]
### Submission Category: 
Choose Your Own Adventure
### Link to Code
[Link to code](https://github.com/grafeno30/attitude)
Avoid unnecessary errors when conditionally rendering in React with "Optional Chaining."
Tags: javascript, react
Published: 2022-01-13 09:20:08

## Introduction
When I started learning React and Javascript I would run into errors because I would be trying to access an object property or data from an async API function call that has not been loaded.

## Statement of Problem
From the example below React would throw an error, because you are trying to access an object property that has not been loaded from the API call

```jsx
import React, {useState, useEffect} from 'react'

export default function App () {
// STATE
const [state, setState] = useState({})

// ONMOUNT
useEffect( async ()=>{
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => setState(json) )
}, [])

return ( 
<div>
{ state.title && 
    <div>
      ...
    </div>
}
</div>
)}
```

## Proposed Solution

###Optional Chaining
The optional chaining operator **`(?.)`** allows you to read the value of a property deep in a chain of related objects without having to validate each reference in the chain.

The **`?.`** operator is similar to the **`.`** chaining operator, except that instead of throwing an error if a reference is null (null or undefined), the expression short-circuits with an undefined return value. 
It returns undefined when used with function calls if the specified function does not exist.

With Optional Chaining the example above would be rewritten to:

```jsx
import React, {useState, useEffect} from 'react'

export default function App () {
// STATE
const [state, setState] = useState({})

// ONMOUNT
useEffect( async ()=>{
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => setState(json) )
}, [])

return ( 
<div>
{ state?.title && 
    <div>
      ...
    </div>
}
</div>
)}
```

### Advantages of Optional Chaining
This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.

### Conclusion
1. Optional chaining cannot be used on a non-declared root object, but can be used with an undefined root object.

2. Optional chaining with function calls: When attempting to call a method that may or may not exist, you can utilize optional chaining. This can be useful, for example, when utilizing an API when a method is unavailable.

Using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception if the method isn't found:

```js
let result = someInterface.customMethod?.();
```

## Refrences
[Optional chaining (?.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
CleanDocs A Documentation Template
Tags: javascript, tailwindcss, html, webdev
Published: 2022-01-13 09:13:39

CleanDocs is a free and open-source documentation template built using html, tailwindcss, and javascript.

{% github https://github.com/lmas3009/cleandocs-template %}

If you want to work on this or adding this to your website. Just fork or clone the repository.

```
git clone https://github.com/lmas3009/cleandocs-template
```

You can also look at the Live Site: [Live](https://lmas3009.github.io/cleandocs-template)

This is the Home Page of cleandocs website:
![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr67k7b94xwv4lkp6qbe.png) 

This is the documentation page of cleandocs:
![Docs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e67pcdw84iqf5hgc8ov.png)
 

This is my first time building this type of documentation page from scratch.

If you want to give any suggestions on a redesign or any changes. 
Please share your response through [Github Discussion](https://github.com/lmas3009/cleandocs-template/discussions) or to my [Twitter Acc](https://twitter.com/AravindKumarV09).

❤❤ Thanks for reading this article. ❤❤
Check Balance On Cash App Card Before You Initiate Any Payment
Tags: html
Published: 2022-01-13 09:09:40

It would be good to [Check Balance On Cash App Card](https://www.cashappcustomersupport.com/blog/how-to-check-balance-on-cash-app-card/) before you make any payment either from your Cash App account or via your Cash App visa debit card. Besides, if you find a low balance, you should get in touch with the Cash App troubleshooting geeks at anytime from anywhere.
Is Some Issue Taking Place While Making Payments From Cash App To PayPal?
Tags: javascript, webdev, beginners
Published: 2022-01-13 09:09:01

Of course, some sorts of problems can take place when it comes to make payments from your [Cash App To PayPal](https://www.supporttechhelp.com/blog/cash-app-to-paypal/) account or vice-versa. To avoid all such mistakes and hurdles permanently from the root, it would be good to make proper utilization of the experts’ suggestions and assistance as quickly as possible.
Copying Items to Clipboard Without Using Clipboard API
Tags: javascript, react, clipboard, copy
Published: 2022-01-13 08:49:03

There are several ways to use your clipboard. One of them is *Clipboard API*. This API is designed to supersede accessing the clipboard using `document.execCommand()` but if you have a web page that is served over `HTTP`, it probably won't copy anything to your clipboard. Because of [security concerns] (https://web.dev/async-clipboard/#security-and-permissions), it works over `HTTPS`. In this blog post we will discuss how to achieve copying items without using *Clipboard API*.

## Let's start

In this example we will use `DOM` operations and `execCommand()` method to create '**Copy to Clipboard**' function. It shouldn't be forgotten that `execCommand()` method is deprecated and no longer recommended but some browsers still support it. Here the list of these browsers;
![Supported Browser List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhxq3p373gmpndycxm29.png)

---
 
Our Code:
```JavaScript
const handleCopy = (content) => {
  const textarea = document.createElement("textarea");
  textarea.textContent = content;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
};
```

Firstly we define `handleCopy` function. It has parameter named `content`. The `content` parameter is the value we want to copy.

1- We create a new text area. 
```JavaScript
document.createElement("textarea")
```
2- And set it's `textContent` as the value we want to copy.
```JavaScript
textarea.textContent = content;
```

3- Then we add our text area to *body* of `DOM`. 
```JavaScript
 document.body.appendChild(textarea);
```
4- Select all the text in **textarea**.
```JavaScript
textarea.select();
```
5- We use `execCommand("copy")` for copying the content that we selected.
```JavaScript
document.execCommand("copy");
```
6- Finally, we remove the `textarea` from `DOM`. 
```JavaScript
document.body.removeChild(textarea);
```
You did it! Now the content is on your clipboard 🎉🎉
## Conclusion
In this post, I showed you how to copy texts to your clipboard. I hope it helps to you.

See you soon 😋
Yet another todo app
Tags: atlashackathon
Published: 2022-01-13 08:31:54

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)
I started my journey with this simple app using MongoDB. 

### Submission Category: 

Choose your own adventure 


### Link to Code

{% github GouravKewat/atlashacathon %}

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)
Google authentication for login.
Passport js and express js for session.
Body parser for post request.

![Todo app mern stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp8cdebzm6n4oqs9dwb2.png)
3 ways to add conditional properties to an object [...]
Published: 2022-01-13 08:21:58


![3 ways to add conditional properties to an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqhtavku44brnccvksmr.png)
1 - Using Spread Operator

What is Spread Operator?
source: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

Spread syntax (...)  allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Example:-

```
{
   ...(someCondition && {a: “hi”})
}
```

Or

```
const greed = {
  ...(true) && {a: “hi”},
  ...(false) && {b: "bye"},
}
```
 

---

2 - Using Object.assign

```

Object.assign(a, conditionB ? { b: 1 } : null,
                 conditionC ? { c: 2 } : null,
                 conditionD ? { d: 3 } : null);
```


Object.assign modifies the first argument in-place while returning the updated object: so you can use it in a bigger formula to further manipulate the object.

You can pass undefined or {} instead of null, with the same result. 

Number has no own enumerable properties, so you could even provide 0 instead since primitive values are wrapped.

For jQuery Developers

```
var a = $.extend({}, {
    b: conditionB ? 5 : undefined,
    c: conditionC ? 5 : undefined,
    // and so on...
});
```

---

3 - To remove Undefined Values form Object not remove other falsely values like “”, 0 or null

```
const me = {
  name: “prem”,
  age: undefined ,
  height: null
}

const cleanup = JSON.parse(JSON.stringify(me)); // { name: “prem”, height: null }

```

Shot Tip:-

Use !!value to get result in Boolean values if its truthy value the will return true otherwise False.

Eg:-
 

```
let isTruthy = “hello” 

console.log(!!isTruthy) // true

isTruthy = “”; //can be 0 or undefined or null

Console.log(!!isTruthy) // false
```
#14 - Keypad Horror CodeWars Kata (7 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-01-13 08:14:58

##Instructions

Paul is an excellent coder and sits high on the CW leaderboard. He solves kata like a banshee but would also like to lead a normal life, with other activities. But he just can't stop solving all the kata!!

Given an array (x) you need to calculate the Paul Misery Score. The values are worth the following points:

> kata = 5
> Petes kata = 10
> life = 0
> eating = 1

The Misery Score is the total points gained from the array. Once you have the total, return as follows:

< 40 = 'Super happy!'
< 70 >= 40 = 'Happy!'
< 100 >= 70 = 'Sad!'
> 100 = 'Miserable!'

---

##My solution:

```javascript
function paul(x){
var map = x.reduce((acc, el)=> {
  acc[el] = (acc[el] || 0) + 1;
  return acc;
}, {});

  let r = 0;
  
  for(const s in map){
   if(s == 'kata') r+=(map[s]*5)
   if(s == 'Petes kata') r+=(map[s]*10)
   if(s == 'eating') r+=(map[s])
   if(s == 'life') r+=(map[s]*0)
  }
  
  return r<40 ? 'Super happy!' : r<70 ? 'Happy!' : r<100 ? 'Sad!' : 'Miserable!'
  
}
```

---

##Explanation
First I took the array of strings and I reduced it so I could get an object with every repetition of the element as the key and the element as the value.

For example:

> ['kata', 'Petes kata', 'eating', 'eating', 'life', 'kata']

Returns:
> {'kata': 2, 'Petes kata': 1, 'eating': 2, 'life': 1}

---

After that I used a loop that iterated the object, and I used if so I could check the value, because remember that every value is worth different points so:

> kata = 5
> Petes kata = 10
> life = 0
> eating = 1

So I had to multiply the number of repetitions of that value by the number of points that it is worth, and then I just returned the "r" variable using ternary conditionals for the different results depending on the points

>   return r<40 ? 'Super happy!' : r<70 ? 'Happy!' : r<100 ? 'Sad!' : 'Miserable!'

---

**Comment how would you solve this kata and why? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/57ee31c5e77282c24d000024)
React vs. Web Components
Tags: javascript, webdev, programming, technology
Published: 2022-01-13 08:08:47

![Shaking Hands. React logo on left hand, Web Components Logo on right hand](https://miro.medium.com/max/2000/1*_DkdD2OIUAxz8M_0_8lDxw.png)

Recently, I published the article Will Web Components Replace Frontend Frameworks? (https://javascript.plainenglish.io/will-web-components-replace-frontend-frameworks-535891d779ba) 

The article's main message was to understand that you can not generally say that either one was better than the other and that Web Components should not be seen as a replacement for frontend frameworks but rather as an enhancer.

This article will help you understand the difference between React and Web Components. We will look at both technologies and apply them in different scenarios, enabling us to evaluate which technology serves better in the particular use case.

{% medium https://medium.com/@mariusbongarts11/react-vs-web-components-80d754f74811 %}