React + Express API Demo

A full-stack demo application built with React (Create React App) on the frontend and an Express.js API server on the backend. The app showcases a hotel/shop-style website with multiple pages, a REST API, and several UI components including an image lightbox, a tabbed content section, a rooms gallery, an email contact form, and Google Maps integration.

Tech Stack

• Frontend: React 16, React Router v5, SCSS, Axios, FontAwesome, react-responsive-carousel, react-player, google-map-react
• Backend: Node.js, Express 4, body-parser
• Dev tooling: concurrently, nodemon, Create React App

Project Structure

├── express.js                  # Express server entry point
├── express-routes/             # API route handlers
│   ├── index.js                # Route registry
│   ├── email/                  # POST /api/email
│   ├── login/                  # POST /api/login
│   ├── rooms/                  # GET  /api/rooms/gallery, /api/rooms/categories
│   ├── slides/                 # GET  /api/slides
│   └── tabbed/                 # GET  /api/tabbed
├── public/                     # Static assets
└── src/
    ├── index.js
    ├── setupProxy.js           # Proxies /api to Express in dev
    └── App/
        ├── Header/             # Site header
        ├── Nav/                # Navigation bar
        ├── Main/               # Route switcher
        ├── Footer/             # Site footer
        ├── Lightbox/           # Image lightbox component
        └── Menu/
            ├── About/          # Home page (slides, tabbed content, video)
            ├── Rooms/          # Rooms gallery with category filtering
            ├── Contacts/       # Email form, address, and Google Map
            └── Login/          # Login form

Getting Started

Prerequisites

• Node.js >= 12

Install dependencies

npm install

Development

Starts both the Express API server (port 5000) and the React dev server (port 3000) concurrently. API calls from the React app are proxied to Express via src/setupProxy.js.

npm run dev

• React app: http://localhost:3000
• Express API: http://localhost:5000

Production

Build the React app and serve everything from Express:

npm run build
npm start

The Express server serves the static build and handles all /api/* routes. All other requests fall through to index.html for client-side routing.

Available Scripts

Script	Description
npm run dev	Run Express + React dev servers concurrently
npm run client	Run only the React dev server
npm run server	Run only the Express server with nodemon
npm run build	Build the React app for production
npm start	Serve the production build via Express

API Endpoints

Method	Path	Description
GET	/api/tabbed	Tabbed content data
GET	/api/rooms/gallery	Rooms gallery data
GET	/api/rooms/categories	Room category list
GET	/api/slides	Carousel slide data
POST	/api/email	Send a contact form email
POST	/api/login	User login

Deployment

The project is configured for Heroku deployment. The homepage field in package.json and the heroku-run-build-script flag handle static asset paths and the build step automatically on push.