<aside> 💡 This Notion page is optimized for desktop screen sizes.

</aside>

Project Overview

Project Name

Role

Deployment URL

Description

Moongtel

Full Stack Developer

https://moongtels-server.onrender.com

This web application is a platform that facilitates reservations for pet-dedicated hotels.

This is a full-stack project built with the MERN Stack (MongoDB, Express.js, React.js, Node.js) and provides functionalities such as

1. Reservation System
2. Payment Gateway Integration
3. User Authentication
4. CRUD Operations
5. Search Bar
6. User Input Forms
   1. Search Form
   2. Booking Form
   3. Profile Form
7. Image Upload
8. Image Carousel
9. Category Sort Search
10. Rich Text Editor
11. Page Like Feature
12. Map Display
13. Social Sharing
14. Address Search & Auto-Complete
15. Responsive Design
16. CI/CD
17. Multilingual Support

Project Goals

1. Develop a full-stack application from scratch.
2. Enhance code readability and maintainability through structured refactoring.
3. Optimise performance and resource efficiency for improved user experience.
4. Implement a fully responsive design for seamless cross-device usability.
5. Enable secure online transactions through integrated payment processing.
6. Document and archive the project for long-term maintainability and future collaboration.

Project Achievements

1. Full-stack Development & Deployment

• Planned, designed, developed, and deployed the entire project independently.
• Architected and developed both frontend and backend from scratch, utilising Webpack and Yarn Berry.
• Developed the server using Node.js, Express, MongoDB, Mongoose, and Naver Cloud.
• Set up a CI/CD pipeline with Github Actions for automated build and deployment.
• Deployed the full application on Render.
• Implemented user registration and login functionalities with Firebase Authentication to enhance security.

2. Code Refactoring & Optimisation

• Refactored components, improving maintainability and readability.
• Implemented reusable UI components such as input forms and image carousel to improve efficiency and consistency.
• Optimised performance by utilising React’s lazy loading and Suspense for efficient resource loading.

3. UX & Responsive Design

• Designed and implemented a fully responsive UI for a seamless cross-device experience.
• Developed modular input forms and dynamic image carousels for enhanced usability and maintainability.