teleren/devto huggingface dataset:
An editor for technical writting, blogging and note taking using markdown
Tags: markdown, notes
Published: 2024-02-01 09:11:42

---
title: An editor for technical writting, blogging and note taking using markdown
published: true
date: 2024-01-07 00:19:00 UTC
tags: Markdown,Notes
canonical_url: https://reactjsexample.com/an-editor-for-technical-writting-blogging-and-note-taking-using-markdown/
---

# ⌘ Writter
 ![An editor for technical writting, blogging and note taking using markdown](https://reactjsexample.com/content/images/2023/12/Code_2023-12_11-14-12.jpg)

![An editor for technical writting, blogging and note taking using markdown](https://github.com/Hussseinkizz/writter-desktop/raw/main/public/writter-desktop-alpha.png)

An editor for technical writting, blogging and note taking using markdown.

> Version: v0.0.1 Alpha

## Why?

well why not, most editors around are focused on non technical people, they have drag and drop and notion style experience which is all good, but that is a bit limitting to a technical person who just wants to document things up easily and with full control, now this is where writter comes in, create your markdown files and do anything you want with them, a cloud backup solution will be available but just optional. This geared towards local first, simplicity and full control over how you write your stuff.

## Features And Roadmap

- Save files locally
- Sync files accross devices and cloud backup
- All markdown feature support
- AI auto completions (smart mode)
- Spell and grammar checking
- Auto save feature
- Intuitive UI
- File Size
- Builtin markdown guide
- Web Version
- Keyboard shortcuts

## Development

Setup: clone repo, `pnpm install` and then `pnpm run dev2` to start development server!

## Project Tech Stack

- Monaco Editor (Vscode Editor Engine, Used For Editing Markdown)
- Tauri (Rust + Webview Desktop Development Framework)
- Supabase Backend (For Cloud Backups Infrastructure)
- React Js + Vite (With Typescript, Frontend)
- Shadcn UI Tailwind CSS components library (New York Style)
- Eslint (Recommended Settings)
- Prettier (With Tailwind Plugin To Auto Sort Classes)
- Better Commits (CLI Tool For Conventional Commits Compliance)

And Others Based On [Sleek Stack](https://github.com/Hussseinkizz/writter-desktop/blob/main/SleekStack.md)

## What Next?

Well this is my side project and open source so feel free to contribute, reach to me at [hssnkizz@gmail.com](https://github.com/Hussseinkizz/writter-desktop/blob/main/hssnkizz@gmail.com) for any ideas or so, this is work in progress too, don’t over expect at this point, thanks!

## GitHub

[View Github](https://github.com/Hussseinkizz/writter-desktop?ref=reactjsexample.com)
100 Days of LeetCode: A Journey Towards Mastering Coding Skills
Tags: leetcode
Published: 2024-01-07 00:54:02

Have you ever felt the rush of excitement when you crack a complex problem or experience the satisfaction of finding an elegant solution to a tricky puzzle? Welcome to my journey through 100 days of LeetCode—a challenge that transformed my coding skills and problem-solving mindset.

**Day 1: The Beginning**
I embarked on this journey with zeal and determination. Starting with fundamental algorithms, I solved simple problems involving arrays, strings, and basic data structures. The key was not just finding solutions but understanding their efficiency and optimizing where possible.

**Days 2-20: Building Momentum**
As days passed, I encountered increasingly intricate problems. Dynamic programming, tree traversal, and graph algorithms became my daily companions. Each challenge brought its own set of learnings—mistakes were made, but each mistake was a step towards improvement.

**Days 21-50: Facing Challenges**
The middle phase was the toughest yet most rewarding. Problems seemed daunting, requiring hours of brainstorming, sketching out approaches, and debugging code. Yet, with persistence and a positive mindset, I saw gradual improvement. Repeated exposure to different problem patterns honed my intuition.

**Days 51-80: Reaping Rewards**
By this point, the struggles started to pay off. Familiarity with various problem types led to quicker problem-solving. Concepts that seemed alien initially became second nature. Discussions on LeetCode forums and participating in coding communities provided invaluable insights and support.

**Days 81-100: The Summit**
Approaching the finish line, I tackled some of the most challenging problems. Advanced topics like backtracking, hard graph problems, and complex data structures were no longer intimidating. Confidence surged as I saw myself not just solving problems but grasping the elegance of efficient solutions.

**What I've Gained:**
Problem-solving Skills: Learning to break down complex problems into smaller, manageable chunks.
Coding Efficiency: Writing cleaner, more optimized code with improved time and space complexity.
Resilience: Developing patience and perseverance in the face of challenging problems.
Community Engagement: Engaging with coding communities, discussing approaches, and learning from others.

**The Takeaway**
My 100-day journey on LeetCode was more than just solving coding problems—it was a transformative experience. The skills and mindset cultivated during this challenge extend far beyond coding itself. The discipline, persistence, and problem-solving mindset acquired are invaluable in various aspects of life.

As I conclude this exhilarating journey, I'm reminded that learning is a continuous process. Whether you're a seasoned coder or just starting, the joy of learning and growing never ceases. If you're considering taking on a challenge like this, I highly recommend it. Embrace the challenges, celebrate small victories, and trust the process—the rewards are truly worth it!

**So, what's next?** More challenges, more learning, and the undying spirit of growth!
Tailwindcss version of Looms's beautiful Emoji Toolbar React component
Tags: emoji
Published: 2024-02-01 09:12:07

---
title: Tailwindcss version of Looms's beautiful Emoji Toolbar React component
published: true
date: 2024-01-07 00:18:00 UTC
tags: Emoji
canonical_url: https://reactjsexample.com/tailwindcss-version-of-loomss-beautiful-emoji-toolbar-react-component/
---

# loom/reactions
 ![Tailwindcss version of Looms's beautiful Emoji Toolbar React component](https://reactjsexample.com/content/images/2023/12/Code_2023-12_11-13-04.jpg)

This is the open-source Tailwindcss version of Looms’s beautiful Emoji Toolbar React component to react to anything.

![Tailwindcss version of Looms's beautiful Emoji Toolbar React component](https://github.com/mfts/reaction-demo/raw/main/.github/img/demo.gif)

## Demo

View the demo here: [https://reaction-demo.vercel.app](https://reaction-demo.vercel.app)

## Installation

### Requirements

- `tailwindcss`
- `tailwindcss-animate`

It’s pretty easy to install. I made it a standalone component that you can copy in your codebase.

1. Copy the `toolbar` component

2. Add keyframes and animation to your `tailwind.config.ts`

3. Import into your page

4. Change the emojis in the `REACTIONS` object in `toolbar.tsx`

## Future Ideas

- `onClick` handler
- `size` prop to adjust the size of the toolbar
- dark mode support

## Inspiration

- Thanks to the [@loom](https://x.com/loom) design team for the awesome component.
- Thanks to [@shadcn](https://x.com/shadcn) who gave me a new joy for UI design.

## GitHub

[View Github](https://github.com/mfts/reaction-demo?ref=reactjsexample.com)
Del caos a la eficiencia: Descubre el poder de DevOps
Published: 2024-01-07 00:10:03

Entra en el mundo de DevOps.

En nuestro último video, exploramos cómo esta filosofía revoluciona la colaboración entre equipos de desarrollo y operaciones. Descubre cómo la integración temprana, la automatización y la entrega continua están redefiniendo la eficiencia en el desarrollo de software.

[Del caos a la eficiencia: Descubre el poder de DevOps](https://youtu.be/_i4-FgPZm_8)

Un vídeo imprescindible para entender cómo DevOps impulsa la innovación y mejora la experiencia del usuario o usuarios final.

Gana $50 USD dolares en créditos de AWS mientras aprendes sobre DevOps y AWS en español.
Del caos a la eficiencia: Descubre el poder de DevOps
Published: 2024-01-07 00:07:17

Entra en el mundo de DevOps.

En nuestro último video, exploramos cómo esta filosofía revoluciona la colaboración entre equipos de desarrollo y operaciones. Descubre cómo la integración temprana, la automatización y la entrega continua están redefiniendo la eficiencia en el desarrollo de software.

[Del caos a la eficiencia: Descubre el poder de DevOps](https://youtu.be/_i4-FgPZm_8)

Un vídeo imprescindible para entender cómo DevOps impulsa la innovación y mejora la experiencia del usuario o usuarios final.

Gana $50 USD dolares en créditos de AWS mientras aprendes sobre DevOps y AWS en español.
How Will GPT Evolve in 2024?
Published: 2024-01-07 00:00:00

---
published_at : 2024-01-07 00:00 +0000
---
How do you envision the ongoing evolution and development of GPTs in 2024? Share your insights on potential applications and improvements for GPT models in the coming year!
<br>
Follow the DEVteam for more discussions and online camaraderie!
{% embed https://dev.to/devteam %}
Caption This! 🤔💭
Published: 2024-01-07 00:00:00

---
published_at : 2024-01-07 00:00 +0000
---
Calling all clever minds! Put your thinking caps on and drop the most hilariously brilliant caption to unravel the story hiding in this snap.
![A Yield Sign with a person walking into it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/japtpqwjwhwcf9ph2de3.jpg)

Follow the DEVteam for more online camaraderie! {% embed [https://dev.to/devteam](https://dev.to/devteam) %}
writing endings that are not lame
Tags: gamedev, writing
Published: 2024-02-25 21:27:37

---
title: writing endings that are not lame
published: true
date: 2024-01-07 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20240107-1524-writing-endings-that-are-not-lame/
---

For some reason, many game writers tend to create **good** and **bad** endings.

If the player does the morally right thing, or what the writer wants, they get the **good** endings.

If they do something else, they get the **bad** ones.

I'm not talking about _early endings_, I actually like them if they are well written.

I'm referring to endings where the player succeeds in their objective, where everything ends well.

**Slay the Princess** laughs at this, and if you do everything the narrator tells you, you get the "Happy Ending".

I really liked that they did that, especially since the most interesting thing in the game is navigating between trusting and mistrusting the narrator.

Why not use the opportunity of different endings to **give more and better information** about a complex plot?

Why not let the player make decisions and have the ending be **the projection of those decisions**?

Let each decision have a consequence, whether it's good or bad, but **not be morally judged beforehand**?

One way to approach this is with [rhizomatic foreshadowing](https://dev.to/onwritinggames/rhizomatic-foreshadowing-45eo), but you don't have to be so meticulous.

It's enough to have endings designed to **not be so binary**.

Players are already expecting things that go beyond basic morality of good and bad, success or failure. [**Let them eat cake**](https://dev.to/onwritinggames/a-playtesting-session-1gp3)!
Intertwine: Communication with Instant Messaging and VoIP
Tags: webdev, typescript, nextjs, react
Published: 2024-01-06 23:57:57

**Project Overview**:
Intertwine isn't just another messaging platform, it's a comprehensive social platform redefining communication through instant messaging, voice calls, video calls, and seamless file sharing. Whether in private conversations or virtual communities known as "servers," Intertwine offers a versatile communication space.

### Demo Images

#### Themes

- **Dark Mode**  
![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc5c4xrgfasrqvfcbuj0.png)
- **Light Mode**  
 ![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnx0dnz4awp69bzyh8sk.png)

#### Features

- **Video Channels**  
![Video Channels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7639flivi5mqwugc56n.png)
- **Voice Channels**  
 ![Voice Channels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4rq2xak2rpmqgd0ejjp.png)
- **Text Channels**  
 ![Text Channels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slxy9xsfou03nsdd7pqp.png)
- **Video Calls/Screen Sharing/Chat/Conference**  
  ![Conference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11ngfrrog745ih2m1wsb.png)
- **Shortcut Keys for server navigation**  
  ![Shortcut Keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21yr8hmrmz2oe00qarmv.png)
- **Upload and share files**  
  ![Upload and share files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hbc811a854abc1bnext.png)
- **Customization and other settings**  
  

#### Other Features

- Real-time updates
- Authentication
- Instant Messaging
- Media and Files
- Servers
- Channels
- Roles
- Permissions
- Emojis
- Reactions
- Mentions
- Search
- User Profiles
- User Settings
- Server Settings
- Server Invites
- Server Bans
- Server Members
- Server Roles
- Server Channels
- Server Emojis
- Server Integrations
- Server Moderation
- Server Verification

## Tech Stack

- React
- Next.js
- TypeScript
- TailwindCSS
- Shadcn-iu
- Socket.io
- Clerk
- Prisma
- PostgreSQL
- Supabase
- LiveKit
- Tanstack/react-query
- Uploadthing/react
- Axios
- Zod
- Zustand

Explore and Contribute:

- GitHub Repository: [Intertwine](https://github.com/RicardoGEsteves/Intertwine)
- Discover the Projects: [RicardoGEsteves](https://github.com/RicardoGEsteves)

Intertwine is more than a messaging platform; it's a sophisticated ecosystem reshaping communication paradigms. Dive into the repositories, explore the codebase intricacies, and witness the evolution of communication technology.

Follow and star the repositories, contribute your expertise, or engage in discussions to be part of this journey towards redefining communication landscapes with Intertwine!
SprintEase: For Agile Development B2B SaaS Platform
Tags: typescript, nextjs, react, webdev
Published: 2024-01-06 23:40:35

**Project Overview**:
SprintEase isn't just a project; it's a paradigm shift in agile work management. As a B2B SaaS (Business to Business Software as a Service) tool, SprintEase offers unparalleled flexibility in managing agile development workflows.

**Tech Stack Prowess**:

- **Frontend Technologies**: Crafted using React, Typescript, and Next.js 14, SprintEase delivers a dynamic, scalable, and type-safe frontend. Tailwind CSS and Shadcn-ui elevate the platform's UI, ensuring intuitive user experiences.
- **Authentication and User Management**: Clerk handles seamless authentication, ensuring a secure and frictionless user management system.
- **Backend Infrastructure**: Built on Supabase and PostgreSQL, SprintEase boasts a robust backend, ensuring data reliability and scalability.
- **State Management**: Zustand facilitates streamlined state management, enhancing data flow and application responsiveness.
- **ORM and Validation**: Prisma and Zod contribute to efficient data handling and validation, maintaining data integrity and reliability.
- **Server Actions**: Leveraging server actions, SprintEase ensures efficient server-side operations for seamless functionality.
- **Payments Integration**: Stripe enables secure and hassle-free payment processing within the platform.
- **Communication and Notifications**: Sonner handles communication channels, ensuring seamless interactions and notifications.

**Prerequisites**:

- Node version 18.x.x is a prerequisite for SprintEase development.

**Exploration and Engagement**:

- Landing Page: 
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf93hcj63lnoljy08sdh.png)

- Platform:
![Board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfoir7xggwbmaatqq3wx.png)


- GitHub Repository: [SprintEase](https://github.com/RicardoGEsteves/SprintEase)
- Discover the Projects: [RicardoGEsteves](https://github.com/RicardoGEsteves)

SprintEase isn't just another work management tool; it's a testament to technical innovation and efficiency. Dive into the repositories, explore the intricacies of the codebase, and witness the transformative power SprintEase brings to agile development workflows.

Follow and star the repositories, contribute your expertise, or engage in discussions to be part of this pioneering journey towards redefining agile work management with B2B SaaS technology!
🌲 Navigating the Depths: DFS for General Trees Using Stacks! 🎥
Tags: algorithms, beginners, programming, tutorial
Published: 2024-01-06 23:16:57

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

Hello fellow coders! In my latest video, we dive into the intricacies of the Depth First Search (DFS) algorithm specifically tailored for general trees. Join me as we explore the nuances of DFS with stacks, unraveling the mysteries of tree traversal in the process.

🎥 Dive into the video here: https://youtu.be/r0k7iRssAkk?si=wKOjg_yrGuW-C782
🎥 DFS Using Stacks (Binary Tree): https://youtu.be/dXYsXgf9Em8?si=YJ99a6W1goE1skNp
🔗 Access the code on GitHub: https://github.com/Vinay352/Leetcode_Complete_Solution/blob/main/CreateBinaryTree_DFS_BFS.java

Feel free to drop your questions and insights in the comments. Let's master DFS for general trees together! 💡🌳

Stay connected:
🎥 YouTube: https://www.youtube.com/@VinayJainDev3097
📚 Medium: https://medium.com/@vinay.j3097
📝 Dev.to: https://dev.to/vinay_jain_dev
🔗 GitHub: https://github.com/Vinay352
🐦 Twitter: https://twitter.com/vinayj3097
📸 Instagram: https://www.instagram.com/vinay_jain_dev/
📘 Facebook: https://www.facebook.com/vinayj3097/
Omniscient: AI SaaS Platform
Tags: typescript, nextjs, react, webdev
Published: 2024-01-06 23:11:23

**Project Overview**:
Omniscient isn't just a project; it's a testament to the fusion of cutting-edge technology and visionary innovation. It stands tall as a Software as a Service (SaaS) AI Platform, revolutionizing the landscape of intelligent applications.

**Tech Stack Mastery**:
- **Frontend Technologies**: Driven by Next.js 14, React, and Typescript, Omniscient offers a robust, performant, and type-safe frontend architecture. Tailwind CSS and Shadcn-ui adorn the UI, ensuring a polished and customizable user experience.
- **AI Integration**: Leveraging the power of OpenAI API and Replicate API, Omniscient delves into the realms of artificial intelligence, harnessing its capabilities for groundbreaking functionalities.
- **Authentication and User Management**: Clerk handles authentication seamlessly, offering a secure and hassle-free user management system.
- **Database and ORM**: Prisma, along with Postgres as the database of choice, provides a reliable ORM layer, ensuring efficient data handling and management.
- **Supabase and Zod**: Supabase bolsters the backend infrastructure, while Zod brings robust validation to the application's data layer.
- **State Management**: Zustand facilitates state management, streamlining data flow and ensuring application responsiveness.
- **Payments and Communication**: Stripe handles secure payments, while Crisp enhances communication channels, ensuring seamless user interactions.
- **API Communication and Forms**: Axios handles API communication, React Hook Form simplifies form handling, and React Hot Toast offers intuitive notifications.
- **Content Rendering**: Omniscient uses React Markdown to render dynamic content effortlessly.

**Technical Depth**:
- **AI-Powered Features**: Integration with OpenAI API and Replicate API allows Omniscient to harness the power of AI for advanced functionalities, setting it apart in the AI platform domain.
- **Scalability and Security**: Built with scalability in mind, the application ensures robust security measures across all layers, maintaining data integrity and user privacy.

**Exploration and Collaboration**:
- GitHub Repository: [omniscient](https://github.com/RicardoGEsteves/omniscient)
- Discover the Projects: [RicardoGEsteves](https://github.com/RicardoGEstevess)

Omniscient isn't just a project; it's a testament to technical prowess and visionary innovation. Delve into the repositories, explore the intricacies of the codebase, and witness the groundbreaking fusion of AI and SaaS technology.

Follow and star the repositories, contribute your expertise, or engage in discussions to be part of this pioneering journey towards redefining AI-powered SaaS applications!
Digital Marketplace
Tags: typescript, nextjs, react, webdev
Published: 2024-01-06 23:04:55

**Project Overview**:
Digital Marketplace stands as a testament to the culmination of sophisticated technology and innovative design, serving as a comprehensive e-commerce full-stack Software as a Service (SaaS) application.

**Tech Stack Mastery**:
- **Frontend Technologies**: Powered by Next 14, React, and Typescript, Digital Marketplace offers a responsive, scalable, and type-safe frontend architecture. Tailwind CSS and Shadcn-ui contribute to its aesthetic appeal and customizable UI components.
- **State Management Prowess**: Leveraging React-query and Zustand, this application ensures efficient state management, optimizing data flow and enhancing user interactions.
- **Backend Infrastructure**: Built on Express and MongoDB, the backend of Digital Marketplace is robust, providing a scalable and dynamic foundation for seamless operations.
- **CMS and Integration**: Payload CMS serves as the backbone for effortless content management, while Trpc facilitates efficient communication between client and server.
- **Payment Security**: Integrating Stripe ensures top-notch payment security, enabling smooth and secure transactions.
- **Validation and Forms**: Zod and React-hook-forms add a layer of validation and ease to form handling, enhancing user experiences.
- **Email Functionality**: Utilizing Nodemailer, Resend, and Sonner, Digital Marketplace delivers sophisticated email functionalities for comprehensive user communication.
- **Enhanced UI Elements**: Lucide-react and Swiper contribute to enriching the user interface, adding interactive elements and smooth navigation.

**Development Workflow**:
- **Local Setup**: Initiate the development server using `npm run dev`, `yarn dev`, `pnpm dev`, or `bun dev`.
- **Environment Configuration**: Create an `.env` or `.env.local` file to store crucial keys and configurations for a secure environment setup.

**Technical Highlights**:
- **Scalability and Extensibility**: Built with a modular approach, Digital Marketplace is scalable, accommodating future enhancements and expansions effortlessly.
- **Performance Optimization**: Leveraging the strengths of Next 14 and React-query, the application boasts optimal performance, offering blazing-fast rendering and data fetching.
- **Security Measures**: From payment handling with Stripe to data management with MongoDB, robust security measures are integrated across the application stack.

**Connect and Explore**:
- GitHub Repository: [next-digital-marketplace](https://github.com/RicardoGEsteves/next-digital-marketplace)
- Discover the Projects: [RicardoGEsteves](https://github.com/RicardoGEsteves)

The Digital Marketplace isn't just an e-commerce platform; it's a culmination of technical excellence and innovation. Dive into the repositories, explore the intricacies of the codebase, and witness the meticulous craftsmanship powering this state-of-the-art application.

Follow and star the repositories, contribute your expertise, or engage in discussions to be part of this journey towards redefining e-commerce experiences through technology and innovation!