DEV Community: Sidharth Sreejil

[Boost]

Sidharth Sreejil — Tue, 22 Apr 2025 15:32:26 +0000

Glorious Phil P. for Huxler

Apr 22 '25

Building vs Hiding: Why Public Creation Wins in the Long Run

#buildinpublic #beginners #startup #project

Comments

2 min read

Backrr: A Modern Sponsorship Management Platform with KendoReact

Sidharth Sreejil — Mon, 24 Mar 2025 07:27:49 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Backrr is a comprehensive sponsorship management platform that connects content creators with potential sponsors. Built with Next.js 15, TypeScript, and KendoReact components, it provides a seamless experience for managing sponsorship opportunities.

Key features:

Sponsor listing creation and management
Detailed sponsorship opportunity views
Application management system
User profile management
Dashboard with analytics

Demo

Live Demo: backrr.vercel.app

Github: https://github.com/sid-js/backrr

KendoReact Experience

Here's a detailed breakdown of how I utilized KendoReact's free components:

Layout Components

AppBar - Main navigation header with user profile and notifications
AppBarSection - Organizing navigation elements and logo
Drawer - Sidebar navigation with collapsible functionality
DrawerContent - Content container for the sidebar menu ### Data Display
Grid - Used in sponsor listings management with sortable columns and custom actions
GridColumn
Customized columns for sponsor data display
Card/CardBody/CardHeader - Used throughout the application for:
- Sponsor listing details
- User profile information
- Dashboard analytics cards
- Application forms

Form Elements

Input - Used in:
- Authentication forms (login/signup)
- Sponsor listing creation
- Profile editing
Button - Throughout the application with different themes:
- Form submissions
- Navigation actions
- CRUD operations
TextArea - For description fields in sponsor listings
Feedback & Notifications
Notification - User feedback for:
- Form submissions
- Error messages
- Success confirmations
NotificationGroup - Managing multiple notifications
Badge - Notification indicators in the navigation
Navigation
TabStrip/TabStripTab - Admin interface organization:
- Application management
- Listing editing
- Profile sections

User Interface

Avatar - User profiles and sponsor logos
Chip - Displaying:
- Sponsorship categories
- Budget amounts
- Industry tags

AIm to Impress

Our platform integrates AI technology specifically for enhancing the sponsorship application process through AI-Generated Application Notes. Here's how we implemented this feature:

AI Application Note Generation

The feature is implemented in SponsorApplicationForm.tsx, where we use an AI model to help users create compelling application notes based on their profile data and the sponsorship listing details.

Implementation Process:

Data Collection
- User profile information (audience size, industry, social links)
- Sponsorship listing details (requirements, budget, target audience)
- User's initial application draft
AI Integration
I used OpenRouter API to integrate the LLM Model to generate the application Note.
User Interface Integration
"Generate with AI" button in the application form
Real-time preview of generated content
Ability to edit and customize the AI-generated note

Building in public might seem daunting, but this guide from Huxler makes it easy to start—no matter where you are in your journey!

Sidharth Sreejil — Sun, 02 Mar 2025 10:56:19 +0000

How to Start Your #BuildInPublic Journey (Even If You’re Just Getting Started)

Glorious Phil P. for Huxler ・ Mar 2

#buildinpublic #beginners #project #webdev

Echodiary : AI-Powered Diary with AWS Amplify

Sidharth Sreejil — Sun, 26 May 2024 19:48:46 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What we Built

We created Echodiary, a user-friendly diary-making Web App using AWS Amplify Gen 2. Echodiary allows users to document their daily experiences by talking to our mascot Echo, which transcribes voice to text, or by writing entries manually. Users can enhance their diary entries with photos, making memories more vivid. The app features a one-click AI Content Enhancement ✨ to improve grammar and structure. Additionally, AI-generated weekly highlights and personalized suggestions help users reflect on their week and improve mental health and personal growth.

Echodiary combines advanced technology with user-friendly features to offer a seamless and enriching diary-keeping experience.

Demo

Live Deployment: echodiary.live
Source Code: GitHub Repository

Dashboard Page

Creating New Diary Entry

Diary Entry with Mood Analysis

Landing Page

Journey

Initially, we set out to create a basic CRUD app with Amplify, but as we dove into development, we were astounded by its capabilities. This got us thinking about ways to push the envelope. We noticed the lack of a modern diary app infused with AI. What started as a simple diary app evolved into something much grander.

We recognized that traditional typing might not suit everyone, so we integrated speech recognition to allow users to express themselves orally. But we didn't stop there. We wanted to elevate the content beyond mere transcription, so we introduced AI-enhanced features to refine grammar and structure.

However, we found that the experience lacked warmth. To bridge this gap, we introduced "echo" our friendly mascot, to foster a sense of connection with the user. With echo, users could engage in a dialogue, making the app feel more like conversing with a friend.

As our diary entries accumulated, we realized the potential for insights. Thus, we incorporated mood tracking and AI-generated highlights to distill meaningful moments from the entries. The result is an app that not only captures moments but also enriches and reflects upon them.

As we progressed with development, we encountered and familiarized ourselves with numerous functionalities such as Amplify Serverless Functions and leveraged AWS Bedrock to enhance our AI capabilities, ultimately refining our app for optimal performance.

Connected Components and Feature Full

We have used Connected Components and all four features: Data, Authentication, Serverless functions, and File Storage.

Data: The diary entries are securely stored in Amplify Storage (DynamoDB) with authorization rules ensuring that only the diary owner has access.
Authentication: The users are authenticated using Amplify Auth(Cognito) to access the Dashboard and create diary entries.
File Storage: Users can add images to the Diary Entries which are securely stored in Private/Protected S3 Buckets using Amplify Storage
Serverless Function: We utilize a serverless function to invoke the AWS Bedrock Model (mistral-7b-instruct) for enhancing diary text content and generating weekly highlights for users.
Connected Components: We used the Authenticator Connected Component to manage user authentication and the Storage Image and Storage Manager components to handle images within diary entries.

Additional Features

AWS Bedrock: We used AWS Bedrock to enhance the diary text content and to generate the Weekly Highlights using Mistral AI's mistral-7b-instruct model.
Amplify AI/ML Predictions (AWS Comprehend): We used Amplify Predictions to perform Sentiment Analysis of the user's diary to analyze their mood.
Voice Enabled Diaries: We used the Web Speech Recognition API to let users express their thoughts with their voice and transcribe them into the diary text.
AI Content Enhancement: We used AWS Bedrock to enhance the diary's text content and improve the grammar and structure and also to generate Weekly Highlights.

This is a submission by a team of 2.

Team Members:

A Roadmap to Machine Learning 🧠 with Tensorflow: Your Path to AI Mastery

Sidharth Sreejil — Sun, 21 May 2023 14:30:43 +0000

Introduction:

Machine Learning (ML) is revolutionizing industries and reshaping the world we live in. If you're eager to embark on a journey into the realm of AI, we've got you covered! In this article, we present a comprehensive roadmap that will guide you through the fundamentals of ML using the powerful Tensorflow framework developed by Google. Buckle up and get ready to unleash the potential of ML!

1. Learn the Basics

To lay a strong foundation, start by acquainting yourself with the fundamental principles of statistics and linear algebra. Understanding these concepts will give you the necessary tools to grasp the inner workings of ML algorithms and their underlying mathematical principles.

2. Python Programming

Python has emerged as the go-to language for ML enthusiasts. Dive into Python programming and familiarize yourself with its syntax, libraries, and tools. Python's versatility and vast ML ecosystem make it an ideal choice for implementing ML models.

3. Dive into Tensorflow

As you progress, it's time to dive into Tensorflow. This open-source framework provides a robust platform for building, training, and deploying ML models. Familiarize yourself with tensors, operations, and the core concepts of Tensorflow, enabling you to leverage its full potential.

4. ML Algorithms

Broaden your ML repertoire by exploring various algorithms, such as linear regression, decision trees, and neural networks. Gain a deep understanding of their strengths, weaknesses, and use cases. Through practical examples and exercises, develop the skills to apply these algorithms to real-world problems.

5. Deep Learning and Neural Networks

To unlock the full potential of ML, delve into the world of deep learning and neural networks. Understand the architecture and concepts behind deep learning algorithms. Explore convolutional neural networks (CNNs) for image recognition and recurrent neural networks (RNNs) for natural language processing. Immerse yourself in the cutting-edge techniques that power AI applications.

Build Real-World Projects

Apply your newfound knowledge to real-world projects. Engage with diverse datasets and tackle ML challenges head-on. Building ML models and solving practical problems will enhance your skills and solidify your understanding of ML concepts.

By following this roadmap, you'll embark on an exciting ML journey that takes you from the basics to advanced concepts. Armed with Tensorflow and a deep understanding of ML algorithms, you'll be well-equipped to navigate the thriving world of AI. Embrace the possibilities of ML and contribute to the AI revolution that is shaping our future. Let the learning begin!

Remember, perseverance and hands-on practice are key to mastering ML. Stay curious, keep experimenting, and never stop exploring the endless possibilities of AI-driven solutions.

Effortlessly Deploy 🚀 Next.js Projects with Vercel

Sidharth Sreejil — Wed, 05 Apr 2023 09:02:10 +0000

Are you tired of spending hours configuring your web projects for deployment? Look no further than Vercel, the cloud platform for modern frontend teams. With Vercel, you can effortlessly deploy your Next.js projects in just a few steps. Here's how:

1. Create a Vercel Account

First, sign up for a Vercel account at vercel.com or login to your existing account using GitHub/GitLab.

2. Add a New Project

Once you've signed in to your account, go to the Vercel dashboard and click on 'Add New', then select 'Project'. This will prompt you to connect your repository.

3. Connect Your Repository

Connect your GitHub account and select the Git Repository that you want to import. Once you've connected your repository, Vercel will automatically import your project and start the deployment process.

4. Configure and Deploy

If you have custom build commands or .env variables that your app uses, you can configure them in the Vercel dashboard before deploying your project. This step is optional, but can be useful for more complex projects.

5. Your Deployment is Ready

Once your project is deployed, you can visit it from the subdomain that is assigned by Vercel. From here, you can configure additional options like Custom Domains, SSL certificates, and more.

That's it! With Vercel, deploying your Next.js projects has never been easier. Say goodbye to complicated deployment processes and hello to effortless deployment with Vercel.

Regroot - Search Job Listings (MongoDB Atlas Hackathon 2022 Submission)

Sidharth Sreejil — Wed, 07 Dec 2022 12:46:25 +0000

What I built

Regroot - Rerooting Professions

A web app to search from 1000s of IT Jobs and challenge the new era of mass layoffs. Built for MongoDB Atlas Hackathon 2022.

Category Submission:

Search No More: Build an application with full-text search capabilities using MongoDB Atlas and Atlas Search

App Link

Vercel Deployment : https://regroot-three.vercel.app/

Screenshots

Description

Features

MongoDB Atlas Full Text Search Capabilities
Search with Job Title, Location and much more.

Link to Source Code

https://github.com/sid-js/regroot

Permissive License

MIT License

Background

Over recent months, tech companies have been laying workers off by the thousands. It is estimated that in 2022 alone, over 120,000 people have been dismissed from their job at some of the biggest players in tech. The Search no More category gave light to build a web app for people to search for job listings.

How I built it

I built the app using NextJS while styling it with TailwindCSS. I learned how to use Mongo's Official Drivers for NodeJS and implement MongoDB Atlas Full Text Search with my app along with NextJS API Routes.

Additional Resources/Info

Atlas Search

Introducing regroot🌱 : A recruitment platform.

Sidharth Sreejil — Thu, 17 Nov 2022 12:17:06 +0000

Hey Everyone,
I'm so excited to participate in the MongoDB Atlas Hackathon 2022 on DEV. I've decided to document the development of my project submission for this Hackathon.

Introducing Regroot

Regroot is a jobs/internships listing website aimed at startups and growing tech companies. It will also be a pathfinder to better jobs for people who have suffered from ongoing mass layoffs.

MVP Kickstart

Job/Internship Search with the help of Atlas Full Text Search.
Employers can list jobs/internships.

Future Roadmap

Users can create their own public profiles/portfolio.
Community feed and forums.

Proposed Tech Stack

Next.JS (API & Frontend)
MongoDB (Database)
NextAuth (Authentication)
TailwindCSS and Flowbite React (Styling)

Development

I'm trying to develop the basic MVP and the extra features within 2 weeks and will be documenting my process through articles. Thanks for checking this out and let me know your thoughts about this project.

3 Free Resources to Learn React in 2022

Sidharth Sreejil — Sat, 29 Oct 2022 12:23:11 +0000

3 FREE Resources to Learn React in 2022

React is still one of the most popular JavaScript libraries used to build interactive frontend experiences. Here are 3 free resources to learn React in 2022 and make your way as a frontend developer.

React Docs (Beta)

The new React Docs (Beta) has interactive examples and visual diagrams and easier explanations to help you learn React by yourself. The official documentation will help you with all the basics including JSX , Hooks and more.

Free React Course for 2022 by freeCodeCamp.org

In this 12 hour free course you will learn React by building eight real-world projects and solving 140+ coding challenges.

React JS Full Crash Course 2022 by JavaScript Mastery

In this 1 hour crash course you will learn everything from the essential JSX syntax all the way to more advanced React topics, like state, hooks, data fetching, and more.

React might be a tough challenge for most people but with sheer will and consistent learning and coding, you can be a pro React Developer.

Follow me on Instagram and on Twitter to be updated with everything about Web Development.

3 FREE Resources to Learn JavaScript in 2022

Sidharth Sreejil — Sat, 22 Oct 2022 04:47:20 +0000

3 FREE Resources to Learn JavaScript

JavaScript is the most important technology to learn as a web developer. The internet is filled with thousands of courses which offer to teach your JavaScript.

Even though some of the paid courses might be a great way to learn JavaScript, there are endless FREE resources out there which will teach you the same thing. I have curated a list of free resources that I have followed while learning JavaScript.

#1 JavaScript Courses by freeCodeCamp.org

freeCodecamp.org offers many interactive courses and also videos for you to learn JavaScript and other Web Development Technologies.

#2 Learn JavaScript Basics course by codedamn

codedamn is a YouTube Channel which offers 100s of Videos related to Web Development and JavaScript frameworks.

codedamn offers a Free Learn JavaScript Basics course which will introduce you to JS and allow you to use it to add interactivity to your existing HTML/CSS codebase.

#3 JavaScript Tutorial course by Clever Programmer

This 12 Hour Course will take you from learning the basics of JavaScript to building a fully functional Netflix Clone and much more mini-projects.

Start your Web Development Journey

Now that you have all the resources need to learn JavaScript, start by doing small projects and learning new stuff everyday. Follow me to get daily tips/threads on Web Development and JavaScript and learn something new everyday with me.

Web Developer Roadmap for 2022 ⚡ (React, GraphQL and more)

Sidharth Sreejil — Sun, 16 Oct 2022 14:48:01 +0000

Over 252,000 websites are created every day 🌩️
Ever since, building websites have become more easier now with new tools and technologies.

Here is a Web Developer Roadmap for you in 2022 :

☁️ The Fundamentals : HTML , CSS , JavaScript.

Learning the core building blocks of the web is essential for you to become a web developer.

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

Picking a Web Framework ✅

ReactJS
Angular
Vue
Svelvte

You must pick the right framework which suits you to unlock more powerful tools to extend your core knowledge and easier web development experience.

⚙️ Basic Back-end

The back end of a website comprises things like servers, databases, operating systems, APIs, and more, all of which come together to ensure that the user is served with the correct information as quickly as possible.

Here are some backend tools to learn:

Node.js (Runtime/Server)
REST, GraphQL (APIs)
Firebase 🔥 , MongoDB (Database)
Vercel, Netlify (Deployment)

🛠️ Master Helpful Tools

Using different tools helps you to make your workflow efficient and easier to work on.
A few tools I personally use a lot:

GitHub (Version Control)
NPM Packages (Helpful add-ons)
Webpack/Rollup (Build/Bundling Tools)

If you liked this post, make sure to follow me on Twitter(SidhxrthJS) for more updates.

DEV Community: Sidharth Sreejil

[Boost]

Building vs Hiding: Why Public Creation Wins in the Long Run

Backrr: A Modern Sponsorship Management Platform with KendoReact

What I Built

Demo

KendoReact Experience

Layout Components

Form Elements

Feedback & Notifications

Navigation

User Interface

AIm to Impress

AI Application Note Generation

Building in public might seem daunting, but this guide from Huxler makes it easy to start—no matter where you are in your journey!

How to Start Your #BuildInPublic Journey (Even If You’re Just Getting Started)

Glorious Phil P. for Huxler ・ Mar 2

Echodiary : AI-Powered Diary with AWS Amplify

What we Built

Demo

Dashboard Page

Creating New Diary Entry

Diary Entry with Mood Analysis

Landing Page

Journey

Connected Components and Feature Full

Additional Features

This is a submission by a team of 2.

Team Members:

A Roadmap to Machine Learning 🧠 with Tensorflow: Your Path to AI Mastery

Introduction:

1. Learn the Basics

2. Python Programming

3. Dive into Tensorflow

4. ML Algorithms

5. Deep Learning and Neural Networks

Build Real-World Projects

Effortlessly Deploy 🚀 Next.js Projects with Vercel

1. Create a Vercel Account

2. Add a New Project

3. Connect Your Repository

4. Configure and Deploy

5. Your Deployment is Ready

Regroot - Search Job Listings (MongoDB Atlas Hackathon 2022 Submission)

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background

How I built it

Additional Resources/Info

Introducing regroot🌱 : A recruitment platform.

Introducing Regroot

MVP Kickstart

Future Roadmap

Proposed Tech Stack

Development

3 Free Resources to Learn React in 2022

3 FREE Resources to Learn React in 2022

React Docs (Beta)

Free React Course for 2022 by freeCodeCamp.org

React JS Full Crash Course 2022 by JavaScript Mastery

3 FREE Resources to Learn JavaScript in 2022

3 FREE Resources to Learn JavaScript

#1 JavaScript Courses by freeCodeCamp.org

#2 Learn JavaScript Basics course by codedamn

#3 JavaScript Tutorial course by Clever Programmer

Start your Web Development Journey

Web Developer Roadmap for 2022 ⚡ (React, GraphQL and more)

☁️ The Fundamentals : HTML , CSS , JavaScript.

Picking a Web Framework ✅

⚙️ Basic Back-end

🛠️ Master Helpful Tools