Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

Projects in Awesome Lists by sofiane-abou-abderrahim

A curated list of projects in awesome lists by sofiane-abou-abderrahim .

https://github.com/sofiane-abou-abderrahim/javascript-unconventional-calculator

🧮 JavaScript Unconventional Calculator: A web app that challenges traditional calculation methods with creative logic! 🚀 Built using JavaScript fundamentals like variables, operators, functions, arrays, objects, and dynamic event handling. A fun way to explore core JavaScript concepts and enhance your coding skills!

javascript

Last synced: 09 Feb 2025

https://github.com/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.

body-parser database ejs ejs-templates error-handling express-js file-system http-methods http-server javascript mongodb node-js nodejs-api packages rest-api router routes store-database

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

functional-programming javascript oriented-object-programming procedural-programming programming-paradigms

Last synced: 09 Feb 2025

https://github.com/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.

query-client query-client-provider react react-query react-router react-router-dom reactjs tanstack-query tanstack-react-query usequery

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

advanced-types array boolean casting class core-types enum function generic interface javascript literal number object string typescript typescript-compiler union

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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!

javascript v-for v-model v-on vue-cdn vue3 vuejs

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

css3 figma html5 responsive-design

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/node-com4muz

Node / Express & MongoDB Application

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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...

children-props components context-api modal props react react-18 react-portal reactjs reducers side-effects states use-context use-effect use-reducer use-state

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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!

conditional-styling css-modules dynamic-css-classes dynamic-inline-styles dynamic-props dynamic-styles media-queries react react-components react-hooks reactjs styled-components

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

cookies express mongodb nodejs res-locals sessions user-authentication user-authorization

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

components components-react functions hooks hookstate javascript lifting-state-up props props-and-state-components react react-fragments react-portals react-refs state state-management styling-react

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

ejs express mongodb mongodb-database nodejs nosql nosql-database

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

crud crud-application ejs express expressjs mysql mysql-database nodejs nodejs-server pool promise router sql

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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!

chart children-props composition conditional-content controlled-components-with-hooks dynamic-styles event-handlers forms lifting-up-state props react react-components react-hooks reactjs state stateful-components two-way-binding uncontrolled-components

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/javascript-tic-tac-toe-game

I implemented a complete browser-based tic-tac-toe game with JavaScript, HTML and CSS. I used all the JavaScript core concepts, such as variables and constants, different kind of values, DOM interactions, selecting elements in different ways, event listeners, listening and handling submissions, functions, DOM manipulations, for loops including nested for loops, for of loops, algorithms and way more!

algorithms constants css3 dom-interaction dom-manipulation event-listener for-loop for-of-loop form-handling form-submission functions html5 javascript nested-for-loops variables

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

ajax authentification bootstrap bootstrap4 deployment express handlebars heroku heroku-deployment mongodb mongodb-atlas nodejs

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

ajax ajax-request async-await dom dom-manipulation error-handling express fetch get-request http-methods javascript json mongodb nodejs post-request promise response-errors technical-errors try-catch

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/html-css-basics-travel-landing-page

I built a pretty travel landing page using HTML & CSS basics. Therefore, I implemented a HTML semantic strucure with convenient navigation bar and a logo. I also worked on the CSS layout of the website, using flexbox and the grid. Besides that, I imported normal images and background images as well. Then, I created a header positioned above the background image thanks to the positioning elements concept. Finally, I applied the default document flow and broke this default view with position absolute and position fixed. But, that's not it: I used selected properties, such as object fit to style the images properly...

background-image css-flexbox-grid css-flexbox-layout css-grid-layout css3 html5 images landing-page logo navigation-bar object-fit position-absolute position-elements position-fixed semantic-structure

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/html-css-basics-daily-challenge-website

I built a basic HTML & CSS website using a lot of HTML core features, such as ordered and unordered lists, parent-child relationship, descendant elements and ancestors, HTML layouts. I also used some CSS core concepts, like cascading, inheritance and specificity, the CSS box model, the different selectors, combinators, classes and IDs, block and inline elements, vertical margins and padding to inline elements, vertical margins limitations exceptions for replaced inline elements, margin collapsing.

box-model cascading css3 descendants-ancestors html-layouts html5 inheritance ordered-list parent-child specificity unordered-list

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

adaptive-web-design css3 desktop-first em html5 internal-links media-queries mobile-first pixel pourcentage rem responsive-web-design target-selection units user-preferences

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

express express-js expressjs file-preview file-upload multer nodejs nodejs-server

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

css3 dynamic-routes ejs ejs-template-engine expressjs html-css-javascript html5 javascript nodejs

Last synced: 09 Feb 2025

https://github.com/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!

css3 html5 javascript netlify-deployment nodejs nosql sql vuejs

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/php-cms

I built a really nice CMS and learnt everything I need to become a junior professional PHP developer with practical exercises & projects.

css3 html5 javascript jquery php

Last synced: 09 Feb 2025

https://github.com/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!

components create-portal dom-manipulation forwardref fragments frontend javascript portals react reactjs refs state-management states timer-functionality useimperativehandle useref usestate webdevelopment

Last synced: 09 Feb 2025

https://github.com/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! 🌟🔍💻

javascript react reactjs usecallback useeffect

Last synced: 09 Feb 2025

https://github.com/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

frontend javascript react react-router react-router-dom reactjs single-page-app web-development

Last synced: 09 Feb 2025

https://github.com/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! 🚀

batching component-structure component-tree components dom-manipulation key key-props memo millionjs react react-dom react-optimisation reactjs scheduling state-management usecallback usecallback-hook usememo usememo-hook virtual-dom

Last synced: 09 Feb 2025

https://github.com/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.

configurestore createslice createstore javascript react-redux react-redux-toolkit reactjs redux redux-toolkit state-management usedispatch useselector

Last synced: 09 Feb 2025

https://github.com/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.

action-creator-thunk async backend firebase http-requests javascript react-redux react-redux-toolkit reactjs redux-devtools rest-api server useeffect

Last synced: 09 Feb 2025

https://github.com/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! 💻✨

component-composition context-api-react javascript prop-drilling react react-context react-context-api react-reducer reactjs reducers state-management

Last synced: 09 Feb 2025

https://github.com/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.

components css data-flow event-handling game-logic html javascript react reactjs responsive-design state-management tic-tac-toe-game tic-tac-toe-react ui user-interface

Last synced: 09 Feb 2025

https://github.com/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.

custom-hooks javascript react react-components react-hooks reactjs useeffect usestate

Last synced: 09 Feb 2025

https://github.com/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!

codebase components conditional-rendering css development-tools es6 frontend html investment-calculator javascript jsx open-source react reactsjs state-management utility-functions value-conversion web-application web-development

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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

css3 html-css-javascript html5 javascript

Last synced: 09 Feb 2025

https://github.com/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.

javascript react react-components react-hooks reactjs

Last synced: 09 Feb 2025

https://github.com/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! 🚀🎨

react reactjs styled-components tailwind tailwind-css vanilla-css

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

asynchronous axios http-api javascript jest mock mocking nodejs third-party-libraries webpack

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/javascript-web-components-tooltip

This is a little JavaScript demo application built with web components. Indeed, I developped my own custom element to created a tooltip feature. For that, I used several functionalities, such as class, shadow dom, connected callback, disconnected callback, styling inside shadow dom, slot, template, attribute changed callback, shadow dom projection.

attribute-changed-callback connected-callback custom-elements disconnected-callback javascript lifecycle shadow-dom slot template web-components

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

css3 dom event-listener html5 javascript

Last synced: 09 Feb 2025

https://github.com/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.

bundle code-minifier javascript lazy-loading optimization runtime-optimization runtime-performance-analysis startup-time-optimization webpack

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

assertion-library end-to-end-test headless-browser intergration-test javascript jest nodejs test-runner unit-test webpack

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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..

frontend javascript webpack

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

css3 deployment firebase html-css-javascript html5 javascript webpack

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

cross-site-request-forgery cross-site-scripting sanitize-html security security-hole security-vulnerability

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

async-await babel browser-api browser-support fetch-api google-maps-api javascript location navigator-clipboard promises webpack

Last synced: 09 Feb 2025

https://github.com/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.

heroku heroku-deployment javascript nodejs

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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 nodejs reactjs webpack

Last synced: 09 Feb 2025

https://github.com/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.

eslint httprequest javascript tooling webpack webpack4 workflows

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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 you split your code and download things only when you need them.

default-exports export import javascript modules named-exports type-module web-server

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

babel babel-loader babel-preset-env browser-support caniuse corejs fallback feature-detection javascript market-analysis marketshare navigator-clipboard polyfills regenerator-runtime

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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).

browser-api dom dynamic-script history intervals javascript location navigator position scrolling size template-tags timers

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

axios error-handling fetch-api formdata http-requests javascript javascript-library json promise xmlhttprequest

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

bubble capturing drag-and-drop drop-area event event-delegation event-listener event-listeners event-object events javascript preventdefault stoppropagation

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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.

callback classes classes-and-inheritance classes-and-objects dom event-listeners functions javascript object-oriented-programming oop

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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...

apply arrow-functions bind call chaining filter for-in-loop getters javascript methods object-destructuring objects primitive-values properties reference-values setters spread-operator this

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/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".

forward-ref hooks react-context-api react-hooks reactjs reducers side-effects use-context use-effect use-imperative-handle use-reducer use-ref

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/react-native-course-goals

📱 A simple Course Goals app built with React Native & JavaScript. Features: 🛠 Core components, 🎨 custom styling, 📋 list rendering with FlatList, and ⚡ dynamic state management. A beginner-friendly introduction to cross-platform mobile app development!

expo javascript react-native

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/stack_overflow_nextjs14

A Q&A platform for developers inspired by Stack Overflow. Users can explore content freely, while registered users can ask, vote, save collections, and earn badges. Fully responsive with light/dark modes, SEO optimization, and AI for advanced answers. Built with Next.js, TypeScript, and MongoDB.

clerk figma html-react-parser javascript mongodb mongoose next nextjs nextjs14 openai-chatgpt prismjs react reactjs shadcn tailwindcss typescript vercel vercel-deployment

Last synced: 09 Feb 2025

https://github.com/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.

client-side-routing deployment javascript lazy-loading optimization react react-router reactjs server-side-routing single-page-app testing

Last synced: 09 Feb 2025

https://github.com/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.

javascript react-router react-router-dom reactjs

Last synced: 09 Feb 2025

https://github.com/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! 🚀🔍

coding frontend javascript portals project-management react-components reactjs refs state-management tailwindcss vitejs web-development

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/react-native-unconventional-calculator

Unconventional Calculator 🧮📱 A simple React Native calculator app that supports basic arithmetic operations: Add, Subtract, Multiply, and Divide. The app displays both the operation performed and the result. Designed with a clean interface and easy-to-use buttons for a smooth user experience.

expo javascript react-native

Last synced: 31 Jan 2025