About Me
Hello, I am Ward, I am a Web developer. Thank you for taking a moment to take a look at my portfolio. Kindly take a moment to check some of my projects below, I have used React, Next.js, Node, MongoDB, tRPC, Prisma and many other technologies. and do not hesitate to Contact me for inquiries.
Resume![profile-picture](/_next/image?url=%2Fprofile-pic.png&w=828&q=75)
Projects
SupaNotes
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn2.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn3.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn4.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn5.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn6.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn7.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fsn%2Fsn8.png&w=3840&q=75)
Notes web app that allows users to login, create, edit, and delete notes. built with Next.js, daisyui, PlanetScale, Prisma and tRPC
Stack: Next.js | tRPC | daisyui | PlanetScale | Prisma | Tailwind CSS | Clerk
SourceExpenses Tracker
![project image](/_next/image?url=%2Fimages%2Fexpenses1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fexpenses2.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fexpenses3.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fexpenses4.png&w=3840&q=75)
Expenses tracker Web Application. The UI was built in React, state management using Redux, database is managed using MongoDB, styles using Flowbite and Tailwind CSS, and the backend was bult with NodeJs and Express. The app allows the user to search, sort, add, update and delete expenses.
Stack: React | NodeJS | React-Router | Redux | MongoDB | Tailwind CSS
SourceMovie DB
![project image](/_next/image?url=%2Fimages%2FmovieDB%2Fmdb1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FmovieDB%2Fmdb2.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FmovieDB%2Fmdb3.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FmovieDB%2Fmdb4.png&w=1200&q=75)
Popular movies database web application. The UI was built using Svelte, API from TMDB and styled using CSS.
Stack: Svelte | CSS
SourceDual Keys Caesar Cipher
![project image](/_next/image?url=%2Fimages%2FcaesarCipher%2Fc1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FcaesarCipher%2Fc2.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FcaesarCipher%2Fc3.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2FcaesarCipher%2Fc4.png&w=3840&q=75)
A dual keys instead of the regular one key Caesar Cipher Encrypter-Decrypter built with HTML, CSS, Bootsrap, and JavaScript.
Stack: HTML | CSS | Bootstrap | JavaScript
SourceFlappy Bird
![project image](/_next/image?url=%2Fimages%2Fflappybird.png&w=1920&q=75)
Flappy Bird game built with vanilla Javascript, html, and css using html Canvas.
Stack: Javascript | CSS
SourceMarkdown Previewer
![project image](/_next/image?url=%2Fimages%2Fmarkdown-previewer.png&w=3840&q=75)
Markdown previewer web application. The UI was built using React and styled using CSS.
Stack: React | CSS
SourceDrum Machine
![project image](/_next/image?url=%2Fimages%2Fdrum-machine.png&w=3840&q=75)
Drum machine web application. The UI was built using React and styled using CSS. Users are able to use the keyboard or click the buttons on the screen to play drum sounds.
Stack: React | CSS
SourceRandom Quote Generator
![project image](/_next/image?url=%2Fimages%2Fquotes%2Fq1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fquotes%2Fq2.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Fquotes%2Fq3.png&w=3840&q=75)
Random quote generator web application. The UI was built using React and styled using CSS. users can generate random quotes and share them on twitter.
Stack: React | CSS
SourceCalculator
![project image](/_next/image?url=%2Fimages%2Fcalculator.png&w=1920&q=75)
Calculator web application. The UI was built using React and styled using CSS.
Stack: React | CSS
SourcePomodoro Clock
![project image](/_next/image?url=%2Fimages%2Fpomodoro.png&w=3840&q=75)
Pomodoro clock web application. The UI was built using React and styled using CSS. Users can set focus time and break time and start the countdown.
Stack: React | CSS
SourceURL Shortner
![project image](/_next/image?url=%2Fimages%2Furl-shortener1.png&w=3840&q=75)
![project image](/_next/image?url=%2Fimages%2Furl-shortener2.png&w=1920&q=75)
NodeJS application that allows customers to enter a url and get a shorter url.
Stack: NodeJS | MongoDB
Source