sofiane-abou-abderrahim

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!

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.

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.

amazona

Built Amazon like Ecommerce Website with MERN stack

booki

css-and-javascript-third-party-packages-example

I built a simple demo with some CSS Bootstrap and JavaScript Third-Party Packages, using a Parallax Effect and an Image Carousel / Gallery.

javascript-calculator

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.

ng-recipe-book

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

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!

sofiane-abou-abderrahim/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.

sofiane-abou-abderrahim/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.

sofiane-abou-abderrahim/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.

sofiane-abou-abderrahim/react-events-tanstack-query

Explore "React Events Tanstack Query", a demo app built with ReactJS, React Router, and Tanstack Query. 🚀 This project showcases efficient data fetching and mutations with advanced concepts like cache invalidation and optimistic updates. Features include event viewing, searching, adding, editing, and deleting.

sofiane-abou-abderrahim/react-router-events-and-authentication

This demo app enhances my previous React Router Events project with user authentication. 🗝️ It includes toggleable login and signup forms, 🛡️ maintains user login status, ⏱️ features auto-logout, and 🚧 protects certain routes for logged-in users only. The UI updates based on the user's authentication status.

sofiane-abou-abderrahim/amazona

Built Amazon like Ecommerce Website with MERN stack

sofiane-abou-abderrahim/nextjs-portfolio

sofiane-abou-abderrahim/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! 🚀🎨

sofiane-abou-abderrahim/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! 🚀

sofiane-abou-abderrahim/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! 🚀

sofiane-abou-abderrahim/react-deployment

🚀 React Deployment is a guide for deploying React apps from development to production. It covers testing, optimizing, building & uploading your app to Firebase. It also ensures smooth client-side routing with React Router and performance optimization through lazy loading. Explore the code to master the deployment process & avoid common pitfalls.

sofiane-abou-abderrahim/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! 💻✨

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.

sofiane-abou-abderrahim/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.

sofiane-abou-abderrahim/react-food-order

sofiane-abou-abderrahim/react-food-order-test

sofiane-abou-abderrahim/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! 🚀

sofiane-abou-abderrahim/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!

sofiane-abou-abderrahim/react-nextjs-level-food

sofiane-abou-abderrahim/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! 🌟🔍💻

sofiane-abou-abderrahim/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.

sofiane-abou-abderrahim/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! 🌟

sofiane-abou-abderrahim/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! 🚀🔍

sofiane-abou-abderrahim/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!

sofiane-abou-abderrahim/react-redux-cart

React Redux Cart is a demo app built with ReactJS, Redux, and Firebase. 🛒 It allows you to add products to the cart with real-time notifications, manage your cart by adding, removing, or clearing items, and syncs data in real-time with Firebase. 🌐 The app uses Redux Toolkit to handle async actions with Redux Thunks.

sofiane-abou-abderrahim/react-redux-counter

🚀 React Redux Counter Demo App 📊 - ⚛️ React | 🔄 Redux | 🧰 Redux Toolkit - Experience the power of React and Redux Toolkit in action with this demo app. Featuring a React counter and user authentication form, this project showcases the seamless integration of Redux Toolkit for efficient state management in React applications.

sofiane-abou-abderrahim/react-router-basics

This demo app highlights key React Router DOM features in a single-page app. ✨ Uses createBrowserRouter and RouterProvider for routing. ⚠️ Custom error pages with ErrorElement. 📌 Root Layout for navigation. 🔗 Links with Link Component. 🔄 Navigation with useNavigate Hook. 📂 Nested routing via Outlet Component. 🔍 Dynamic URLs with useParams Hook

sofiane-abou-abderrahim/react-router-events

✨ Explore the magic of routing with React Router Events! This demo repository showcases seamless navigation, dynamic loading, and smooth data handling. Dive in and discover the power of React Router.

sofiane-abou-abderrahim/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!

sofiane-abou-abderrahim/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.