{"id":21318274,"url":"https://github.com/melvinaguilar/magic-reserve-fullstack-typescript","last_synced_at":"2026-04-11T09:03:22.106Z","repository":{"id":224296743,"uuid":"762883625","full_name":"MelvinAguilar/magic-reserve-fullstack-typescript","owner":"MelvinAguilar","description":"Full stack application for booking tours.","archived":false,"fork":false,"pushed_at":"2024-02-25T05:38:55.000Z","size":385,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T12:42:00.245Z","etag":null,"topics":["eslint","express","jwt","mongodb","nextjs","nodemailer","react-hooks","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://magic-reserve-fullstack-typescript.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/MelvinAguilar.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}},"created_at":"2024-02-25T00:25:02.000Z","updated_at":"2024-05-06T16:18:50.000Z","dependencies_parsed_at":"2024-02-25T07:09:24.547Z","dependency_job_id":null,"html_url":"https://github.com/MelvinAguilar/magic-reserve-fullstack-typescript","commit_stats":null,"previous_names":["melvinaguilar/magic-reserve-fullstack-typescript"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MelvinAguilar/magic-reserve-fullstack-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelvinAguilar%2Fmagic-reserve-fullstack-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelvinAguilar%2Fmagic-reserve-fullstack-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelvinAguilar%2Fmagic-reserve-fullstack-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelvinAguilar%2Fmagic-reserve-fullstack-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MelvinAguilar","download_url":"https://codeload.github.com/MelvinAguilar/magic-reserve-fullstack-typescript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelvinAguilar%2Fmagic-reserve-fullstack-typescript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278686638,"owners_count":26028325,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["eslint","express","jwt","mongodb","nextjs","nodemailer","react-hooks","tailwindcss","typescript"],"created_at":"2024-11-21T19:12:14.835Z","updated_at":"2025-10-06T21:52:02.133Z","avatar_url":"https://github.com/MelvinAguilar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003eMagic Reserve - Full Stack Typescript App\u003c/h1\u003e\n\n![](https://i.imgur.com/TAOsfcF.png)\n\n\u003e ~\n\n\u003e 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.\n\n\u003e\n\u003e Server\n\u003e \u003cp align=\"center\"\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Mongoose-47A248?style=for-the-badge\u0026logo=mongoose\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Express-000000?style=for-the-badge\u0026logo=express\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=node.js\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/JSONWebTokens-000000?style=for-the-badge\u0026logo=json-web-tokens\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Nodemailer-339933?style=for-the-badge\u0026logo=nodemailer\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Helmet-0C0C0C?style=for-the-badge\u0026logo=helmet\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Bcrypt-430089?style=for-the-badge\u0026logo=bcrypt\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/ExpressRateLimit-000000?style=for-the-badge\u0026logo=express\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Validator-000000?style=for-the-badge\u0026logo=validator\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/XSSClean-000000?style=for-the-badge\u0026logo=xss-clean\u0026logoColor=white\" /\u003e\n\n\n\n\u003e \u003c/p\u003e\n\u003e\n\n\u003e Client\n\u003e \u003cp align=\"center\"\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/NextJS-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Zustand-000000?style=for-the-badge\u0026logo=zustand\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge\u0026logo=eslint\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge\u0026logo=prettier\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Cloudinary-0392CF?style=for-the-badge\u0026logo=cloudinary\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Mapbox-000000?style=for-the-badge\u0026logo=mapbox\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/ReactHookForm-000000?style=for-the-badge\u0026logo=react-hook-form\u0026logoColor=white\" /\u003e\n\u003e   \u003cimg src=\"https://img.shields.io/badge/Zod-FF3E00?style=for-the-badge\u0026logo=zod\u0026logoColor=white\" /\u003e\n\n\u003e \u003c/p\u003e\n\u003e ~\n\n\u003c/div\u003e\n\n## Test credentials\n\n| Email  | Password |\n| ------------- | ------------- |\n| test@user.com  | password02  |\n\n## 🌟 Server Features\n\n- 🔐 **Authentication and Authorization**:\n  - Implementation of JWT for secure user authentication.\n  - Password reset and recovery functionality for enhanced user experience.\n  - Secure cookies implementation for enhanced security.\n\n- 🗺️ **Geospatial Data Handling**:\n  - Implementation of geospatial queries and operators for location-based services.\n  - Utilization of MongoDB's geospatial capabilities for efficient data handling.\n    \n- 🔧 **RESTful API Design and Development**:\n  - Utilization of advanced features such as filtering, sorting, aliasing, and pagination for efficient data retrieval.\n  - Implementation of CRUD operations with MongoDB and Mongoose for seamless data manipulation.\n    \n- 🚀 **Rate Limiting**:\n  - Rate limiting middleware to prevent abuse and ensure fair usage of resources.\n    \n- 🔍 **XSS Prevention**:\n  - Implementation of XSS prevention measures to protect against cross-site scripting attacks.\n\n- 🛡️ **Helmet and HPP Middleware**:\n  - Implementation of secure headers for securing Express apps.\n  - Adoption of HPP middleware to protect against HTTP parameter pollution attacks.\n\n- 📧 **Email Communication**:\n  - Integration with Mailtrap for sending emails.\n    \n- 🛡️ **Security Enhancements**:\n  - Encryption of password for enhanced security.\n  - Sanitization of inputs to prevent injection attacks.\n\n\n----------------\n## 🌟 Client Features\n\n- 🗺️ **Interactive Map Display with Mapbox-GL:**\n  - Utilization of Mapbox-GL for displaying maps and pinpointing locations of tours.\n\n- 🛒 **Shopping Cart Management with Zustand:**\n  - Implementation of a shopping cart using Zustand for efficient state management.\n  - Addition, removal, and modification of items within the shopping cart.\n\n- 🍪 **Session Management with Cookies:**\n  - Implementation of cookies for session persistence and user authentication.\n\n- 🖼️ **Image Upload and Retrieval with Cloudinary:**\n  - Integration with Cloudinary for efficient storage and retrieval of images.\n  - Seamless uploading and displaying of images within the application.\n\n- 📄 **Pagination and Search Filtering:**\n  - Implementation of pagination for easy navigation through large datasets.\n  - Filtering of search results based on user-defined criteria for enhanced data exploration.\n\n- ✅ **Form Validation with React-Hook-Form and Zod:**\n  - Validation of user inputs using React-Hook-Form and Zod for robust form handling.\n  - Seamless integration of form validation logic to ensure data integrity.\n\n- 🔒 **Authentication and Authorization:**\n  - Secure user authentication mechanisms to ensure access control.\n  - Implementation of authentication flows for user login and registration.\n\n- 📊 **Admin Dashboard:**\n  - Creation of an admin dashboard for managing application content and user accounts.\n  - Access to administrative features such as user management, content editing, and analytics.\n\n- 🛠️ **Development Tools and Libraries:**\n  - Use of TypeScript for static type-checking and improved code quality.\n  - Integration of ESLint and Prettier for code formatting and linting.\n  - Adoption of Tailwind CSS for rapid UI development with utility-first styling.\n\n- 📱 **Responsive Design:**\n  - Implementation of responsive design principles for optimal user experience across devices.\n  - Ensuring compatibility and usability on various screen sizes and resolutions.\n\n----------------\n\n\n## 🛠️ Getting Started\n\n### Run the server\n\n1. Clone the repository.\n2. Change directory to `cd ./backend/`\n3. Install dependencies using: `npm install`\n4. Set up environment variables:\n  - Create a `.env` file in the server directory and add the following environment variables:\n\n```\nPORT=3000\nNODE_ENV=production\nDATABASE_URL=\nJWT_SECRET=\nJWT_EXPIRES_IN=90D\nJWT_COOKIE_EXPIRES_IN=90\nEMAIL_USERNAME=\nEMAIL_PASSWORD=\"\"\nFRONTEND_URL=\n```\n\n\n5. Run the server:\n\n```\nnpm run dev\n```\n\n### Run the server\n\n\n1. Clone the repository.\n2. Change directory to `cd ./backend/`\n3. Install dependencies using: `npm install`\n4. Create a `.env.local` file in the client directory and add the following environment variables:\n\n````\nNEXT_PUBLIC_API_URL=\nNEXT_PUBLIC_MAPBOX_API_TOKEN=\n\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\nCLOUDINARY_API_KEY=\nCLOUDINARY_API_SECRET=\n````\n\n- 💡 **Note**\nCloudinary 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.\n\n5. Run the development server:\n\n```bash\nnpm run dev\n```\n\n## Screenshots :\n\n### Tour detail: \n\n![](https://i.imgur.com/yh5mb3p.png)\n\n### Cart: \n\n![](https://i.imgur.com/ot4w7wJ.png)\n\n### Shoping cart: \n\n![](https://i.imgur.com/XRlxkE9.png)\n\n### Shoping cart form: \n\n![](https://i.imgur.com/D1u5K4p.png)\n\n## Administrator\n\n### Dashboard Page\n\n![](https://i.imgur.com/0Nb1QkY.png)\n\n### Tours list\n\n![](https://i.imgur.com/qfO2yPM.png)\n\n### Login: \n\n![](https://i.imgur.com/5M42JSl.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelvinaguilar%2Fmagic-reserve-fullstack-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelvinaguilar%2Fmagic-reserve-fullstack-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelvinaguilar%2Fmagic-reserve-fullstack-typescript/lists"}