{"id":16325767,"url":"https://github.com/siegfriedbz/react-spa-natours","last_synced_at":"2026-02-28T01:47:15.946Z","repository":{"id":236332272,"uuid":"792382749","full_name":"SiegfriedBz/React-SPA-Natours","owner":"SiegfriedBz","description":"🏨 React SPA consuming the Express API Natours. Tested with Cypress. Integrates Stripe and Mapbox services.","archived":false,"fork":false,"pushed_at":"2024-07-05T12:12:01.000Z","size":1555,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-10T23:06:16.020Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://spa-natours.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SiegfriedBz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-26T14:56:37.000Z","updated_at":"2024-08-10T15:56:05.000Z","dependencies_parsed_at":"2024-05-01T17:12:53.726Z","dependency_job_id":"85864fb6-d253-45bd-b40a-6ee01ddeff0c","html_url":"https://github.com/SiegfriedBz/React-SPA-Natours","commit_stats":null,"previous_names":["siegfriedbz/tours-vite-react-ts","siegfriedbz/tours_vite_react_ts","siegfriedbz/vite_react_ts-natours","siegfriedbz/react-spa-natours"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SiegfriedBz%2FReact-SPA-Natours","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SiegfriedBz%2FReact-SPA-Natours/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SiegfriedBz%2FReact-SPA-Natours/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SiegfriedBz%2FReact-SPA-Natours/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SiegfriedBz","download_url":"https://codeload.github.com/SiegfriedBz/React-SPA-Natours/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271522,"owners_count":19774859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-10-10T23:06:18.198Z","updated_at":"2026-02-28T01:47:15.898Z","avatar_url":"https://github.com/SiegfriedBz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Natours React SPA\n\nThis project is a frontend implementation using Vite and React for a web application.  \nIt 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.  \nCypress tests have been added to ensure the quality and reliability of the application's features.  \n\nIt interacts with a backend standalone [Natours API](https://github.com/SiegfriedBz/express_api_ts-natours) written in TypeScript with Node.js and Express.\nTo ensure seamless functionality, verify that this backend API is up and running.\n\n## Cypress\n[![Natours](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/a6epfn\u0026style=flat\u0026logo=cypress)](https://cloud.cypress.io/projects/a6epfn/runs)\n\n\n## Table of Contents\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Environment Variables](#environment-variables)\n- [Running the Tests](#running-the-tests)\n- [Running the Development Server](#running-the-development-server)\n- [Build](#build)\n- [Running the Production Server](#running-the-production-server)\n- [Live Demo](#live-demo)  🚀\n\n\n## Prerequisites\nBefore running this project, ensure you have the following accounts set up:\n\n- **Stripe Account**: This is required for payment processing functionalities.  \n  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. \n- **Mapbox Account**: This is used for mapping services.\n\n## Installation\n\nTo get started with this project, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-repo-name/api_ts_zod_fe_react_v2.git\n   git@github.com:SiegfriedBz/vite_react_ts-natours.git\n   cd vite_react_ts-natours\n   ```\n   \n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n## Environment Variables\n\nCreate a .env file in the root directory of the project and add the following environment variables:\n\n    # Admin Email Link\n    VITE_ADMIN_LINK_TO=\n    \n    # Natours API\n    VITE_API_PUBLIC_URL=http://localhost:1337  # Public URL for the Natours API\n    VITE_API_URL=http://localhost:1337/api/v1  # API URL for the Natours API\n    VITE_API_TOURS_PER_PAGE=4  # Number of tours per page for pagination\n    \n    # Stripe Public Key\n    VITE_STRIPE_PUBLIC_KEY=\n    \n    # Mapbox API Key\n    VITE_MAPBOX_API_KEY=\n    \n    # Cloudinary Images\n    VITE_CLOUDINARY_CLOUD_NAME=\n    VITE_HERO_BG_IMG_URL=\n    VITE_LOGIN_BG_IMG_01_URL=\n    VITE_LOGIN_BG_IMG_02_URL=\n    VITE_LOGIN_BG_IMG_03_URL=\n\n\n## Running the Tests\n\n  Run tests with Cypress:\n  ```bash\n  npm run test\n  ```\n\n## Running the Development Server\n\n  Start the development server:\n    ```bash\n    npm run test\n    ```\n\n## Build\n\n  Build the project for production:\n  ```bash\n  npm run build\n  ```\n\n## Running the Production Server\n  \n  After building the project, you can start the production server using:\n  ```bash\n  npm run start\n  ```\n\n## Live Demo\nVisit the live demo of [Spa-Natours](https://spa-natours.vercel.app/) deployed on Vercel.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiegfriedbz%2Freact-spa-natours","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiegfriedbz%2Freact-spa-natours","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiegfriedbz%2Freact-spa-natours/lists"}