React TypeScript Vite website system, coupled with a node.js server back end. Dynamic data based on images and json files to load. Can be coupled with a database backend.
This simple site uses contact modal for all page form engagement outside of the footer newsletter and the apothecary newsletter components.
The site is intended to be used as a template to start with a basic niche market and showcase a sales front via the apothecary page.
This is a custom React-based image gallery project using a minimal Node.js and Webpack setup. It supports multiple image categories with a dynamic button interface to toggle content.
- React + TypeScript support
- Manual Webpack configuration
- Dynamic category buttons
- Gallery layout using a shared
ImageGridcomponent - Masonry layout for studio views (e.g.
StudioGallery) - Modular file structure
- React / ReactDOM
- TypeScript
- Webpack + Babel
- Bootstrap (for modals, tabbing and styling)
- Optional: Sass for custom styling
npm init -y
npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin css-loader style-loader
npm install --save-dev file-loader
npm install --save-dev sass sass-loader
npm install react-router-dom @types/react-router-dom
install ImageMagick to run against photos to resize for website and placements.
navigate to the image folder and run mkdir 576_clean
/uses ImageMagick installation to manage image sizing/ mogrify -path 576_clean -resize 576x576 -format jpg *.jpg
npm install --save-dev nodemon /allows rebuild as change files/ npm install express image-size /allows to manage sizing images or reading image size tbd/
npm install cors npm install node-cron
/*SEO Head manager requires React 18 built upon 19 so downgrade environment if you have issues. npm install react@18 react-dom@18/ /npm install [email protected]/ npm install react-helmet npm uninstall react-helmet React 18 is no longer maintained but running on a node environment forcing React 18 npm install react-helmet-async /fix/
The cron is required for the fakeStudioBookings.js file that generates dates for demo in the calendar. It can be changed to hook to a database instead. this is for breavity.
Initialize the bookings.json with today forward a mont days in server.cjs uncomment //fakeStudioBooking(); // <-- Run immediately Init in fakeStudioBookings.js comment out --> module.exports = updateBookings; uncomment -->//module.exports = updateInitialBookings; in the server folder run terminal npm run dev
import MasonryLayout from './pages/MasonLayout' <Route path="/masonry" element={} />
Node Server inclusion /server/server.cjs exists to run a local node installation
Alternative is the PHP-API built for PHP/MySql host packages. https://github.com/cryshansen/PHP-API.git