---
title: "Full Stack & Interactive Projects | Bader Idris"
canonical_url: "https://baderidris.com/projects"
last_updated: "2026-06-13T22:07:48.389Z"
locale: en
meta:
  description: "Explore my portfolio of Full Stack projects built with Nuxt, Vue, Node, GSAP, and Three.js. Showcasing responsive design and interactive tools."
  "og:description": "Explore my portfolio of Full Stack projects built with Nuxt, Vue, Node, GSAP, and Three.js. Showcasing responsive design and interactive tools."
  "og:title": "Full Stack & Interactive Projects"
---

- HTML
- CSS
- Javascript
- Vue
- Typescript
- Sass
- Docker
- Nginx
- Nuxt
- Electron
- ThreeJs
- CapacitorJs

### // e-commerce product page

[![e-commerce product page](https://raw.githubusercontent.com/Bader-Idris/ecommerce-product-page/main/design/desktop-preview.jpg)go to e-commerce product page](https://bader-idris.github.io/ecommerce-product-page/)

Interactive and responsive e-commerce product page, you can add and remove items from cart and see the total amount of items in the cart, and navigate through the images of the product

### // My First 3D Challenge: Steaming Into The Horizon

[![My First 3D Challenge: Steaming Into The Horizon](https://baderidris.com/imgs/train-gif.gif)go to My First 3D Challenge: Steaming Into The Horizon](https://baderidris.com/projects/train)

High-fidelity 3D locomotive simulation with professional shadow tuning, angular-sort path extraction, dynamic chimney steam, and a reactive suspension system on an interactive terrain!!

### // designing agency web app clone

[![designing agency web app clone](https://raw.githubusercontent.com/Bader-Idris/guru-agency-duplication-site/refs/heads/bader/brave_703HxjzGmt.png)go to designing agency web app clone](https://beautiful-web-application.netlify.app/)

A stunning web application designed for a designing agency, showcasing beautiful CSS interactions. The app features an innovative background color conversion effect on hover, as well as various text manipulation techniques, making it a visually appealing and engaging experience for users. As a full-stack developer, I would be delighted to help you bring such a project to life.

### // Countries API

[![Countries API](https://raw.githubusercontent.com/Bader-Idris/countries-api/refs/heads/bader/design-assets/design/desktop-preview.jpg)go to Countries API](https://countries-apis-bader.netlify.app/)

Explore global data with this sleek, responsive app. Fetch country details, toggle dark/light mode, and search or filter by region effortlessly.

### // Pricing page

[![Pricing page](https://raw.githubusercontent.com/Bader-Idris/pricing_options_page/main/design/desktop-preview.jpg)go to Pricing page](https://bader-idris.github.io/pricing_options_page/)

Explore my interactive and responsive pricing page with a variety of plans, offering both yearly and monthly subscriptions. Choose from three main plans tailored to your needs.

### // Todo app

[![Todo app](https://raw.githubusercontent.com/Bader-Idris/todo-app/main/screenshots/dark-desk.png)go to Todo app](https://bader-idris.github.io/todo-app/)

A todo app that relies on local storage, so you can safely exit the page, and go back when needed. It's a responsive and interactive todo app that allows you to add, remove, mark as done, and filter tasks

### // multi-step form

[![multi-step form](https://raw.githubusercontent.com/Bader-Idris/multi-step-form/main/design/desktop-preview.jpg)go to multi-step form](https://bader-idris.github.io/multi-step-form/)

I'm proud to showcase a highly advanced, user-friendly, and visually appealing multi-step form, consisting of 4 steps, including a thank you page, which is a perfect example of how I can successfully connect many DOM elements with a single button, making it a very appealing user experience for clients to click and explore.

### // Random Quotes Generator

[![Random Quotes Generator](https://raw.githubusercontent.com/Bader-Idris/random-quote/refs/heads/main/Screenshot%20from%202025-01-12%2021-39-33.png)go to Random Quotes Generator](https://bader-idris.github.io/random-quote/)

Get inspired with random quotes! This clean, responsive app features a stylish dice button to generate fresh quotes instantly.

### // Arabic characters game

[![Arabic characters game](https://baderidris.com/imgs/letters-game-image.webp)go to Arabic characters game](http://letters-game.online)

A competitive game based on Arabic letters using websocket, an advanced deep project built in two months of development. Developed over 250 hours, utilizing Docker, Docker Compose, Nginx, Redis, MongoDB, Nuxt 3, and Nitro 2, with deep experience in Socket.io and Websockets. The project includes SCSS, HTML5, CSS3, and TLS layer management, along with Pinia for state management, totaling around 10,000 lines of code primarily focused on Socket.io, Pinia, and the backend with Nitro 2 and MongoDB.

### // Dashboard - Secure Chat & Video

[![Dashboard - Secure Chat & Video](https://baderidris.com/dashboard/__og-image__/image.png)go to Dashboard - Secure Chat & Video](https://baderidris.com/dashboard)

Access exclusive content, resources, and services on Bader Idris's platform. Features real-time chat, video calls, and secure user management.