Discover @candraKriswinarto Open Source projects

Candra Kriswinarto (@candraKriswinarto)

candraKriswinarto

Stars
728
Global Rank 39,997 (Top 2 %)
Followers 519
Following 2
Registered about 5 years ago
Most used languages

JavaScript
59.1 %

HTML
13.6 %

TypeScript
13.6 %

CSS
11.4 %

PHP
2.3 %
Location 🇮🇩 Indonesia
Country Total Rank 205
Country Ranking

JavaScript
34

TypeScript
60

CSS
72

HTML
94

PHP
1,327

react-crud-context-api

Create CRUD application using react hooks and context api

dymanic-form

Create Dynamic Form Fields in React

nextjs-auth

Build a complete sign-up and sign-in system using Next.js, PostgreSQL database, NextAuth, and Prisma. Enable smooth user authentication and routing within your Next.js app.

form-validation

Create simple signup form with formik and use yup for the validation.

react-quiz-app

create quiz app with react and redux

CRUD-redux-toolkit

Let's learn how to implement CRUD operation in redux toolkit with react, we also learn how to use react router v6, and use tailwind css for the styling.

next-tailwind-theme

Adding dark mode toggle in next.js and tailwind css with next-themes package.

react-multi-step-form

React-infinite-scroll

Create Infinite scroll image gallery using react hooks and unpslash api

custom-cursor-react-framer-motion

Create custom cursor when hover text, build with react and framer motion

simple-todoapp-with-next13

nextjs-blog-example

react-markdown-blog

Create a blog with markdown file in react application, and using syntax highlighting to showing code nicely and also add the toggle dark mode functionality.

infinite-scrolling

youtube2mp3

Building a YouTube to MP3 downloader with React, that allows users to search for and download YouTube videos in MP3 format

firestore-crud

crud-with-react-query

react-toast-component

instantChat

imText

build image-to-text app with reactjs and Tesseract.js, so we can upload image and get the text from the image

react-calculator-app

We will create simple calculator with react, we also gonna use context api to working with the state.

modal-with-react

nextlingo

fetch-api-clean-code

write better fetch api in javascript

react-setup-tutorial

Setup webpack ad babel for react application

signup-with-react-hook-form

Create signup form with material ui and integrate with react-hook-form, we also learn how to add validation with yup.

react-dark-mode

dynamic-table

create dynamic table react component

simple-react-pagination

crypto-update

create crypto update app with react, chart js and coinGecko api. we will learn a lot from this video such as how to use react-router-dom6, how to create custom hooks, and how to styling the app with tailwind css.

scroll-indicator-progress-bar

We will create scroll indicator progress bar, I see this indicator progress bar on some blogs, which helps gauge how much of the article is left to read.

simple-dictionary

create simple dictionary app with react and tailwindcss

Responsive-Vertical-Timeline

Create responsive vertical timeline using HTML and CSS

react-parallax

Create parallax effect with react-parallax package

shortener_url

Create shortener app with shrtco api, so we just need to fetch data from the api and add long url as e parameter and then we get the shortener url, so simple. we also try to implement copy to clipboard functionality with react-copy-to-clipboard package

watchme

create popular movie with nextjs and tailwind css

todo-app-with-react-redux

React-Pagination-with-Tanstack-Query

random-quote

Create random quote generator using react hooks

react-smooth-scrolling

Implement smooth scrolling in react app without any package with simple example.

crud-php-oop-pdo

Create CRUD using php

image-filter

Let's create another cool project with reactjs. in this video we will create filter image project, so you can upload and add filter to the image you can select instagram filter or even you can custom the contrast, saturation etc. and the good things is you can download the image result. 🔥

react-images-gallery

xe-currency

grid-layout

nextjs-auth-with-clerk

react-filter-animation

Create awesome filter animation with react, we also learn how to create react app with vite, how to create env file and get the image from themoviedb api.

owl-carousel-custom-stlye

Making custom navigation and the dots style for owl-carousel

book-management-app

Create book management app with react, and we are gonna implement how to store data into the localStorage using custom hooks useLocalStorage

genieart

qr-code-generator

Create qr code generator app with react, tailwindcss and qr-tiger api

canwatch

Single product landing pages

contact-form

Responsive contact form using html and css

loading-page

create random cat image generator using react, and show loading page before showing the image

marvel-pedia

Marvel Pedia is a web application built with Next.js and Tailwind CSS that allows users to explore information about Marvel characters using the Marvel API.

canfood

restaurant website

auto-horizontal-scroll

react-redux-tut

Create simple app with redux

skeleton-screens

Implementing Skeleton Screens In React with Material-UI.

sticky-sidebar

Create sticky sidebar when scroll with html and css

users-table-filter

create table with search, filter, and pagination

renderonline

weatherApp_express_ejs

Create weather app using node.js, express and ejs

birth-age

google-vioce-landing-page

Create Google Voice landing page just using html and css

contact-form-with-emailjs

create contact form with tailwind and integrate with email js

dark-light-toggle-login-page

Responsive dark and light toggle switch login page

intercepting-routes-nextjs

candraKriswinarto

find-images-app

Create search images app with react and unsplash api, we also learn how to create useAxios hook, learn how to styling the app with tailwind, and also create beautiful skeleton loading page.

Covid-19-indo

Create simple landing page data information for covid 19 in Indonesia

tab-music

simple tab music using vanilla javascript

awesome-navbar

color-flow

Create app that will generate random gradient color with react

todo-list-2

digital-clock

Simple digital clock

amazing-css-tabs

Create css tabs illustrations

react-todo

Create simple todo list using react

genieart-api

react-password-indicator

Create progress bar in password input field, for checking the score of the password

animation-css-grid

add animation in to css grid with animate-css-grid package

canhumane

Create website using framework Codeigniter and integrate the style using scss live server in Vscode

react-scroll-animation

cantodo

Create todo list using object oriented programming on vanilla javascript.

back-to-top-button

todo-list

Simple todo-list with modal

api-for-fun

Create project that show list of api, so you can use the api for fun project, this project have search functionality and the filters.

canshopi

free trial shop website

simple-calculator-php-oop

Create simple calculator app using object oriented concept on php

RPS

Rock Paper Scissors shoot!