Discover asbhogal/Coffee-Stories Open Source project

A personal portfolio site created for the repo owner to showcase his projects, created using TypeScript, Next.js, API Routes, SWR, SASS, Framer Motion & Playwright.

Personal-Portfolio-Site

A refined, luxury mens and womens fashion store and lifestyle journal built as an SPA using Next.js, TypeScript, Sanity Studio, Shopify, Stripe API, Storybook, React Hook Form, Zod, Tailwind CSS, Shadcn and E2E testing using Playwright from Figma templates created by Process Masterclass leader Nguyen Le. This repo is currently under development.

Vespi-Curated-Fashion-And-Lifestyle

An e-commerce site which allows the user to add, remove and update quantities of an item in a shopping basket using custom context and hooks. Built using React, TypeScript, Chakra UI and Vite.

TypeScript-Shopping-Cart

A fully functional ecommerce website showcasing a range of audio-related tech. Built using TypeScript, Next.js, Sanity CMS, GraphQL, Storybook, Tailwind CSS, Shadcn, Playwright, React Hook Form, Zod and Husky. This repo is currently under development.

Audiophile-E-Commerce-Website

A CRUD app which allows the user to create, review and update invoices, filter and toggle between light and dark mode. Built using Next.js, TypeScript, MongoDB, Tailwind CSS, Shadcn, Storybook, React Hook Form, Zod, Playwright and Husky. This repo is currently under development.

Invoicing-App

A cryptocurrency application which uses Redux RTK Query to pull API data about current cryptocurrency values and news. The user can also search cryptocurrencies and view their ranking, price, market cap and % change as well as see the latest crypto-related news.

Next.js-Cryptocurrency-App

A responsive website built using the Tailwind CSS Framework and HTML5 for a fictional company as part of a challenge by Frontend Mentor and demonstrated by Traversy Media.

Tailwind-CSS-Website

CSS

React-KRYPTO-Responsive-Web-Page

A single web page for an NFT-management platform and app called KRYPTO from mockups created in Figma.

Config files for my GitHub profile.

asbhogal

TypeScript-To-Do-List

A To Do application written in TypeScript which allows the user to add, check off and remove different tasks in the list. This has been compiled using Vite and is currently under development.

A pair programming project which leverages the URL Shortening API and stores condensed URLs using Local Storage.

Frontend-Mentor-URL-Shortening-Project

A series of four digital business cards created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory.)

React-Digital-Business-Cards

A responsive product carousel component created from mockups and assets provided as part of the interview process for Junior Developer at Venture Stream, using React and Tailwind

Venture-Stream-Responsive-Product-Carousel-Component-React

A full-stack clone of the Airbnb site, featuring bookings, reservations, filtering and user authentication. Built using Next.js with SASS, Prisma, MongoDB and Next Auth. This repo is currently under development.

Next.js-Airbnb-Clone

Files from the Learning Git and Github course

learning-git-and-gihub

jQuery-Form-Validation-Project

A form validation project created using HTML5, CSS (SCSS), JavaScript & jQuery

A simple demonstration of interacting with the Test Data API, including the conventional .then methods with a POST request and an async/await GET request.

JavaScript-API-Requests

A live cryptocurrency price which uses CoinGecko's API and .fetch() to return a list of 10 cryptocurrency units and their current value in USD.

Cryptocurrency-Prices

A calculator web app created using HTML5, CSS3 (SCSS) and jQuery.

jQuery-Calculator

An image editor which allows the user to import a picture and adjust it using different filters, including brightness, inversion, saturation and rotation. This has been coded using vanilla HTML5, CSS3 (SCSS) and JavaScript, is fully responsive and is optimized for the web.

Image-Editor

udemy-css3-scss

A modern, clean UI calculator built using React and styled using Chakra UI, with three different theme options.

React-Calculator

A color generator which creates a series of 10 shades and 10 tints in 10% increments from a base hex color and allows the user to copy the hex color to the clipboard. This repo is currently under development.

React-Color-Shades-And-Tints-Generator

Test-Replit-API

A responsive web page rendered using React, SASS & Webpack from a series of high-fidelity mockups created in Figma.

React-Oceanica-Responsive-Web-Page

A full-width footer with navigation links for a company (template.) This has been coded using vanilla HTML5 & CSS3 (SCSS) and is fully responsive, with a stylish, modern interface and optimised for the web.

Footer-Nav-Bar

A currency converter which leverages .fetch() and the ExchangeRate-API endpoint and allows the user to convert between two currencies which refresh every 24 hours. This repo is currently under development.

Currency-Converter

Source code for jQuery module in The Compete Web Developer Course 2.0

jQuery-Udemy-Course

A TDD project using React Testing Library and Jest (for comparisons)

TDD-With-RTL-and-Jest

An eCommerce site which offers a range of technology products using Commerce.js (Headless CMS). The site allows customers to browse the items, switch between cart, checkout and home and add single or multiple products. A Stripe gateway is also configured (in test mode), directing them to the checkout and payment page, styled using Material UI.

React-Tech-Commerce.Js-Site

A project created using JSON with values leveraging fictional data of whisky products for an independent supplier.

JSON-Mini-Project

A simple project which renders a list of item using React with Typescript, built using Vite.

React-Typescript-Project

A contact form project coded using HTML5, CSS3, Bootstrap and PHP as part of the PHP section for The Complete Web Developer Course 2.0. This repo is currently under development.

PHP-Contact-Form

PHP

PHP-Course-Notes-Udemy

Notes and practice from the PHP module of the The Complete Web Developer Course 2.0

PHP

jQuery-Code-Player-Project

A live code player which allows the user to input HTML, CSS and/or JS in three separate windows then outputs this on the right. A project as part of the jQuery section of the Udemy course The Complete Web Developer Course 2.0 by Rob Percival

Next.js-E-Commerce-Shop

An e-commerce shop built using Next.js and Sanity CMS with a Stripe payment gateway. This repo is currently under development.

A To Do List app which allows the user to add and remove tasks. The app keeps track and saves tasks via Local Storage. Built using HTML5, CSS3 (SCSS), JS and Vite.

JavaScript-To-Do-List

A Metaverse Madness site created using Next.js, Framer and Tailwind CSS from a Figma mockup and hosted on Vercel.

Next.js-Metaverse-Madness-Site

HTML5-CSS3-Udemy-Course

A comprehensive, practical study into the different types of React State Management, covering native, indirect and direct state management libraries.

React-State-Management

A notes application which allows users to quickly add new and delete notes, with titles, description and date created, featuring a dark/light mode toggle. This repo is currently under development.

JavaScript-BrainPad-App

A responsive web page rendered using React, SASS & Webpack from a series of high-fidelity mockups created in Figma.

React-Brand-Responsive-Web-Page

A responsive product carousel component created from mockups and assets provided as part of the interview process for Junior Developer at Venture Stream, using Web Components and Tailwind CSS.

Venture-Stream-Responsive-Product-Carousel-Component

Notes from the 'React' module of freeCodeCamp's Front-End Development Libraries course. These are not for app-builds, but files of syntax notes.

React-Notes

A React app which pulls data from the REST Countries API and displays further country information using dynamic routing. Built using TypeScript, SWR, Context API, Material UI, Playwright and Husky.

REST-Countries-API-App

Course notes for the JavaScript course provided by freeCodeCamp entitled 'JavaScript Algorithms and Data Structures.' Notes from activites and exercises will be pushed to this repo to serve as a 'bank' of resources and future reference.

JavaScript-Algorithms-and-Data-Structures

An admin dashboard designed for a specialist supplier in whiskey. This has been coded using vanilla HTML5, SCSS and JavaScript. The dashboard is fully responsive, with a dark/light mode which saves the user's configuration and optimised for the web.

Whiskey-Supplier-Admin-Dashboard

A full screen navigation menu triggered by a hamburger icon toggle coded using vanilla HTML5, CSS3 (SCSS) and JavaScript. The menu is fully responsive and optimised for the web.

JavaScript-Full-Screen-Navigation-Menu

A WordPress theme created using template files and tutorials provided by FreeCodeCamp

followandrew-freecodecamp

A simple 'React Facts' page created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory.)

React-Fun-Facts-Project

A time tracking dashboard created as for a Frontend Mentor challenge, coded using vanilla HTML5, CSS3 (SCSS) and JS.

Time-Tracking-Dashboard

A React form which validates data without a library (e.g. React-Hook-Form, Formik). This has been built using standard CSS and Vite.

React-Form-Validation-No-Libraries

A project which measures how quick it takes the user to click the shape on the screen, then displays the time in seconds. A different shape and color is shown each time.

JavaScript-Reaction-Tester-Project

A weather app which uses .fetch() to return city weather data from the OpenWeather API. This also features a background image of the city searched. This repo has been built using HTML5, CSS3, SCSS and JS and bundled using Vite and deployed via Vercel.

JavaScript-Weather-App

A responsive product carousel component created from mockups and assets provided as part of the interview process for Junior Developer at Venture Stream, using JS (functionally rendered elements) and SASS (with BEM)

Venture-Stream-Responsive-Product-Carousel-Component-JS-Alt

A password generator built using React which allows the user to generate a password from any combination of upper and lowercase characters, numbers and symbols and copy this to their clipboard.

React-Password-Generator

A simple mini project from a YouTube crash course which leverages the .fetch() API in JavaScript to pull a local image file in the directory into the body of a HTML document and handle asynchronous events using promises (async/await) to display it front-end.

JavaScript-Fetch-API-Mini-Project

An online tool which checks the strength of the password entered and advises the user to create a 'strong' one if it is considered 'weak' or 'medium'. This leverages JavaScript regex, and is built using HTML5 and CSS3 (SCSS.)

Password-Strength-Checker

An interactive tool which allows a user to select a color based on a hex value, then modify it live. This is a project part of the Scrimba course and is currently under development.

JavaScript-Color-Tool

A single responsive web page adapted from mockups provided as part of the interview process for Front End Developer at Vertu Motors

Vertu-Motors-Interview-Web-Page

A simple tool which checks if a word entered is a palindrome or not (ie. one which reads the same backwards as frontwards e.g. level, refer) and created using vanilla HTML5 CSS3 (SCSS) and JavaScript.

Palindrome-Checker

A simple repo showing different fundamentals and good practices in React, covering state management, passing children and functions to components via props and conditional rendering. Written in TypeScript and styled using Bootstrap.

React-Fundamentals

A landing page for 'Airbnb Experiences' created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory.) This repo is currently under development.

React-Airbnb-Experiences-Landing-Page