Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huntermahmud/nova-tourism-client
A full stack travel and tourism management website. Add spot, All spot, manage spot, spot list, update delete spot.
https://github.com/huntermahmud/nova-tourism-client
dark-light-mode firebase html5 reactjs tailwindcss user-authentication
Last synced: about 14 hours ago
JSON representation
A full stack travel and tourism management website. Add spot, All spot, manage spot, spot list, update delete spot.
- Host: GitHub
- URL: https://github.com/huntermahmud/nova-tourism-client
- Owner: HunterMahmud
- Created: 2024-05-31T09:43:23.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-02T05:11:44.000Z (7 months ago)
- Last Synced: 2024-11-23T22:30:51.428Z (2 months ago)
- Topics: dark-light-mode, firebase, html5, reactjs, tailwindcss, user-authentication
- Language: JavaScript
- Homepage: https://nova-tourism.web.app/
- Size: 147 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nova Travel
**Nova Travel** is a user-friendly online travel and tourism management website that is very helpful in finding your dream spot to visit.
**Visit the live site:** [Nova Travel](https://nova-tourism.web.app/).
[Server side repository](https://github.com/HunterMahmud/nova-tourism-server)
**My Category:** Southeast Asia
**Website Features and Characteristics**
1. **Navbar:**
- Contains website name and routes to various sections.
- Conditional display of login, register, logout, and profile picture based on user logged in or not.
- Conditional display of "My List" and "Add Tourist Spot" based on user login status.
2. **Login Page:**
- Email and password-based login with Firebase authentication.
- Options for login with Google and GitHub.
3. **Register Page:**
- Registration form with email, name, photoURL, and password fields.
- Password validation with RegEx for complexity.
- Checking min 6 length of character at least one uppercase and lowercase character.
4. **Home Page:**
- Includes navbar, slider, tourist spots section, countries section, travel spot gallery, and What people says.
5. **Add Tourist Spot Page:**
- Private route accessible after login.
- Form for adding tourist spots with various details.
- Redirects to login page if accessed without authentication.
6. **All Tourist Spot Page:**
- Displays tourist spots added by users in card format.
- Dropdown menu for sorting based on average cost.
- Private route accessible after login.
7. **View Details Page:**
- Private/protected route displaying details of a tourist spot.
8. **My List Page:**
- Private/protected route displaying user-added spots in a tabular format.
- Options for spot deletion and update.
- Delete button show a confirmation message after delete.
9. **Update Page:**
- Private route Form for updating tourist spot details.
10. **Footer and Navbar:**
- Persistent across all pages except 404 page.
11. **404 Not Found Page:**
- Added for handling invalid routes.
12. **Loading and Spinner:**
- Implemented to indicate loading state.
13. **Countries Section:**
- Displays information about 6 countries in card format.
- Clicking on a country card shows tourist spots of that specific country.
14. **Dark and Light Theme:**
- Toggle button for light and dark mode for user preference.
15. **Dynamic Title and Scroll Restoration:**
- Enhancements for better user experience.
## Prerequisites
Before you begin, ensure you have met the following requirements:
- **Node.js**: Install Node.js (version 14 or higher) from [nodejs.org](https://nodejs.org/).
- **npm**: Node.js package manager (npm) should be installed along with Node.js.
- **Git**: Install Git from [git-scm.com](https://git-scm.com/).
## Installation
Follow these steps to get your development environment set up:
1. **Clone the repository**:
```sh
git clone https://github.com/HunterMahmud/nova-tourism-client.git
cd nova-tourism-client
```
2. **Install dependencies**:
```sh
npm install
```
3. **Set up environment variables**:
Create a `.env.local` file in the root of the project and add the necessary environment variables. For example:
```env.local
VITE_APIKEY = your_api_key
VITE_AUTHDOMAIN = your_auth_domain
VITE_PROJECTID = your_project_id
VITE_STORAGEBUCKET = your_storage_bucket
VITE_MESSAGINGSENDERID = your_messaging_sender_id
VITE_APPID = your_app_id
VITE_API_BASE_URL = your_api_base_url
```
Replace the placeholders with your actual Firebase configuration values.
## Usage
### Development Server
To start the development server, run:
```sh
npm run dev
````
This will start the Vite development server and you can view the application in your browser at `http://localhost:5173`.
### Build
To create a production build, run:
```sh
npm run build
```
This will bundle the application for production.
### Preview
To preview the production build locally, run:
```sh
npm run preview
```
### Lint
To lint the codebase, run:
```sh
npm run lint
```
## Author
- Hasan Al Mahmud