Sofiane Abou Abderrahim's repositories
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.
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.
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
Amazona est une application de boutique en ligne moderne et rΓ©active, dΓ©veloppΓ©e avec la stack MERN (MongoDB ποΈ, Express.js π, React.js βοΈ, Node.js π₯οΈ). GrΓ’ce Γ React.js pour le front-end et Tailwind CSS pour le stylisme π¨, elle offre une expΓ©rience utilisateur fluide π avec une interface Γ©lΓ©gante et performante ποΈ.
nextjs-portfolio
A sleek Next.js portfolio built with TypeScript, featuring modern UI with Tailwind CSS, stunning animations via Aceternity UI and Framer Motion, and responsive design. Explore sections like the 3D interactive globe π, recent projects π», and detailed tech stack π οΈ. Check out the code and contribute on GitHub! π
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-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.
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.
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-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-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-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-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.
stack_overflow_nextjs14_fork
Ultimate Next.js 14 Course