DEV Community: Farouk

GrowthSync | Agency landing page built with react & tailwind

Farouk — Thu, 26 Jun 2025 07:41:34 +0000

Hey devs 👋

I’ve just launched my latest side project built with React + Tailwind CSS + Vite, and it’s now live on GitHub Pages!
This was mainly a practice project to sharpen my front-end skills — and I’m really happy with how it turned out 💻✨

🔧 Stack Used:
⚛️ React
⚡ Vite (for blazing fast dev experience)
🎨 Tailwind CSS (utility-first styling FTW)
🎥 Framer Motion (for sweet animations)
🐙 GitHub Pages (manual deployment using git subtree)

🎯 Features:
✅ Fully responsive layout
✅ Mobile-friendly navigation menu
✅ Smooth section scroll & transitions
✅ Swiper.js testimonials carousel
✅ Reusable animation variants (Framer Motion)
✅ Clean and modular code structure
✅ Deployed without extra packages using the Git subtree method

🔗 Live Demo:
🌍 https://itsFAROUK.github.io/GrowthSync

💻 GitHub Repo:
📦 https://github.com/itsFAROUK/GrowthSync

📌 What I learned:
How to structure a React project for clarity and reusability
How Tailwind makes building responsive UIs feel effortless
How to manually deploy to GitHub Pages with git subtree (without gh-pages branch clutter)
The power of animation variants using Framer Motion

🙌 Feedback welcome!
I’m still learning and improving every day — would love any tips, feedback, or suggestions for improvement.
And if you're just starting out, feel free to ask how I did any part of it — happy to share 🙏

Quiz-App

Farouk — Sat, 19 Apr 2025 18:57:43 +0000

A simple, interactive web-based quiz application that allows users to test their knowledge 🧠💡. Built with HTML, CSS (Sass), and JavaScript, this app features multiple-choice questions, a scoring system, and a user-friendly interface. Perfect for anyone looking to challenge themselves and improve their general knowledge! 🎉📚
Check it out!:https://itsfarouk.github.io/Quiz-App/

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns3t7295i5vna1ew6qt2.png)

Weather-App

Farouk — Wed, 26 Mar 2025 11:38:46 +0000

🚀 Just launched my Weather WebApp! ☀️🌧️

Built with HTML, SCSS, JS, this app allows users to check the weather of any city & get their current location's forecast!

📌 Features I worked on:

✅ Responsive & modern UI (BEM + SCSS)

✅ Fetching weather data via API

✅ Hash-based routing

✅ Code refactoring & validation

Inspired by a YouTube tutorial, but I refactored the structure, added BEM, improved responsiveness, and optimized JS logic!

🔗 Try it here: itsfarouk.github.io/Weather-App/

💬 Feedback is welcome!

Countdown Timer

Farouk — Mon, 10 Feb 2025 16:57:36 +0000

Responsive Countdown Timer with Animated Completion Effect ⏳🔥
This project is a fully responsive countdown timer with a smooth user interface and engaging animations. It allows users to set a countdown timer, and when the time reaches zero, a stylish "Completed" animation appears.

✨ Features:
✅ Responsive Design – Works seamlessly on all screen sizes.
✅ Dynamic Countdown – Displays days, hours, minutes, and seconds with a clean layout.
✅ Smooth UI & Animations – Buttons, notifications, and completion effects are beautifully animated.
✅ Dark & Light Color Theme – Aesthetic gradient background with modern typography.
✅ Mobile-Friendly Input & Buttons – Designed for both desktop and mobile users.

🔹 Tech Stack:
HTML5 – Semantic and structured markup
CSS3 – Flexbox, animations, and responsive design techniques
JavaScript (Vanilla) – Timer logic, event handling, and DOM manipulation
📌 Perfect for: Beginners & intermediate developers looking to build interactive and responsive web components.

👉 Try it out and customize it to your liking! 🚀
DEMO: https://itsfarouk.github.io/Countdown-Timer/

Random Quote Generator

Farouk — Mon, 03 Feb 2025 20:58:22 +0000

CodePen & DEV Community Description
🌟 Random Quote Generator – Inspiring Daily Quotes
Get inspired with a random quote every time you click a button! This simple yet powerful web app fetches motivational quotes from an API and displays them with a smooth UI.

✨ Features:
✔️ Fetches a new random quote on click
✔️ Text-to-speech to hear the quote aloud
✔️ Copy to clipboard for easy sharing
✔️ Share on X (Twitter) with one click
✔️ Clean responsive UI with FontAwesome icons & Google Fonts

🔗 Built with:

HTML, CSS, JavaScript
Fetch API for quotes
SpeechSynthesis API for voice output
FontAwesome icons for styling
👉 Check it out & get inspired! 🚀
DEMO: https://itsfarouk.github.io/Random-Quote-Generator/

To-do List

Farouk — Fri, 31 Jan 2025 18:38:08 +0000

To-Do List Application
Boost your productivity and achieve more than 99%!

This To-Do List Application is a sleek, user-friendly task management tool designed to help you stay organized and focused. Whether you're managing daily tasks, tracking goals, or planning projects, this app ensures you never miss a beat.

Features
Create Multiple Lists: Organize tasks into separate lists for different projects or categories.

Add and Manage Tasks: Easily add, edit, and mark tasks as complete.

Track Progress: See how many tasks are remaining in each list.

Clear Completed Tasks: Remove completed tasks with a single click.

Delete Lists: Remove entire lists when they're no longer needed.

Persistent Storage: Your lists and tasks are saved in local storage, so they persist even after refreshing the page.

Technologies Used
HTML5: Structured and semantic markup.

CSS3: Modern styling with custom properties (CSS variables) and grid layout.

JavaScript: Dynamic functionality, event handling, and local storage management.

Google Fonts: Clean and readable typography with Work Sans and Roboto.

How It Works
Create a New List: Enter a name for your list and click the "+" button.

Add Tasks: Type a task name and hit "+" to add it to the selected list.

Mark Tasks as Complete: Check off tasks as you complete them.

Clear or Delete: Use the "Clear completed tasks" button to remove finished tasks or delete an entire list.

Why Use This To-Do List?
Simple and Intuitive: The clean design makes it easy to use for anyone.

Customizable: Create as many lists and tasks as you need.

Offline Access: Data is stored locally, so you can use it without an internet connection.

Live Demo: https://itsfarouk.github.io/To-do-List/

Calculator

Farouk — Fri, 31 Jan 2025 13:12:08 +0000

Hello guys!. I've just finished my calculator which have nice UI check it out here: itsfarouk.github.io/Calculator/

Important JS resources

Farouk — Thu, 21 Nov 2024 07:00:57 +0000

So you're Learning JavaScript now?

I got you here a the best & Free beginner friendly Websites to improve your solving problems skills:
1- JS Hero: https://www.jshero.net/en/success.html
2- Edabit: https://edabit.com/challenges
3- HackerRank (10 Days of JS):
https://www.hackerrank.com/domains/tutorials/10-days-of-javascript

Task manger app

Farouk — Sat, 09 Nov 2024 08:52:42 +0000

I’m Farouk, and I just finished building my first task manager web app! 🎉 It's a simple app that lets you create, edit, and delete tasks, and it saves your tasks in local storage.

Technologies Used:
JavaScript (for interactivity)
HTML (for structure)
CSS (for styling)

Features:
Create new tasks
Edit and delete tasks
Tasks are saved even after refreshing the page

Check it out here:
Live Demo: https://itsfarouk.github.io/Task-manager-BOM-Challenge-/

I’d love to hear any feedback or suggestions! 😊