teleren/devto huggingface dataset:
Complete Django CRUD Web app with MongoDB Atlas
Tags: atlashackathon
Published: 2022-01-13 17:27:42

### Overview of My Submission
This is a Complete Django CRUD Webapp with MongoDB Atlas. I made this project to take participate in MongoDB Atlas hackathon in dev.to

I made this using:
 - Django
 - Design Django Form with Bootstrap and crispy forms
 - MongoDB Atlas for backend

The complete backend is made by django and for database I used MongoDB Atlas.
There are many collection but, auth_user, employee_register_employee and employee_postion_employee are the main collection in crud Database of CRUD Cluster.

![Cluster_image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nhckdt4s8o7jh4h0mp1.png)
 

To connect django with MongoDB Atlas I used djongo library and pymongo made for python to connect with MongoDB.


![database connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xw31y2m42meyx7o9n0h.png)


This is how the web app looks like

**DEMO VIDEO:**

![demo video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/286w7mfmqv05mtmdkv8z.gif)


**REGISTER PAGE:**

![register page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y5x9lchhudi6mlbst8a.png)

**EMPLOYEE LIST PAGE:**


![Employee list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l280pr7wt1tr0s8kkd27.png)

#### How you will see this project

##### **STEP 1:**

Fork this repo and clone it using:
```
git clone https://github.com/shubham8268/Django-CRUD-Operations
cd Django-CRUD-Operations

```
<br>
The Django skeleton is look like this:
<br>


![Django Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tttn1xoqpghopcqt3ye.png)

<br>


##### **STEP 2:**
Install virtualenv then create a virtual environment test:
```
pip3 install virtualenv
virtualenv test
source test/bin/activate
```

Install all the dependencies using:
```
pip3 install -r requirements.txt
cd employee_project

```
##### **STEP 3:**
Now you can see the website in your localhost:8000 using:
``` 
python3 manange.py runserver
```

### Submission Category: 

Choose Your Own Adventure: Create an application using MongoDB Atlas that doesn’t fit into any of the categories above.


### Link to Code

{% github shubham8268/Django-CRUD-Operations %}


### Additional Resources / Info

This was my first time using MongDB as the database for a website which was a really great experience of using noSQL specially MongoDB Atlas, I'm also planning to use it in my future projects.
I learned about [pymongo package](https://pymongo.readthedocs.io/en/stable/) and [djongo](https://www.djongomapper.com/) availabe for python. I took help from [How to Use Django with MongoDB](https://www.mongodb.com/compatibility/mongodb-and-django) document.
Envify - Your Secret Vault in Flutter
Tags: flutter, security, programming, showdev
Published: 2022-01-13 17:17:53

As a **Flutter Developer,** there comes a time when you need to specify some confidential information in your source code such as API Keys, File Paths, URLs, Client-Side Secret Key etc, so the question arises that how would you:

✔️ Keep this data confidential.

💉 Integrate it without disclosing it inside the source code.

🛡️ Protect it if a hacker dismantles the code.

Have no fear, [Envify](https://levelup.gitconnected.com/envify-your-secret-vault-in-flutter-808bbffb1af9) is here.
longest common subsequence
Tags: javascript, cpp, dynamic
Published: 2022-01-13 17:14:37

## Tabulation

```
class Solution {
public:
   
    int longestCommonSubsequence(string text1, string text2) {
        
    int m=text1.size();
    int n=text2.size();
    int dp[m+1][n+1];
       
        memset(dp,0,sizeof dp);
        //tabulation approach
        for(int i=1;i<=m;i++)
        {
            for(int j=1;j<=n;j++)
            {
                if(text1[i-1]==text2[j-1])
                    dp[i][j]=1+dp[i-1][j-1];
                else
                    dp[i][j]=max(dp[i-1][j],dp[i][j-1]);
            }
        }
        return dp[m][n];
    }
};
```
Longest common sequence
Tags: javascript, cpp
Published: 2022-01-13 17:12:07

## this method is Memoization in dp

```
class Solution {
public:
   int dp[1001][1001];
     int lcs(string &text1,string &text2,int m,int n)
     {
         if(dp[m][n]!=-1) return dp[m][n];
        
         if(n == 0 || m == 0) // Base case
            return 0;
        
        
         if(text1[m-1]==text2[n-1])
            return dp[m][n]=1+lcs(text1,text2,m-1,n-1);
         else
            return dp[m][n]=max(lcs(text1,text2,m-1,n),lcs(text1,text2,m,n-1));
     }
  
    int longestCommonSubsequence(string text1, string text2) {
        
    int m=text1.size();
    int n=text2.size();
        int result=0;
        memset(dp,-1,sizeof(dp));
        result=lcs(text1,text2,m,n);
        return result;
    
       
      
    }
};

## 
```
PHP Traits Explained
Published: 2022-01-13 17:11:54

In line of my previous blogs [PHP Interfaces Explained](https://dev.to/eelcoverbrugge/php-interfaces-explained-35g) and [PHP Abstract Classes Explained](https://dev.to/eelcoverbrugge/php-abstract-classes-10eh), I'll explain PHP Traits today.

In PHP a child class can inherit only from one single parent. This allows a class to reuse methods from vertically hierarchy by extending an [Abstract class](https://dev.to/eelcoverbrugge/php-abstract-classes-10eh).

If you like to reuse methods in many different classes in horizontally hierarchy, we use Traits. Traits are used to group methods and implement in  multiple classes. Traits can't be initiated on it's own like a normal class could.

## For example
Let's say we would like to check if a user has access in many classes:

```
trait Access
{
    public function hasAccess(string $username): bool
    {
        //..Check if $username has access
    }
}
```

Everyone who can access Files, is allowed to download them. To use this Trait into our class:
```
class File
{
    use Access;
    
    public function download(string $username): Response
    {
        if ($this->hasAccess($username)) {
            //..Download file x
        }
    }
}
```
Wherever you implement your Trait with **use Access;** you are able to refer to `$this->yourMethod()` as of it would be one of this class. Which in this case is only `hasAccess()`. 

## Multiple inheritance
What if you need multiple inheritance to reuse various methods in many different classes in horizontally hierarchy?

This is easily done, let's create an other one:
```
trait Ability
{
    public function canUpload(string $username): bool
    {
        //..Check if $username can upload
    }
}
```

We want to check if our $username can access files and is allowed to upload as well:
```
class File
{
    use Access, Ability;
    
    public function upload(string $username): Response
    {
        if ($this->hasAccess($username) && $this->canUpload($username)) {
            //..Upload file
        }
    }
}
```
Tadaa! As you can see, Trait's are easily implemented and freely used everywhere you want in your project.

## Bad practice
If ever used duplicated methods by implementing multiple Traits, an error will arise. Let's say both Traits have the method `canDownload()` implemented, PHP wouldn't know which one to use. This is solved by the keyword `insteadof`:
```
class File
{
    use Access, Ability{
        Access::canDownload insteadof Ability;
    }
    
    public function upload(string $username): Response
    {
        if ($this->hasAccess($username) && $this->canUpload($username)) {
            //..Upload file
        }
    }
}
```

Let me know your experience with Traits and best practices.
Recreating the Solana Explorer
Tags: solana, rust, react, devops
Published: 2022-01-13 17:10:20

As a beginner building in the Solana Ecosystem, I've been searching for hands on projects to get involved with. Really I have been just cloning and building off the shoulder of giants, so that's what this is...

Still, not as easy as just plug and play, so it really is a big of a process to get it deployed. 

Check out the Solana Explorer with not much of a twist, but again it's still fucking deployed. 

**SolExplr** [https://solexplr.vercel.app/](https://solexplr.vercel.app/)


**Give me a follow on my socials:**

Twitter [https://twitter.com/OfficialCoreyS](https://twitter.com/OfficialCoreyS)

Github [https://t.co/jQfcnf5dFi](https://t.co/jQfcnf5dFi)
Create first React app
Tags: javascript, webdev, programming, beginners
Published: 2022-01-13 16:58:40

##React
React js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components
##Create app in React
Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
##Requirements
Node 14.0.0 or later
[Install node from here](https://nodejs.org/en/)
###Steps to Create app
1.npx create-react-app my-app
2.cd my-app
3.npm start
and here you good to go for react output screen on your window look like this...


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rucid16xxd0nwxfh416.png)
USER-LOGIN-SYSTEM
Tags: atlashackathon, python, mongodb
Published: 2022-01-13 16:56:20


### Overview of My Submission

#### **user-login-system**, is a web application built for MongoDB Atlas Hackathon. The technologies used are python flask, MongoDB, html, css, javascript.
The idea of this project is to create a web application for a signup page which can encrypt password and store data of users  using MongoDB.This can be used to for any applications signup and login page with its backend support.
  

[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.)


### Submission Category: 
####  Choose Your Own Adventure




### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
#### you can find the project here: https://github.com/HawkingRadiation42/user-login-system
  
### Additional Resources / Info. 
  
#### PROJECT PAGE: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn4u3hatyjshbnt3gmyi.png)
 
#### SIGNUP PAGE: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aretitvvy09t8gyugbn.png)
A dev's dillema: Vue vs React
Tags: vue, reactnative, webdev, programming
Published: 2022-01-13 16:47:02

## Why Vue?

- Vue is lightweight & flexible and it feels more like a library than a framework

- It's also less intrusive and has an easy onboarding experience

- Project components & structure in Vue are similar and easy to recognize. This especially helps with onboarding.

- READABILITY !!!! The html/css and JS are separated. 

## When React > Vue 

- React is an industry standard and oftentimes this makes it easier to recruit developers 

- React often provides better flexibility in some aspects 

- Docs are far more advanced. Check out the 100s of pages of questions on React on Stackoverflow   

[This all started with an email we received a while back asking why Swimm chose Vue. 
](https://swimm.io/blog/vue-vs-react-best-choice-for-startups/)

Do you have this dilemma? Where do you stand?
Bug Tracker, Project Management tool - The Racoon Tracker
Tags: atlashackathon, mongodb, javascript
Published: 2022-01-13 16:42:06

 


### Overview of Our Submission

The "**Racoon Tracker**" is an issue/project tracker that helps ease software delivery by making the whole process of tracking and keeping up with bug fixes seamless and easy.

**Submit, Track & Resolve bugs in a snap!**

https://tracker.racoon.dev


---- 


### Submission Category
Choose Our Own Adventure


----

### Links to Code
Front End React App: 
https://github.com/the-racoon-devs/racoon-tracker-fe-v1

Back End Rest API: 
https://github.com/the-racoon-devs/racoon-tracker-api-v1

Published API Documentation:
https://documenter.getpostman.com/view/18928487/UVXeteBv


----


### **Our Tech Stack**
#### Design System

Our design system is entirely built on Tailwind's beautiful CSS framework and UI kit.

![](https://i.imgur.com/0ZAcwQj.png)


#### Front-End

Our front-end is built on a custom CRA boilerplate with React.js and TypeScript.

![](https://i.imgur.com/6khAPym.png)

#### Back-End

Our back-end is built on Express.js with the ability to scale quickly and add more functionality in the form of microservices.

![](https://i.imgur.com/7TcM6u3.png)


#### Database

MongoDB Atlas provides cloud database service using AWS, Azure, and Google Cloud. It also has various automation tools for performing various backend functionalities and comes with visualization tools. The services that are used in this project are described below.

Atlas is used as the main cloud database for storing the user information and project information along with it's tickets.

![](https://i.imgur.com/ppT8DJc.png)


#### Deployments

Our React Front End is deployed over Netlify's Jamstack App Deployment platform.

Our Express Back End is deployed over Railway.app cloud serverless platform.

---- 


## Screenshots:
 
![](https://i.imgur.com/SEi6s8J.png)

--------------

![](https://i.imgur.com/BbXKvmT.png)

--------------

![](https://i.imgur.com/FpwhNGz.png)

--------------

![](https://i.imgur.com/QPBM3If.png)

--------------

![](https://i.imgur.com/Q93xXdv.png)

--------------

![](https://i.imgur.com/XtURRdW.png)


--------------------------------------

### Collaborators
@fabianferno, [Twitter](https://twitter.com/fabianferno)
@thedanielmark, [Twitter](https://twitter.com/the_danielmark)

--------------------------------------

### Additional Resources / Info
React CRA Boilerplate: https://github.com/react-boilerplate/react-boilerplate-cra-template
Pomodoro-technique app developed using Node.JS, MongoDB and jQuery.
Tags: atlashackathon
Published: 2022-01-13 16:34:18

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


### Overview of My Submission
The secret to effective time management is...thinking in tomatoes rather than hours? It may seem silly at first, but millions of people swear by the life-changing power to the Pomodoro Technique. (Pomodoro is Italian for tomato. 🍅)

This popular time management method asks you to alternate pomodoros — focused work sessions — with frequent short breaks to promote sustained concentration and stave off mental fatigue.


### Submission Category: Choose Your Own Adventure


### Link to Code

{% github bhavin28/mongodb-hackthon %}


### Additional Resources / Info



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

### Collaborators
@simbhadarajen 
@bhavin28
How do you review CSS?
Tags: css, productivity, programming, discuss
Published: 2022-01-13 16:32:12

What is your workflow when you have to do a tech review and there are a bunch of CSS-like files?
Do you follow some guidelines? Do you build the feature branch somewhere? Or you just close your eyes 🙈, click on the 'Viewed' checkbox and let the QA guys do the rest? 😬

👇👇👇
Automatic Updates Nuget Package with Dependabot when using Github - Part 1
Tags: github, dependabot, automation
Published: 2022-01-13 16:31:19

It's easy to set up if you don't have dependencies that hosted at private NuGet. You only need to add file at `.github/dependabot.yml`.

The file will looks like this.

```yml
version: 2
updates:
- package-ecosystem: nuget
  directory: "/"
  schedule:
    interval: daily
  open-pull-requests-limit: 25
```

Notes:
* If you want to know more about Dependabot, you can visit the documentation [here](https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates).

* If you want to know how to setup the private registries for NuGet, you can check the documentation [here](https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/configuration-options-for-dependency-updates#nuget-feed).

### Example Repo/File

If you want to check the file directly, you can visit [here](https://github.com/bervProject/NETCoreAPIBoilerplate/blob/main/.github/dependabot.yml)

{% github bervproject/NETCoreAPIBoilerplate %}

### Finally

Yey, you're done. But, we won't stop here. The next part, I will discuss about the CI. Stay tune.

![Stay tune GIF](https://media.giphy.com/media/sHkcIbEc2BK2OX7d7V/giphy.gif)
Kaimono-MongoDB Atlas Hackathon Submission.
Tags: atlashackathon
Published: 2022-01-13 16:25:27

### 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.)
My project is a E-Commerce Grocery store based on MERN Stack technology, I used the Mongo Atlas Search Feature in the search bar of the website with auto search configuration. Allowing users to search items all over website, it shows the item that matches the word or else show the item closest to the word typed by user.

My Search Index Configuration:

```
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "name": [
        {
          "foldDiacritics": false,
          "maxGrams": 5,
          "minGrams": 1,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}
```
 

### Submission Category: 
E-Commerce Creation

### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
{% github https://github.com/ShivangM/Kaimono-MongoDB-Atlas-Hackathon %}


### Additional Resources / Info
{%youtube UsiEepEHqFE%}

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

It was really fun for me participating in this hackathon and by building this project I came to learn different MongoDB features which would be really helpful in my future projects.

Contributor: Shivang Mishra ( @shivangm24 )
JavaScript Split a String to Array JS methods
Tags: javascript, node
Published: 2022-01-13 16:21:23

![Everyone can code](https://images.unsplash.com/photo-1526649661456-89c7ed4d00b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1310&q=80)
The best way to split a `string` to `array` is to use the `split()` method in JavaScript.

In this article, I will go over some JavaScript `split()` methods with some examples.

### Syntax of `split()` method
`split(separator, limit)`

Here, **separator** is any ASCII character/letter and **limit** is a **positive** number that tells the browser to return specific substrings from an array.

### JS split() method code with examples
In this first example, I will take the string `"JS is fun"`. Here, I will use the `split()` method without any **separator** or **limit** and return the value of the whole array. Let's see.
```js
const str = "JS is fun"
str.split()
// ["JS is fun"]
```

### Let's split into individual words and characters
In this second example, I will use the same string as the above example. Here, I will split the string into individual words.
```js
const str = "JS is fun"
str.split(' ')
// ["JS", "is", "fun"]
```
Now let's split them into individual characters including spaces
```js
const str = "JS is fun"
str.split('')
// ["J", "S", " ", "i", "s", " ", "f", "u", "n"]
```
### Now let's introduce `limit` parameter
**This is a completely optional parameter**
In this example, I have used the same string as above examples. Here, in this case I will be add `limit` parameter to the `split()` method
```js
const str = "JS is fun"
str.split(' ', 1)
// ["JS"]
```
***
Thank you for reading, have a nice day!

![Have a nice day.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642086620246/trLPKY6le.png)
- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
Search for any comments in the Rick Roll music video
Tags: atlashackathon, mongodb
Published: 2022-01-13 16:20:31

---
title: Search for any comments in the Rick Roll music video
published: true
description: My submission to the MongoDB Atlas Hackathon on DEV!
tags: atlashackathon, mongodb
---

### Overview of My Submission

The main idea of the app is a filter feature for YouTube video comments. I sometimes do `CMD + F` and look for particular comments and I thought it would be fun to make an app that filters out only comments I'm interested in.

In my app, any user can search for comments in the popular rick roll video – Rick Astley's Never Gonna Give You Up.  There was restrictions in getting all the comment data however, due to the API quota restrictions. There's also the fact that there are new comments to the video every single day (2,047,723 comments as of the day this article is published)

Nonetheless, I was only able to get ~1 million comments, which I believe is more than enough for this little side project.

To build the web app, I used streamlit because it's easy to use and is great out-of-the-box. It has well designed components and I don't have to worry about web dev. 

To build the search functionality, I used MongoDB Atlas Search, which was great and simple to set up. I loved the fact that I could test my search index before writing any code.

You can try out the app in the link below

https://share.streamlit.io/benthecoder/yt-comments-mongodb-search/main/yt_comments/app.py

### Submission Category: 

Choose Your Own Adventure


### Link to Code

[Github Repo](https://github.com/benthecoder/yt-comments-mongodb-search)


### Additional Resources / Info

App result for the query - "rickrolled"
![rickrolled query result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16npsxau6a5nx8jhbx0z.png)

data frame output of result

![data frame output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrsxvbcdpy45281t2x90.png)
 
App result for query - "music"
![music query result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8ocrr4q54pnrmo94qh4.png)
My city's climate - historical weather data viewer
Tags: javascript, atlashackathon, mongodb, react
Published: 2022-01-13 16:09:10

### Overview of My Submission
"My city's climate" is a free online viewer for historical weather data of Poland. The web application is a simple way to get information about temperature and precipitations in a long time.

The application is a web map. The map displays weather stations as a points. If you click on the point will be opened color calendar. The calendar will be painted in different colors to indicate the respective weather characteristics.

The application was published on GitHub Pages. You can open it by link [https://karavanjo.github.io/mcc-frontend/](https://karavanjo.github.io/mcc-frontend/).

#### Data

The application uses public historical weather dataset IMGW-PIB. 
You can explore the dataset on a page of Institute of Meteorology and Water Management by [link](https://danepubliczne.imgw.pl/).

#### Technical notes

The app built with React and D3. It's uses MongoDB Atlas as back-end. The app uses Time Series Collections for weather observations data storing.

To import initial data was created a console application using python and PyMongo.

### Submission Category: 
Prime Time

### Link to Code

#### Front-end application
{% github https://github.com/karavanjo/mcc-frontend %}

#### Import tool
{% github https://github.com/karavanjo/mcc-import %}


### Additional Resources / Info

#### "My city's climate" in a web browser
{% youtube etx4T0CiQsM %}