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.

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

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.

amazona

Built Amazon like Ecommerce Website with MERN stack

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

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-events-tanstack-query

react-food-order

react-food-order-test

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

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.

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

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.

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.