https://github.com/khaledssbd/urbanutopia-project-client-side
UrbanUtopia is a single building management web application where members can pay using Stripe gateway.
https://github.com/khaledssbd/urbanutopia-project-client-side
aos axios firebase jspdf jspdf-autotable leaflet lottie-react react-helmet-async react-hook-form react-hot-toast react-icons react-leaflet react-parallax react-responsive-carousel react-router-dom react-simple-typewriter react-tooltip stripe sweetalert2 tanstack
Last synced: 5 months ago
JSON representation
UrbanUtopia is a single building management web application where members can pay using Stripe gateway.
- Host: GitHub
- URL: https://github.com/khaledssbd/urbanutopia-project-client-side
- Owner: khaledssbd
- Created: 2024-06-24T21:33:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-18T10:40:49.000Z (over 1 year ago)
- Last Synced: 2025-04-01T20:43:11.748Z (11 months ago)
- Topics: aos, axios, firebase, jspdf, jspdf-autotable, leaflet, lottie-react, react-helmet-async, react-hook-form, react-hot-toast, react-icons, react-leaflet, react-parallax, react-responsive-carousel, react-router-dom, react-simple-typewriter, react-tooltip, stripe, sweetalert2, tanstack
- Language: JavaScript
- Homepage: https://urbanutopia-by-khaled.web.app
- Size: 6.23 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UrbanUtopia
## Live site:
- [UrbanUtopia on firebase](https://urbanutopia-by-khaled.web.app)
- [UrbanUtopia on vercel](https://urbanutopia-by-khaled.vercel.app)
- [UrbanUtopia on surge](https://urbanutopia-by-khaled.surge.sh)
- [UrbanUtopia on netlify](https://urbanutopia-by-khaled.netlify.app)
## GitHub Repository:
- [Client-Repository](https://github.com/khaledssbd/UrbanUtopia-project-client-side)
- [Server-Repository](https://github.com/khaledssbd/UrbanUtopia-project-server-side)
---
# Project Overview:
- UrbanUtopia is a single building management web application that provides
user, member and admin based different dashboard. If user apply for an
aggrement and admin accept that, the user will be a member and will be able to
pay amout using Stripe payment gateway.
- Admin can post coupons with a discount and also can update the status of the
coupon valid or unvalid
- Admin can see the statistics of the website like total user, total member,
total payments, total reviews, total apartments, percentage of available and
unavailable apartments
# Features
- All Device Responsive
- Loading data in a amazing way with no bug using TanStack Query
- axiosSecure to force logout a hacker who wants to ge others data
- Awesome dark theme support
- react-responsive-carousel, aos Implementation for better UI
- jspdf for pdf downlaod
- Environment Variable configuration to save admin data from hackers
- Regex with Valid email, Uppercase letters, lowercase letters and 6 characters
in password
- PrivateRoute, adminRoute, memberRoute to stop one to browse others pages
- Local Storage and API post configuration with Protected route
- jwt configuration to configure security
- react-hook-form in registration
# npm Packages
- npm i aos
- npm i axios
- npm i jspdf
- npm i firebase
- npm i react-icons
- npm i sweetalert2
- npm i lottie-react
- npm i react-tooltip
- npm i react-hot-toast
- npm i react-hook-form
- npm i react-router-dom
- npm i react-helmet-async
- npm i react-tooltip
- npm i @tanstack/react-query
- npm i -g firebase-tools
- npm i react-simple-typewriter
---
# Getting Started
To run this React project on your local machine follow the instructions-
### Prerequisites
Before you begin, ensure you have the following installed on your local machine:
- [Node.js](https://nodejs.org/en/download/) (which includes npm)
- [Git](https://git-scm.com/)
### Installation
1. ```bash
git clone https://github.com/khaledssbd/UrbanUtopia-project-client-side
```
2. ```bash
cd UrbanUtopia-project-client-side
```
3. ```bash
npm install
```
4. ```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.