This year, I had the incredible opportunity to attend the GNOME Asia Summit 2024 in Bengaluru as a contributor. Looking back, it feels like a full-circle moment. Last year, I was a volunteer at GNOME Asia Summit 2023, which was held in Nepal. I helped with content writing, social media management, and various other tasks, and it was such an inspiring experience.

After the summit in Nepal, GNOME Nepal was officially formed, and I became one of the leading contributors right from the start. I led the team to build our community website along with hosting it in own GNOME domain(nepal.gnome.org) and took on technical responsibilities. Now, as a GitHub maintainer, I review pull requests, propose new features, and assist developers who want to contribute.

Acknowledging these contributions, I was sponsored to attend the GNOME Asia Summit 2024 in Bengaluru. The journey, the summit, and everything in between were unforgettable, and I’m excited to share my experience!

Journey to Bengaluru

My journey to Bengaluru for the GNOME Asia Summit 2024 started with a lot of excitement and a bit of adventure. I traveled with my fellow speakers, Anuroj and Siddharth. We first flew from Kathmandu to Jhapa, where we stayed for the night. The next day, we headed to Bagdogra to catch our flight to Bengaluru.

Our flight was scheduled for 2:15 PM, but, as travel often goes, it was delayed by two hours. Despite the delay, the excitement kept our spirits high, and we finally landed in Bengaluru at 7 PM. That night, we decided to explore the Bengaluru streets.

We ended up eating the famous Hyderabadi Biryani. It was such a flavorful and satisfying meal—a perfect way to kick off the summit experience. The night out gave us a chance to unwind, bond, and get a taste of Bengaluru’s vibrant food culture, setting a great tone for the days ahead.

The Summit Experience

We started Day 1 of the summit by heading to the conference location at the Red Hat office in the Carina building block. After registering, we received our swags—stickers, pins, and more—and then it was time for the talks to begin.

Day 1:

I attended some amazing sessions from speakers like Jona Azizaj, Smera Goel, Akaashdeep Dhar, Naveen Kumar, and many more. Each talk was insightful, and I learned a lot about GNOME and the open-source community.

Later, we had the Fedora release party, where there were great swags and delicious rolls (both vegetarian and non-vegetarian) for lunch. The sessions continued after that, and I also got to hear talks from Nepalese speakers, which was a proud moment for me.

There was also coffee vending machine sponsored by Red Hat Pvt. Ltd. It kept us energized throughout the day and was definitely a cherry on top. On that day, we also helped Aryan Kaushik to plan the Ubuntu release party. We found the perfect venue called Toit, which turned out to be a really comfy place.

After the first day wrapped up, we headed back to the hotel to freshen up and then went out for dinner. We ate dosa and sambar, which was light, delicious, and became one of my favorite meals (right after biryani from the night before).

Day 2:

The second day was just as packed with great sessions. I attended talks by Aryan Kaushik, Sumantro Mukherjee, Om Prakash Sharma, and Samyak Jain. And of course, we had more coffee from Red Hat to keep us going.

In the evening, we had the Ubuntu release party at Toit, where we cut a cake and enjoyed some tasty pizzas, all thanks to Aryan for treating us! It was a perfect way to end a busy day, surrounded by fellow contributors and speakers.

Both days were filled with inspiring sessions, great food, and the best part—connecting with amazing people in the open-source community!

After a busy day of sessions, we headed out to explore Bengaluru. We first stopped for Haradadi Biryani. Then, we visited a coffee shop, where we played games like Jenga and relaxed. It was a fun, chill evening that gave us a chance to bond with fellow speakers and contributors before getting ready for the next day of the summit.

Day 3:

It was an trip with fellow speakers and GNOME Foundation members. After two intense days of conference sessions, we took some time to explore Bengaluru’s sights. We started by visiting the Bengaluru Museum, where we got a chance to learn more about the technology and culture.

The day was full of sightseeing, and it was a great way to relax and enjoy some downtime with people we had met during the summit. We visited other local attractions and shared stories, experiences, and laughs.

In the evening, we(Me, Aaditya and Sailesh) went out again to explore Bengaluru by night. We sipped on Puneri chai and tried some delicious local street food, enjoying the vibrant atmosphere of the city. We clicked pictures, chatted, and made more memories. It was an awesome end to a fantastic day, wrapping up a trip I’ll never forget!

Closing Remarks

Attending the GNOME Asia Summit 2024 in Bengaluru was an unforgettable experience. From the incredible sessions and networking with open-source enthusiasts to the fun nights out exploring the city, every moment was memorable. I’m grateful for the opportunity to connect with so many amazing people, learn from inspiring talks, and be part of a community that’s truly passionate about making a difference in the tech world.

Why did I build gc?

The idea for gc came from a common developer struggle: writing good commit messages. During one of my collaborative projects, I noticed how unclear and inconsistent commit messages caused confusion. Some were too vague, like “fix stuff,” while others were unnecessarily long. This made it hard to understand the changes when revisiting the code or working with the team.

I wanted to solve this problem by making commit messages simpler and smarter. With AI becoming more accessible, I realized it could help automate this task. The goal was to create a tool that saves time, ensures meaningful commit messages, and lets developers focus on coding instead of worrying about what to write in their Git commits.

gc is my solution: an AI-powered CLI tool that generates clear and context-aware commit messages, but still gives you the flexibility to customize them. It’s all about making Git workflows smoother and reducing stress for developers.

Usage

gc is a globally installable Node.js package designed to make your Git workflow smoother. It’s easy to set up and works seamlessly with any Git repository.

Installation

To install gc, make sure you have Node.js (v16 or higher) and Git installed. Then, run:

npm install -g @utsavdotdev/gc

That’s it! The tool is now ready to use.

Commands

• Generate Commit Messages

    gc new
  

  Get AI-generated commit message suggestions and select or edit the one you like.

• Write Custom Commit Messages

    gc new -c
  

  Manually input your own commit message.

• Privacy Settings

    gc opt-in  
    gc opt-out
  

  Choose whether to share anonymous data to help improve the tool.

• Help

    gc --help
  

  View a detailed list of commands and how to use them.

Usage

Using gc is as simple as these three steps:

1. Stage Your Changes
   Before running gc, add your changes to the staging area using: git add .

2. Generate or Write a Commit Message

   To let AI suggest commit messages, use: gc new

   

   To write a custom commit message, use: gc new -c

   

3. Commit or Copy the Message
   Once you have your message ready, you can:

   • Copy it to your clipboard for later use.

   • Open and edit it in your preferred CLI editor to make additional adjustments.

   • Commit it directly to your repository.

Development Process

Creating gc was an exciting journey that involved several steps to ensure it was useful, reliable, and user-friendly. Here’s a breakdown of the development process:

Stage 1 - Research

To kick off the project, I started by looking into existing solutions like ai-commit and aicommits. Both are CLI tools designed to generate AI-powered commit messages. While they are useful, I noticed a few areas where they could be improved:

• Customization: These tools lacked flexibility for users to edit messages easily during the workflow.

• Interactive Features: I wanted a more interactive and user-friendly experience for selecting, editing, or copying messages.

• Privacy Options: I felt it was important to give users clear control over anonymous data sharing(experimental)

This research gave me a solid foundation and clear direction for building gc, focusing on making it smarter, more flexible, and better suited to developers’ needs.

Stage 2 - Gathering Tech Stack

Since the hackathon was organized by Modus, using their platform for building functions and APIs was a mandatory requirement. Modus integrated Models provided the foundation for generating context-aware commit messages, and integrating it became a key part of the project.

For other aspects of the project, I carefully selected tools to ensure efficiency and scalability:

• Next.js: To build a sleek and responsive website for showcasing gc.

• Node.js: The backbone of the CLI tool for its performance and simplicity.

• Inquirer.js: To create interactive prompts for a seamless user experience.

• Commander.js: For command-line argument parsing and structuring the CLI commands.

• Clipboardy: To enable copying generated commit messages directly to the clipboard.

• Simple-Git: To interact with Git repositories programmatically.

Stage 3 - Building Client Side

The first step in building the client-side was creating the CLI tool, as it’s the core feature of gc. I focused on ensuring the tool was simple to use and provided a seamless experience for developers. Key features like AI-powered commit suggestions, custom messages, and clipboard integration were implemented during this phase.

After finalizing the CLI tool, I moved on to designing the landing page using Next.js and TailwindCSS. The landing page includes a mock terminal box, where users can interact with predefined commands such as:

• gc info: Displays information about the tool.

• gc features: Lists the key features of gc.

• gc commands: Shows a quick reference for all available CLI commands.

• cls or clear: Clears the terminal screen.

Stage 4 - Integrating Modus

Integrating Modus was a crucial step in the development of gc. This was my first experience with Hypermode and Modus, so I started from scratch. I began by watching the collaborative YouTube video between Hypermode and Hashnode, which helped me understand the basics. Then, I dive into the documentation, exploring code snippets provided by Hypermode. Initially, it was overwhelming, and I felt completely lost. To clear my mind, I decided to focus on completing the client-side part of the project first.

Once I felt refreshed, I returned to setting up Modus, following the documentation step by step. I was able to successfully set it up and generate a simple GraphQL API for a "hello message" function. Thankfully, GraphQL wasn’t new to me, as I had worked with it previously while experimenting with the Hashnode API.

Next, I explored the models I would need. I initially tried using an external model by adding it to the modus.json file, but I encountered limitations due to free credits running out after testing. Fortunately, I discovered that Hypermode also hosts some models, which worked much better for my needs and provided valid responses.

After that, I wrote a function that takes a prompt and the Git diff output, then returns an array of commit messages. To fine-tune this function, I tested it approximately 100-130 times, iterating on the prompt to get the most accurate results. However, I ran into a challenge when the service suddenly crashed, showing a 503 error. Fortunately, the Modus team resolved the issue within a couple of hours.

Once everything was up and running, I fine-tuned the responses from the model and displayed them to the user in a clear and meaningful way. This integration of Modus into gc was a key step in making the AI-powered commit message feature come to life.

Stage 5 - Deployment

When it came to deploying Modus, I initially thought it would be a difficult process. However, once I aligned everything in the right way, it turned out to be much easier than I expected.

For the landing page, I hosted it on Vercel, which was quick and simple, allowing it to be live right away.

The CLI tool was published on the npm package registry, making it easy for others to install and use.

As for the Modus functions and APIs, I had to link my GitHub repo to Hypermode using the command:

hyp link

Once linked, it automatically updated the Modus app's endpoints with each commit and provided a production-ready API accessible with the Hypermode API key. This process was surprisingly easy and worked smoothly once everything was set up properly.

Problem Encounter

During the development of gc, I faced a few challenges that required some problem-solving and adjustments:

1. Modus API Crashes: While testing the integration with Modus, I encountered an issue where the API returned a 503 error. It turned out that this was caused by an overload in requests. Fortunately, the Modus team fixed the issue within a couple of hours, allowing me to continue working without major delays.

2. External Model Limitations: I initially tried to use an external AI model for generating commit messages by adding it to the modus.json file. However, after running out of free credits, I had to find an alternative. Luckily, Hypermode hosted models that worked well, and I was able to use those instead.

3. Fine-Tuning AI Responses: Getting the AI model to generate relevant commit messages based on Git diffs was challenging. I had to test the prompt multiple times—about 100-130 attempts—to refine it and ensure that the responses were meaningful. Even after that, I had to fine-tune the model’s outputs to match the expected results.

Links

• 🖥️ GitHub Repository: utsavdotdev/gc

• 🌐 Website: gc

Conclusion

Building gc was a great experience, and I’m happy with how it turned out. It’s a tool that helps developers generate meaningful commit messages using AI, making workflows smoother and more efficient.

A huge thank you to Hashnode and Hypermode for organizing this hackathon and providing the tools and support that made this project possible. 🚀

🚀 Meet our Team

Hi! I’m Utsav Bhattarai 👋, and I’ve teamed up with my friend Rajesh Khadka and our video wizard Bishesh Marasini to bring you AI-KYC. We’re thrilled to share our latest project with you. AI-KYC is an innovative app designed to make the KYC process smarter and simpler.

Connect with us:

• Utsav Bhattarai: Email | LinkedIn | Github

• Rajesh Khadka: Email | LinkedIn | Github

• Bishesh Marasini: Email | LinkedIn | Github

We’d love to hear from you and show you how AI-KYC is changing the game in identity verification!

💡 Project Overview

AI-KYC is an innovative web-based application designed to simplify the KYC (Know Your Customer) process for organizations/ Business. It allows orgs to effortlessly create and customize KYC forms directly on the platform. Once KYC forms are set up, the application generates unique links for the respective form that can be shared with end users, who can then fill out the KYC forms with ease. Our machine learning models then work behind the scenes to verify identities by matching document's face with their live selfie.

The platform features a user-friendly dashboard for managing submissions, exporting data to Excel, and viewing key statistics. With JWT authentication, AI-KYC ensures secure and reliable data handling throughout the process.

🔥 Why we did this project

In today's business landscape, whether it’s a startup, big company or any organization, Know Your Customer (KYC) verification is essential. However, hiring multiple employees for manual verification (in most of the cases) is costly and inefficient. So, to reduce this problem to some extent, we decided to build this application as a hackathon Project.

Our innovative solution automates the KYC process, allowing businesses and organizations to integrate a powerful AI-driven system that eliminates the need for a large verification team. AI-KYC verifies users in under a minute, reducing costs, enhancing accuracy, and freeing up resources to focus on growth. After investing a little more time on this, we believe we can come up with it’s refined version.

🔧 Tech Tools

🎨 Frontend:

• Vite with React: Fast and optimized development setup using Vite and React.

• TailwindCSS: Utility-first CSS framework for rapid UI development.

• Shadcn UI: Comprehensive component library for consistent and customizable UI elements.

🌐 Backend:

• MongoDB: NoSQL database for flexible and scalable data storage.

• Express.js: Web application framework for building robust backend services.

• Node.js: JavaScript runtime environment for executing server-side code.

🤖 AI Tools:

• Gemini Vision API: Extracts details from documents using advanced AI.

• Face API.js Models: Real-time face comparison between selfies and document photos.

  • 68 Point Face Landmark Detection Model: Identifies key facial landmarks.

  • Face Recognition Model: Matches faces with high accuracy.

  • SSD Mobilenet V1: Object detection model for face localization and identification.

See all the ML modals used in this App here : Click here

✨Note: Our AI-powered bot works behind the scenes to handle user verification. It uses the above AI models and the Gemini API to analyze form submissions, compare selfies with document photos, and extract essential information for comparison. This ensures a smooth and accurate verification process, keeping everything secure and efficient.

👁️ Quick Glimpse

1. Hero Page

2. Feature Section

3. Dashboard Page

This page displays the list of forms created by the business organization.

4. Analytics Page

This page provides insights of the forms created by the organization.

5. Setting Page

6. User List Page

This sections shows the list of users who filled the respective KYC form.

7. KYC form Page

This is multi step form where user's fill their details.

👩‍💼 Architecture Diagram

✨ Highlighted Features

1. Form Creation:

Businesses and organizations can effortlessly create and customize KYC forms directly on our platform, to make the verification process more easier.

2. Create Unique Links

The application automatically generates a unique URL for each KYC form, which businesses and organizations can easily share with their end users. These links can also be integrated into existing systems, making it simple for users to access and complete the forms.

3. AI-Powered Verification

AI-KYC uses advanced machine learning algorithms to automatically verify and reject user submissions, ensuring accurate and efficient processing.

4. Real time Notification on Customers email

Users who fill out the form will receive real-time email notifications with their verification status within minutes. If their KYC submission is rejected for any reason, AI-KYC provides clear and valid reasons for the rejection as a remark.

5. Comprehensive Dashboard

AI-KYC offers a robust dashboard to manage and view KYC form submissions, helping organizations track and analyze responses effectively.

5. Export to Excel

Easily export form data to Excel files for seamless data manipulation and reporting.

6. Statistics Overview

Business/ Organization can gain valuable insights and improve processes with detailed statistics on KYC form submitted by end users.

7. Secure JWT Authentication

Our app uses JWT to protect user data across the server.

8. Modern, Responsive Design

Enjoy a sleek, modern design that is responsive across all devices, ensuring a smooth and user-friendly experience.

🛠️ Challenges

Adapting AI Models

Initially, we aimed to develop and train our own AI models locally. However, this required significant CPU, GPU, and memory resources, which our laptops couldn't handle. We decided to use per-trained models but faced issues with compatibility, particularly on Windows. Migrating to Linux helped, but finding the right models and integrating them was a challenging and frustrating process. Ultimately, we overcame these hurdles and successfully integrated the necessary AI models.

🎥 Video Creation and Presentation

Creating this video was a significant step for us, especially as introverts who faced challenges like multiple retakes and background noise. We wanted to clearly communicate our vision for AI-KYC and how our product can solve real-world problems. Committed to our idea, we believed that simply talking about it wasn't enough; we needed the world to visualize its potential.

A picture is worth a thousand words, so we chose to express our concept through a video. With the help of our friend Bishesh Marasini, who handled the video editing, we were able to bring our ideas to life and show the real-world application of AI-KYC. This video is not just an explanation but a visualization of our dedication and the impact we aim to make.

This pic reflects the video editing process.

🔮 Future Plans

1. Seamless Integration:

We plan to integrate AI-KYC directly into existing systems, making it easier for businesses to adopt and use our solution without disrupting their current workflows.

2. Enhanced Machine Learning Accuracy:

We aim to fine-tune our machine learning models to improve accuracy and similarity detection, ensuring even more reliable KYC verification.

3. Providing Verified Certificates or badge:

In future, we are planning to offer verified certificates to customers who complete the KYC process, enabling them to use these certificates across various platforms, streamlining their verification experience.

4. API Outsourcing:

Our goal is to develop and provide an API so that businesses can use AI-KYC in their own unique ways, leveraging our technology to enhance their existing processes.

🚀 Deployment

Yes, you heard it right—AI-KYC is now live! We're using vercel to deploy the front end and render.com to deploy the server and bot components of the application.

🔗 Key Links

• 🚀 GitHub: Click Here

• 🎬 YouTube: Click Here

• 🌐 Website: Click Here

🎉 Wrap-up

Overall, developing AI-KYC was an incredible learning experience. We gained valuable insights into advanced AI models, honed our skills in integrating machine learning algorithms, and improved our proficiency with the MERN stack. And most important of all, we developed a new skill of being patient when our code doesn't work and we don't get any solutions at all. The entire journey was rewarding, and we highly encourage anyone interested in innovation to participate in a hackathon and push their limits.

🚀 Team Details:

Hi, I'm Utsav Bhattarai 👋, and alongside my awesome friend's Rajesh Khadka 🤝 and Our Video Crafter friend Bishesh Marasini , we've teamed up to bring you Apexa - The Analyzer. As passionate developers and tech enthusiasts, we embarked on this hackathon journey to create a powerful open-source app that adds a dash of innovation to your online experience.

Feel Free to connect with us:

My handles:

• 📧 Email: utsavbhattarai007@gmail.com

• 📱 LinkedIn: @utsavbhattarai007

• 🌐 GitHub: @utsavbhattarai007

Rajesh's handles:

• 📧 Email: rajeshkhadkaofficial45@gmail.com

• 📱 LinkedIn: @rajeshkhadka200

• 🌐 GitHub: @rajeshkhadka200

Bishesh's handles:

• 📧 Email: marasinibishesh@gmail.com

• 📱 LinkedIn: @bisheshmarasini

💡 Project Overview:

Apexa is the MIT license open source web application where you can keep track of your YouTube videos and Hashnode blogpost to understand your audience's thoughts on your content. Also you can generate a summary of the tracked videos and blogspot. Perfect for sharing with those friends who prefer concise over comprehensive content

With Apexa, you can discover new content ideas tailored to your interests, providing you with a brainstorming companion right at your fingertips. Additionally, you have the ability to create stunning AI-powered images suitable for video thumbnails and blog covers.

🔥 Inspiration, idea, and problem :

During a casual audio call with my friend Rajesh Khadka , he mentioned that Hashnode and Mindsdb had launched a Hackathon. Intrigued by this, we delved into the details provided in the announcement blog post by Daniela Passos . After thoroughly considering the announcement, we decided to collaborate and work on this exciting idea.

Certainly, it tackles the manual process of analyzing audience responses and helps in connecting with the audience as a content creator. To some extent, it facilitates brainstorming for content ideas and generate the creative images with just words.

🔧 Tech Stack:

Let's break down the tools that bring Apexa to life:

1. ReactJs as Front-end

We used ReactJs to make Apexa look cool and feel super easy to use. It's like the artist behind the scenes.

2. MongoDB as database

MongoDB is like our organized filing cabinet. It keeps all our data safe and easy to find, making sure everything in Apexa runs smoothly.

3. Custom styling with Material UI

Imagine mixing your own unique style with a collection of sleek design elements. That's what happened with Material UI – it's our secret sauce for making Apexa look awesome.

4. MindsDB as Brain of the operation:

MindsDB is the smart brain of Apexa. It helps to create, train, and optimize models for making the better AI product . MindsDB also grabs YouTube comments for Apexa because it knows where to find lots of useful info. And here's the cool part – MindsDB is an open-source project! That means anyone can tweak it to fit their needs. Just jump into the official MindsDB Repo and start making it your own by adding different data sources, AI engine and lots of stuffs.

👁️Quick Look

1. Hero Page

The first impression! The Hero Page showcases Apexa's awesome features – YouTube comment analysis, blog insights, content recommendations, and more.

2. Youtube Analyzer Page

Dive into the world of YouTube insights! Paste your video link, hit search, and witness a visual breakdown of comments. Get summaries, turn on notifications, and stay connected with your audience effortlessly.

3. Blog Analyzer Page

For the bloggers out there! Analyze Hashnode blog comments with a click. Summarize, turn on notifications, and keep your blog community engaged and positive.

4. Content Recommender Page

Need content inspiration? Choose your field, share your thoughts, and hit the magic button. Apexa suggests creative content ideas for videos, reels, blogs, and social media.

5. Image Generation Page

Unleash your creativity! Describe an image in the text box, hit process, and watch Apexa turn your words into a visual masterpiece. Download and share your unique creations

✨ Key Features:

1. Comment Analysis 🔍

Our Comment Analysis feature in the blog and YouTube sections makes it easy for users to understand what people are saying without reading all the comments. We've optimized this feature by processing comments in batches of 5 for quicker responses. The analysis is showcased with simple and beautiful pie charts for better visualization.

2. Summary Generation 📝

With Summary Generation on YouTube and blog pages, users can get a quick summary of a video or blog with just one click. It shows up in a nice pop-up with a cool writing animation.

3. Notification System 🔔

The Notification System in both blog and YouTube sections can be turn on to get alerted when toxic and hate comments are detected. Crafted with the help of a background bot, it runs every 20 seconds, scanning for harsh and spam comments in our database and sending notifications to the tracked user.

4. Image Generator 🖼

The Image Generator turns your words into pictures. Just type a word, hit a button, and a cool image comes out. We use a smart model called OpenAI DALL-E 3 to do this.

5. Content Recommender 💡

The Content Recommender suggests ideas for blogs, videos, and social media posts based on what users like. It's like a helpful friend giving you cool ideas for what to create next.

6. User Authentication 🔒

In Apexa, Authentication is secured using JWT with refresh and access tokens, ensuring the safety of user data and other information.

7. Insightful Analytics 📊

At Apexa, we really care about insights. Our Insightful Analytics feature looks at comments, figures out what's useful, and shows you important stuff. We've tested it with over 500 comments to make sure it works well.

8. Text-to-Speech Functionality 🎤

Located in the Content Recommender Page, each text box has a handy text-to-speech button that converts written ideas into spoken words.

9. Continuous Tracking 🔄

If there are new comments in blogs and videos, they get processed again when the user tracks the same content, adding up to the previous insights. It keeps you continuously updated on audience interactions

🧠 Why MindsDB?

We chose MindsDB as it was a requirement for the hackathon organized by Hashnode in collaboration with MindsDB. While it might seem a bit challenging initially, once you get comfortable with MindsDB, you'll love its features. MindsDB offers a wide range of data sources, AI engines, and integration handlers that allow you to build your own AI applications. You can create your own models by training them with large datasets tailored to your specific needs. MindsDB also supports popular AI engines like OpenAI and Hugging Face.

A cool aspect of MindsDB is that it's an open-source project, meaning anyone can contribute by adding their data sources, handlers, or AI engines to the official MindsDB repository. This flexibility allows users to easily customize and create their AI applications.

🤖 How We Used MindsDB:

We use MindsDB for various tasks, such as extracting YouTube comments and optimizing OpenAI models for specific purposes. Initially, we perform all the necessary tasks and testing using MindsDB's GUI editor through SQL commands. The models trained and optimized in the GUI editor are then accessed and utilized in our web application through MindsDB's JavaScript SDK. This SDK acts as a connection system to link the models with our back-end server. Here are some of the secret codes we used to make all this happen:

1. For Fetching Youtube Comment's

-- Creating Datasource of youtube
CREATE DATABASE mindsdb_youtube
WITH ENGINE = 'youtube',
PARAMETERS = {
  "youtube_api_token": '-Your Youtube Developer Api key-'  
};

-- For fetching the youtube comments of respective channel
SELECT * FROM mindsdb_youtube.comments
WHERE video_id = "Video ID";

1. For Creating the ML engine of OpenAi

-- This engine is used throughout of your application
CREATE ML_ENGINE openai_engine
FROM openai
USING 
   api_key = 'Your OpenAi API key';

1. For comment Analysis

-- This model is used to extract sentiment of 5 comments per request
CREATE MODEL mindsdb.comment_analyzer
PREDICT sentiment
USING
  engine = 'openai_engine',
  model_name = 'gpt-4',
  max_tokens=400,
  prompt_template = 'Evaluate the sentiment of the following comment segments enclosed by {} and separated by &. Provide only one sentiment for each comment, strictly choosing one out of these sentiments: Appreciation, Hate, Neutral, Spam. Avoid offering any explanations. If {comment1}& {comment2}& is passed, the response should be sentiment1, sentiment2. If {comment1}& {comment2}& {comment3}& {comment4}& {comment5}$ is passed, the response should be sentiment1, sentiment2, sentiment3, sentiment4, sentiment5. Ensure that this format remains consistent for all comments, and the maximum number of comments to be passed is up to 5 - {{comment}}';

1. For extracting summary of blog and youtube

-- This model is used to extract the summary of youtube video through transcript
CREATE MODEL mindsdb.text_summary
PREDICT summary
USING
  engine = 'openai_engine',
  model_name = 'gpt-4',
  max_tokens=400,
  prompt_template = 'Summarize the content of the YouTube video using transcript in short and strictly donot give incomplete summary - transcript: {{transcript}}';

-- This model is used to extract summary of blog through markdown
CREATE MODEL mindsdb.blog_summary
PREDICT summary
USING
  engine = 'openai_engine',
  model_name = 'gpt-4',
  max_tokens=400,
  prompt_template = 'Summarize the content of the blog using markdown in short and strictly donot give incomplete summary - markdown: {{markdown}}';

➕ Add on:

Knowledge Base: It is a repository of learned representations or embeddings, usually created by training an embedding model on relevant data. This knowledge can be used by the agent to understand and respond to user inputs.

Skills: These are specific capabilities or tasks associated with the AI agent. Skills define how the agent can use its knowledge to perform various tasks, and they are often linked to models or knowledge bases.

CREATE KNOWLEDGE BASE command is used to create a knowledge base from an embedding model, and the CREATE SKILL command is used to define specific skills that utilize knowledge bases or other resources for tasks like sentiment analysis or text summarization. The agent is then configured with these skills to enable it to respond intelligently to user input.

-- Create an ML Engine for OpenAI
    CREATE ML_ENGINE openai_engine
    FROM openai
    USING
        api_key = 'sk-.................';

-- Create an embedding model for the knowledge base
    CREATE MODEL mindsdb.embedding_model
    PREDICT embeddings
    USING
       engine = 'openai_engine',
       mode='embedding',
       model_name='text-embedding-ada-002',
       question_column = 'content';

-- Create a knowledge base using the embedding model
    CREATE KNOWLEDGE BASE my_knowledge_base
    USING
       model = mindsdb.embedding_model;

-- Insert data into the knowledge base
    INSERT INTO my_knowledge_base (content)
    VALUES ("I really enjoyed reading about your experiences and lessons learned as a developer. It's clear that you have a passion for this field and a dedication to constantly improving your skills. Keep on coding!");

--  Create a skill for sentiment analysis using the knowledge base
    CREATE SKILL sentiment_analysis_skill
    USING
        type = 'knowledge_base',
        source = 'my_knowledge_base',
        description = 'Sentiment Analysis';

Above code structure introduces a knowledge base (my_knowledge_base) and a skill (sentiment_analysis_skill) that utilizes the knowledge base. The sentiment analysis model (comment_analyzer) is then associated with the skill in an agent (my_agent).

🛠 How We Tackled Challenges:

let's simplify the challenges and how we tackled them:

1. Installation Challenge :

Our first challenge was installing MindsDB because the cloud version was down. Docker and pip install didn't work well due to slow internet and low specs. Seeking help in the MindsDB community Discord, we got instant support. Though initial suggestions didn't work, a community member advised installing MindsDB through source by cloning the repo. This method worked for both Linux and Windows systems, overcoming the installation challenge.

This picture captures the moment when Tarun, a helpful community member, assisted us in solving the installation challenge. Although we couldn't capture our direct Zoom meeting with him, this image symbolizes the support and guidance he and other community member provided during the troubleshooting process.

In this picture, Zoran is helping to solve issue related to Mindsdb

2. Using GraphQL hashnode API :

MindsDB supported YouTube comments but not Hashnode. While exploring contributing to MindsDB for Hashnode integration, we decided to use Hashnode's GraphQL API due to time constraints. The GraphQL API was new to us, so we sought help in the Hashnode Discord channel. They provided us with a GraphQL query to fetch data, resolving our issue with using the Hashnode GraphQL API.

In this Picture, Community member of Hashnode is helping us to use GraphQL hashnode Api

3. Processing comments in batch

Initially, processing comments one by one was time-consuming, leading to timeouts with the GPT-3.5 turbo model. We requested and received access to the GPT-4 model, but the problem persisted. To enhance efficiency, we decided to process comments in batches of 5. Designing the perfect prompt was crucial, and after testing in the MindsDB GUI editor, we created an effective prompt. This reduced processing time significantly, allowing us to analyze 100 to 200 comments in just 5-6 seconds.

🎥 Video Crafting and Presentation:

After a month of hard work on our app Apexa, we decided to push our limit and create an awesome video presentation. My friend and I didn't have powerful laptops, but luckily, our friends did, and also had great video editing skills. He even suggested a cool idea for the first part of the video, which you can check out on our YouTube channel.

We borrowed a tripod and a good mobile phone for video recording. Planning our presentation, we created simple scripts for the video. Since my friend and I lived in the same city, we met up at his house to record. It wasn't all smooth sailing; we had to do several re-shoots because our screen recorder crashed and didn't capture high-quality footage. After searching for another recorder, we finally got it right. It took us two days to record the video, and then we sent the clips to our friend Bishesh, who worked his magic to edit the video into a simple and creative masterpiece. 🚀

Now, the awesome video is ready for everyone to watch!

Let's view the some snapshot's during our video making:

This picture captures us during a late-night reshoot for our video. Behind those smiles, there's a bit of sadness due to the frustration caused by a crash.

This snapshot was taken during the editing process.

🔗 Important Links:

• 🚀 GitHub: Click Here

• 🎬 YouTube: Click Here

• 🌐 Website: Click Here (The MindsDB cloud version is currently unavailable, resulting the main part of website being offline.)

• 💻 Mindsdb GUI Editor Code: Click here

🎉 Conclusion:

Overall the hackathon was a great experience for learning. We got to learn about Minds-db, generating models, training models, got a kick start on handling GraphQL API and learned some better ways to google. And most important of all, we developed a new skill of being patient when our code doesn't work and we don't get any solutions at all. Taking help from the community on discord, Slack and shaping the app. The whole experience was great, and if you haven't tried a hackathon yet, give it a shot now!

Overview🚀

Back in 2022, I was introduced to Hacktoberfest, but being new to open-source and the event itself, I couldn't complete it. However, that initial experience fueled my curiosity, motivating me to dive deeper into open-source and set a goal to conquer Hacktoberfest 2023. That was the spark that ignited my journey. Now that Hacktoberfest 2023 has come to an end, it's time to look back on the adventure I embarked on during this month-long celebration of open-source. In this blog, I'll take you through my experience, the hurdles I had to overcome, the rewards I'm eagerly anticipating, and the invaluable lessons I've gathered along the way.

My contribution 🛠️

Once October started, I was really excited to join open-source projects and complete Hacktoberfest. Along the way, I discovered some extra events like hacksquad hosted by awesome open-source companies like Novu, Amplication, Appwrite, Hashnode, and Airbyte. What's great is that these events all share the same goal as Hacktoberfest, so any contributions I made in these events counted for Hacktoberfest as well. So, I decided to take on these extra challenges, even though it meant juggling a lot of tasks and dealing with some challenges. I'll explain more about that in this blog.

The event that I participated in the period of Hacktoberfest:

1. Main Hacktoberfest

   

   In the main Hacktoberfest 2023, I had to merge 4 valid pull requests during October. I went above and beyond, merging 10+ pull requests, with a focus on contributions to Novu. As a reward, I had the opportunity to plant a tree, receive a digital Holopin badge, and enjoy various digital rewards.

   💡Know more: Click here

2. Novu Hacktoberfest

   

   Novu has organized an awesome event as a celebration of Hacktoberfest, where I needed to merge 3 or 5 pull requests to receive either normal swag or premium swag. I successfully merged 5 pull requests and grabbed the #10 position in the leaderboard, primarily focusing on Novu's documentation.

   💡Know more: Click here

3. Hacksquad

   Hacksquad was another fantastic event, jointly organized by 5 to 6 open-source companies to celebrate the Hacktoberfest season of contributions. To participate, we had to merge pull requests in valid repositories with at least 200 stars on GitHub. Unfortunately, our team didn't make it to the top 60 due to various reasons, ending up at position #95.

   💡Know more: Click here

4. Amplication Hacktoberfest

   

   Amplication Hacktoberfest included various events such as plugin development, issue solving, building apps using Amplication as a backend, and documenting the process. The winners had the chance to receive swags like stickers and t-shirts. I built an app called "Snapshot" for capturing high-quality website screenshots and documented the development process through a blog post on Dev.to.

   💡Know more: Click here

   📝 Blog: Click here

5. Hashnode x Airbyte Hackathon

   The Hashnode x Airbyte Hackathon required us to contribute to Airbyte by improving connectors or writing quickstart guides for various use cases provided by them. I wrote a quickstart guide and documented it in a blog post, which I shared on Hashnode.

   💡Know more: Click here

   📝 Blog: Click here

Challenges💥

Participating occasionally and encountering no challenges make for an uninspiring competition. Indeed, during this time, I confronted several challenges. These challenges include:

1. Time Management

   Hacktoberfest takes place every October, coinciding with the festive season in Nepal when we celebrate Dashain and Tihar. This cultural celebration, along with my entrance examinations in mid-October, posed a significant time management challenge. It made it difficult for me to allocate time to contribute to open-source projects and led to me missing out on many events. The time constraint also played a role in our team's inability to secure the #60 position in Hacksquad.

2. Technical Complexity

   Many open-source projects are technically complex, with intricate code structures and specialized knowledge requirements. Understanding these codebases, identifying suitable issues, and making meaningful contributions often proved to be challenging, requiring a steep learning curve.

3. Feedback and Rejections

   Dealing with feedback on my pull requests, as well as the occasional rejection, was emotionally taxing. It required me to build resilience and learn from feedback constructively to improve my contributions.

Rewards & Excitement 🎁

As a developer, we really like swag. Swag is the cool stuff that motivates us and feels like a prize for our hard work. I won some swag during Hacktoberfest, and even though it's not a lot, it means a bunch to me. Here's what I earned from different side events:

1. I merged 5 pull requests in the Novu project, and that means I get the chance to win some awesome premium swag.

2. I built an app using Amplication as a backend, so I'm eligible for a premium Amplication t-shirt.

3. I merged a quickstart, and that gave me some credits for swag. I'm planning to use these credits to get some cool stuff from the swag store.

Connecting with the Community 👥

Speaking for myself, I used to be quite shy and didn't talk much to others. But during this Hacktoberfest, I managed to conquer my shyness. I joined different Discord channels and began talking to many amazing people. I wasn't afraid to reach out through text messages or even in virtual meetings to ask for help and share my thoughts. This was a big achievement for me because I learned to share my ideas and make use of the knowledge that others were willing to share

Lessons Learned 🧠

• Persistence pays off: Facing challenges head-on and staying dedicated leads to well-deserved rewards.

• Open source is a team effort: The warm community and the willingness to support each other are both heartening and motivating.

• Never stop learning: Every contribution is a chance to improve skills and gain new knowledge.

• Time management is key: Balancing multiple responsibilities is essential for a successful Hacktoberfest journey.

• Feedback is a friend: Constructive criticism is an opportunity for growth, both as a developer and a contributor.

• Mastering Git and GitHub: I've also acquired advanced skills in using Git and GitHub, which has been a valuable addition to my toolkit.

Conclusion 🌅

Hacktoberfest 2023 has been a remarkable journey, filled with challenges, rewards, and personal growth. It's reaffirmed the power of persistence, community collaboration, and the joy of continuous learning. As I look back on this adventure, I'm not just a contributor; I'm part of a global community that thrives on open source. With new skills, friendships, and experiences in hand, I eagerly anticipate the next Hacktoberfest and the continued exploration of the world of open-source.

Just 30 days ago, I was introduced to the dynamic collaboration between Airbyte and Hashnode. This hackathon stood out from the typical ones organized by Hashnode over the years. Unlike the conventional hackathons focused on building products with specific tech stacks, this unique event aligned perfectly with Hacktoberfest. It was all about enhancing connectors and crafting quickstart guides for Airbyte, with participants contributing through pull requests.

About Airbyte

Airbyte, a leading open-source data integration platform, excels in effortlessly syncing data from diverse sources (APIs, databases, files) to chosen destinations like data warehouses and lakes. It stands out with 350+ connectors and a robust community focus. Notably, its extensibility offers versatile data integration solutions.

💡Know more: Click here

Tools I use

In the hackathon, I felt confident in my ability to create effective quickstart guides, and to address the unique challenges that came my way, I made use of a range of tools:

1. Terraform

Terraform is a versatile infrastructure as code (IaC) tool that automates the provisioning and management of cloud resources, offering simplicity and flexibility in infrastructure management.

2. BigQuery

BigQuery is Google Cloud's serverless data warehouse and analytics platform, ideal for handling large-scale data analysis. It offers fast query performance, scalability, and seamless integration with other Google Cloud services, making it a valuable tool for data-driven insights and decision-making.

3. Dbt

dbt (data build tool) is a transformative data transformation and modeling tool. It helps data professionals easily transform and structure data for analytics, making it ready for querying in databases.

My contribution

In the hackathon, I dedicated my efforts to quickstart development, resulting in two valuable contributions:

GitHub Insights Stack (Merged)

This quickstart offers a seamless setup for a data stack using Airbyte, dbt, and the GitHub API. It allows you to extract the GitHub repository, commit, and pull request data, perform transformations, and gain insights into code quality, collaboration, and project health.

💡Learn more: Click here

Performance Optimization Stack (In Progress)

While this quickstart isn't complete due to limitations with Airbyte and Datadog integration, it aims to guide users through setting up smooth data integration between Datadog, Airbyte, and dbt. The goal is to extract performance metrics and logs from Datadog with Airbyte, then use dbt to transform and analyze the data for optimizing system performance and resource utilization.

💡Learn more: Click here (pull request)

Challenges

• Learning Curve: When I started in data engineering, I had to begin from scratch, which was tough. To overcome this, I spent time learning and practicing, gradually building my knowledge.

• Problem-Solving: Making the quickstarts required solving problems. I did this by taking a step-by-step approach, asking for help when needed, and using what I'd learned.

• Time Constraints: The hackathon had time limits, and I was still learning. To manage this, I learned how to use my time wisely, focus on important tasks, and use available resources effectively.

• Integration Limitations: While working on the second quickstart, I faced issues with connecting Airbyte and Datadog. Sadly, I won't be able to complete it due to my exam and time limitation.

Conclusion

In conclusion, my journey as a beginner in data engineering was a path filled with challenges that I actively embraced and overcame. These experiences reflect my dedication to learning and my ability to tackle obstacles in the ever-evolving field of data engineering.

In the fast-paced world of technology, developers constantly seek ways to connect, collaborate, and stay up-to-date with the latest trends. That's where DevHub comes in. DevHub is a dynamic web application designed to bridge the gap between developers, providing a platform for them to connect, showcase their work, and explore exciting hackathons. Developed as part of the Appwrite X Hashnode Hackathon, I am thrilled to introduce DevHub and share the story behind its creation.

Team details

Prepare to be amazed by the solo mastery of its creator—me! Witness the extraordinary capabilities of DevHub, a coding marvel born from my singular vision and unwavering passion. Join me as we revolutionize the developer landscape and unleash the true potential of every coder.

• GitHub: utsavbhattarai007

• Hashnode: Utsav bhattarai

Description of Project

DevHub is more than just a social networking platform for developers—it's a hub of innovation and knowledge-sharing. With its intuitive interface inspired by Twitter, DevHub allows developers to connect, engage, and share their insights within a supportive community. The platform facilitates seamless communication through features like tweeting, retweeting and creating a sense of unity and collaboration.

But DevHub doesn't stop at fostering connections. It goes a step further by curating and displaying popular tech blog posts from around the internet, ensuring developers are always up-to-date with the latest industry trends and it also helps to get info about the ongoing hackathons around the globe. lastly, These things help the developer to expand their reach and build their online presence effortlessly.

Tech Stack

The tech stack for DevHub comprises several powerful technologies and frameworks that work together seamlessly to deliver a robust and engaging web application. Here are the key components of the tech stack:

• Frontend:

  • React JS: A popular JavaScript library for building user interfaces, offering a component-based approach and efficient rendering.

• Backend:

  • Node.js: A JavaScript runtime built on Chrome's V8 engine, enabling server-side development with JavaScript.

• Appwrite Cloud Services:

  • Database: Appwrite's database service provides a secure and scalable solution for storing and retrieving data.

  • Authentication: Appwrite's authentication service handles user authentication and security, ensuring secure access to DevHub's features.

  • Functions: Appwrite's serverless functions enable the execution of custom logic and backend operations, enhancing the platform's capabilities. In Devhub, This service is used for crawling blog posts and hackathons around the globe.

  • Storage: Appwrite's storage service allows efficient and reliable file storage and retrieval, supporting various media types. This services is used to store the image of devits(Devhub's post).

This tech stack combination provides a solid foundation for DevHub, enabling efficient frontend development with React JS, seamless server-side implementation with Node.js and Express, and leveraging Appwrite's cloud services for database management, authentication, custom functions, and storage operations.

Why Appwrite?

In reality, I first heard about Appwrite several months ago and was intrigued to learn more about it. However, as a student, I found it challenging to balance my studies with exploring Appwrite. I patiently waited for an opportunity, and finally, after completing my 12th standard exams, I discovered the Appwrite hackathon on Hashnode. This motivated me to dive into learning Appwrite and create some amazing projects.

During my free time, I dedicated myself to researching Appwrite. Initially, I was uncertain about how to set up, configure, and work with Appwrite on my local system using Docker. Fortunately, Appwrite released its cloud infrastructure, which made the setup and usage much easier and I also love the Appwrite cloud card:

Once I started learning Appwrite Cloud, I was fascinated by how seamlessly it provided awesome features. My goal was to build a platform for developers to connect, share, and collaborate. Appwrite turned out to be the perfect backend tech stack for this project. It offers user-friendly authentication methods, including a wide range of social media login platforms. Additionally, the fast and efficient database, where data is stored as collections, along with the Appwrite Functions and bucket storage services, captured my attention. These services were incredibly easy to use and provided outstanding performance. Choosing Appwrite was the best option to transform my idea into a real-world project.

Quick look

• Home page

  

• Discover page

  

• Hackathons Page

  

• Blogs page

  

• Profile Page

  

• Setting Page

  

• Specific Post Page

  

• Login Page

  

• Profile complete page

  

How I used Appwrite?

I utilized nearly all of Appwrite's features, tailoring them to meet my specific needs and objectives. Features that I used are as follows:

1. Database

In my project, I utilized the database service provided by Appwrite to store various types of data, such as user information, devits (devhub posts), hackathons, and blogs. To configure Appwrite in my React Vite project, I used this command:

appwrite init

In the file named "appwriteConfig.js," I imported the necessary services from the Appwrite library, including Client, Account, Databases, and Storage.

Here's a simplified version of the code:

import { Client, Account, Databases, Storage } from "appwrite";

const client = new Client();
client
  .setEndpoint("https://cloud.appwrite.io/v1") // API Endpoint
  .setProject("PROJECT ID"); // Project ID

export const account = new Account(client);
export const storage = new Storage(client);
export const database = new Databases(client, "DATABASE ID");

For performing CRUD operations, I made use of the Appwrite database's different methods. Here's a simplified example:

import { database } from "../appwrite/appwriteConfig";

const methods = async () => {
  const res = await database.createDocument("DATABASE ID", "COLLECTION ID", uniqueid, {
    // data
  });

  const res = await database.listDocuments("DATABASE ID", "COLLECTION ID", [
    // query to fetch data
  ]);

  const res = await database.updateDocument("DATABASE ID", "COLLECTION ID", "DATA ID", {
    // updated data
  });

  const res = await database.deleteDocument("DATABASE ID", "COLLECTION ID", "DATA ID");
};

Note: The code provided is a simplified representation and may require additional implementation details for real-world execution. For more comprehensive code examples, you can refer to the Appwrite documentation or visit my GitHub repository.

2. Authentication

To enable social media login authentication using Google in Appwrite's Devhub, you need to set up Google authentication in Appwrite by creating a Google Console project and configuring the OAuth Client ID. Appwrite will provide you with a redirect URL that you'll need to add to the Google Credentials page.

Here's an example of how you can set up Google authentication in the frontend:

import { account } from "../appwrite/appwriteConfig";

const googleSignin = async () => {
  const res = await account.createOAUTH2Session(
    "google",
    "SUCCESS REDIRECT URL",
    "FAILURE REDIRECT URL"
  );
};

In the googleSignin function, you can call account.createOAUTH2Session with the "google" provider to initiate the Google authentication flow. Replace the "SUCCESS REDIRECT URL" and "FAILURE REDIRECT URL" with the appropriate URLs according to your project.

3. Function

In my project, I leveraged the Appwrite Function services to crawl popular blogs from Hashnode and the latest hackathons from Devpost. I then updated the respective collections for blogs and hackathons.

To begin, I initialized the Appwrite Function by executing the command:

appwrite init function

Following that, I wrote the necessary code to crawl the hackathons and blogs from Devpost and Hashnode. Once the code was complete, I deployed it using the command:

appwrite deploy function

This allowed the function to be live and operational, enabling the crawling and updating of the blogs and hackathons collections.

This is the execution of hackathons crawler:

4. Storage

In this project, I utilized the Storage service provided by Appwrite to store images from Devits (Devhub's posts). Here's an example of how the Storage service can be used:

import { storage } from "../appwrite/appwriteConfig";

const uploadImg = async () => {
  const res = await storage.createFile('[STORAGE BUCKET ID]', '[UNIQUE ID]', [FILE]);

  // To preview and retrieve the image URL, you can use the following:
  const imgUrl = await storage.getFilePreview('[BUCKET ID]', res.$id);
};

By calling the uploadImg function, you can upload an image to the specified storage bucket using the storage.createFile method. Replace [STORAGE BUCKET ID] with the appropriate ID of the storage bucket provided by appwrite. Also, replace [UNIQUE ID] with a unique identifier for the image, and [FILE] should be replaced with the actual file object or data.

To preview and retrieve the URL of the uploaded image, you can use the storage.getFilePreview method, passing the [BUCKET ID] and the unique ID of the uploaded image (res.$id) as parameters.

Challenges I faced

As a first-time user of Appwrite, I faced numerous challenges while building my real-world project with it. While working with React.js for the frontend, I encountered relatively fewer challenges since I was already familiar with it. However, when it came to using Appwrite, I faced several difficulties and obstacles. Some of the major challenges are as follows:

1. Designing Theme: I struggled with deciding on a suitable theme for my project's design. Eventually, I chose to adopt a Twitter-like design with some modifications to create the Devhub interface.

2. Querying Documents: I encountered a major challenge while querying documents using Appwrite. After a considerable amount of brainstorming, I realized that I had forgotten to create an index for the collection I was querying. This oversight caused a significant delay in progress as I spent half a day rectifying the issue.

3. Array of Objects: Another challenge arose when I needed to store an attribute as an array of objects, which was not directly supported by Appwrite. Seeking assistance in the Appwrite Discord server, I received help from a mentor who suggested converting the attribute to a string array and pushing the object as a string. This workaround resolved the issue.

4. Hosting and Authentication: Upon hosting my frontend, I encountered authentication errors that were not present during local development. Seeking guidance in the Appwrite community, a mentor identified the problem. It turned out that I had forgotten to properly set up the platform in Appwrite, which caused the authentication issues. Once the setup was correctly configured, the problem was resolved.

Despite these challenges, the support from the Appwrite community and mentors proved invaluable in finding solutions and overcoming the obstacles faced during the development process.

PS: Appwrite Mentor helping to solve the issue

Despite these challenges, I was able to overcome them by learning from the experience and implementing appropriate solutions.

Important Links

Github Repo: Click here

Website Link: Click here

Demo Credentials

Only for Hashnode and Appwrite team. Normal user can sign in with google.

• Email: demo007@gmail.com

• Password: demo1234

Conclusion

In conclusion, building a real-world project with Appwrite and integrating it into a React.js frontend was a valuable learning experience. Despite facing various challenges along the way, such as designing the theme, querying documents, handling an array of objects, and resolving authentication issues during hosting, I was able to overcome these obstacles with the help of the supportive Appwrite community and mentors.

I am grateful for the resources and opportunities provided by Hashnode and Appwrite. Hashnode's platform enabled me to stay updated and engaged with the developer community, while Appwrite's powerful backend services simplified the development process and provided essential features like authentication, database management, storage, and functions.

I would like to express my sincere appreciation to both Hashnode and Appwrite for their continuous support, documentation, and the incredible communities they have fostered. The knowledge and experience gained through this project have undoubtedly been invaluable to my growth as a developer.

Thank you, Hashnode and Appwrite, for this awesome event.

Developers, get ready to buckle up! Attending an offline hackathon that's 340 miles away doesn't happen every day. However, as I navigated through the winding roads and unexpected detours, I stumbled upon some surprising discoveries. From the valuable skill of debugging to the benefits of working together as a team, this adventure had it all. So, fasten your seatbelts and relax because things are about to get exciting!

Background

So, over the weekend, my buddies and I stumbled upon a three-day hackathon that seemed like the perfect opportunity to take a break from college. We were so excited to participate that we immediately filled out the application and eagerly awaited the results. The thought of being a part of the hackathon was super exciting, and we couldn't wait to see what was in store for us. Unfortunately, we were not selected this time. But hey, there's always next time, right?

So, We refused to lose hope. Fortunately, we discovered another opportunity - an offline hackathon in Dharan, which was 340 miles away from our base in Butwal. At first, we were hesitant about undertaking such a long journey, but after discussing it with our friends, we decided to go for it. Our determination and openness to new possibilities paid off, as we were able to participate in the hackathon and it turned out to be a life-changing experience for us.

The Journey of 340 miles

We started our journey early in the morning, boarding a bus in Butwal. As we departed, I felt excitement and anticipation. I was prepared for anything that lay ahead. The stunning scenery of Nepal's hills and valleys captivated me. Each view was more breathtaking than the last, from towering mountains to lush forests. However, the journey was not without obstacles, such as unexpected delays and bumpy roads.

Despite these setbacks, we persevered, driven by our commitment to our goal. Finally, we arrived in Dharan, feeling proud and accomplished. We had journeyed 340 miles from Butwal and emerged stronger, wiser, and more determined than ever before.

Some Snaps📸

The Preparation👨‍💻

As soon as we arrived in Dharan, our organizer greeted us warmly and gave us a brief tour of the Purwanchal Engineering Campus. After that, they kindly offered to take us to a nearby hotel for a much-needed meal. When we had finished eating, we headed to the homestay where we would be staying for the next three days. The homestay was located in a picturesque area surrounded by verdant forests and exuded a calm and peaceful atmosphere, providing a perfect escape from the hustle and bustle of the outside world. In this way, we've just wrapped up day one!

Refreshing Mindset

Our time at the homestay was so refreshing! We had a blast playing around in the gorgeous park and taking in all the greenery. We also went out and checked out the lively streets of Dharan, hitting up the temple and clock tower, and of course, snapping some cool pics for our Insta😂.

When hunger struck, we stumbled upon a cafe named Circle Cafe that didn't look like much from the outside, but once inside, we were greeted with a beautifully designed interior that left us in awe. We savored some of the national favorite momos, which were every bit as delicious, Overall, our refreshing mindset was a much-needed escape from the monotony of daily life, and left us feeling reinvigorated and ready to take on whatever came our way.

Collaborating with teammates

With our minds and bodies feeling rejuvenated, we were ready to tackle the upcoming hackathon. On day 2 Night, We gathered together to brainstorm strategies, ideas, and approaches, collaborating to determine the most effective course of action for the competition. Based on each individual's strengths and skills, we divided tasks, including designing, presenting, and coding, to work seamlessly together. We felt confident in achieving our shared goals and emerging victorious in the hackathon.

Preparing the resources

To gear up for the hackathon, we choose MERN tech stack to develop our web app. Since it's a familiar and dependable choice for our team, it was an obvious choice. For an attractive and user-friendly interface, we picked Figma to aid the design process. We took great care to make sure we had all the essential tools and resources ready for the competition, so we could tackle any obstacles that came our way. Furthermore, we dedicated ourselves to improving our respective skills, to produce a winning solution for the hackathon.

Some Snaps📸

The Battle⚒️

We were filled with excitement and anticipation as Day 3 approached, and we headed to the ERC(Engineering College) for the much-awaited hackathon. After a helpful orientation session, we were ready for the Github workshop, but as seasoned Github users, we decided to skip it and focus on our project in the hackathon room for the next 24 hours. Our passion and determination fueled us as we worked tirelessly to develop a solution that would have a meaningful impact.

😂Here's a fun fact: During the observation session, we were introduced to the various teams. The organizer took the time to introduce each team by their unique names, such as Stackunderflow, Margin Top, Team Enigma, Team Trinity, and more. Finally, our team was introduced as Team Haskmukh, which means "Happy Mood".

Crafting the Project

The hackathon kicked off with the sweet aroma of freshly brewed coffee, heightening our excitement for network connectivity and track selection. After evaluating options like Health Sector, IOT, Tourism, and Agriculture, we unanimously chose Health Sector and got straight to brainstorming ideas. Fortunately, we had already spent the previous night mulling over potential concepts and had settled on the idea of centralizing medical reports for easy access. Fueled by our collective passion and enthusiasm, we dove into our tasks with gusto. While I focused on coding the front end, my teammates utilized their respective skills and expertise to tackle their responsibilities.

The first encounter with the bug

As we embarked on our project with a tight 24-hour deadline, we faced numerous bugs and errors that threatened to impede our progress. Our first bug emerged on the backend while creating an endpoint, where we couldn't post JSON data in the express server. Luckily, I had dealt with a similar issue in a previous project and quickly resolved it by

app.use(express.json());

However, as I shifted my attention to the front end, I was constantly confronted with frustrating padding and margin bugs. We faced various challenges, but our determination to succeed never wavered. We tackled each obstacle as it came, driven by our unwavering passion.

Overcoming the obstacles

We were having an absolute blast at the hackathon! We savored our amazing coffee, indulged in a scrumptious lunch, and then relished a delightful dinner. While coding our project, we encountered small bugs and errors, but we tackled them with ease. As we continued coding, we realized that we were almost done with our project - how exciting! With only a few hours left before the deadline, we decided to go above and beyond by adding some extra features. The energy was electric as we worked diligently, and we couldn't wait to finally complete our masterpiece!

We hosted the backend and front end of our app on a Linode server, and after some struggles, we were finally able to get our app hosted. However, our joy was short-lived when we were hit with a DOS attack just two hours before the deadline. Panic set in as we saw that our server was down, but we refused to give up. We quickly created a new server and hosted our app, and took steps to prevent future attacks by researching how to secure our server.

After overcoming this hurdle, we relaxed and I took the time to write a blog about our experience. But just as we were starting to wind down, we faced another obstacle. Our backend server crashed, and with only 30 minutes left before the submission deadline, we started to panic once again. We searched for a solution but couldn't find one, so we decided to set up a local server to showcase our app. I was confident that I could solve the issue, so I began googling while my friend set up the local server. I was eventually able to reset the Linode server and host our app with the latest package, which solved the problem unexpectedly.

Despite these challenges, we were able to overcome them through teamwork, determination, and resourcefulness. We were proud of what we had accomplished and learned from the experience. We knew that we could handle whatever challenges came our way in the future.

Some Snaps📸

The Victory🏆

Showcase of Project

After hours of debugging, our project was running smoothly on the server. It was a great moment for our team as we had put a lot of effort and dedication into it. Now, our biggest challenge was showcasing it creatively to the judges, highlighting its unique features and demonstrating its usefulness. We were determined to do our best and show the judges what we were capable of.

The moment finally arrived when the judges came to see our presentation. I was nervous about presenting, so I decided to back up my friend who had better presentation skills. We had prepared a PowerPoint presentation and a short video about our project. When it was time to present, my friend started by introducing our project and explaining its usefulness, while I backed him up with additional information. The judges asked us some cross-questions, but we were well-prepared and provided satisfactory answers. In the end, the judges appreciated our efforts and dedication, and we finished our presentation feeling accomplished and proud of what we had achieved.

Success in the competition

On the eve of the Deltathon(Hackathon theme name) closing ceremony, we were brimming with excitement and anticipation. We decided to spend our last few hours before the results announcement by heading out to Dharan's streets. Our destination was a cozy spot, the Circle Cafe, that we stumbled upon earlier. A friend, who was a little bit professional chef, took charge of ordering our dinner dishes, promising us a feast for our taste buds. While we waited for our food to arrive, we engaged in friendly games of ludo and chess by the bonfire. The aroma of our food soon wafted towards us, and we eagerly dug in, savoring the flavors of the dishes. After dinner, we leisurely strolled through the night streets of Dharan, taking in the city's ambiance before returning to our homestay.

The next day, the closing ceremony was scheduled for midday, giving us enough time to explore more of Dharan more before the big event. We visited several places, marveling at the beauty and culture of the city. As the time for the announcement of the results drew closer, we could feel our nerves building up. Our hearts raced with anticipation as we waited for our team's name to be called. The results were announced in descending order, and we were relieved to find that our team was not on the bottom list. However, our hopes of winning were almost dashed until the final moment when our team was declared the winner. We jump from our seats, overcome with joy and excitement, and rushed to the stage to receive our prize and trophy. The custom-made trophy was a work of art and a testament to our team's hard work and dedication. The happiness and pride we felt at that moment were indescribable. We clicked countless photos, capturing the memories of this unforgettable experience, and shared them on social media, basking in the glory of our victory. We had conquered the event and emerged victorious, our hearts brimming with gratitude and pride.

Some Snaps📸

Lessons Learned💪

The importance of teamwork in debugging

Teamwork is crucial for successful debugging. Despite obstacles in the Deltathon project, our strong team bond helped us overcome challenges and achieve victory. Each member played a vital role in identifying errors and finding solutions. We communicated effectively, listened actively, and collaborated towards a common goal. Our success showcases the importance of teamwork in debugging, proving that it can help us overcome even the most daunting challenges.

The persistence in debugging

The road to success is often filled with obstacles and challenges, and debugging is no different. While working on our project for Deltathon, we encountered numerous issues that demanded our unwavering determination to resolve. Despite the setbacks, we remained steadfast in our goal and tirelessly worked to overcome every hurdle. We experimented with various tactics, explored new approaches, and refused to give up until we found a solution. Our persistence paid off in the end, as we completed the project successfully and presented it to the judges with confidence.

It demonstrates the value of perseverance, determination, and hard work, and how these qualities can lead us to great success. We discovered that success is not just about talent or skill, but also about the willingness to persist and never quit. Although the journey may be long and arduous, with persistence, we can achieve greatness.

Debugging tips for hackathons

Debugging during a hackathon can be a challenging task, especially when you have limited time to complete your project. Here are some tips that we found helpful in debugging during Deltathon:

1. Plan ahead: Make sure to allocate enough time for debugging and anticipate potential challenges that may arise. This will help you stay on track and avoid last-minute stress.

2. Prioritize issues: Not all errors are created equal. Focus on fixing the most critical issues first, as these may have a significant impact on the functionality of your project.

3. Use version control: Version control tools like Git can help you keep track of changes in your code and revert back to previous versions if necessary. This can save you a lot of time and effort in debugging.

4. Test early and often: Regularly testing your code can help you catch issues early on, giving you more time to address them. Make sure to test your code frequently and thoroughly.

5. Get feedback: Don't be afraid to ask for feedback from your teammates or mentors. They may be able to provide valuable insights and help you identify issues that you may have missed.

6. Stay calm and focused: Debugging can be stressful, but it's important to stay calm and focused. Take breaks when needed and approach the problem with a clear mind.

By following these tips, you can approach debugging during hackathons with a more strategic and effective mindset, leading to smoother and more successful project outcomes.

Conclusion✨

Participating in an offline hackathon that is 340 miles away can be intimidating, but it offers an opportunity for a life-changing experience. Though the journey may present unexpected challenges, determination and teamwork can help overcome them, leading to success. By focusing on skill development, collaboration, and persistence, developers can achieve great results in hackathons. Debugging can be a difficult task during these events, but with proper planning and strategies, obstacles can be overcome. In conclusion, participating in hackathons can offer valuable learning experiences and opportunities for personal and professional growth.

Let's Start!

Setup🧑‍💻

Step 1: Install Visual Studio Code

• If you don't have Visual Studio Code installed, download it from https://code.visualstudio.com/

Step 2: Install .NET Core

• To create a C# program, you need to have the .NET Core SDK installed. Download it from https://dotnet.microsoft.com/download

Let's build⚒️

Step 3: Create a new project

• Open Visual Studio Code and press "Ctrl + Shift + P" to open the Command Palette.

• Type "dotnet new console" and select "dotnet new console" from the list.

• You will now have a new C# console project with a Program.cs file.

  

Step 4: Write the code in Program.cs file

• Let's define the namespace TicTacToe and make class Program.

    using System;
    namespace TicTacToe
    {
     class Program
     {
      // Main code will be here
     }
    }
  

• Now define the constant values for your game board inside the program class.

    // Constant values for the size of the game board
    private const int ROWS = 3;
    private const int COLUMNS = 3;
  
    // 2D array to represent the game board
    private static char[,] board = new char[ROWS, COLUMNS];
  

• Then define the player. In your game, There are 2 players. They are: O and X.

    // Enum to represent the current player
    private enum Player
     {
       X, O
     }
  
    // Variable to store the current player
    private static Player currentPlayer = Player.X;
  

• After that declare the main function.

    static void Main(string[] args)
     {
      // Core logic of the game will be here
     }
  

  • Before writing the login inside the main function, let's declare and write the necessary function which will be required in the future.

    This will initialize the board.

      private static void InitializeBoard()
        {
          // Initialize the board with empty spaces
          for (int r = 0; r < ROWS; r++)
           {
            for (int c = 0; c < COLUMNS; c++)
               {
                          board[r, c] = ' ';
               }
           }
        }
    

    This will print the layout of the board on the console screen.

      private static void PrintBoard()
      {
       // Print the current state of the board
       for (int r = 0; r < ROWS; r++)
         {
          Console.WriteLine("-------------");
          for (int c = 0; c < COLUMNS; c++)
            {
              Console.Write("| ");
              Console.Write(board[r, c]);
              Console.Write(" ");
            }
           Console.WriteLine("|");
         }
        Console.WriteLine("-------------")
      }
    

    This will make a move by the input of user.

      private static bool MakeMove(int row, int column)
       {
        // Check if the move is valid (within the bounds of the board and on an                            empty square)
         if (row >= 0 && row < ROWS && column >= 0 && column < COLUMNS &&    board[row, column] == ' ')
           {
             // Mark the square with the current player's symbol
             board[row, column] = currentPlayer == Player.X ? 'X' : 'O';
             return true;
            }
          return false;
       }
    

    This is the core function that checks the win.

      private static bool CheckForWin()
              {
                  // Check rows
                  for (int r = 0; r < ROWS; r++)
                  {
                      if (board[r, 0] == board[r, 1] && board[r, 1] == board[r, 2] && board[r, 0] != ' ')
                      {
                          return true;
                      }
                  }
    
                  // Check columns
                  for (int c = 0; c < COLUMNS; c++)
                  {
                      if (board[0, c] == board[1, c] && board[1, c] == board[2, c] && board[0, c] != ' ')
                      {
                          return true;
                      }
                  }
    
                  // Check diagonals
                  if (board[0, 0] == board[1, 1] && board[1, 1] == board[2, 2] && board[0, 0] != ' ')
                  {
                      return true;
                  }
                  if (board[2, 0] == board[1, 1] && board[1, 1] == board[0, 2] && board[2, 0] != ' ')
                  {
                      return true;
                  }
    
                  return false;
              }
    

    If the board is full (When the game is drawn), This function will help to identify it.

      private static bool IsBoardFull()
        {
         for (int r = 0; r < ROWS; r++)
         {
           for (int c = 0; c < COLUMNS; c++)
             {
               if (board[r, c] == ' ')
                  {
                   return false;
                  }
             }
         }
        return true;
       }
    

    The last one will help to switch between the players.

      private static void TogglePlayer()
      {
        currentPlayer = currentPlayer == Player.X ? Player.O : Player.X;
      }
    

    Now Let's write the main function.

      static void Main(string[] args)
        {
          InitializeBoard();
    
           while (true)
           {
             PrintBoard();
             Console.WriteLine($"Player {currentPlayer}, enter your move (row column): ");
             int row = Convert.ToInt32(Console.ReadLine());
             int column = Convert.ToInt32(Console.ReadLine());
             if (MakeMove(row, column))
                {
                 if (CheckForWin())
                    {
                     PrintBoard();
                     Console.WriteLine($"Player {currentPlayer} wins!");
                     break;
                    }
                  else if (IsBoardFull())
                    {
                      PrintBoard();
                      Console.WriteLine("It's a draw!");
                      break;
                    }
                     TogglePlayer();
                  }
              else
              {
               Console.WriteLine("Invalid move, try again.");
              }
           }
      }
    

    • At first, Board is initialized by InitializeBoard(); function.

    • Then, The while loop is declared.

    • After that, Board is printed by PrintBoard() function.

    • Then, Input is taken as row and column and the input given by the user is passed in MakeMove(row,column) the function which checks it and make move if it is valid. if not then returns Invalid move.

    • After that, CheckForWin() the function is used to find the winner of the game. If it returns true, the current player is declared the winner and game will be ended, if not then IsBoardFull() is triggered to find whether the game board is full or not. if it returns true, then the game will be a draw. If not then, Player is switched by TogglePlayer() function.

      In this way, This game is played.

Quick Links🔗

Source code👉 Click here

Conclusion

In this way, We can make the console version of Tic Tac Toe game using c# language.

Thanks for reading🔥

Let's get started with new energy and intensity!

Overview: A Look Back at a Memorable Year

I started the year with the goal of expanding my knowledge and skill set. I took on new projects that pushed me outside of my comfort zone and forced me to learn new technologies and programming languages. The challenges I faced along the way were difficult, but also incredibly rewarding. As I progressed, I noticed a significant improvement in my coding abilities and a newfound confidence in my abilities.

In addition to this blog, I have created an additional blog that chronicles my progress, milestones, and obstacles.

Blog👉 Click here

This blog has also been selected as a runner-up in the DevRetro competition😅

Giving Back to the Tech Community

In addition to working on my own projects, I also took the time to give back to the tech community. I contributed to open-source projects, participated in coding competitions, and mentored junior developers. These experiences were incredibly fulfilling and helped me not only further my skills but also make a positive impact in the lives of others.

This is my 500+ contribution graph of 2022.

I have also participated in hacktoberfest but due to another project, I was not able to complete it. Anyway, It was worth it to contribute in open-source.

Projects: Developer's Art

2022 was a year of productivity and accomplishment for me as a developer. I took on new projects and pushed my skills to the limit, resulting in some truly remarkable achievements. Some of the projects that are crafted throughout this year are show-case below:

Projects are made mainly for hackathon purposes and some of them are fun projects.

Conclusion: A Year of Growth and Adventure

As the year came to a close, I reflected on my journey and was overwhelmed by a sense of gratitude. I am grateful for the opportunities I had to learn and grow, and the connections I made along the way. I am also grateful for the support of my friends, family, and colleagues, who were there to encourage me every step of the way.

In conclusion, 2022 was a year of growth, adventure, and progress for me as a developer. I am excited to see what the future holds and to continue my journey in the tech industry.

I am insanely active on Twitter.

Let's get connected👉@utsabdev

Thanks for Reading🔥

Introduction

The Internet of Things (IoT) is a revolutionary technology that is transforming the way we live and work. It refers to the interconnected network of physical devices, vehicles, home appliances, and other items embedded with electronics, software, sensors, and network connectivity, which enable these objects to collect and exchange data.

How IOT works?

IoT devices collect and exchange data using sensors, connectivity and software

The data collected can be analyzed and used to improve processes, decision-making, and identify opportunities for improvement

IoT devices can also be controlled remotely to automate processes.

Benefits of IOT

• Increased Efficiency: IoT devices can automate processes and collect real-time data, leading to increased efficiency and reduced costs.

• Improved Decision-Making: The data collected by IoT devices can provide valuable insights for informed decision-making.

• Convenience: IoT devices can make daily tasks easier and more convenient, such as controlling a smart home system from a smartphone.

• Increased Safety and Monitoring: IoT devices can be used for remote monitoring and improved safety, such as in healthcare with remote patient monitoring.

Challenges and concern

• Privacy and Security: With more devices connected to the internet, there is an increased risk of cyber attacks.

• Complexity: IoT is a complex technology that requires integration and collaboration across multiple industries.

• Interoperability: The wide range of IoT devices and platforms can lead to interoperability issues.

• Cost: Implementing IoT devices and systems can be expensive.

Conclusion

The challenges associated with IoT are significant and must be addressed for it to reach its full potential. It is important to prioritize data privacy, security, interoperability, standardization, scalability, and energy efficiency in the development and deployment of IoT systems and devices.

Connect with me through👉 @utsabdev

Thanks for Reading🔥

Over the years, I have learned a lot about the ups and downs of being a developer. From struggling to learn new languages and technologies to the joy of seeing a project come together, a developer's journey is filled with challenges and rewards.

Through this blog, I want to share my experiences, insights, and achievement with other developers, as well as anyone interested in the world of tech. I will be discussing everything from the latest trends in development to the challenges of working in a constantly evolving field.

So, Join me on this journey, and let's explore the exciting world of development together!

About me👨‍💻

Before knowing my tech journey, Let's introduce myself. It's me Utsav Bhattarai, a tech student from Nepal who loves to play and write about new tech stuff under the unconditional pressure of physics, chemistry, and Math. I am just completing my 12 standard studies. Apart from this side, I am a self-taught full-stack developer with some experience which I can build something that I imagine.

The management of time for study along with coding is much more difficult for an emerging developer like me. But I managed it by hampering my little bit of study thinking that one day the coding passion would be fruitful for me.

Challenges⚒️

As a developer, I faced several challenges on my journey. These challenges can be overwhelming at times, but they are also an important part of the learning process and will help you grow as a developer. These challenges are just like a catalyst that boosts and enhances your skills. Some of the key challenges are as follows:

Staying up to date with the latest trends

One of the biggest challenges I have faced is staying up to date with industry trends and technologies. The software development industry is constantly evolving and it can be challenging to keep up with the latest trends and technologies. I have had to continuously learn and adapt to stay relevant in the field and ensure that my skills are current.

Complex Project with a tight deadline

Another challenge I have faced is working on complex projects with tight deadlines. It can be stressful to work on projects with high stakes and it is important to stay organized and manage my time effectively to ensure that projects are completed on time and to the highest quality. This type of project tests your skills and patience level and grinds us to face big future problems and challenges.

Communication problem

I have also faced challenges with communicating with team members and clients. It can be difficult to effectively communicate my ideas and work with others, especially if I am working on a large team or with clients from different backgrounds. I have had to work on my communication skills and be confident in my abilities to ensure that projects are completed successfully. This includes clearly expressing my thoughts and ideas, actively listening to others, and collaborating effectively with team members.

Balancing workload and personal life

Finally, I have faced challenges with balancing my workload and personal life. It can be easy to get overwhelmed with the amount of work I have to do, especially if I am working on multiple projects at once. I have had to learn to manage my time effectively and make sure to take breaks and prioritize my tasks to avoid burnout.

Dealing with project setbacks and failures

It is common for projects to face setbacks or even fail. It is important to stay resilient and adapt to these challenges to find solutions and move forward. It can be frustrating and disappointing when projects don't go as planned, but it is important to stay calm and focused on finding a solution. I had to learn to take a step back and assess the situation objectively, rather than getting caught up in my emotions.

Overall, the journey of a software developer can be challenging, but it is also a rewarding and fulfilling experience. By facing these challenges head-on and working hard, I have been able to grow and succeed in this field.

Kick start⚡

My journey starts with a kick start. When I first started out in this field, I was fresh out of school and had limited experience. I was eager to get my foot in the door and start learning, but I knew that it would be a steep learning curve.

That kickstart was The offline hackathon which was organized by the tech company InfoTech. At first, I was not interested in this hackathon but Obeying the suggestion of friends, I finally landed up to participate in this hackathon. It was 6 hours hackathon with the theme of Visit Nepal 2022. At that time, I was just learning Html, CSS, and js but with the help of this tech stuff, I built a simple web app in just 6 hours. In this event, I got to know about MongoDB, ReactJs, and other cool technology from the senior developers.

Finally, My hard work paid off and I landed my first offline hackathon with the second position. It was a huge achievement for me and it was a great feeling to finally put my skills to the test and work on real projects.

That kickstart was essential for my career and it set the stage for my future success. It was the beginning of a long and rewarding journey as a software developer and I am grateful for the opportunity to learn and grow in this field.

Projects🔥

I have worked on a variety of projects throughout my career. Some of the projects that I have worked on include:

1. Ideao

Ideao is an MIT-licensed open-source web app for exploring, and sharing creativeness in the form of ideas. It allows searching the idea which helps you to make awesome things. The main motive of this web app is to make a portal between idea seekers and idea providers. It provides a user-friendly user interface and highly optimized idea search functionality by using RediSearch Module.

• Site👨‍💻: Ideao

• Blog📄: Click here

• Source code⚡: Click here

2. Devport

Devport is also an MIT-licensed open-source project that helps you, especially developers to make stunning dev portfolios with top-notch customization and good-looking UI. You can also switch the status of your portfolio to active or offline. And One last thing, You can also subscribe to our newsletter to get an engagement update on your portfolio.

• Site👨‍💻: devport

• Blog📄: Click here

• Source code⚡: Click here

3. Mero Room App

Mero room(Your room) is an open-source mobile application that makes the connection between room owner and room seeker. The main motive of the app is to solve the problem of layman people who suffers while searching for a room and landlord who is seeking to rent their room. This app makes this process seamless and transparent.

• Download url👨‍💻: meroroom

• Source code⚡: Click here

4. Shotz

Shotz is an MIT Licensed open source project which helps you to click high-quality screenshots in one click and in less time. You just have to enter the URL of the website on which you wanted to take screenshots and that's It your work has been done. There are also little bit but a useful advanced option that helps you to take a screenshot as you want. And lastly, If you log in, You can save the screenshot and make a collection of it.

• Site👨‍💻: Shotz

• Blog📄: Click here

• Source code⚡: Click here

What did I learn from 2022?

In this year 2022, I have learned many things and overcome my mistakes. Some of the things that I learned are as follows:

1. Collaboration and teamwork

Working in the software development field often requires collaboration and teamwork. I have learned about the importance of effective communication and how to work effectively with team members to achieve common goals.

2. Problem-solving skills

Developing software often involves solving complex problems. I have learned how to approach problems in a systematic and logical way and how to troubleshoot and debug code when things go wrong.

3. Time management

As a developer, I have learned how to manage my time effectively in order to meet deadlines and deliver high-quality work. This has included learning how to prioritize tasks, allocate my time effectively, and work efficiently.

4. Adaptability

The field of software development is constantly changing and evolving. I have learned to be adaptable and flexible in order to keep up with these changes and to continuously learn and grow as a developer.

In addition, I have learned about the importance of staying motivated and focused in my work. As a developer, there are often times when projects are challenging or deadlines are tight, and it can be easy to lose motivation. I have learned to stay focused and motivated by setting clear goals, staying organized, and surrounding myself with supportive and motivated colleagues.

Achievement🏆

As a software developer, I had several(Not more but for me they are many) achievements throughout my career. These achievements are the key motivation that motivates me in every step of my journey. Some of the achievements that I am most proud of are as follow:

1. Got the Second position in an offline hackathon

2. Runner up in Redis x Dev.to the hackathon

   

3. Runner up in not just hackathon for building the Mero room app

   

4. Got a participation swag pack for building a valid project using medusa js

   

5. Got a Certificate for participating in Nasa Space App Hackathon

   

6. Got a Certificate for participating in the Steel city code hackathon

   

Blogging journey⚡

For all of the developers including me, Blogging is an integral part of our journey. Blogging has allowed me to share my knowledge and experiences with others, and it has also helped me to learn and grow as a developer.

I started blogging shortly after I entered the software development field. At first, I started blogging through hashnode and it's going on. My first blog was "My first Blog - How to write Blog". Yes, It's sound weird to start first blog with How to blog but Anyway This blog was boosted and I also got good responses from Eleftheria Batsou (Hashnode community manager) and Miki Szeles

This two appreciation has boosted my blogging journey and made me to hold the keyboard and write anything that I learned. Due to this, Blogging has been a great way for me to document my journey as a developer and reflect on the challenges and successes that I have encountered along the way. It has also been a great way to connect with other developers and share ideas and experiences.

Overall, Blogging has been a valuable and rewarding part of my journey as a software developer and a student. It has allowed me to share my knowledge and experiences with others and has helped me to learn and grow in my career.

Future Plans📄

Looking to the future, I have big plans for my career. They are:

1. Continuing to learn and grow

   I am always looking for opportunities to learn and grow as a developer. This could include learning new technologies and languages, attending conferences and workshops, or working on new and challenging projects.

2. Advancing my career

   I am always looking for ways to advance my career and take on more responsibilities and leadership roles. This could include seeking out new opportunities with new organizations.

3. Mentoring other developers

   As I have gained more experience and knowledge, I have become interested in sharing my skills and experiences with other developers. I am currently working on finding opportunities to mentor junior developers and help them to grow and succeed in their careers.

4. Building my own software

   I have always been interested in building my own software and have a few ideas for projects that I would like to work on. I am currently working on developing these ideas and building prototypes to see if they are viable.

Wrap up👋

Overall, My journey as a software developer has been full of challenges and achievements, and I have learned a lot along the way. I am grateful for the opportunity to learn and grow in this field and I am excited to see what the future holds. So, this is my journey as a software developer.

Thank you Hashnode for this awesome event🔥

Thanks for reading👋

Overview

Hello folks👋, This is a mini blog series where we learn core things about JWT with a real-world project. In the first sequel, We will scrape the theory part and In the second sequel, We will implement the stuff that we learned in the first part in a real-world project. After the end of this series, You will have a clearer view and understanding of JWT which helps you to build a top-notch(advanced and secured) authentication system in your real-world project.

So, In this first part, We will discuss about the core stuff about JWT. Let's get started🤩

Quick Look

To increase your interest and excitement, I will showcase what wanna we will build by the end of this series.

This is just a piece of work. We will build a good-looking and functional real-world project.

What is JWT(Json web token)?

A JSON web token(JWT) is JSON Object which is used to securely transfer information over the web(between two parties). It can be used for an authentication system and can also be used for information exchange. The token is mainly composed of a header, payload, and signature. These three parts are separated by dots(.) and represented by

[header].[payload].[signature]

• Header -> It specifies the algorithm used to encrypt the contents of the token
• Payload -> It contains “claims” (information the token securely transmits)
• Signature -> It s used to verify the authenticity of the information.

Structure of JWT

Uses of JWT

• Authentication: When a user successfully logs in using their credentials, an ID token is returned which helps to authenticate the user in the future. The best and most secure way to use JWT in authentication is by using both access and refresh tokens.

Access token: It is a short-term JWT token that is used in the header to request the server for authentication, getting access to a protected route, or accessing the resources.

Refresh token: It is a long-term JWT token that is used to get a new access token when the old access token is expired.

The combo use of the Access token and Refresh token provides secure authentication and seamless user experiences which We will doing in our real project.

• Authorization: Once a user is successfully logged in, an application may request to access routes, services, or resources (e.g., APIs) on behalf of that user. To do so, in every request, it must pass an Access Token, which may be in the form of a JWT.

• Information exchange: JWTs are a good way of securely transmitting information between parties because they can be signed, which means you can be sure that the senders are who they say they are. Additionally, the structure of a JWT allows you to verify that the content hasn't been tampered with.

What is JWT authentication?

JWT authentication is a token-based stateless authentication mechanism. It is popularly used as a client-side-based stateless session, this means the server doesn’t have to completely rely on a data store (or) database to save session information. The client of this token may use this digital signature to demonstrate ownership in the future. Signed tokens can be used for authentication by verifying the genuineness of the claims they are attached to.

How does JWT authentication work?

1. At first, The User sign-in using a username and password.

2. The authentication server verifies the credentials and issues a JWT signed using a private key.

3. Moving forward, the client will use the JWT to access protected resources by passing the JWT in the HTTP Authorization header.

4. The resource server then verifies the authenticity of the token using the public key.

The Identity Provider generates a JWT certifying user identity, and the resource server decodes and verifies the authenticity of the token using the public key.

Since the tokens are used for authorization and authentication in future requests and API calls great care must be taken to prevent security issues. These tokens shouldn’t be stored in publicly accessible areas like the browser’s local storage or cookies. In case there are no other choices, then the payload should be encrypted.

Benefits of JWT

The benefits are:

1. More compact

JSON is less verbose(long) than XML, so when it is encoded, a JWT is smaller than a SAML token. This makes JWT a good choice to be passed in HTML and HTTP environments.

2. More secure

JWTs can use a public/private key pair in the form of an X.509 certificate for signing. A JWT can also be symmetrically signed by a shared secret using the HMAC algorithm.

3. More Common

JSON parsers are common in most programming languages because they map directly to objects. This makes it easier to work with JWT.

4. Easier to process

JWT is used at the internet scale. This means that it is easier to process on user's devices, especially mobile.

Attack against JWT

1. Tampering with the Signing Algorithm:

‘none’ algorithm: JWT supports the usage of ‘none’ algorithm for use-cases where the integrity of the claim within JWT is already verified by other means. This algorithm allows the server to issue a JWT without a signature. The content within a token issued with a ‘none’ algorithm will look like the following:

{"alg":"none","typ": "JWT"}.{"sub":"1234567890","name":"John Doe","iat": 1516239022}.

Attackers can use this feature to set the algorithm in their token to ‘none’ and provide an empty signature to fool the server into accepting it as a valid token.

2. Brute-Forcing HS256:

JWTs signed with HS256 algorithm could be vulnerable to secret-key disclosure. that usually happens through brute-force attacks, especially for weak keys. Since a client does not need to interact with the server to check the validity of secret key after a token is issued by the server, attackers can conduct offline brute-force attacks against the token by using wordlists of possible secret keys.

3. Sensitive Information disclosure:

All the information inside the payload is stored in plain text. It is important not to leak sensitive information such as internal IP addresses through the tokens.

Attacks against JWT arise from bad implementations and using outdated libraries. To benefit from the security features JWT offers, follow the best practices for implementing them, only use up-to-date and secure libraries and choose the right algorithm for your use-case.

Connect me through👉@utsavbhatrai007

Thanks for Reading💖

When you are starting out in web development, you will likely hear the terms authorization and authentication all the time. They might sound similar but they are totally different from each other. In Simple words, Authentication is the process of verifying someone's identity, whereas Authorization is the way to provide permission to someone to access particular resources or information.

They are essential and basic security terms that need to be understood thoroughly. So In this blog, We will discuss what authentication and authorization are and how they are differentiated from each other.

Ok, Let's get started!

What is Authentication?

Authentication is the process of identifying or verifying someone's identity by assuring that the person is the same as what he is claiming for. It is used by both clients and servers. The server uses authentication when someone wants to access the information, and the server needs to know who is accessing the data. The client uses it when he wants to know that it is the same server that it claims to be.

Authentication by the server is done mostly by using the username and password. Other ways of authentication by the server can also be done using cards, retina scans, voice recognition, and fingerprints. Authentication does not ensure what tasks one person can do, and what resources he can read and write. It only identifies who the person or system is actually.

Methods of Authentication

Single-factor Authentication

Single-factor authentication is the simplest way of authentication. It just needs a username and password to allow a user to access a system. So, It is less secure and mainly used by beginner developers to develop their side projects.

Two-factor Authentication

As the name suggests, It is a two-level authentication where the user needs to pass two-step verification to authenticate. It does not require only user name or password but also needs certain information that the authenticated user only knows such as birth date, favorite food, school name, and other information. Apart from this, it can also verify the user by sending the OTP or a unique link to the user's registered number or email address.

Multi-factor Authentication

This is the most secure and advanced level of authorization. It requires two or more than two levels of security from different and independent categories. This type of authentication is usually used in financial organizations, banks, and law enforcement agencies. This type of authentication protects the system from data miners or hackers.

Authentication techniques

1. Password-based authentication

It is the simplest way of authentication. It requires the password for the particular username. If the password matches the username and both details match the system's database, the user will be successfully authenticated.

2. Passwordless authentication

In this technique, the user doesn't need any password; instead, he gets a unique OTP (One-time password) or link on his registered mobile number or phone number. It can also be said OTP-based authentication. It is used to enhance the user experience on the system.

3. Single Sign-on(SSO)

Single Sign-on or SSO is a way to enable access to multiple applications with a single set of credentials. It allows the user to sign in once, and it will automatically be signed in to all other web apps from the same centralized directory.

4. Social Authentication

Social authentication does not require additional security; instead, it verifies the user with the existing credentials for the available social network. It is mainly used authentication which is more secure and does not affect the user experience. Users can authenticate with one click. Mainly used and popular social media credentials(not passwords) are used for this type of authentication.

What is Authorization?

Authorization is the process of verifying that you're allowed to access an area of an application or perform specific actions, based on certain criteria and conditions put in place by the application. You may also hear it called access control or privilege control. The authorization usually works with authentication so that the system could know who is accessing the information.

Authorization is not always necessary to access information available over the internet. Some data available over the internet can be accessed without any authorization, such as you can read blogs from here.

Authorization techniques

1. Role-based access control

The role-based access control technique is given to users as per their role or profile in the organization. It can be implemented for system-system or user-to-system. It ensures the users on the basis of their roles or profile for accessing the particular area or resources of the system.

2. JSON web token

JSON web token or JWT is an open standard used to securely transmit the data between the parties in the form of the JSON object. The users are verified and authorized using the private/public key pair. It is used to access and refresh tokens to authorize the user to access the resources.

3. OAuth

OAuth is an authorization protocol, which enables the API to authenticate and access the requested resources.

4. OpenID authorization

It helps the clients to verify the identity of end-users on the basis of authentication.

5. SAML

SAML stands for Security Assertion Markup Language. It is an open standard that provides authorization credentials to service providers. These credentials are exchanged through digitally signed XML documents.

Differences between Authentication and Authorization

Comparing these processes to a real-world example, when you go through security in an airport, you show your ID to authenticate your identity. Then, when you arrive at the gate, you present your boarding pass to the flight attendant, so they can authorize you to board your flight and allow access to the plane.

Why Should You Implement Both Authentication and Authorization?

As you can see, although authentication and authorization are very different, each plays an integral part in the security and integrity of the application or system.

These processes go hand in hand, and without one the other is kind of meaningless. If you can gain access to the Admin area, but do whatever you want once in there, it could lead to big problems.

On the other hand, you can't authorize individuals without knowing who they are! Which is why authentication always comes before authorization.

Conclusion

As we discussed above, we can say Authentication verifies the user's identity, and Authorization verifies the user's access and permissions. If the user can't prove their identity, they cannot access the system. And if you are authenticated by proving the correct identity, but you are not authorized to perform a specific function, you won't be able to access that. However, both security methods are often used together.

I hope this blog has been insightful and You have now a clearer view and understanding of this term.

Feel free to get in touch via social media. You can mostly find me at 👉 @utsavbhatrai007

Thanks for reading🔥

Just a minute👇

if( Do you like the blog🤩? ) {
   console.log("Don't forget to give reactions and your views in the comments😉")
}
else{
   console.log("Thanks for reading💖")
}

Overview

Today, We will make a simple image upload system through multer that sends an image from frontend to backend and gives the image URL. We will use ReactJs for frontend, Custom CSS for styling, ExpressJs for backend, and Multer for File handling.

Building process⚒️

The building process is pretty simple. At first, We will create the frontend part which will be a file input box that gets an image from the user and sends the image to the server as a response, we get the image URL and then start to make the backend with Node js and ExpressJs. That's it, Our work is done🤣. That's a rough explanation, Let's dive into the deep process.

Frontend

There will not be a fancy frontend part😂. There will be a simple file input box with submit button. Our frontend looks like this:

Prerequisites

We will be using:

-> React js (Frontend)

-> Custom CSS (For styling)

-> Vite js (For development tool)

-> Yarn (Package manager)

-> Package: Axios

Process

At first, We will make a directory named as Img Upload by mkdir Img Upload and jump to that directory by cd Img Upload then We will initialize our project by yarn create vite. We will be using vite rather than CRA(create-react-app) due to the optimized development environment.

Then we will name the frontend side as a client.

Then choose the framework as React.

After that, We will choose the language.

That's It, Our project frame has been crafted.

Now, Just clean up the startup template of vite react app then make the file input box and style it. We won't discuss about styling and all other frontend stuff. So, Frontend look like this:

Now, Let's get the image from the user and store it in two different states for previewing and sending the image to the server. For getting the image from the user, We will make an onChange in the file input box and pass the function picUpload. Like this:

<input type="file" name="img" onChange={picUpload} />

Then, In the function picUpload, Let's get the image and set that image in two state pic (preview) and file (for backend work). Like this:

const [pic, setPic] = useState(null);
const [file, setFile] = useState(null);

const picUpload = (e) => {
    const [file] = e.target.files;
    setPic(URL.createObjectURL(file));
    setFile(file);
 };

Here, URL.createObjectURL() This will create a blob which makes it easy to preview. This new image-picking technique is explained in this blog: Check it out👉 Blog

Now, Let's make a preview mechanism like this:

<input type="file" name="img" onChange={picUpload} />
{pic ? <img src={pic} className="pic" /> : <p>Upload Image</p>}

Then pass the function getImgUrl() in submit button to triggered backend work. Final, frontend structure look like this:

<div className="input_wrapper">
      <div className="img_wrapper">
          <div className="img_upload">
            <input type="file" name="img" onChange={picUpload} />
            {pic ? <img src={pic} className="pic" /> : <p>Upload Image</p>}
          </div>
          <button onClick={() => getImgUrl()}>Send Image to server</button>
      </div>
</div>

In getImgUrl function:

const getImgUrl = async() => {
    const formData = new FormData();
    formData.append("pic", file);
    const res = await axios.post("http://localhost:3000/api/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    const {msg,imgUrl} = res.data;
    console.log(msg);
    alert(imgUrl);
  };

At first, formdata instance is created then the file is appended with formdata with the name pic . This pic will be the same as in the backend that we will discuss in the backend part. Then the post request is sent to a server of the endpoint (localhost:3000/api/upload) which we will create later with the formdata as data and header of form-data.

Then the response(res.data) is destructured in msg and imgUrl which is passed from the backend.

Final frontend look:

Backend

The backend process will be little bit long because We will discuss in-depth about the backend. Let's get started.

Prerequisites

We will be using:

-> Node js / Express js

-> Yarn (Package manager)

-> Packages:

• Multer (File handler)

• Cors (Incoming request manager)

• Nodemon (Self Server starter )

Process

At first, We will create a server folder in the root directory Img Upload by mkdir server and then jump into that directory by cd server. Then we will initialize the node js project by npm init -y then package.json file is created. Now We will install package like express, nodemon, cors, multer by writing this command in terminal:

yarn add express nodemon cors multer

Now, We will setup the node js project in package.json file like this:

{
  "name": "img-upload",
  "version": "1.0.0",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.20"
  },
  "devDependencies": {},
  "description": ""
}

In name field we will write name of project and In main field we will write the name of main file of the server which will be server.js. Then we will add another field which helps to support ES6 that is:

"type":"module"

Now, We will create server.js file then we will initialize the express app and listen to the given port 3000 like this:

//Importing dependencies
import express from "express";
import multer from "multer";
import cors from "cors"

//Making Instances
const app = express();
const port = 3000;

//Middlewares
app.use(express.json());
app.use(cors("*"));

//Routes
app.get("/", (req, res) => res.send("Hello World!"));


//Listening on port
app.listen(port, () => console.log(`Listening on port ${port}!`));

Here, In this above code, At first, We imported the dependencies then make the instances of express as app then define the port at 3000. After that, We make a middleware for using json data by using express.json() and for managing incoming request by using cors("*"). * means anyone can access the server.

Now, we will set up the storage mechanism of multer by setuping the naming system of images that we store and defining the folder which we want to store images on the server. In our case, The folder will be in the server directory named as uploads.

Let's First make the folder uploads by mkdir uploads.

The code to do so will be like this:

// setting up the storage mechanism
const storage = multer.diskStorage({
  filename: function (req, file, cb) {
    cb(null, Date.now() + "--" + file.originalname);
  },
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
});

Then we will create the instance of multer with the storage mechanism that we defined above:

const upload = multer({
  storage: storage,
});

After that, We will create the route for serving the static files from the folder that we made above that is uploads(folder in the client directory).

//Serving the static files from the uploads folder. 
app.use("/uploads", express.static("uploads"));

Now, This is the core part where we will make the main route of post request of endpoint /api/upload.

//Img Url Route
app.post("/api/upload", upload.single("pic"), async (req, res) => {
  try {
    if (req.file === undefined)
      return res
        .status(400)
        .json({ error: false, msg: "You must select a file." });
    const url =
      req.protocol + "://" + req.get("host") + "/uploads/" + req.file.filename;
    res
      .status(200)
      .json({ error: false, msg: "File uploaded successfully!", imgUrl: url });
  } catch (error) {
    res.status(400).json({ error: true, msg: "Img upload failed" });
  }
});

Here, upload.single("") act as middleware of multer where the name given inside it should be same as name of formdata that we define in frontend. In our case,The name is pic.

Now, At first, The incoming file from frontend as request through formdata is checked whether is null or not. After that, the Image url is made by combining the:

• req.protocol -> It gives the name of protocol in which the backend is running that is http or https request.

• req.host -> It gives the main backend url. In our case that is localhost:3000

• /uploads/ -> It is name of folder that we define above for storing image.

• req.file.filename -> It gives the name of the file that we made in the storage mechanism step.

In this way, the Image URL is made. Then, The image URL is sent as imgUrl to the frontend as a response with status code 200 and msg : File uploaded successfully!.

If any error occurs in the try-catch block, It sends the response with status code 400 and msg: Img upload failed.

In this way, The backend is coded.

The final top-notch backend code looks like this:

//Importing dependencies
import express from "express";
import multer from "multer";
import cors from "cors"

//Making Instances
const app = express();
const port = 3000;

//Middlewares
app.use(express.json());
app.use(cors("*"));


// setting up the storage mechanism
const storage = multer.diskStorage({
  filename: function (req, file, cb) {
    cb(null, Date.now() + "--" + file.originalname);
  },
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
});

/* Creating an instance of multer with the storage mechanism we defined above. */
const upload = multer({
  storage: storage,
});

//Routes
app.get("/", (req, res) => res.send("Hello World!"));

//Serving the static files from the uploads folder. 
app.use("/uploads", express.static("uploads"));

//Img Url Route
app.post("/api/upload", upload.single("pic"), async (req, res) => {
  try {
    if (req.file === undefined)
      return res
        .status(400)
        .json({ error: false, msg: "You must select a file." });
    const url =
      req.protocol + "://" + req.get("host") + "/uploads/" + req.file.filename;
    res
      .status(200)
      .json({ error: false, msg: "File uploaded successfully!", imgUrl: url });
  } catch (error) {
    res.status(400).json({ error: true, msg: "Img upload failed" });
  }
});

//Listening on port
app.listen(port, () => console.log(`Listening on port ${port}!`));

Hope you learned it🙂.

Final folder structure is:

Did you like the customization of the window terminal? If so Let me know in the comment section. I will try to write a detailed blog about it😉.

Testing

Let's test the backend API through the Vs code extension named as Thunder client.

At first, Let's start the server.

Now, In thunder client, Let's define the endpoint and request method of our backend. Like this:

Then,

The response is seen as:

Links🔗

Check it out the source code of frontend and backend👇

Source code: Github

Conclusion

In this way, We created the image upload system which stores the image from frontend to backend server.

Connect me through: @utsabdev

Thanks for reading🔥

A little backstory

I was just eagerly waiting for the August hackathon on Hashnode. Sadly, This time there was no hackathon to participate but later on Surprisingly Writeathon (4 Articles in 4 Weeks ) was lift up. So I participate on it but inner me was extremely thirsty to participate on Hackathon where I can build awesome project. So , To end my thirstiness towards hackathon , I started to search for the hackathon. At the first try, I search for the Hackathon keyword on google. The first result was of Redis x Dev.to Hackathon which is organized by the another huge Blogging community called as Dev.to. As following my passion, I started to participate parallelly on Hackathon and Writeathon.

As a result, Today I am going to explain my latest project named as Ideao.

What is Ideao🤔?

Ideao is just a simple approach is to circulate idea all among the community. Ideao is the web platform for exploring and sharing the creativeness in the form of idea. The main motive of this web app is to make portal between idea seeker and idea provider. It provides the user friendly user interface and highly optimize idea search functionality by RediSearch Module.

Quick Demo

Home Page

Dashboard Page

Overview Video

I know Video is not good as other but that's my first time🤣.

What's the need of Ideao?

As I am a developer, For participating in hackathon or contributing in Open source community or for doing something else tech stuff , Ultimately There is a need of main key idea which is not thinkable instantly. So, Yah Ideao collects the idea given by other people and gives to needy developer. Thats what Ideao do.

The main core motive to built this web app is to end up the frustration of developer due to unthinkable mindset of awesome idea by providing them a huge verse of idea where they can search relavant ideas.

In general, It's core motive is to shortout the shortage of idea.

#💡What I learned from this project?

To be honest, This project had learnt me many things from the simple css hack to backend related tech stuff like Redis, express and many more in depth. This project had upgraded me further more about reactjs, css and expressjs and introduces a new database called Redis which was worth of learning. Yep, Let me summarize what I learned from above tech stack :

• From ReactJs : In this project, I have learnt more about best way for managing state and routing the app through react-router-dom in ReactJs. Additionally, I have learnt about advance component rendering technique and other simple things for best app optimization.

• From Css : Doing frontend is quite wonderful but when bugs comes in it, its sucks. Every time when I code frontend, there will be a hard coding somewhere which frustrate me a lot. So, In this project, I decided enchance my css skills. At the end, I learnt so many styling tricks and hacks which helps me a lot for upcomign future project.

• From NodeJs/ExpressJs : As I was familiar with this tech stack, I couldn't learn many things but learn about simple things like best optimization of processing the result and integrating it on API and serving it on the endpoint.

• From Redis: I had learnt about different awesome module provided by Redis like RediSearch, RediJson, Redis caching and many mor and I had successfully implemented above module in this project.

What Tech Stack is used?

I was quite familiar with Js language. So, I prefer to use JavaScript based framework which makes me easy to build what I want. Ideao is made up using RERN stack which stands for:

• R -> Redis
• E -> ExpressJs
• R -> ReactJs
• N -> NodeJs

Other Stack are:

• For styling : By the help of this project, I want to enhance my css skills, So I prefer to use Custom Css.

• For Development tool : I was so amazed about the Vitejs feature. So, I am using ViteJs rather than CRA(create-react-app) in all my recent project due to it's speed⚡.

Challenges I faced💪

Some of challenges I faced:

1. It was my first time using Redis. Although It was easy to use but At the beginning, It was hard to integrate it with Node.js. After 2-3 days brainstorming, I finally find out the NodeJs compatible Redis package called Redis Om and After that It becomes easy to interact with Redis Module.

2. While Styling, There was lots of designing headache but I managed to solve it.

3. While managing the state workflow of loading , rendering the component according to the response was little mess-up but after 3-4 hours of struggling It was managed systematically.

4. At Last While deploying the server in Heroku was a big pain. I think I don't need to explain about it😂.

How Ideao works?

In general, Idea works in the same way that of other RERN or MERN web app works that is all of the workflow is managed through API . That's it, Ideao also works on the based of client requests through API. The upcoming diagram fully clarifies all the working mechanism in easy way.

Functions✨

The function of Ideao are:

1. User can search the idea through idea title, idea description and idea tag by the help highly optimized module called RediSearch.

2. User can post the idea what they want with title, description and tag.

3. User can login and can accessed their posted idea

4. User can delete their idea easily.

5. At last but not the least, Ideao provides User friendly user interface.(Yah, You might wonder that 🤔 that's a simple thing but main thing is making user easy to interact with our app).

Building process⚒️

The building process of Ideao is pretty simple. At first, I created the frontend by using React with Vitejs and styling with custom CSS. and then started to make backend with ExpressJs and Redis. That's it, Ideao is ready🤣. That's a rough explanation , Let's dive in deep process.

🏢 Frontend

I just started creating frontend with the command yarn create vite and then started to make basic folder structure and I started to make different routes of app like Home route, Dashboard route with sub-routes like App route, explore route, search route and profile route. After that, I started to make frame of the app and then started to style on it. After a huge styling, The frontend part had been ready. It took 1 week to built it because of college stuff like notes, assignment etc.

🏭 Backend

Backend part was pretty harder because of new database called Redis (At a first interaction only, after being familiar I love it ). I started the backend part by the command node init -y and then started to make folder structure of server file which looks like this:

After completing the folder structure, I just make the express server with simple middlewares which listen on port 3001. Like this:

//Importing dependencies
import express from "express";
import cors from "cors";

//Making Instances
const app = express();

//MiddleWares
app.use(express.json()); // For JSON data
app.use(cors("*")); // For incoming request

//Api Endpoint
app.get("/", (req, res) => {
  res.json({ msg: "Success✅" });
});

//Listening to the port
const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`The server is listening on the port ${PORT}`);
});

After that I configure dotenv by importing it.

import {} from "dotenv/config";

Our .env look like this:

PORT=
REDIS_URL=

Then I created different routes by importing from routes on index.js file folder like this:

...
//importing routes
import Idea from "./routes/Idea.js";
import User from "./routes/User.js";
import Stat from "./routes/Stat.js";

//Routes
app.use("/api/idea", Idea);
app.use("/api/user", User);
app.use("/api/stat", Stat)
...

Let's setup the Redis connection by:

import { Client } from "redis-om";
const client = new Client();
const con = await client.open(process.env.REDIS_URL);
if(con){
  console.log("Redis connected");
}
export default client;

In this above code, At first client instance is created and by the help of that instance connection is established through REDIS_URL which contains the redis connection url in .env file.

✅Tip: The Redis connection is only initialize on schema file only because by doing this, There is no need to define connection everywhere🙂.

After that I created the schema of user and idea like this:

Idea schema:

const ideaSchema = new Schema(
  Idea,
  {
    idea_title: {
      type: "text",
    },
    idea_des: {
      type: "text",
    },
    idea_doc: {
      type: "text",
    },
    user_id: {
      type: "string",
    },
    idea_userImg: {
      type: "string",
    },
    idea_postedBy: {
      type: "string",
    },
    idea_tag: { type: "string[]" },
  },
  {
    dataStructure: "JSON",
  }
);

User Schema:

const userSchema = new Schema(
  User,
  {
    user_gid: {
      type: "string",
    },
    user_name: {
      type: "string",
    },
    user_email: {
      type: "string",
    },
    user_doc: {
      type: "string",
    },
    user_pic: {
      type: "string",
    },
  },
  {
    dataStructure: "JSON",
  }
);

And then initialize the schema by making their repository where we can perform different operation like this:

//initializing User schema
export const userRepository = client.fetchRepository(userSchema);
await userRepository.dropIndex();
await userRepository.createIndex();

//initializing Idea schema
export const ideaRepository = client.fetchRepository(ideaSchema);
await ideaRepository.dropIndex();
await ideaRepository.createIndex();

After that I started to make Routes of Idea, user and stat(This routes helps to get statistics of the ideao and top contributor). One example of Route is given below

import { Router } from "express";
import {
  deleteIdea,
  getAllIdea,
  getMyIdea,
  postIdea,
  searchIdea,
} from "../controllers/_idea.js";

const router = Router();

router.route("/").get(getAllIdea);
router.route("/:user_id").get(getMyIdea);
router.route("/:idea_id").delete(deleteIdea);
router.route("/search/:srh").get(searchIdea);
router.route("/").post(postIdea);

export default router;

Like wise other routes are created and After it, Let's move to different controllers where is the core logic of api. One example of controller of idea which is shown up:

import { ideaRepository } from "../schema/idea.schema.js";

//Api for Getting all idea
export const getAllIdea = async (req, res) => {
  try {
    const allIdea = await ideaRepository.search().returnAll();
    res.status(200).send(allIdea);
  } catch (error) {
    console.log(error);
    res.status(400).send(error);
  }
};

... // Other Controllers

At first, Relevant Schema's Repository is initialize and all operation are performed on it. Likewise, Other controller are created.

In this way, Ideao backend is created.

Yah, I know It's bit longer but covering all aspects is helpful for all.

Important Links🔗

• App : Ideao
• Source Code : Github

Conclusion

After a huge brainstorming with lots of frustrating moment, finally Ideao was created. It's been a worth of learning project which has tested by passion level and enhance my problem solving skill. Doing project, participating in hackathon and contributing in Open source community is best way to be a pro(good) programmer. It should be added on every immersing developer passion.

Thanks for reading🔥 Giving your precious time to read it, It's awesome🤩

Connect me through twitter : @utsavbhatrai007

Sometimes, We want to display image selected from input file in React but we stuck following traditional way to do that. So In this article, We will learn to do so with easy way.

Let's get started⚡

How to do?

To display a image selected from file input, we can call the URL.createObjectURL with the selected file object and set the returned value as the value of the src prop of the img element.

For instance, we can write:

import React, { useState } from "react";

export default function App() {
  const [pic, setPic] = useState();

  const getImg = (e) => {
    const [file] = e.target.files;
    setPic(URL.createObjectURL(file));
  };

  return (
    <div>
      <input type="file" onChange={getImg} />
      <img src={pic} alt="img" />
    </div>
  );
}

We define the pic state which we use as the value of the src prop of the img element.

Next, we define the getImg function that takes the file from the e.target.files property via destructuring.

Then we call URL.createObjectURL on the file to return a URL that we can use as the value of pic.

And we call setPic with the returned URL string to set that as the value of pic.

In this way, We can select the image from input easily🔥.

Connect me through👉 @utsavbhatrai007

Thanks for reading🤩

Overview

Writing✍️ has always been there from the beginning of human civilizations when languages came into existence. The best way to document history is to write, we know the history of the world because somebody has written it.

From this note, we can understand how important writing is. On this day, writing has become very dynamic and widely used as a medium of communication, documenting history, learning, etc. Whether you are a content writer, an author, a blogger, or anyone related to writing work you need a writing assistant to make your writing efficient.

A writing assistant can help you in many ways such as checking your word spelling, grammatical mistakes, suggestions for it, word counts, etc.

Yeah, You Thinking of the Replacement of a Content writer with AI. Hmm🤔 Just chill my friend, They are just helping tools for the writer for the enhancement of their content.

But before moving to the compiled list, let’s have a look at what features you should look for while choosing writing assistant software.

Features of AI🤖 Writing Assistant

1. Spell Check

Spell check will help to identify the wrong spelled words and give the correct spelling suggestions. This feature is very helpful for new aspiring writers who have just started writing and make spelling mistakes.

We often forgot the spelling of small words or misspelled a word while writing due to typing errors, all of these can be avoided with the help of the writing assistant spell check feature. This simple tool can help you to avoid embarrassment.

2. Grammar check

The next feature every writing assistant should have is a grammar check. This feature is very important even if a good speaker makes mistakes in grammar and that makes perfect sense because proper grammar is not used around us. These things we learn in school and forget after all🤣.

The grammar check will pick out the grammatical mistake and give you a proper suggestion for it. Thus, you can correct it right there. These mistakes become more embarrassing in official communication and create a bad impression.

3. Word count

The word count feature is also one of the most needed features. The word count tells you about the density of words. It helps you to limit your writing to a certain number of words. The change of paragraphs can be known and We can easily manage word for each paragraph.

4. Rich Text Editor

The rich text editor allows us to format the document in an organized manner and we can highlight the heading and subheadings. The rich text editors allow images to be inserted between your paragraphs and have many features. This helps a lot for content writers and bloggers who often use rich media content in the writing process. This gives a good reading experience if the writing is arranged and presented well.

5. AutoSave

Since we are using computers and laptops for our writing purpose, there are chances to quit the window by mistake, the computer gets shut down, and all your work will be lost if the autosave feature is missing in the writing software. This is a good feature to look for in any writing assistant software hunt.

Some AI🤖 writing Assistant software

1 . Grammarly

Grammarly is one of the best writing assistant tools that allow spell check, grammar check, and overall mistake-free writing. This boost your confidence to write error-free communications and impact your writing. Grammarly allows you to integrate with your favorite browsers and help you to correct everything you write on the internet. This is one of the widely used grammar tools and helps millions of users to write with confidence.

Key features of Grammarly

• Spelling and Grammar check

• Plagiarism Checker

• Phrase Suggestions

• Word counter

• Tone detector

• Integrates with all popular browsers

• Desktop application with AI-powered

Pricing

Free - Free for spell and grammar checker with limited features.

Premium - $30/month for style, clarity improvements, and additional advanced corrections.

2 . ProWritingAid

ProWritingAid is another online software that offers a great writing assistant with spell check, grammar check, and sentence beautification delivered in real-time as you write. This is a great online tool that offers in-depth writing assistance and improves and encourages you to write better than yesterday. You are given hundreds of suggestions and you can choose among them which best suits your writing.

Key features of ProWritingAid

• Spelling and Grammar correction

• Phrase generation

• 15 Different writing reports

• Improve style and Strength

• Eliminate Embarrassing errors

• Integrate with third-party apps

• Customizable as per your need

• Data visualization for in-depth analysis

• Plagiarism checker

Pricing

Free - 7 days free trial

Premium - $20/month

Go with yearly plan and save up to 67%

3 . Google Docs

Google Docs is a simple online tool that offers writing help with its effective features. This is a tool that has features such as spell check, grammar check, word counter, etc. It is the best free writing assistant which provides top notch features.

The automatic saving feature, whenever changes are made to the document. The word counter shows the number of words on the document. This helps authors and writers to stay within the word limit for any sub-part of the document. I had include this goggle product because I have using this for a long time for a documentation purpose, report writing and blog writing.

Key features of Google Docs

• Rich text Editor

• Spell and Grammar Check

• Best for Documentation Writing

• Word Counter

• Language Translator

• Voice typing

• Dictionary

Pricing

Free - Free with Google account

Additional tools

1. Writesonic

Writesonic is the AI writer that helps you write SEO-optimized, long-form (up to 1500 words) blog posts & articles in 15 seconds.

2. Frase

Frase is also a AI powered writing assistant which helps you to research, write, and optimize content that ranks 1st on Google in minutes instead of hours.

3. Copy ai

Copy.ai is an AI-powered content writing tool that claims to help people write better content.

4. AI Writer

AI-Writer is the most accurate content generation platform, using state-of-the-art AI writing models to generate articles from just a headline.

5. Hyperwrite

Hyperwrite is a AI tools that provides suggestions and sentence completions to improve your writing, wherever you write.

Conclusion

They are just a tool for enhancing writing skills by correcting spelling, grammar, tone and other aspects which gives a top-notch content reading experience. This is the only AI tools used are made by humans so there is nothing to worry about the replacement of content writers with AI because AI can only detect the error in spelling, grammar and other things but the way of integrating the experience and knowledge by the real content writer cannot be done by AI.

Thanks for Reading🔥

Connect me through Twitter: @utsabdev

What a wonderful evening, sitting in a comfortable chair in front of the desk and just coding some tech stuff. Suddenly, My brain got stuck and became blank neither I can think nor react. That's a situation sometimes every immersing developer suffers a lot but It will become normal after a huge brainstorming😵‍💫.

Let me drop a few quick tips that’ll eventually help you stop wasting your days by surrendering yourself to your overwhelming feelings.

When I get stuck What do I do🤔?

Console it

I am not saying to console the problem in the console. Its meaning is to step back from the problem analyze it from the root and figure out what actually a problem was. Sometimes figuring out the problem may solve the root of the problem.

How do you figure out what the problem is?

In the programming, The problem that you faced is already been faced by another developer. That's why Scraping the problem in relevant platform helps you to solve the problem. The Relevant platform are:

• Google : Googling is one of the most important skills to have as a developer. Because Google has everything you are looking for. The trick is finding exactly what you’re looking for quickly and the best way is by being concise and searching using exact keywords.

• Asking questions on Stack Overflow, Quora or discussion forum: Platform like Stack Overflow, and Quora are built to discuss the problem and solve it. So Asking questions on this platform definitely frees you from getting stuck.

• Asking questions with your coding buddy: Friends are the problem solvers in each and every situation. In the context of programming, problems, bugs and errors are daily life routines. Communicating and collaborating with your coding buddy helps you to solve the problem.

• Reading Blog: A blog is the main source of learning that helps us to understand a specific topic and gives a generic idea about the error that may come in the future or It helps to solve the problem.

• YouTube Tutorial: YouTube tutorial is the last option to solve the programming problem because everyone avoids the tutorial hell. You just need to dig down deeper in the rabbit hole. Search with the right keyword you’ll get the right tutorial that solved your problem easily.

When nothing works for you?

Take a deep breath, Take a coffee, rest for 1 day and enjoy the 1 day what you like most By doing this your mind will be rebooted with new energy which helps to solve the problem easily.

Conclusion

As a developer, I usually get stuck and spend days and nights solving it. But After solving it it's adrenaline hits differently 🤩. Solving the problem is sometimes frustrating but It enhances our capability, check our passion level and passes problem of problems which we should solve by grinding day and night. At last, That's an instance of time when we finally solved the problem giving goosebumps and unlocking the next hard level of the problem which we will solve in the future.

Problems are the golden key to success (As I reminded you the school day just for fun🤣 ). Problem-solving skills help you to develop cognitive abilities and gain experience with a certain technology.

Thanks for reading🔥

About me

So before knowing Why I am a developer? , You have to know one thing. Who is Utsav? Just like declaring a variable before using it. Let me first initialize myself and my properties clearly. So that there will not be any runtime errors while your brain complies and runs this content.

let utsav = {
 age : 18,
 personality: "shy",  
 whenFree:{
    exploration: true,
    reading: true,
    gaming: true,
  },
  properties:{
      nature: "friendly", mindSet: "Creative",
      views: "different",  Communication: "Try to speak less"
  },
  varients: {
      programmer: true,
      designer: true,
      traveller: true,
  },
  lovesTo: ["Surfing new tech stuff", "Travelling", "Gaming", "Learning from others", . . . ],
  fearOf: ["error"],  //But After Solving it, It's adrenaline hits different🤩.
}

The reason for using let in declaration is: The properties will change throughout life that's a natural process.

No further delay, Let's dive in!

My Backstory

It's the story of a shy boy who used to play mobile games, later on, started playing with tech stuff and it's going. He started this tech journey from 6 standard. At that time, He touched the computer for the first time realizing the power of this tool, He was so amazed that He just started to explore it. As we know, Anyone who enters to this digital verse never comes back again. As time passes, the boy goes on trying new things, thinking of How to solve errors and bugs, and after solving it enjoying that moment. The boy makes this process as a passion.

As for the programming aspect, He started learning basic programming from the Nine standard that are included in the education syllabus. As we know, school knowledge is not enough for the developer. He started to learn and scraped new things. He had an interest in building a good user interface. Since He already knew HTML and CSS, he slowly moved into learning JavaScript.

Even though learning JavaScript was a bit of a pain, He fell in love with this language once He became familiar with it. And now it's his favorite programming language and the one that He uses the most. After becoming somewhat comfortable with JS, He decided to move into React To be honest, He fell even more in love with React and JavaScript in general. From that onwards He started building a few side projects. and He jumped to app development and started learning react native, might be thinking why react native as He was a Js background developer, He chose the relatable framework. After learning all this tech stuff, He started to contribute to Open source.

What triggered me to be a developer?

As I am a technical student, I chose this stream because I love it but the main reason to dive into it is when I was in 9 standard handling the load of syllabus, suddenly inter-school web hackathon was organized. To be honest, At first, I was heisted to participate but my friend assisted me to joined on it. The main core theme of the hackathon was Visit Nepal 2020 and it was a duo team hackathon. The hackathon was 5 hours long. As the hackathon started, My hand started vibrating but I managed myself and we started building it. We had built the website which was pretty simple but for me, it was like a big project. After the completion of it, We are asked to present what we built. It was my first formal presentation. I managed to present all aspects of what we built. After that, The organizer showcased the result. Luckily, we got the second position. That moment🤩 triggered me to be a developer.

My passion for programming

So, why did I go through the trouble of learning all these? Well, to be honest, I did it because it was pretty fun and enjoyable. Now, I know what you're thinking, "Coding for fun is not just enough". Yes! I agree, but this fun slowly became an irresistible passion for programming. Although there are times when I face annoying bugs and I think to myself that programming is very difficult, but fixing these bugs and finding solutions to different problems, drives my craze for programming to an even higher level.

But, if you ask some people why they would want to become developers, they might give one of these two answers or sometimes both. Either they say that it is because you get a high-paying job or that it is an important job that offers a career path with endless progression. These are some solid reasons you would want to be a developer and I too consider these, but there's a majority of developers who became developers because they just love coding and enjoy the process and their passion is coding.

I'll tell you why. As you might already know, I'm an 18-year-old and I have been into programming for about 4 years. That means that I started my journey when I was around 14 years old. At that time, I didn't know or care about getting a high-paying job. All I wanted was to enjoy the process of coding. So I did, and here I am, writing to you about why I am a developer. And in my opinion, if you want to become or achieve something, you've got to have a passion for it. Because if you don't, you'll stop halfway through the journey. Now, this is not to say that I don't want a high-paying job or and good career path, instead, my enthusiasm for programming is what motivates me to achieve great heights or build amazing software. A good example of this is the Open Source Community. Developers all over the world build and contribute to open-source software just to provide some value to the developer community, expecting nothing in return. I'm speechless to describe the open source community and I'm happy to be a part of it🙂.

Okay Let's wrap it up, The main reason Why I want to be a developer is passion, excitement and adrenaline which come after learning new tech stuff, solving errors, contributing to open source and completing projects.

Thanks for reading🔥

Connect with me through @utsabdev