Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siegfriedbz/react-spa-natours
🏨 React SPA consuming the Express API Natours. Tested with Cypress. Integrates Stripe and Mapbox services.
https://github.com/siegfriedbz/react-spa-natours
cloudinary cypress framer-motion github-actions husky mapbox-gl react react-hook-form react-map-gl react-query react-router react-select react-toastify responsive-design stripe typescript zod zustand
Last synced: 3 months ago
JSON representation
🏨 React SPA consuming the Express API Natours. Tested with Cypress. Integrates Stripe and Mapbox services.
- Host: GitHub
- URL: https://github.com/siegfriedbz/react-spa-natours
- Owner: SiegfriedBz
- Created: 2024-04-26T14:56:37.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-05T12:12:01.000Z (7 months ago)
- Last Synced: 2024-10-10T23:06:16.020Z (3 months ago)
- Topics: cloudinary, cypress, framer-motion, github-actions, husky, mapbox-gl, react, react-hook-form, react-map-gl, react-query, react-router, react-select, react-toastify, responsive-design, stripe, typescript, zod, zustand
- Language: TypeScript
- Homepage: https://spa-natours.vercel.app
- Size: 1.48 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Natours React SPA
This project is a frontend implementation using Vite and React for a web application.
It utilizes Zustand to manage UI state, React Query to handle remote server state, React Hook Form combined with Zod validation, and React Select for form dropdowns.
Cypress tests have been added to ensure the quality and reliability of the application's features.
It interacts with a backend standalone [Natours API](https://github.com/SiegfriedBz/express_api_ts-natours) written in TypeScript with Node.js and Express.
To ensure seamless functionality, verify that this backend API is up and running.
## Cypress
[](https://cloud.cypress.io/projects/a6epfn/runs)
## Table of Contents
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Environment Variables](#environment-variables)
- [Running the Tests](#running-the-tests)
- [Running the Development Server](#running-the-development-server)
- [Build](#build)
- [Running the Production Server](#running-the-production-server)
- [Live Demo](#live-demo) 🚀
## Prerequisites
Before running this project, ensure you have the following accounts set up:
- **Stripe Account**: This is required for payment processing functionalities.
The Stripe account configured in this project must match the one used to create the [Natours API](https://github.com/SiegfriedBz/express_api_ts-natours) backend.
- **Mapbox Account**: This is used for mapping services.
## Installation
To get started with this project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-repo-name/api_ts_zod_fe_react_v2.git
[email protected]:SiegfriedBz/vite_react_ts-natours.git
cd vite_react_ts-natours
```
2. Install dependencies:
```bash
npm install
```
## Environment Variables
Create a .env file in the root directory of the project and add the following environment variables:
# Admin Email Link
VITE_ADMIN_LINK_TO=
# Natours API
VITE_API_PUBLIC_URL=http://localhost:1337 # Public URL for the Natours API
VITE_API_URL=http://localhost:1337/api/v1 # API URL for the Natours API
VITE_API_TOURS_PER_PAGE=4 # Number of tours per page for pagination
# Stripe Public Key
VITE_STRIPE_PUBLIC_KEY=
# Mapbox API Key
VITE_MAPBOX_API_KEY=
# Cloudinary Images
VITE_CLOUDINARY_CLOUD_NAME=
VITE_HERO_BG_IMG_URL=
VITE_LOGIN_BG_IMG_01_URL=
VITE_LOGIN_BG_IMG_02_URL=
VITE_LOGIN_BG_IMG_03_URL=
## Running the Tests
Run tests with Cypress:
```bash
npm run test
```
## Running the Development Server
Start the development server:
```bash
npm run test
```
## Build
Build the project for production:
```bash
npm run build
```
## Running the Production Server
After building the project, you can start the production server using:
```bash
npm run start
```
## Live Demo
Visit the live demo of [Spa-Natours](https://spa-natours.vercel.app/) deployed on Vercel.