Projects
Creating NPM Package
The Creating NPM Package book uses a scalable project to explain the fundamentals of building and managing NPM packages from scratch.
Press Stack: Microsoft Word, Affinity Suite, Microsoft Photos
QuotesDomain
QuotesDomain is a site with hand-picked quotes that motivate users to succeed tremendously.
Tech Stack: ReactJS, Nextra, Vercel
React Image Grid Gallery
A simple, easy-to-use, and responsive image gallery component for displaying a grid of images in React apps.
Tech Stack: Babel, ReactJS, TypeScript
React YouTube Playlist
An easy-to-use and responsive NPM package for displaying YouTube playlists on a web app. Use it to create a beautiful gallery of YouTube videos on your website.
Tech Stack: TypeScript, ReactJS, YouTube API, Emotion JS, Jest, React Testing Library
CodeSweetly
CodeSweetly is a tech site developers use to learn web technology topics such as HTML, CSS, JavaScript, and ReactJS.
Tech Stack: ReactJS, Docusaurus, Netlify
Visual CSS Grid
A book filled with beautiful CSS Grid images. Use it as your complete image guide to the CSS Grid layout module.
Press Stack: Microsoft Word, Affinity Suite, Kindle Create
The CSS Grid Guidebook
The CSS Grid Guidebook uses beautiful images and live examples to discuss everything you need to know to use CSS Grid like a pro.
Press Stack: Microsoft Word, Affinity Suite, Kindle Create
Pantry Picker
Pantry Picker is a recipe app that allows users to search and explore a variety of recipes for one or more ingredients.
Tech Stack: ReactJS, Vite, Tasty API, Playwright, GitHub Pages, Jira, Figma
CSS Flexbox
The CSS Flexbox book uses beautiful images and live examples to discuss everything you need to know to use Flexbox like a pro.
Press Stack: Microsoft Word, Affinity Suite
Melody
Melody is a sign-up form for an imaginary musical service. Use it to register for the next musical event in town.
Tech Stack: HTML, CSS, JavaScript
YouTube Clone
YouTube Clone is a replication of the YouTube website. This replica implements most of the live website's functionality, like authentication, search, history, and shorts. So, you can use it to watch your favorite videos just as you would with the actual website.
Tech Stack: Firebase, Jest, ReactJS, Testing Library, YouTube API
Find
Find is a search-and-find game where a player searches an image for some items (e.g., Waldo, Cat, Apple, etc.). You finish the game by finding all the specified elements.
Tech Stack: Firebase, Jest, ReactJS, Testing Library
Battleship
Battleship is a two-player game where players take turns to shoot each other's ships. The winner is the player who first sinks all their opponent's ships.
Tech Stack: InteractJS, Jest, ReactJS, Testing Library
My Library
A library app that lets users keep a record of the books they want to read, the ones they are currently reading, and those they have read.
Tech Stack: CSS, Firebase, HTML, JavaScript, Webpack
Transform.
Transform is a shopping cart website where users browse for glamorous items to spark up their style. Use it to transform your clothing, jewelry, and electronic collections.
Tech Stack: ReactJS, React Router, Fake Store API
UniqPik
UniqPik is a fun memory game. The objective is to attain your highest possible score by making unique card selections.
Tech Stack: ReactJS, Pixabay API
OluWeather
OluWeather is a weather app that allows you to stay updated with the weather condition of any city anywhere in the world.
Tech Stack: HTML, CSS, JavaScript, Abstract API, OpenWeatherMap API
My Plans
A to-do list app that allows users to organize their day-to-day activities simply and effectively.
Tech Stack: HTML, CSS, JavaScript, Webpack
