Overview.
Software Engineer with an experienced front-end developer skilled in JavaScript, TypeScript, and React.js, with expertise in Next.js. Proficient in crafting interactive and responsive websites with HTML, CSS, Tailwind CSS, Bootstrap, and HeadlessUI. Experienced in data analysis and programming using java, Python and SQL. Graduated from Alexandria University with a degree in Computing and Data Science.
React Developer
Javascript Developer
What I have done so far
Work Experience.
Frontend Developer
GeekyAir
- Experienced in building scalable and reliable web applications with Next.js and React.js (JavaScript and TypeScript). Proficient in developing interactive user interfaces using Tailwind CSS, PrimeReact, Material UI, and Shadcn UI, resulting in responsive and aesthetically pleasing designs.
- Experienced in managing complex forms with React Hook Form and Formik. Proficient in integrating RESTful APIs, enabling seamless communication between frontend and backend, and ensuring efficient data handling and user interactions.
- Capable of collaborating closely with backend teams to achieve seamless integration and optimal functionality. Strong knowledge of modern web development techniques, tools, and frameworks. Dedicated to writing clean, maintainable code, adhering to UI/UX best practices, and enhancing both performance and user satisfaction.
Frontend Developer
Alexandria Bibliotheca
- Data science skills, ICT concepts (Digital Projects, BA-HPC), digital documentation, web design, public speaking, testing mindset, tools & techniques, and website performance
- Enhancing technology skills, improving digital platforms, and developing effective communication and presentation abilities.
Web Developer
App Soft Co.
- Worked and trainning in Web design and Web load testing, performance evaluation, web loading impact, security testing mindset, tools & techniques for web testing and optimization.
- Utilized web load testing tools (e.g., JMeter, Taurus, Locust) to assess and optimize website performance. Covered testing criteria, tool usage, and result analysis for site and application evaluation.
- Load testing procedures are performed to evaluate the performance of the website under high traffic conditions. Analyze results to improve website responsiveness and scalability.
My work
Projects.
Following projects showcases my skills and experience through real-world examples of my work. Each project is briefly described with links to code repositories and live demos in it. It reflects my ability to solve complex problems, work with different technologies, and manage projects effectively.
SkyPass Caribbean
SkyPass Caribbean is a SaaS-based platform enabling users to book airport fast pass and transfer services like Arrival/Departure Fast Pass and SUV/VAN Transfers. Built with React, TypeScript, PrimeReact, and Tailwind CSS, it features dynamic pricing, real-time flight integration, and a scalable Admin Dashboard with role-based access for managing bookings, services, and multi-tenant functionality. The platform supports rescheduling, customizable booking forms, and a seamless user experience, showcasing expertise in building efficient, user-centric SaaS solutions.
#react
#vite
#typescript
##primereact
#tailwindcss
Elimr Store
Elimr Store offers a streamlined e-commerce experience with product browsing, detailed pages, and a responsive shopping cart. Users can create accounts, manage profiles, view order history, add favorites, and check out securely with multiple payment options. Administrators can manage brands, products, coupons, and orders, with built-in validation and responsive design for smooth operation. The platform ensures both user satisfaction and efficient administrative control, making it a comprehensive solution for modern online shopping.
#react
#vite
#typescript
#shadcn ui
#tailwindcss
#node.js
#mongodb
E-Commerce
This full-stack e-commerce project is developed using React and TypeScript, integrating technologies like Chakra UI, Redux Toolkit, Formik, and React Router for seamless user interactions and efficient state management. The implementation connects the React TypeScript front end with a Strapi backend, demonstrating proficiency in backend API communication, user authentication, and role-based permissions. The outcome is a secure and engaging full-stack e-commerce experience.
#react
#vite
#typescript
#chakraUI
#strapi
#tailwindcss
To-Do List
The Fullstack Next.js Todo App seamlessly integrates a frontend and backend using Next.js, React, Prisma, Clerk Authentication, and TypeScript. Users can easily manage todos with features like adding, editing, and deleting tasks—all personalized to the user's account. The tech stack includes React-Hook-Form, Tailwind CSS, Lucide React, and Moment, ensuring a secure and feature-rich todo management solution.
#next.js
#react
#typescript
#shadcnUI
#tailwindcss
#mongodb
#prisma
To-Do List React App
The Fullstack Todo List is an efficient and modern application for managing tasks, crafted with React, TypeScript, and Tailwind CSS. It offers seamless task creation, editing, and deletion, backed by a Strapi backend for secure data handling. Its responsive design ensures a smooth user experience for enhancing personal productivity.
#react
#vite
#typescript
#headlessUI
#tailwindcss
#strapi
Vscode Clone
The VSCode Clone project is a Redux Toolkit-driven endeavor, meticulously recreating the familiar Visual Studio Code interface. Seamlessly open files through the file tree, manage tabs with syntax-highlighted content, and optimize your workspace layout with the resizable panel – all enhanced by the robust state management capabilities of Redux Toolkit.
#react
#vite
#typescript
#tailwindcss
Shopping Cart
The Shopping Cart, optimized with Redux Toolkit, ensures a smooth shopping journey. Effortlessly add and manage items with actions like viewing, updating quantities, and removing. Experience streamlined state management for a responsive and dynamic shopping experience.
#react
#vite
#tailwindcss
#typescript
Product Cards
Product Cards is a dynamic and intuitive React application designed for streamlined inventory management. Developed with Vite, TypeScript, and Tailwind CSS, it offers users a fluid experience in adding, editing, and removing products. Enhanced by @heroicons/react and @headlessui/react for elegant UI components, this app is ideal for managing product details with efficiency and style.
#react
#vite
#typescript
#headlessUI
#tailwindcss
Social Web App
The Social Web App is a responsive platform developed with HTML, CSS (Bootstrap), and JavaScript, allowing users to log in, register, create posts, and view profiles. Axios is employed for smooth server communication. The app features essential components like navigation, authentication modals, post creation and viewing, as well as alerts for notifications. With a clean and efficient design, it provides a straightforward and user-friendly experience for social interactions.
#html
#bootstrap
#javascript
Kasper
The Kasper Art Studio Template is a dynamic HTML, CSS, and JavaScript project tailored for artistic showcases. Boasting a responsive design, it features animated sections for landing, services, portfolio, about us, statistics, skills, testimonials, pricing, and a contact form. With visually captivating elements, including image sliders powered by Swiper and enchanting scroll-triggered animations using WOW.js.
#html
#css
#javascript
Quiz App
The Quiz App is an engaging platform that challenges users with diverse topics through multiple-choice questions. Accessible via a web browser, participants select the correct answers and submit them to progress through the quiz. With dynamic question displays, a countdown timer, and insightful feedback, the app concludes with a comprehensive summary of the user's performance.
#html
#css
#javascript
Business
The Multi-Purpose Business Template is a dynamic HTML, CSS, and JavaScript project tailored for versatile businesses. Notable features include engaging Swiper slides in the Testimonials section, creating a visually appealing display. Additionally, the AOS Animate Library is seamlessly integrated, providing smooth and captivating animations triggered on scroll. This template ensures an interactive and modern user experience.
#html
#css
#javascript
Hangman Game
The Hangman Game is a classic word-guessing challenge where players aim to unveil a hidden word by guessing letters. Accessible through a web browser, the game randomly selects a word from various categories, prompting players to click on letters to decipher the word. With each incorrect guess, a dynamic hangman illustration evolves. Successfully guessing the word leads to victory while reaching 8 wrong attempts results in defeat.
#html
#css
#javascript
Agency
The Special Design template offers a dynamic HTML, CSS, and JavaScript solution for creative agencies. With its modern design and various sections like About Us, Our Skills, Gallery, and Testimonials, it delivers an immersive user experience. Noteworthy features include local storage support for personalized settings and smooth animations for enhanced engagement.
#html
#css
#javascript
Typing Speed Test Game
The Typing Speed Test Game is a web-based challenge designed to elevate your typing skills. Offering various difficulty levels, including Easy, Normal, and Hard, the game prompts players to type displayed words within a set time limit. With a dynamic interface, real-time score updates, and a congratulatory finish message, this game provides an engaging way to measure and improve your typing speed.
#html
#css
#javascript
Memory Game
The Memory Game is a simple and engaging challenge where players match pairs of images related to various technologies. To play, users click the 'Start Game' button, enter their name when prompted, and the game briefly reveals all images before starting. Clicking on two blocks unveils the images, and if they match, the blocks stay flipped; otherwise, they flip back. The game continues until all pairs are successfully matched.
#html
#css
#javascript
Guess The Word
It is a word guessing game. You have a number of attempts to guess this word correctly, and if you fail in all of them, you will lose.
#html
#css
#javascript
Dashboard
The Project Dashboard was crafted using HTML and CSS, employing their capabilities to structure and style the interface. This dashboard consists of eight individual pages, each created as separate files to efficiently manage and organize the content.
#html
#css
Leon
Landing Page
#html
#css
Next.js
React
JavaScript
TypeScript
MongoDB
HTML5
CSS3
Bootstrap
Tailwind CSS
Material UI
Headless UI
Chakra UI
Shadcn UI
Redux Toolkit
Strapi
Prisma
Figma
Git
Github