Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/melvinaguilar/magic-reserve-fullstack-typescript
Full stack application for booking tours.
https://github.com/melvinaguilar/magic-reserve-fullstack-typescript
eslint express jwt mongodb nextjs nodemailer react-hooks tailwindcss typescript
Last synced: 7 days ago
JSON representation
Full stack application for booking tours.
- Host: GitHub
- URL: https://github.com/melvinaguilar/magic-reserve-fullstack-typescript
- Owner: MelvinAguilar
- Created: 2024-02-25T00:25:02.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-25T05:38:55.000Z (11 months ago)
- Last Synced: 2024-11-21T19:12:47.169Z (2 months ago)
- Topics: eslint, express, jwt, mongodb, nextjs, nodemailer, react-hooks, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://magic-reserve-fullstack-typescript.vercel.app
- Size: 376 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Magic Reserve - Full Stack Typescript App
> ~
> Magic Reserve is a platform where users can reserve tickets for guided tours to a magical destination. The platform provides an interactive experience for users to explore various tours, make reservations.
>
> Server
>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
>
>
> Client
>
> 
> 
>
> 
> 
> 
> 
> 
> 
> 
>
> ~
## Test credentials
| Email | Password |
| ------------- | ------------- |
| [email protected] | password02 |
## 🌟 Server Features
- 🔐 **Authentication and Authorization**:
- Implementation of JWT for secure user authentication.
- Password reset and recovery functionality for enhanced user experience.
- Secure cookies implementation for enhanced security.
- 🗺️ **Geospatial Data Handling**:
- Implementation of geospatial queries and operators for location-based services.
- Utilization of MongoDB's geospatial capabilities for efficient data handling.
- 🔧 **RESTful API Design and Development**:
- Utilization of advanced features such as filtering, sorting, aliasing, and pagination for efficient data retrieval.
- Implementation of CRUD operations with MongoDB and Mongoose for seamless data manipulation.
- 🚀 **Rate Limiting**:
- Rate limiting middleware to prevent abuse and ensure fair usage of resources.
- 🔍 **XSS Prevention**:
- Implementation of XSS prevention measures to protect against cross-site scripting attacks.
- 🛡️ **Helmet and HPP Middleware**:
- Implementation of secure headers for securing Express apps.
- Adoption of HPP middleware to protect against HTTP parameter pollution attacks.
- 📧 **Email Communication**:
- Integration with Mailtrap for sending emails.
- 🛡️ **Security Enhancements**:
- Encryption of password for enhanced security.
- Sanitization of inputs to prevent injection attacks.
----------------
## 🌟 Client Features
- 🗺️ **Interactive Map Display with Mapbox-GL:**
- Utilization of Mapbox-GL for displaying maps and pinpointing locations of tours.
- 🛒 **Shopping Cart Management with Zustand:**
- Implementation of a shopping cart using Zustand for efficient state management.
- Addition, removal, and modification of items within the shopping cart.
- 🍪 **Session Management with Cookies:**
- Implementation of cookies for session persistence and user authentication.
- 🖼️ **Image Upload and Retrieval with Cloudinary:**
- Integration with Cloudinary for efficient storage and retrieval of images.
- Seamless uploading and displaying of images within the application.
- 📄 **Pagination and Search Filtering:**
- Implementation of pagination for easy navigation through large datasets.
- Filtering of search results based on user-defined criteria for enhanced data exploration.
- ✅ **Form Validation with React-Hook-Form and Zod:**
- Validation of user inputs using React-Hook-Form and Zod for robust form handling.
- Seamless integration of form validation logic to ensure data integrity.
- 🔒 **Authentication and Authorization:**
- Secure user authentication mechanisms to ensure access control.
- Implementation of authentication flows for user login and registration.
- 📊 **Admin Dashboard:**
- Creation of an admin dashboard for managing application content and user accounts.
- Access to administrative features such as user management, content editing, and analytics.
- 🛠️ **Development Tools and Libraries:**
- Use of TypeScript for static type-checking and improved code quality.
- Integration of ESLint and Prettier for code formatting and linting.
- Adoption of Tailwind CSS for rapid UI development with utility-first styling.
- 📱 **Responsive Design:**
- Implementation of responsive design principles for optimal user experience across devices.
- Ensuring compatibility and usability on various screen sizes and resolutions.
----------------
## 🛠️ Getting Started
### Run the server
1. Clone the repository.
2. Change directory to `cd ./backend/`
3. Install dependencies using: `npm install`
4. Set up environment variables:
- Create a `.env` file in the server directory and add the following environment variables:
```
PORT=3000
NODE_ENV=production
DATABASE_URL=
JWT_SECRET=
JWT_EXPIRES_IN=90D
JWT_COOKIE_EXPIRES_IN=90
EMAIL_USERNAME=
EMAIL_PASSWORD=""
FRONTEND_URL=
```
5. Run the server:
```
npm run dev
```
### Run the server
1. Clone the repository.
2. Change directory to `cd ./backend/`
3. Install dependencies using: `npm install`
4. Create a `.env.local` file in the client directory and add the following environment variables:
````
NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_MAPBOX_API_TOKEN=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
````
- 💡 **Note**
Cloudinary Account: To utilize image uploading functionality, create a Cloudinary account [here](https://cloudinary.com/) and replace the `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`, `CLOUDINARY_API_KEY`, and `CLOUDINARY_API_SECRET` environment variables with your cloud name, API key, and API secret.
5. Run the development server:
```bash
npm run dev
```
## Screenshots :
### Tour detail:
### Cart:
### Shoping cart:
### Shoping cart form:
## Administrator
### Dashboard Page
### Tours list
### Login:
