Sofiane Abou Abderrahim's repositories
javascript-typescript-introduction
I built this little TypeScript demo as an introduction to TypeScript and its basics, types and main features, such as core types, object, array, function types and other advanced types, generic types, classes, interfaces. I also configured the TypeScript Compiler so that I can compile all the files to JavaScript files in one go.
javascript-programming-paradigms
I built this little JavaScript demo in three different ways by using the three programming paradigms: Procedural Programming, Oriented Object Programming and Functional Programming.
modular-javascript-events-project-planner
In this demo, I used Modules to make my previous "JavaScript Events Project Planner" app code more readable. To do that, I used the module type and a dummy web server for development. With modules, every Javascript file states its dependencies and has its own import. So they help me split my code and download things only when I need them.
javascript-events-project-planner
In this little JavaScript demo application, I used event listeners and specifically drag and drop events. I added and removed event listeners and get data out of the event object. Besides, I used the preventDefault method and controlled my events according to the capturing and bubble phases with stopPropagation and event delegation for example.
javascript-http-requests
I built this little JavaScript demo app to practice http requests. Indeed, I used two alternatives: XMLHttpRequest and the fetch() API. I was able to add data, promisify XMLHttpRequest and handle errors. I also used two data structures: JSON and FormData. The goal of this demo was to send data http requests from client side JavaScript to a server.
javascript-dom-browser-apis-project-planner
In this little demo application, I used several DOM concepts, like element positions and sizes, scrolling, and some browser features, like dynamic script additions and template tags, timers and intervals. Besides, I had a loo at some browser APIs such as location, history and navigator (in the browser console).
javascript-oop-project-planner
I built this JavaScript application where we can move items around. I worked with classes and with the Object Oriented Programming (OOP) approach. I also worked with the DOM, I moved elements around and with event listeners. I used a callback pattern to pass functions to other instances so that from inside they could be called upon certain events.
javascript-classes-oop-mini-shop
I built this JavaScript demo with objects, and most importantly with Object Oriented Programming (OOP) and Classes. For example, inside of those classes, I added data and logic, public and private properties, constructors, inheritance, etc. This way of thinking about my program allowed me to split my code in a cleaner, easier to understand way.
javascript-objects-favorite-movie-demo
In this JavaScript demo app, I have used very important concepts related to objects, like shorthand method syntax, different behaviors of objects, behaviors of "this" keyword, arrow functions, this, bind(), call(), apply(), object destructuring, object spread operator, property and method relationships, and much more...
javascript-favorite-movies
Here is a tiny application with quite some verbose code because I wanted to practice what I learned and use different alternatives related to JavaScript and DOM traversal. Indeed, I used most of the crucial fundamentals needed to work with elements and manipulate a page whilst it's running in the browser.
100-days-of-web-development
I learnt Web Development from A to Z in 100 days - from "Basic" to "Advanced", it's all included! Now, I can say that I'm a real Web Developer!
user-authentication-sessions-nodejs-express-mongodb-website
In this authentication demo built with NodeJS, express & MongoDB, I used sessions and cookies to protect some areas of my application or avoid certain actions to be taken by some users. Besides authentication, I practiced authorization to allow specific users to see all data.
ajax-async-js-http-in-nodejs-express-mongodb-website
In this NodeJS - Express - MongoDB website, I sent AJAX requests. Therefore, I can send my own requests without getting the page reloading and I handle the response manually in my browser-side code. For this, I used the fetch() function. With this function, I sent GET requests and POST requests.
adding-file-upload-to-a-nodejs-express-website
In this small NodeJS & Express web application, I added file uploads. First, to do this, I added the input type file to the HTML elements to give the user a file picker. Then, I also configure the form element by using the enctype attribute and setting it as multipart/form-data. Afterwards, I had to handle the file on the server side, so I used the Multer middleware to do this.
nodejs-mongodb-nosql-demo-blog
This is a basic demo blog that I built with NodeJS, Express & MongoDB (NoSQL). Therefore, I connected to MongoDB from inside my NodeJS application through the backend code.
mysql-nodejs-express-demo-blog
I built this little demo blog which uses all 4 CRUD operations with help of SQL and MySQL package which I was using and this connection pool I created which we can use for sending queries to the database. Therefore, all the commands are executed in the NodeJS code. So, the database is used as a data storage in this website application. Indeed, the data is not stored in a standard file.
react-food-order-app
I built a dummy food order app with React by using its core features, such as Components, React Portal, Modal State, Context API, Reducer, Refs & Forward Refs, Side Effect and so on...
react-dummy-login-page
I built a dummy login page with React by using several hooks such as side effects, reducers and the context API. But, I also improved this authentication screen with some other features, like the cleanup function, a refactoring input component and "forward refs".
nodejs-expressjs-ejs-restaurants-website
I built a website with node.js and express.js. The biggest new feature that I added is EJS, this this template language that allowed me to build enhanced HTML files and generate HTML content dynamically on the server. With EJS, I also managed to run JavaScript logic, like if statements to render different pieces of content based on different conditions and like loops to repeat content and output multiple items. Finally, with help of Express, I could easily serve static files by using the built-in static middleware method.
html-css-basics-webfood-responsive-website
I built a responsive website and turned this desktop only-page into an adaptive mobile and desktop website, which looks good on all devices.