Hotel CMS PERN Stack

A CMS (Content Management System) application built using the PERN stack is a powerful and versatile solution for managing digital content. PERN is an acronym for PostgreSQL, Express.js, React.js, and Node.js, which are all open-source technologies that work seamlessly together to create web applications.

Index

• Demo
• Features
• Special Thanks
• Installation
• Structure

Demo

Live: HOTEL CMS

Features

• Use Express to build the backend.
• Use React to build the frontend.
• Use PostgreSQL to build the database.

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

• Material Tailwind - Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.
• Hero Icons - Beautiful hand-crafted SVG icons.
• Apex Charts - Modern & Interactive open-source Charts.

Installation

Running Locally

Make sure you have Node.js and npm installed.

1. Clone repository:

   $ git clone https://github.com/Vo-Huy-Khoa/hotel-cms-pern.git
   $ cd Blog_MERN
   

   Run Backend:

   cd backend
   npm install
   npm run dev

   Run Frontend:

   cd frontend
   npm install
   npm run dev

Structure of the project:

BackEnd

src
|
├── configs
|   └── index.ts
├── controllers
│       └── userController.ts
│       └── bookingController.ts
├── middleware
│       └── auth.ts
├── routes
│       └── user.ts
│       └── booking.ts
│       └── index.ts
├── test
│       └── userController.test.ts
│       └── authController.test.ts
└── server.ts
└── type.ts

FrontEnd

src
├── components
|   └── CustomButton.tsx
│   └── index.ts
├── configs
│   └── index.ts
├── hooks
│   └── useDebounce.ts
│   └── useReadLocalStorage.ts
│   └── index.ts
├── layouts
│   └── auth.tsx
│   └── dashboard.tsx
│   └── index.ts
├── pages
│   └── auth
│       └── sign-in.tsx
│       └── sign-up.tsx
│       └── index.ts
│   └── dashboard
│       └── user
│           └── create.tsx
│           └── edit.tsx
│           └── list.tsx
│       └── home.tsx
│       └── index.ts
├── redux
│   └── actions
│       └── visibility.ts
│       └── index.ts
│   └── reducer
│       └── visibility.ts
│       └── rootReducer.ts
│   └── initState.ts
│   └── store.ts
├── App.tsx
├── main.tsx
└── routes.tsx