web_dev_projects

web_dev_projects copied to clipboard

OverView

Coming Soon!

OverView

This is a full application website for searching books from various categories and genres and view book description, author, pages and many more. This website is using Google Books API as its source data.

View this on your browser live.
View project source code.

OverView

I have always wanted to create a project that displays wonderful stock images and videos. But I wanted to make it in a full website and is also presentable and useful. So I decided to build this project to the next level. It is inspired by Pexels.com whose Web APIs are used to run this application.

View it live from your browser.
View project source code.

OverView

Listening to music while I study makes me focus on things at hand. I always listen to different radio stations all over the world. So, I took a challenge to build a website that allows the user to listen to any FM Radio stations all over the world.

One note that I would like to stress out in this project is that, FM Radio websites streams their live music on different audio formats. Some follows the web standards while others are still using the old audio formats which may or may not work on the users machine.

View it live from your browser.
View project source code.

OverView

I always wanted to build a news website as a pet project. I took this challenge and build this website in a different level. After doing a lot of research, I found The Guardian API as a good api source to play around with and started building this project. The good thing about this api is that it doesn't need any apikey but it takes a little time to return data.

View it live from your browser.
View project source code.

OverView

This website allows the user to search movies produced from all over the world. It features top-rated, upcoming, popular released movies and many more. It also allows searching movies by genre and on-air tv shows and download movie posters. You can also search actors and actresses movies and stats.

View it live from your browser.
View project source code.

OverView

This is a basic chat app made by NodeJS. It uses a real-time bi-directional event-based communication using Socket.io. The app can be simultaneously used within different devices as long as it remains with the same chat room.

View it live from your browser.
View project source code.

OverView

Rock Paper Scissors is one of the most common games everybody used to play when they were young. I made one app like so using javascript and so happy about how the app came out.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView :sunglasses:

Seven Segment Display or SSD is a common display design for electronic devices. I build one like this to understand its core concepts and visualization structure and why it is called seven segment. I enjoyed and learned a lot in building this project.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

This is a Tic Tac Toe App. A board game that I used to play with when I was a little boy. I was inspired to build this app to test my Javascript Skills. I was so happy that I was able to make one.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

Overview :sunglasses:

This is a True or False App. It is run on a ReactJS. It is an app that allows the user to play a true or false quiz about general informations about science, math, sports, music, politics, history, etc. This app uses resources Open Trivia Database. A free JSON API for programming projects. It does not require API tokens when you use it.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

OverView :sunglasses:

Pamodoro timer is one of the examples to exercise your javascript skills. So, for this challenge I build one that contains audio effects, start pause and stop button, functionality and audio controls.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

I always want to build my own calculator app and in this project, I have buid one. It can compute 21 digits or more from the decimal point. It can also handle huge numbers and return an exponent.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

This is an app that generates random quotes from the Quotable API. It is a lightweight API that you can query for free.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

Overview :sunglasses:

Animations are one of the important things that bring more life to your website. So I have decided to create this app with some animations. I am using React Reveal a lightweight react animation library.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

OverView

I got this idea for this project from Jennifer Dewalt in oe of her 180 website challenge. I had so much fun building this and learned so many things.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

Overview :sunglasses:

In this project, I have created a full website application from the currency app that I have created on the two project. This website is fully responsive and it is also using the React Router to its navigation. This webapp is also using API Frankfurter and Rest Countries APIs. I also sketched designed the app using Figma.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

From the last project, I added a React Router and integrated a currency calculator app for this project. Thank you for looking into this repo. All the data from this app are taken from API Frankfurter and Rest Countries.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

Currency converter app are one of the app ideas that really interests me most. I build this app to see how does the currency app works under the hood. Thank you for looking into this repo. All the data from this app are taken from API Frankfurter and Rest Countries.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

In this app I am making a simple TodoList that renders animation using CSSTransition and TransitionGroup library from ReactJS and with diffent background for each list to generate a gradient look list.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

I created this website to help users search for books they want to read. All the books datta from this app are taken from Google Books. It contains a huge amount of data about retailed books and publications and it is free to use.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

I want to create an app that searches photos on the internet. I found Pexels.com a free stock photos you can query for free. So I decided to build one app like this.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

This app allows the user to search hashtagged words from Twitter. The app requires APIKeys and Access Token provided by Twitter.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

This is a ReactJS website is allow the user to search giff images and files. It uses the Giphy API, an online database and search engine that allows users to search for and share short looping videos with no sound, that resemble animated GIF files.

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

This app is a knowledge quiz app. It asks quiestions about general informations and you just have to pick you answers from the options provided. It uses its data from Open Trivia Database - an open source database

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

This is a Movie Searcher App. It allows the user to search movies and informations relation about the searched movie. This app uses The Movie DB API to query data about movies. It also uses Axios, a Promised Based HTTP module for NodeJS. MovieDB have so many API's that you can use to query informations about movies. It gives the developer a free API Key

View it live from your browser. Deployed with Firebase
View project source code.
Watch Short Video Clip

Overview :sunglasses:

Todo List App is very common programming exercises. I am building this app and want to make it something different. It is a list of todo-list. It allows you to create multiple todo-list with the same functionality. This app is a MERN Stack App.

View it from your browser. Deployed at Heroku.
View project source code.
Watch Short Video Clip.

Overview :sunglasses:

This is a simple weather app that allows you to check weather conditions from any city you want. You can type any city and it will provide the latest weather of that city you entered. The resources from this app are from OpenWeatherMap.

View it from your browser. Deployed at firebase.
View project source code.
Watch Short Video Clip.

Overview :sunglasses:

Barcode scanners are one of the applications that amazes me. So, I have decided to create one. This is app allows you to scan barcodes directly from the user's browser. The app is using Quagga a javascript library that streams the user's camera and then searches for any barcodes rendered from the streamed video. The app fetches data from Barcode API and then returns product information related to the barcode.

View it from your browser. Deployed on Firebase.

View project source code.

Watch Short Video Clip.

Overview :sunglasses:

I was trying to play some api's where I can render a real camera with React Native Camera and store images to cloud storage using Google Firebase and store all images data so that the user can access all the information. I was very excited creating this app. In this project, I learned how to set up a native app using camera and how to build a cloud data storage.

View project source code.

Watch Short Video Clip.

Overview :sunglasses:

View project source code.

I wanted to make an application that renders Google Maps so I made this application that renders maps on a mobile device. I had so much fun building this application and I learned how to render map components using MapView and the properties that are needed for the map to render. I also learned how to create map markers using MapView.Marker and animate the markers when a new location is selected. I also learned how to Polygons and Polylines. This can be very useful for projects that needs map components.

Overview :sunglasses:

I was playing with React Native Animation library for this project and I learned a lot from it. In this project I learned configure animation using Animate.timing() and how to compose animation methods. I also explored how to combine animations values and how to modify the segments of the animation using interpolate() and use it to built in methods like transform, translate, scale.

View project source code.

Overview :sunglasses:

This challenge deepens my understanding of Navigation functions of React Native Navigation version 3.x. Creating tabs using creareStackNavigator, createSwitchNavigator, createBottomTabNavigator, createAppContainer, and createDrawerNavigator are some of the few things I was exploring in this project.

View project source code.

Overview :sunglasses:

This is a full React Native project I took from Udemy. The course covers a lot of React Native fundamentals from Component rendering, Navigation and Routers, Animation, Styling, Redux, State and Props and many more like

Redux and Firebase. The course also covers other libraries like Icons, Camera Detection and Geolocations. I have learned a lot in this course and it has broaden my knowledge about this framework. View project source code.

OverView

This app is like a budget tracker. You can add income and expense sources from the form field and the app will generate a statistics of how you spend and how much you save money.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

This app generates random horoscope forecast about your age, sex preferences and marital status. It also generates random number combinations for your luck.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

I would like to call this app drop ball. Its just a basic app that allows the user to click on the screen and a ball comes out from and drop down to its own gravity.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

This is a simple bubbling particles created from a javascript canvas. Whenever the user hovers his mouse to the screen, any bubble near the cursor will grow in size and decrease when it goes away from the cursor.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

This is a simple bouncing particle created from a javascript canvas. It allows the use to create multiple particles with variations of color combinations.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

Rock Paper Scissors is one of the most common games everybody used to play when they were young. I made one app like so using javascript and so happy about how the app came out.

View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip

OverView

This is a body mass index counter app. It allows you to calculate your body mass index base on the universal expressed in units pounds/m2. I wanted to apply my javascript skills in building this app was so happy I made one.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

Word Guess is one of the games I used to play with for passt times. Now, with Javascript, I build one and so happy to share this with you. One of the things I really liked when building is app how to scramble words and omit the repeating characters and add more new characters.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

This is a text to speech app where you can type any text and then the app will simulate a voice from the text you have entered. The app is using the SpeechSynthesisUtterance API to simulate a voice.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

This is a speech recognition app. It is using the SpeechRecognition API that is only supported by Chrome browser (as of this time of publication). The API uses the uses microphone to process speech audio and converts the speech into a string of text.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView

I build this Photo Booth app that allows the user to make custom images. This app uses the users camera and then renders the image with the ability to manipulate the image by pixels. The app allows the user to capture images and save it to the users machine.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

This is a speed typing app. It is inspired by Traversy Media video tutorial on youtube. In this app, I added a lot of complexities like flicker score, slider bar, flicker counter, save highest score on local storage and many more. I wrote this application using OOP or Object Oriented Programming.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

Block Puzzles are one of my favorite toys that I always played with when I was a little boy. I was inspired to build this using Javascript. I was so happy after I build it. I learned so many things from this.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

Making draggable element in JS are one of the most interesting features that I always love to put my hands on. So I tried to build one TodoList to enhance my skills. I learned so many Javascript functions ans HTML elements when I build this app.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

I build this snake game app that is inspired by the famous Nokia cellphone game.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

HTML Canvas is one of the most fascinating things that like to play with. So I created this canvas project that allows the user to create images using mouse as their brush. I enjoyed creating this project and I learned a lot from it.

View it live from your browser Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.

OverView :sunglasses:

This is an app that is inspired by Jet Fighter arcade game. I created this app for this project because I was inspired by the animations and audio effects.

View it live from your browser Deployed with Firebase through ReactJS
Watch Short Video Clip on Youtube.
View project source code.

OverView :sunglasses:

This is a game app that has the same principles of Whack-A-Mole. In this app, I have added more characters and replace the Mole character to a dragon. I have also added audio effects and some css animations.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip on YouTube
View project source code.

Overview :sunglasses:

Pairing Game is one the most common programming exercises and so I decided to create one. In this app, I have integrated some audio effects to make this app a little interesting. I had so much fun building this application and I learned a lot from it.

View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip on YouTube
View project source code.

Overview :sunglasses:

This is an application that generates multiple random circles in the browser. It is using javascript canvass to create 2d circles and increase its size as in a fraction of time.

View it live from your browser
Watch Short Video Clip on Youtube
View project source code

Overview :sunglasses:

This Analog Clock is built from p5.js a JS client-side library for creating graphic and interactive experiences for the user.
You can use this app if you need to run some clock on your desktop.

View it live from your browser
Watch Short Video Clip
View project source code

Overview :sunglasses:

This is an app that outputs digital and analog clock on your browser. The analog clock is using javascript and css animations.

View it live from your browser
Watch Short Video Clip.
View project source code.

Overview :sunglasses:

This project is a simple musical keyboard that plays a sound whenever you press a key that corresponds to the sound. This application allows you to create simple music rythms on the fly.

View it live from your browser
Watch Short Video Clip.
View project source code.