Notes about refreshing MERN stack knowledge and learning new stuff related to MERN stack

I think now I would like to review my MERN stack knowledge and also upgrade aspects of it from a point of view of providing somewhat more complex solutions than what I had done in my tutorials related learning and self-projects like Gita web app. This post has notes related to it.

Areas that I need to refresh/learn in React frontend app area

Responsive apps with sidebar which also has a compressed sidebar option.
custom hooks - Done by reading React doc on it: https://react.dev/learn/reusing-logic-with-custom-hooks
Form validation using Formik or zod
Redux Toolkit global state with async thunks used for fetch
React and Bootstrap
==============

Refresh Next.js by going thru tutorial app and Gita app
==============

Refresh Node Express, Mongoose and MongoDB tutorials.
Refresh Blog API
Refresh MongoDB design online guide/course I went through partially

==============
React Responsive Apps that I worked on 

Gita web app v1.4.1: https://gita-rsi.vercel.app/ , https://github.com/ravisiyer/gita - No sidebar but has hamburger menu for mobile view along with minimized header 

Official Next.js Acme Dashboard tutorial, https://nextjs-dashboard-nine-blue-35.vercel.app, https://github.com/ravisiyer/nextjs-dashboard : Valid credentials are: Email: user@nextmail.com, Password: 123456 - Has sidebar which is replaced by icon header in mobile view. No hamburger icon as the menu options are limited and so the icons in header are enough.

Pixelwibes My Task template has a somewhat sophisticated Sidebar menu 
---------

Simple Responsive page
My (Ravi S. Iyer) biodata/resume (just a webpage and not an app),  https://ravisiyer.github.io/biodata/ , https://github.com/ravisiyer/biodata - Simple responsive page with Sidebar having text (no menu) which is removed on mobile view and some of sidebar's text is shown in text on top of page.

Sidebar in React bootstrap
==========================

I think it makes sense to use some of the components listed below to create a responsive sidebar in React Bootstrap apps. 


[Update: The GitHub project code does not seem to be easy to understand at first glance. Also it may not be related to React.] Has this interesting link: https://github.com/StartBootstrap/startbootstrap-simple-sidebar which has code and has live preview link accessible from https://startbootstrap.com/template/simple-sidebar .

Seems very interesting: How to create a responsive React Bootstrap Sidebar, https://www.devwares.com/blog/create-responsive-sidebar-in-react/ : Uses react library Contrast or CDBReact, https://www.devwares.com/product/contrast/ . Some features seem to be free but some are pro (paid, I presume). Live demo: https://cdbreact-demo-free.netlify.app/ , GitHub: https://github.com/Chimdiya1/article-sidebar
Building the GitHub repo (had to change from yarn to npm first), resulted in this error: "Error: error:0308010C:digital envelope routines::unsupported". While I may be able to fix the error, the issue is that this raises concern about support and updates for this free Sidebar. I need to think about this. ... The last commit date on the repo is Jan. 2021! Perhaps they are not actively maintaining this repo.

(Basic, single-level) React Sidebar is free. Multi-level Sidebar is Pro (paid).

Bootstrap itself offers Sidebar and Offcanvas components!

Very interesting article: Bootstrap 5 Sidebar Examples, https://dev.to/codeply/bootstrap-5-sidebar-examples-38pb

How to Create Sidebar Using Bootstrap 5 | Responsive Sidebar With Bootstrap | Sidebar Menu, https://www.youtube.com/watch?v=i7uJAOFEd4g, 20 min. 31 secs, Dec. 2023, GitHub: https://github.com/codzsword/sidebar-bootstrap

I think I need to try out the above stuff.

Useful post of mine: Notes on: Learning Bootstrap, React templates; Misc. notes, https://raviswdev.blogspot.com/2024/10/notes-on-learning-bootstrap-misc-notes.html

Quick demo of how to create a React project which uses react-bootstrap and bootstrap: Bootstrap 5 & React - super easy and fast tutorial, https://www.youtube.com/watch?v=xdXd8BJwJ-U, around 4 mins, Oct. 2021

Covers more than the above but is still fairly quick. Covers building a page with card, image, form etc.: React Bootstrap Tutorial, https://www.youtube.com/watch?v=8pKjULHzs0s, around 15 mins, Aug. 2020

Material UI, Ready to use Material Design components, https://mui.com/material-ui/
"Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box."

Material UI seems to have a great set of sidebar components (called Drawers): https://mui.com/material-ui/react-drawer/ . Source code: https://github.com/mui/material-ui/tree/v6.3.1/packages/mui-material/src/Drawer . The examples shown on the page have GitHub links for their source code. Here is the one for the first example of Temporary Drawer: https://github.com/mui/material-ui/blob/v6.3.1/docs/data/material/components/drawers/TemporaryDrawer.tsx . 
I think this Material UI sidebar is worth checking out in more detail. Further, I think I should invest time in exploring whole of Material UI. It seems to be having much better support than "react library Contrast or CDBReact" which I have mentioned earlier in this note.

Can Material UI and Bootstrap be used together? Answer does not seem to be a clear No but some articles say Yes without qualifications.
Bootstrap vs Material UI: A battle of two popular frameworks, https://www.material-tailwind.com/blog/bootstrap-vs-material-ui
[Seems to be thorough article:] Bootstrap vs Material: Which One is Better?, https://jelvix.com/blog/bootstrap-vs-material : "For instance, if you’re working on a project with Bootstrap and decide you need a few components available in Material but not Bootstrap, you can incorporate whatever Material components you need to your Bootstrap project."

 Free Admin Template
====================
Contrast Design Bootstrap React + Free Admin Template, https://www.devwares.com/product/admin-contrast/

Comments

Post a Comment