bahim22 / rxt-portfo-3

Custom React App: Webpack, Babel, EsLint, and Prettier configs updated from my react template. Styled with Tailwind Css, Bootstrap and more!

👑 H𝐈𝗠𝗔 BA𝗟DÉ

Recent Projects

---

⚛️ Site	🔭 Platform	🏁 Link
Portfolio	Netlify	✓ReactSPA
ISM	Azure	✓HomePage
Azure+MS	Vercel	✓LoginPage
Online Store	Vercel	✓E-Comm
PPU FS	Vercel	✓TicketSys

⚡️ Contact and Experience

• Email 📫
• LinkedIn 🗝

Education 🎓	Current Role ✨
University of Pittsburgh	Endpoint System Administrator

rxt-portfo-3's Issues

Final Issues for latest version of personal portfolio

Final To-Do List for dev and prod branch

Info from previous issues

#7 Chrome dev tools feedback
#8 Fixes for dev branch

Additional Info for rxt-ecrive and react-boiler repos

React Template/Boilerplate Repo
React Business Landing Page

ToDo List for optimization and finishing touches

• Add Tests
• Fix Asset sizing and optimize
• Add unique project descriptions and remove test components
• Create a Full Doc How-To from all the info learned updating repo
• Deploy to Azure and Netlify to compare
• Lazy Load components
• Refactor a dev branch for react-ded-boiler
• Refactor a prod branch w/ new UI for rxt-ecrive

Form Addition + Options

1. Microsoft 365 and Google review Forms (add in addition to below options
2. Formik/Formspree
3. Nodemailer with Express Backend

Updates and UI changes

Refactor main components to satisfy new dep versions

• Purge unused deps
• Update w/o breaking changes

UI

• calc MUI vs tailwind usage and remove least used parts
• full css overhaul
• Use tools to design new UI or get custom design and hardcode it

Config fixes

• Add contentBase: './dist' to serve in dev
• Remove eslint loader
  Optimization.usedExports: true

Current Portfolio v 3 process info

Create original html with more focus on JavaScript and add Django backend.

add map app and to do app I created

SEO check via lighthouse

Originally posted by @bahim22 in https://github.com/bahim22/DioEraSjs/issues/1

Finish Form and deploy

• Form with axios and formik
• Deploy to vercel
• Future versions can be added to one of my backend repo to make full-stack

Chrome dev tools feedback

• X content type
  Possible fix with output '/dist/'
  Change content to text/js

• • after more R&D I'm going to keep the project simple (less involved babel and eslint configs) and use merge with dev prod and common webpack configs. Use html plugin for index, put into dist folder.

• After running multiple dev server, bundle analyzer and source maps I found a good mix of plugins for optimization.

• implement lazy loading for components

• Remove extra dep such as styling with multiple css libraries and convert to use mui

New fixes for ded branch

Issues with dev server, CORS, compilation, loaders have been resolved

Used several resources and rebuilt repo from most recent working commit

• Finish project
• Deploy
• Route images to img/.png
• Add cdns back to index html
• Added /dist/bundle.js to script src
• Refactor skillList component

create separate skill info component in src
Make skill list compo in src/compo

• Add height and width to images
• Fix prod webpack config in

Use merge plugin

• Use npx with webpack scripts
• Add form compo
• Finish server dir in separate branch
• reincorporate Post css preset env
• add jest and cypress tests
• Check errors, stats, dev tools after EVERY change

Adjust

Refine edits after analyzing build reports

• Remove duplicate minify plugins

Terser, dev server, merge

• Add (...) after plugins for default set up and set mode with

assets/resources (png,font)

mini css, chunks, cache

optimization: {
    nodeEnv: 'production',
    removeAvailableModules: false,
  },
performance: {
    hints: 'error', // prod

Updates to bring current

Updates

• change default branch to prod branch deployed to hosting env

• remove test secrets to not Trip alerts

• remove old dev branches

• update dependencies

• fix UI issue in email section

• add new projects in display section

• fix taskbar

• resize images