sofiane-abou-abderrahim

javascipt-tooling-and-workflows-events-project-planner

I improved my previous "Modular JavaScript Events Project Planner" app so that I can split my code and produce optimized and bundled together output to minimize the amount of HttpRequests. Indeed, I used Webpack to bundle my files, to optimize them and to have a dev server. I also used ESLint to lint to my files.

javascript-and-browser-support

I built and planned this little JavaScript demo application for Browser Support. First of all, I analyzed the market to find which resources I can use to find out which feature is supported by which browser and which market share that feature has. Then, I used different techniques: feature detection with fallback code, manual polyfills and Babel.

javascript-nodejs-introduction-backend

In this little demo application, I used NodeJS and its own API to create a HTTP server to communicate from the backend with the frontend of my previous "JavaScript Share My Place" application.

javascript-nodejs-introduction-frontend

This frontend code is my "JavaScript Share My Place" application built with Webpack which communicate with my "JavaScript NodeJS Introduction Share My Place" application backend..

javascript-nodejs-share-my-place-heroku-dynamic-hosting

Here is a NodeJS application deployed and hosted in Heroku. This is just the server-side application. So, there is no frontend code set up to communicate with the server.

javascript-performance-and-optimizations

I improved potential runtime performance by avoiding unnecessary code executions, batching operations together and avoiding unnecessary DOM access. I also found and fixed memory leaks. Then, I used optimal JavaScript approaches for high-frequency operations and carefully considered micro-optimizations. Finally, I improved startup time performance.

javascript-security-share-my-place

I improved my previous "JavaScript Share My Place" app so that I can protect it from security holes and concepts. I specifically handled the two most important JavaScript attack patterns or vulnerabilities, which are Security Details in my code exposed accidentally and Cross Site Scripting (XSS) attacks, with Sanitize HTML package for example.

javascript-share-my-place

This JavaScript demo uses Webpack to bundle my code and Babel to translate it to older JavaScript code that runs in older browsers as well. I integrated Google Maps library to this project to display a map on the screen. I also created a sharable link with the clipboard API which people can use to load the place in a other page.

javascript-share-my-place-firebase-static-host

This is my deployed static "JavaScript Share My Place" demo application with Firebase which only consists of HTML, CSS and JavaScript files.

node-montre-connexion

react-form-demo

I built a nice functional React application that is not overly complex. But, I used all the core features and building blocks that are important for React : Components, props, state with the useState hook, lifting state up, styling, passing functions between the different components and way more ! In short, I used all the core patterns and concepts which we basically need for every React application. That’s why I believe that this application is hopefully a great proof of my skills in React.

react-javascript-share-my-place

This a little React JavaScript demo application which I built based on my JavaScript Share My Place app built with Webpack

amazona

Built Amazon like Ecommerce Website with MERN stack

les-bonnes-pieces-js-http-api-oc

react-art

Explore "React Art" - a demo app showcasing diverse ReactJS styling methods: Vanilla CSS, CSS Modules, CSS-in-JS with Styled Components, and Tailwind CSS. Experiment with dynamic styles. Elevate your React development skills! 🚀🎨

react-behind-the-scenes

Dive into the technical intricacies of React! Explore advanced concepts such as DOM updates, component functions execution, key usage in lists, and state management. Gain insights into how React schedules and batches state updates for optimal performance. Take a peek behind the scenes and elevate your React expertise! 🚀

react-class-based-components

Discover "React Class-Based Components" - a demo app showcasing class-based components and error boundaries in React. Toggle user list visibility and filter names with ease. Check out the code now! 🚀

react-elegant-context

🚀 Elevate your React apps with advanced state management techniques! Explore component composition, Context API for seamless state sharing, and Reducers for managing complex states. Check out "React Elegant Context" demo now! 💻✨

react-essentials-1

I used the React Essentials to build this beautiful demo web application, with React and from the ground up. 1. Building user interfaces with components. 2. Using, sharing & outputting data. 3. Handling user events. 4. Building interactive UIs with state.

react-essentials-2

React Essentials 2 enhances my initial demo React Essentials 1 with deeper React core insights. Features include JSX clarity, DOM optimization via `<Fragment>` and empty tags, and streamlined components. Includes prop forwarding, multiple slots, flexible identifiers, and default prop values for versatility. A React development benchmark.

react-food-order

react-forms

Check out my latest GitHub repository showcasing advanced React form techniques! I've leveraged React state, two-way binding, and browser features like FormData for efficient data handling and validation. Dive into the code now! 🚀

react-investment-calculator

This project demonstrates essential React features: modular components, state management, conditional rendering, and value conversion. Users can estimate investment values by inputting parameters. Explore the code to enhance your React skills and start estimating investments effortlessly!

react-place-picker

Discover "React Place Picker" - a demo app showcasing React concepts such as managing side effects with useEffect() hook. Select and remove places easily. Check out the code on GitHub and play with the live demo! 🌟🔍💻

react-place-picker-custom-hooks

🚀 Explore the power of custom React hooks with "React Place Picker Custom Hooks"! This demo repository showcases the implementation of custom hooks for optimized logic and seamless data management. Dive into the code to discover how we connect to a backend, fetch and store shared data, all while maintaining clean and efficient components.

react-place-picker-with-database

Discover React Place Picker With Database! This repository hosts a React application that connects to a centralized backend, enabling users to access and manage shared data effortlessly. Explore the code for seamless data handling and robust error management. Don't forget to star if you find it useful! 🌟

react-project-management

Explore this "React Project Management" demo app: a practical example of a ReactJS application implementing components, states, refs, portals, and styling with Tailwind CSS. Dive into the complete source code and delve into the technical details now! 🚀🔍

react-quiz

Explore the power of React with our 'React Quiz' demo project! Dive into the intricacies of managing state and effects using hooks like useState and useEffect. Witness dynamic rendering, timed responses, and state management in action. Try it now!

react-the-almost-final-countdown

Discover a captivating ReactJS demo showcasing advanced features like Refs and Portals. Play the Almost Final Countdown game, where players challenge themselves with timer tasks, utilizing direct DOM access, dynamic value management, and component APIs. Experience seamless modal rendering with Portals. Dive into the code and explore the magic!

react-tic-tac-toe

This React-based Tic-Tac-Toe game offers a seamless gaming experience with solid game logic and reusable components. Players can personalize their name, review moves in a log, and restart effortlessly. Perfect for developers and gamers looking for clean code and engaging gameplay.