React.js projects

React Admin Dashboard

👉 YouTube video: https://www.youtube.com

👉 Inspiration from YouTube

👉 Create react app using vite

👉 Design using Material ui

👉 Routing using react-router-dom

👉 Validation using React Hook Form

👉 Calendar using fullcalendar.io

👉 Charts using nivo

👉 Deploy project (FREE) on firebase

👉 Download final project

👉 Live Project

React E-commerce with Strapi

👉 YouTube video: https://www.youtube.com

👉 Inspiration from bazaar.com

👉 Create react app using vite

👉 Design using Material ui

👉 Download images for Hero section& 6 produucts

👉 Slider using swiperjs

👉 Backend with strapi

👉 Deploy Strapi project to render.com

👉 Deploy project (FREE) on firebase

👉 Download final project

React portfolio website with animation

👉 YouTube video: https://www.youtube.com

👉 Inspiration from Design

👉 Create react app using vite

👉 Crop a circle in image Online website

👉 Icons using icomoon.io

⚠ WORK WITH ME Download Design

👉 Download images for Cards

👉 Send message to gmail using formspree.io

👉 Download Animation files from lottiefiles.com& npm i lottie-react

👉 Animation using Framer Motion

👉 Download final project

HTML & CSS Projects

HTML CSS Ecommerce website

👉 YouTube video: https://www.youtube.com

👉 Download images

👉 Download final project

New Projects coming soon

Help

MUI dark-mode with localStorage

👉 download files

Install Multiple Node.js versions

👉 Download & install nvm-setup.exe

👉 To install the version i want: nvm install 18.16.0

👉 To view all installed versions: nvm ls

👉 To use a specific version: nvm use 18.16.0

Fetching data using RTK Query

👉 RTK Query Quick Start

Steps to Deploy strapi project for free (render.com & Cloudinary.com)
  1. install strapi
  2. installation type ==> manual settings
  3. preferred language ==> JavaScript
  4. default database client ==> postgres
  5. render.com > postgreSQL
  6. Database name ==> RENDER Database
  7. Host ==> RENDER External Database URL (dpg*******render.com)
  8. Port ==> RENDER port
  9. Username ==> RENDER Username
  10. Password ==> RENDER Password
  11. marketplace > providers > Cloudinary (npm install ....)
  12. config > plugins.js ==> ....
  13. .env ==> ...
  14. config > middlewares.js ==> ...
  15. config > database.js ==> ....
  16. upload project to github
  17. render.com > new > web service > connect > Advanced > Add Secret File > create web service
Deploying a React App to GitHub Pages
  1. Download & install Node.js& Git
  2. npm install gh-pages --save-dev
  3. in package.json >
    "homepage": "https://USERNAME.github.io/اسم المشروع",
  4. in package.json >
    "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    ...
  5. push to github
  6. in vite.config.js
    export default defineConfig({
      plugins: [react()],
      build: {
        outDir: './build'
      }
    })
  7. npm run deploy
  8. settings > pages > Branch: gh-pages

👉 المصدر

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك