Giter Club home page Giter Club logo

sachin-chaurasiya / code-snippets-builder Goto Github PK

View Code? Open in Web Editor NEW
22.0 1.0 6.0 4.16 MB

Drag and drop code snippet builder, effortlessly showcase your code in a visually appealing and professional manner.

Home Page: https://snippetbuilder.com

License: MIT License

HTML 1.35% TypeScript 97.22% CSS 0.71% Shell 0.04% JavaScript 0.67%
chakraui code-snippets reactjs code-snippet-builder appwrite appwrite-auth appwrite-database appwrite-hackathon typescript netlify

code-snippets-builder's Introduction

About me πŸ‘¨πŸ»β€πŸ’»

HelloπŸ‘‹, I'm Sachin Chaurasiya, a software engineer from India who's all about creating cool stuff and helping people out. I've been at it for over 3 years now and I really enjoy making products that folks love to use.

I'm a big fan of Open Source, which means I like sharing and working on free software with others. You might even catch me volunteering in different groups!

When it comes to my work, I believe in making sure customers are happy, testing things thoroughly, and working together with others. I also think it's important to share what we know and write good quality code.

Outside of coding, I enjoy writing blogs about tech topics like JavaScript, TypeScript, ReactJS, and more. I'm always up for learning new things and love sharing what I've learned with others.

Right now, I'm busy working on some Open Source projects like OpenMetadata, a code snippet builder, and ReactPlayIO.

If you need a hand with writing about tech stuff or want to team up on a project, feel free to reach out! Let's connect and make some awesome things together! 😊

Currently πŸ“

NPM Packages Published by Me πŸ“¦

npm npm npm

Languages and Tools πŸ› 

html5
HTML5
css3
CSS3
TailwindCSS
TailwindCSS
JavaScript
JavaScript
TypeScript
TypeScript
React
React JS
NextJs
NextJs
AntD
AntD
Jest
Jest
Cypress
Cypress
NodeJs
NodeJs
Express
Express
Mongo DB
MongoDB
Mysql
MySQL
PostgreSQL
PostgreSQL
Docker
Docker
Git
Git
GitHub
GitHub
Markdown
Markdown
GraphQL
GraphQL
Chakra Ui
Chakra UI

Github Stats πŸ“ˆπŸ“Š

trophy



@sachinchaurasiya87's Holopin board

An image of @sachinchaurasiya's Holopin badges, which is a link to view their full Holopin profile

Recent Blog Posts ✍️

How the Page Visibility API Improves Web Performance and User ExperienceHow the Page Visibility API Improves Web Performance and User Experience

June 26, 2024

Making web applications fast and user-friendly is very important today. One useful tool for this is the Page Visibility API. This API tells developers if a web page is visible to the user or hidden in...



5 Powerful TypeScript Tricks5 Powerful TypeScript Tricks

May 27, 2024

Unlock the full potential of TypeScript with these five powerful tricks that will improve your coding skills. From securing your types with const assertions to mastering the keyof operator, these tips...



How TypeScript Type Predicates Enhance Code SafetyHow TypeScript Type Predicates Enhance Code Safety

May 20, 2024

TypeScript's type predicates are a powerful feature that improves type safety and makes code more reliable. They help confirm what a variable really is, which helps developers avoid errors and makes t...



HTTP Status Codes Explained: Essential Guide for DevelopersHTTP Status Codes Explained: Essential Guide for Developers

May 17, 2024

HTTP status codes are important for web development. They give key information about server requests. Knowing these codes can help you debug better and improve your app's user experience. In this guid...



Simple Guide to Using Intersection Observer API with ReactJSSimple Guide to Using Intersection Observer API with ReactJS

May 15, 2024

The Intersection Observer API is a new web tool that helps developers check when an element in the DOM comes into or leaves the viewport. This is very useful for lazy loading images, infinite scrollin...



React Error Boundary: A Guide to Gracefully Handling ErrorsReact Error Boundary: A Guide to Gracefully Handling Errors

May 12, 2024

React revolves around JavaScript, and as the application expands, certain components may become error-prone, leading to a blank page problem. To tackle this, we should incorporate Error Boundaries. Th...



code-snippets-builder's People

Contributors

anuj-kumary avatar ashish8689 avatar dependabot[bot] avatar sachin-chaurasiya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

code-snippets-builder's Issues

can we remove beacon animation before tour start

Describe the bug
So when i click on tour button is first showing me beacon animation it is misleading for user it seems like loader. So can we remove this beacon.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Dashboard Page'
  2. Click on 'Tour Button'

Expected behavior
After clicking on tour button the walkthrough should start not beacon animation

Video

Screen.Recording.2023-10-11.at.10.39.50.AM.mov

i have come across one error message while login which is not in format

Describe the bug
So while login i have entered wrong password and submit the form and got alert message which is like thisInvalidpassword param: Password must be at least 8 characters so instead of this we can show error message like this Password must be at least 8 characters

To Reproduce
Steps to reproduce the behavior:

  1. Go to login page
  2. Entered wrong value in input field
  3. Click on submit button

Screenshots

Screen.Recording.2023-10-18.at.12.23.31.AM.mov

add sorting and pagination for snippets

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently, there is no way to sort and paginate the snippets.

Describe the solution you'd like
Please provide a clear and concise description of the desired outcome or situation you would like to see.

  • Add support for sorting with creation date and last modified date.
  • Add support for pagination

improvement: store snippet snapshot as base64 url

Is your feature request related to a problem? Please describe.
Currently, we are generating a snapshot of the snippet and storing it as an image file in a storage bucket, however, it's a very frequent process and we are generating multiple snapshots which is not efficient.

Describe the solution you'd like
We should store the snippet snapshot as base64 URL and on UI we can directly render that, this way we don't have to create new images every time for the snapshots and we can save our storage usage.

Describe alternatives you've considered
NO

Additional context
Add any other context or screenshots about the feature request here.
NO

we are showing empty page when there are no snippet on dashboard page

At present, when no snippet has been created, our system displays an empty page. This could be improved. One suggestion is to display a placeholder indicating there's no data, along with a button that users can click to create a new snippet. What are your thoughts on this?

image

Add lazy loading

We should have lazy loading to enhance the application performance.

GitHub Signup

Describe the bug
The access to the platform through GitHub is not working.
When accessing the signup page and selecting the GitHub option, an error is alerted: User (role: guests) missing scope (account).

To Reproduce
Steps to reproduce the behavior:

  1. Go to landing page.
  2. Click on Sign up button
  3. Click on Continue with GitHub button
  4. Autorize OAuth for Code Snippet Builder
  5. See the error on the top left section of screen: User (role: guests) missing scope (account).

Expected behavior
Be able to sign up through GitHub OAuth.

Desktop (please complete the following information):

  • OS: Linux - Manjaro
  • Browser: Firefox
  • Version: 119.0

Create Landing Page

The landing page should have the following sections

  • Showcase
  • Features
  • Get Started

Feedback

  • Sign in/ sign up with google is redirecting back to sign in page, and account is getting created but not able to login
  • Need to add text "Profile" or "Account"
image
  • profile icon is blank
image
  • "Not Verified" might sound better
image
  • Top section is not aligned with other section
image placeholder is missing, title is center-aligned, description below title is missing

Create Editor Page

The editor page should have the following things

  • Toolbar
  • Export Feature
  • Drag and Drop Feature
  • Configuration Sidebar

add support for profile info.

We should show profile info for showing the credibility of the code owner. should support

  • LinkedIn
  • GitHub
  • Twitter

Alert box should fade away after some delay

Describe the bug
I have entered wrong info while login and got error message and when i start filling again details the error message is still persist on UI.

Expected behavior
The error message should fade away after some delay.

Screenshots

Screen.Recording.2023-10-12.at.10.55.45.PM.mov

change social media user name on the fly.

Allow user to change the social media use name on the fly

scenario:
lets say user want to place someone else username instead of there own. the field should be editable.

image

Playground link and demo credentials in readme file

Is your feature request related to a problem? Please describe.

  • There is no demo link available in the readme file to test the application.

Describe the solution you'd like

  • A playground link and demo credentials in readme would help any developer to try and test this and make any necessary contribution to the project.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.