is one of my favorite frontend projects as I built it without having to use any external frameworks or libraries with just pure HTML, CSS, and JavaScript. Hundreds of real TV shows including their titles, images, summaries, runtimes, ratings as well as their full episodes are shown on the website. \nAs it is a DOM(Document Object Model) project, I have used DOM manipulation techniques to parse medium complexity JSON data in order to dynamically generate the HTML markup using JavaScript's super power. I have also incorporated multiple event handlers to make the website interactive and create a convenient user experience in providing dropdown menus, search bars, click events and so on. Please feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written. \nN.B: The project was a three weeks assignment as part of my learning process at CodeYourFuture, an amzing bootcamp and a great community that I highly recommend to everyone who aspires to become a developer.

TV Show DOM Project

is a full-stack application I've developed using Django Web Framework. It has multiple features and functionalities such as register, login, filter products by categories, add to cart and checkout with PayPal. \nI've built this Full Stack Web Application as part of my learning journey and practicing Python and Django Web Framework. Building this project has thought me a lot of new skills and introduced me to a variety of new technologies. \nAlthough I am new to Django, I am very much familiar with Web Development in languages I am much more proficient at such as JavaScript, React.js, Next.js, Node.js, HTML and CSS along with related Frameworks and Libraries as well as PostgreSQL database. My prior knowledge of HTML, CSS/Bootstrap, JavaScript and PostgreSQL have served me well in building this Django E-commerce web app as they are some of the technologies I used for this project.

Sustainability E-commerce

is an interesting react app I created from scratch that shows all countries in the world and some factual information about them such as their flags, population, capital city, language, currency, region, neighbouring countries and more. I've implemented filter by region and dynamic search functionalities that allow users to select a region and see the list of countries in a particular region  and search for any country they would like to see by typing the name of the country. \nDetails of any country can be seen by simply clicking anywhere in the box where it is displayed. Names of all border countries are also clickable buttons that lets you navigate to the countries' details page. I've also implemented dark and light modes to change the color themes based on users preference. \nN.B: I built this web app to practice coding in react, the most popular JavaScript library for building user interfaces. I would also like to extend my gratitude to REST Countries API, Frontend Mentors and CodeYourFuture as the data was made publicly available by REST Countries via RESTful API, the challenge was presented by the Frontend Mentors and I was introduced to it by CodeYourFuture, my wonderful coding bootcamp. \nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written.

Countries API

is a small but brilliant full stack application. The data used in the app was generated by a technique called web scrapping and provided by CodeYourFuture, where I studied Full-Stack Web Development, for the purpose of training. My task was to create client and server side applications to extract cities and available services based on categories and render them on a React app as a table. \nI had to create an express.js server with an API endpoint in the backend that responds with a json data checking the API request parameters. \nI created a react application for the client side that fetches different sets of data from the backend server following user interactions. To create a great user experience, I provided a dropdown menu for the user to be able to select a city and radio buttons to choose from the given categories, namely Colleges, Pharmacies, Doctors and Hospitals. \nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written.

London Mini Guide

is an interesting full stack application I have built with Next.js, a React Framework, and Prisma Schema which is connected to PostgreSQL Database as a Data Source. This web app has a great performance as it uses SSR (Server Side Rendering) through Next.js API routes. I've also used Material UI icons and modals to create a convenient user experience. \nThe user is provided with multiple user interfaces that enables them to search for videos, upvote or downvote, see videos in ascending or descending order based on votes, upload valid YouTube videos, and even delete videos if needed. \nI have used GET, POST, UPDATE and DELETE HTTP methods to send API requests to the server when the user interacts with the frontend application. \nOn the server side, I have defined API routes for each GET, POST, UPDATE and DELETE requests so that all users requests can be handled by the server. One of the technical skill I have developed while working on this project is understanding and implementing getServerSideProps functionality in Next.js.

YouTube Videos

is a frontend application that displays all available jobs and provides filter functionality based on job role selections. It is an intermediate challenge presented by Frontend Mentors. \n The challenge is to build a frontend application using HTML, CSS and JavaScript/React.js and to make it look like the provided design images which can be found in the GitHub repository. \nI enjoyed working on this project as it helped me to learn, practice and demonstrate my JavaScript and CSS skills. Like most of the applications in this list, I've also made this application fully responsive so it appears great on mobile, tablet and desktop devices.  \nPlease checkout the Live Demo so that you can see that I've fully achieved the desired outcome which's identical with the provided design image.

Job Listings React

is a frontend React app and part of another full-stack project. Unlike the full-stack videos project which is a combination of 2 in 1 app, I've built and deployed the server separately. This frontend side of the project fetches data from the backend server I created separately, links to real tourist guide websites in different cities in the UK. I have also implemented a fake hotel and restaurant booking services for the purpose of practice.\nThis app has two search fields to search for a customer either by name or ID. Existing customer's details can be shown or hidden by toggling show profile or hide profile button. \nI've built the backend server using Node.js that has different API endpoints to Create, Retrieve, Update and Delete data using CRUD API method. The server uses a JSON mock data and has no database. \nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written.

CYF Hotel React App

is another simple and fun frontend application I developed when I started to learn React. It has three different view options to choose from in order to see a list of either boys'', girls' or boys' and girls' names. I used radio buttons to achieve switching from one option to another. \nThe search bar allows users to search for their favourite baby names. As every name is also a button, it can be clicked so it can be added to favourites list. The features and functionalities I implemented in this simple app can be utilised to build large scale applications that can solve business problems. For example adding a name to favourites list can be replicated to add items to a shopping cart. \nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written.

Baby Names React

is another small yet interesting React frontend app. As it just shows a couple of tables consisting of athletes' names and their scores, it may not look that impressive. However, the amount of lessons I learnt and skills I acquired developing it were incredible and it was one of the first React apps I developed that served me well as gateways into learning React.js. And that's why I included it while picking few projects I would like to show in this list. \nSorting by alphabetical order of country names and by athlete's scores were actually what I enjoyed as it taught me about sorting algorithms as well as managing react state variables.\nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written.

High Scores React App

is a simple and one of my first full-stack applications that generates random inspirational and motivational quotes every time a button is clicked. It also has a search functionality to find quotes by key words or author's name. I've created a server for it in a separate repository that responds with all quotes, a random quote at a time or searched quotes at different API endpoints depending on the http request and query string sent to the server. \nPlease feel free to click on the Live Demo button below to see it live and the GitHub button to see the source code I've written. You may find some of your favourite quotes as well.

CHECK OUT MY PROJECTS

TV Show DOM Project

Sustainability E-commerce

Countries API

London Mini Guide

YouTube Videos

Job Listings React

CYF Hotel React App

Baby Names React

High Scores React App

Random Quote Generator

CHECK OUT MY PROJECTSCHECK OUT MY PROJECTS

TV Show DOM Project

Sustainability E-commerce

Countries API

London Mini Guide

YouTube Videos

Job Listings React

CYF Hotel React App

Baby Names React

High Scores React App

Random Quote Generator

CHECK OUT MY PROJECTS