<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 exclusively for dogs.

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

1. Reservation System
2. Payment 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. Plan, design, develop, and deploy both client and server as a full-stack developer from the scratch.
2. Refactor the code to enhance readability and facilitate maintenance.
3. Apply optimization techniques to improve performance.
4. Implement responsive design to enhance user experience.
5. Introduce an integrated payment module to provide a functioning payment system.
6. Document and archive the project.

Project Achievements

1. Plan, design, develop, and deploy both client and server as a full-stack developer.
   • Built the project using Webpack and Yarn Berry.
   • Developed the server using Node.js, Express, MongoDB, Mongoose, and Naver Cloud.
   • Established a CI/CD pipeline with Github Actions for automated building and deployment of code changes.
   • Deployed the project using Render.
   • Implemented user registration and login functionalities with Firebase Authentication to enhance security.
2. Refactor the code to enhance readability and facilitate maintenance.
   • Developed and utilized reusable UI components.
3. Apply optimization techniques to improve performance.
   • Utilized React's lazy loading and Suspense to split code and lazy load components, reducing initial loading times.
   • Reusable components such as use input forms and image carousels were developed to enhance modularity and facilitate efficient development.
4. Enhanced User Experience with Responsive Design
   • Applied responsive design to provide optimized user experiences across various devices.
5. Introduce an integrated payment module to provide a functioning payment system.
   • Integrated Toss Payments API to enable order payments in the testing environment.