DEV Community: Ishaan Sheikh

Merry Christmas fellow devs 😊 https://codepen.io/sheikh_ishaan/full/PowjJrj

Ishaan Sheikh — Wed, 25 Dec 2024 03:52:49 +0000

Dev OPinion - Netlify Dynamic Site Challenge Submission

Ishaan Sheikh — Mon, 06 May 2024 04:50:48 +0000

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

I have built an online poll for the common questions between developers. Each question has two options. Users can choose any one option. The votes are recorded anonymously.

Demo

The demo is available here - devopinion.netlify.app

Source Code on GitHub -

Dev OPinion

It is a app created for Netlify Dynamic Site challenge on Dev.

Tech stack

Nuxt.js
Netlify
Netlify Blob (for storage)

View on GitHub

Platform Primitives

Netlify Blobs

I have used Netlify Blobs to store the votes for each question.

Each blob holds a JSON array of votes for each option. Below is an example of data stored in a blob.

[341, 1231]

Here, the first element in the array is the number of votes for the first option and the second element is a number of votes for the second option.

I have used the setJSON method to set the value as json in the blob.

await store.setJSON(key, [131, 231]);

To get the value as JSON I have used the following code

await store.get(key, {
    type: "json",
});

Netlify Functions

I have used the Netlify functions as API to fetch and add votes in the blob storage.

Horizontal scroll animation

Ishaan Sheikh — Sat, 09 Mar 2024 10:31:04 +0000

Horizontal scroll animation.

Inspired from this video by Kevin Powell.

This can be used to show client logos, testimonials, or screenshots of your application.

Image zoom animation

Ishaan Sheikh — Sat, 03 Feb 2024 07:30:55 +0000

This can be used in the hero section of the landing page.

How to use Linode Object Storage with Laravel

Ishaan Sheikh — Fri, 24 Feb 2023 08:30:00 +0000

What is Linode Object storage?

Linode Object Storage is a highly available S3 compatible object storage.
It is used to manage unstructured data such as images, videos, etc.

Setting up Object Storage in Linode

Go to Linode cloud console.
Go to Object Storage and select Create Bucket.
From the Object storage dashboard, go to Access key tab and select create access key.
Give it a name, and give it Read/Write access for the bucket created in the previous step.
It will show you the access and secret keys, copy and save it securely.

Configuring Laravel application

Since Linode Object Storage is a S3 compatible, we can use the S3 driver in Laravel for managing files.

To use the S3 driver we need to install the flysystem package in Laravel. Use the following command to install the package
```
composer require league/flysystem-aws-s3-v3 "^3.0"
```

We need to create some environment variables in the .env file of Laravel application as follows

LINODE_KEY="your-linode-access-key"
LINODE_SECRET="your-linode-access-secret"
LINODE_ENDPOINT="https://ap-south-1.linodeobjects.com"
LINODE_REGION="ap-south-1"
LINODE_BUCKET="dev-to"
LINODE_BUCKET_URL="https://dev-to.ap-south-1.linodeobjects.com/"

You can get the bucket url from the details of the bucket in linode cloud console.

Go to config/filesystems.php config file and add the following in the disks array.

<?php

'disks' => [
  ...
 'linode' => [
     'driver' => 's3',
     'key' => env('LINODE_KEY'),
     'secret' => env('LINODE_SECRET'),
     'endpoint' => env('LINODE_ENDPOINT'),
     'region' => env('LINODE_REGION'),
     'bucket' => env('LINODE_BUCKET'),
     'visibility' => 'public',
  ],
  ...
]

Make sure you have linode set as the default file system disk in the .env file. Otherwise you have to specify each time you call a method.
```
FILESYSTEM_DISK=linode
```

Storing files in Linode

Now you can use the available methods in Laravel to manage the files in Linode Object Storage.

For example,

use Illuminate\Support\Facades\Storage;

Storage::disk('linode')->put('avatars/1', $content);

$contents = Storage::get('avatars/user.jpg'); // No need to specify disk name if the default is set to 'linode'

Tiny CRM - Linode + DEV Hackathon Submission

Ishaan Sheikh — Sat, 18 Feb 2023 06:04:06 +0000

What I built

I have built a CRM (Customer Relationship Management) system named TinyCRM.

Category Submission:

I am submitting this project in the SaaS Superstars category.
As this project has a potential to become a profitable SaaS product.

App Link

The demo of the application is available here.

Use the below credentials to login -
Email - admin@tinycrm.com
Password - password

Note: The test data is refreshed every hour.

Screenshots

Description

This CRM systems help SMEs tracking their sales and manage the customer relationships easily.

This app has the following entities in it -

1. Account - Stores the information of client organisation.

2. Contact - Stores the information of the individual contacts in the client's organisation.

3. Lead - Stores the information of Potential clients.

4. Deal - Stores the information of Opportunities.

5. Products - Stores the list of products that the company sell.

Link to Source Code

Tiny crm

This is a small and Open-source CRM application created using the Filament PHP.

Tech stack

PHP (Laravel)
Filament PHP

Local Installation

Clone the repository

git clone https://github.com/frikishaan/tiny-crm.git

Install dependencies

composer install #installing php dependencies

npm install # installing the JS dependencies

npm run build # to build the frontend assets

Create environment file

cp .env.example .env

Generate application key

php artisan key:generate

Update environment variables

Replace the following values in .env file with your database credentials. For example -

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=tiny_crm
DB_USERNAME=postgres
DB_PASSWORD=password

Migrate the database

php artisan migrate

Optionally, you can create the dummy data by running the seeder as -

php artisan db:seed

Create a user

php artisan make:filament-user

View on GitHub

Permissive License

MIT license

Background

There are a lot of CRM systems available in the market currently such as Salesforce, Microsoft Dynamics, etc.
The problem with these systems are that they are very broad and quite expensive and not easy to use and also needs a dedicated developer to manage it, which becomes hard for SMEs to use and keep using these systems.

So, I decided to make a CRM system which is easy to use have important required functionalities and at the same time not too expensive for SMEs.

How I built it

I have used linode's compute instances for servers and the linode's managed PostgreSQL databasefor persistent storage.

While making this app I have learned to create compute instances in the linode's cloud platform.
I have also learned installing Ngnix server and SSL certificate on the server.

I have also learned creating a managed database instance on cloud and why it is an easy solution for solo devs and small teams as one does not need to manage the database by themselves.

I have used Laravel web framework for creating the app. I have also used Filament admin panel generator to quickly generate CRUD app functionality.

Additional Resources/Info

Codebin - MongoDB Atlas Hackathon 2022 Submission

Ishaan Sheikh — Thu, 08 Dec 2022 06:30:51 +0000

What I built

I have built a platform (Codebin) where user can create and view their code snippets. Users can access the list of snippets anytime using this platform.

Category Submission:

Think Outside the JS Box

App Link

The application is live at codebin.onrender.com.

Screenshots

Description

This platform is used to create and view code snippets.
The users can view all their code snippets from the dashboard.
The users can also add tags snippets.
There is also a search feature available in the app which uses the MongoDB atlas' full-text search feature. It helps users to find the snippet quickly.

Link to Source Code

frikishaan / codebin

This app is used to create and access code snippets. It is created for a hackathon on Dev.

Codebin

This is a app created for MongoDB hackathon on Dev.

Tech stack

ASP.NET Core (C#)
MongoDB
Auth0
Bootstrap
JavaScript
Docker

Live Demo

Live demo is available here.

View on GitHub

Permissive License

MIT

Background

I got inspiration from the Pastebin, where user can create pastes with any content and access them from anywhere. So I decided to make an application where users can store their code snippets and access them whenever they need from the dashboard.
Users can also search the code snippets using the full-text search functionality built using the MongoDB's in-built feature.

How I built it

I used MongoDB as a primary database for the application.

I learned how to use MongoDB with .NET applications.

I have also used MongoDB's Full-text search feature to search for code snippets for a user in application.

I also learned some do's and don't while creating a .NET Core application.

I have also learned implementing authentication using Auth0 in a .NET Core application.

Additional Resources/Info

Using Python list as a Stack

Ishaan Sheikh — Sat, 05 Nov 2022 13:34:08 +0000

What is a stack?

Stack is a data structure which follows the *LIFO * property, which means Last-In-First-Out. The element inserted last will be the first to be removed.

Stack operations

Push- To insert new element in the stack.
Pop- To remove an element from the stack.

Using python list as stack

We can use the python's in-built list as stack data structure.

Push

You can use the in-built append method to insert element at the end of the array/list.

stack = []
stack.append(3)
stack.append(4)
stack.append(5)
stack.append(6)

print(stack) # [3, 4, 5, 6]

Pop

To pop an element we can use the in-built pop method on list.

print(stack.pop()) # 6

This method will remove the last element in the list, if we do not specify any element to be removed.

Getting top of stack

To get the top element in the stack we can use a python's in-built feature to index list from the end.

print(stack[-1]) # 5

Please suggest some resources for learning.

Ishaan Sheikh — Mon, 17 Oct 2022 13:06:17 +0000

Hello,

Do you know any courses where someone teaches creating anything from scratch, like database, search engine, compilers, programming languages, etc.

From few months I am getting interested in these kind of things, as will help me understanding the systems in depth.

I will even consider a paid a course/resource.

I have checked Codecrafters, but it is quite expensive in my country.
I have also looked into some free resources.

Also please share if you have tried these kind of tutorials before, are they good?

Thanks in advance.

How to force HTTPS in Laravel

Ishaan Sheikh — Wed, 20 Apr 2022 05:30:16 +0000

To force your website to load with HTTPS in Laravel you can add the following code in your route/web.php file.


<?php

use Illuminate\Support\Facades\URL;

if(app()->environment('production')){
    URL::forceScheme('https');
}

....
// Your routes here

It is a one of doing it, of course there are other ways to do so. You can add one in the comments below.

MongoDB Submission Post - Endorsedeck

Ishaan Sheikh — Thu, 13 Jan 2022 17:05:26 +0000

Introduction

This is my submission for the atlas hackathon. This app allows you to collect testimonials from your customers at a single place. The app is a clone of testimonial.to product.

Overview of My Submission

I have used the mongodb serverless instance.

Tech stack

Laravel
Livewire
MongoDB and MySQL
Tailwind

This app has following main entities -

Users
Walls
Testimonials

I have used MySQL for users and all the authentication stuff as it comes in-built in laravel, also it does not need many read and write operations.

I have used MongoDB serverless instance for the walls and testimonials entities as they have high number of read and write operations.

Submission Category:

My submission category is Automation Innovation.

Link to Code

frikishaan / endorsedeck

Manage all your testimonials at a single place.

Endorsedeck

This is a project created for Atlas hackathon on Dev.to.

Overview

Using this app users can collect all the testiomials at one place for all of the products and services.

User can create walls from the dashboard.

Users can share the public URL of their wall where other users can submit their review and see other review.

You can see all your reviews by clicking the eye icon form dashboard.

I have used MongoDB Serverless instance.

View on GitHub

Additional Resources / Info

The demo of the app is available here at endorsedeck.herokuapp.com

User can create walls from the dashboard.

Users can share the public URL of their wall where other users can submit their review and see other review.

Every testimonial is associated with a wall. You can see all your reviews by clicking the eye icon form dashboard.

I have used MongoDB Serverless instance for this project to store walls and testimonials.

Write something on my wall here.

Tailwind Responsive Timeline Example

Ishaan Sheikh — Sun, 25 Jul 2021 08:54:21 +0000

A simple timeline component using Tailwind CSS.

DEV Community: Ishaan Sheikh

Merry Christmas fellow devs 😊 https://codepen.io/sheikh_ishaan/full/PowjJrj

Dev OPinion - Netlify Dynamic Site Challenge Submission

What I Built

Demo

frikishaan / devopinion

App for the Netlify Dynamic Site Challenge

Dev OPinion

Tech stack

Platform Primitives

Netlify Blobs

Netlify Functions

Horizontal scroll animation

Image zoom animation

How to use Linode Object Storage with Laravel

What is Linode Object storage?

Setting up Object Storage in Linode

Configuring Laravel application

Storing files in Linode

Tiny CRM - Linode + DEV Hackathon Submission

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

frikishaan / tiny-crm

A small and Open-source CRM built with Filament PHP & Laravel ❤.

Tiny crm

Tech stack

Local Installation

Clone the repository

Install dependencies

Create environment file

Generate application key

Update environment variables

Migrate the database

Create a user

Permissive License

Background

How I built it

Additional Resources/Info

Codebin - MongoDB Atlas Hackathon 2022 Submission

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

frikishaan / codebin

This app is used to create and access code snippets. It is created for a hackathon on Dev.

Codebin

Tech stack

Live Demo

Permissive License

Background

How I built it

Additional Resources/Info

Using Python list as a Stack

What is a stack?

Stack operations

Using python list as stack

Push

Pop

Getting top of stack

Please suggest some resources for learning.

How to force HTTPS in Laravel

MongoDB Submission Post - Endorsedeck

Introduction

Overview of My Submission

Tech stack

Submission Category:

Link to Code

frikishaan / endorsedeck

Manage all your testimonials at a single place.

Endorsedeck

Overview

Additional Resources / Info

Tailwind Responsive Timeline Example