sofiane-abou-abderrahim

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-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! 💻✨

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-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.

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-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..

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

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-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.

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.

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.

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

les-bonnes-pieces-js-json-file-oc

Explore automotive parts with our web app "Les Bonnes Pièces." View product details, check user reviews, and use interactive filters. Share your opinions via the review form. Update data with a click. I developed this app using HTML5, CSS3, and JavaScript. It initially retrieves data from a JSON file, with plans for dynamic API integration.

les-bonnes-pieces-js-oc

sophie-bluel-oc-p6

J'ai développé la partie frontend de cette application JavaScript. Pour ce faire, j'ai récupéré dynamiquement les données via l'API, mise en place un filtre, intégré la page de connexion et créé la modal pour ajouter et supprimer des projets.

javascript-introduction-to-testing-synchronous-code

In this little JavaScript demo, I used the 3 main core types of testing: Unit Test, Integration Test and End-to-End Test (or User Interface Test). I tested my application with relatively simple synchronous code.

javascript-introduction-to-testing-asynchronous-code

In this little JavaScript demo, I tested asynchronous code using mocks for http apis and third-party libraries, like axios.

react-course-goals

I dived in and React.js and built a small course goals demo from scratch! I used Reactjs, Hooks, Conditional & Dynamic Styles, Styled Components, Dynamic Props, CSS Modules, Dynamic Inline Styles, Dynamic CSS Classes, Media Queries and way more!

react-expense-tracker

I dived in React.js and built an awesome expensive tracker application from scratch! I used Reactjs, Components, Props, Event Handlers, States, Forms, Rendered List Dynamically, Charts, Dynamic Styles, Conditional Content, Hooks and way more!

ng-recipe-book

I mastered Angular 13 & 14 (formerly "Angular 2") and built awesome, reactive web apps with the successor of Angular.js

azertype-js-oc

I built this little JavaScript demo application using HtmL5 & CSS3 ,and most of all, JavaScript core features, like variables, arrays, objects and functions. Indeed, I implemented the algorithm thanks to conditional structures, like if-else statements, loops as well as event listeners, DOM manipulation, rules validation and error message display

css-complete-guide

booki-oc-p3

Voici un nouveau projet de développement de site internet que j'ai réalisé avec les langages web HTML et CSS. En effet, il s'agit d'un projet personnel servant de pratique de ces 2 langages web fondamentaux et l'outil de web design Figma.

print-it-oc-p5

riding-cities-oc-p2

robbie-lens

node-cms

I built an amazing CMS system using the following technologies: NodeJS + Express + MongoDB + Bootstrap + Handlebars + Authentication + AJAX and more. Then, I deployed the application online.

vuejs-first-app

I switched my previous "Vue.js First App with Just JS" built with only Vanilla JavaScript to a nice little Vue.js app. For that, I imported Vue3 from a CDN and used several Vue functionalities and rules, such as Vue.createApp, v-model, v-on, v-for, double curly brackets, etc. Now, this is Vue taking over!

vuejs-first-app-with-just-js

This is a very trivial JavaScript demo website where I used some Vanilla JavaScript responsible of adding goals and rendering them in a list when clicking on a button. I just built it to compare this approach with the approach I use in my other demo app that I built with Vue.js.

javascript-web-components-modal