Projects
StorIt
Storit is a peer to peer distributed cloud storage mobile application. It is available on Android and IOS. Storit provides an alternate cloud storage platform to help reduce e-waste by utilizing existing mobile devices storage medium. Storit users can choose to run their device as servers and earn some currency. Users can also pay the monthly fee and gain access to reliable and secure cloud storage.
Tip Calculator
View the optimal layout for the site depending on their device's screen size. Also, calculate the correct tip and total cost of the bill per person
Space Invaders (HTML/SCSS/JS)
A clone of an arcade game called Space Invaders.
REST Countries App
A web app that displays all countries from the API. A user can search a country and filter by region. Also, a user can click on a country to display more information. The app also has dark mode.
Recipe App
A simple recipe app that fetches data from an API. A user is able to search for a specific ingredient and app displays it once search button is pressed. Utilizes the use of useState and useEffect.
Fylo Data Storage Component
View the optimal layout for the site depending on their device's screen size.
Product Landing Page (Netflix)
A clone of Netlflix product landing page.
Signup Form Intro Component
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. A user receives an error message when the form is submitted incorrectly.
Four Card Feature Section
View the optimal layout for the site depending on their device's screen size.
Product Preview Card Component
A product preview card component that is responsive. It also has hover and focus states for interactive elements.
IP Address Tracker
The challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible.
Calculator
A responsive calculator app that can perform mathematical operations like addition, subtraction, multiplication, and division. The app's theme can be adjusted based on user's preference. Also, the app checks user's initial theme preference by inspecting their operating system/browser preference. The app was designed by Frontend Mentor. Test Cases used were from FreeCodeCamp.
Stats Preview Card Component
View the optimal layout depending on their device's screen size.
Testimonials Grid Section
View the optimal layout for the site depending on their device's screen size.
Single Price Grid Component
View the optimal layout for the component depending on their device's screen size and see a hover state on desktop for the Sign Up call-to-action.
Markdown Previewer
A web app for displaying markdown based on user's input.
Hoobank Landing Page
This is a responsive landing page created using ReactJs. It has an optimal layout for the site depending on the user's device screen. The website also showcases multiple animations with the help of Framer Motion.
Modern Ecommerce App
A modern full-stack ecommerce NextJs application using Stripe and Sanity.
Order Summary Component
Users should be able to see hover states for interactive elements
Article Preview Component
View the optimal layout for the component depending on their device's screen size and see the social media share links when they click the share icon.
NFT Preview Card Component
The challenge is to build out this NFT preview card component and get it looking as close to the design as possible.
Project Tracking Intro Component
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. Also, created the background shape using code.
Base Apparel Coming Soon Page
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. A user receives an error message when the form is submitted incorrectly.
Business Landing Page
A professional landing page.
Profile Card Component
Build out the project to the designs provided.
Clipboard Landing Page
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page.
Social Proof Section
View the optimal layout for the section depending on their device's screen size.
Launch Countdown Timer
A countdown timer with flip animation effect using React and TailwindCSS.
Huddle Landing Page with Single Section
View the optimal layout for the page depending on their device's screen size and see hover states for all interactive elements on the page.
Chat App CSS
View the optimal layout for the component depending on their device's screen size and see the chat interface animate on the initial load.
Pomodoro Timer
The pomodoro timer app is based on pomodoro technique. It is a time management method based on 25-minute stretches of focused work broken by five-minute breaks. Longer breaks, typically 15 to 30 minutes, are taken after four consecutive work intervals.
Memories (MERN)
A Full Stack MERN Application using React, Node.js, Express & MongoDB. It is a simple social media app that allows users to post interesting events that happened in their lives.
Sunnyside Agency Landing Page
Users should be able to see hover states for interactive elements
QR Code Component
The challenge is to build out this QR code component and get it looking as close to the design as possible.
Ping Single Column Page
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. A user receives an error message when the form is submitted incorrectly.
Random Quote Generator
A simple app that displays a random quote. A user can receive a new quote once 'get quote' is pressed. Utilizes useState and useEffect.
50 Projects in 50 Days
Created 50 projects in 50 days regarding HTML, CSS, and JS
Result Summary Component
A simple result summary component using the Svelte framework.
FAQ Accordion Card
View the optimal layout for the component depending on their device's screen size and see hover states for all interactive elements on the page. Also, hide/show the answer to a question when the question is clicked.
Advice Generator App
The challenge is to build out this advice generator app using the Advice Slip API and get it looking as close to the design as possible.
Huddle Landing Page with Curved Sections
View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page.
Survey Form
A simple design of survey form.
Tribute Page
A tribute page for the loving memory of Kobe Bryant.
Technical Documentation Page
A technical documentation page clone of Javascript.
3 Column Preview Card Component
View the optimal layout depending on their device's screen size and see hover states for interactive elements.
Drum Machine
An app that allows users to listen to sounds of instruments